Up next in 10
How To Use Elementor WordPress Plugin Posts Grid For Free 2024
1K views
Oct 7, 2024
Unlock the power of Elementor's free Posts Grid widget in 2024! This comprehensive tutorial guides you through creating dynamic and visually appealing post grids on your WordPress website using the free version of Elementor. Perfect for bloggers, content creators, and website owners looking to showcase their posts in an engaging layout. In this tutorial, we'll cover: Installing and activating the free Elementor plugin Navigating the Elementor interface Adding the Posts Grid widget to your page Customizing the grid layout and columns Configuring post query and filtering options Styling your post grid (thumbnails, titles, excerpts, etc.) Implementing responsive design for mobile devices Optimizing grid performance for faster loading Adding pagination and "load more" functionality Tips and tricks for creating eye-catching post grids Whether you're a WordPress beginner or an experienced user new to Elementor, this guide will help you master the Posts Grid widget and create professional-looking content displays on your website. Elevate your WordPress site's design without spending a dime!
View Video Transcript
0:00
Hello guys, if you want to use the post grid plugging totally free into the actual WordPress using Elementor, you are in the right place
0:07
I'm going to be showing you one way that we can do this. As you can see, I'm using the actual editor of the WordPress
0:14
And I'm going to hit it into next. And as you can see, I have the edit with Elementor
0:19
So if you don't have this option available, you don't have to worry about that. Because what you want to do, first of all, is to go into the Pantheon.io
0:26
So this is something a site hosting is going to be helping us to create our WordPress
0:32
without having to pay absolutely anything because we do have a silver account and of
0:37
course this is truly free so we don't have to worry about that. We have the full access to the Robos documentation site
0:43
So what you have created your account, what you want to do is to go into your site of
0:47
penteon.io, create a new site. And here of course you want to choose WordPress
0:54
So this is a version control with different tests, environments, also without having to break
0:59
a live site. So once you create your website, it's going to be appearing in here
1:04
So what I just did is to select the option that says, uh, develop, the visitor development
1:11
site, it appears in here. So it's going to be sending me in here into the actual section of WordPress, but with the development
1:18
of the Pentheon. So, uh, once I'm here into the actual elements, so I'm going to go into the X mark like this
1:24
I'm going to close this just for a second here. I'm going to show you the very first stuff that we just see here into elements or so
1:33
Once you are here into the dashboard, what I want to do is to go into the pages and here
1:39
into pages I'm going to go into the ad neo or you can select the pages you've already added
1:43
It's totally up to you. So once we selected that option, what I want to do is to focus in here
1:50
So let's say for example that this is like a blocked. So, speak about a block, let's say that I want to..
1:55
Let's talk... Let's talk, TEC, express, like that. So I going to go into the edit with Elementor I going to go into Leaf So it going to be sending me into the development section of the Elementor And boom as you can see the Pentheon side is going to do their job
2:16
So we actually do absolutely anything, so I think it's really, really great
2:20
Here are all our Elementor stuff, which is it, and we have access to that totally for free
2:25
We're going to have to pay absolutely anything. So with that being said, now I can go into the search wet it, and here I can look out for my actual
2:34
search bar into my search bar I want to look out for the tact of grid. So I do have grid and I can
2:42
choose the grid and I can drag and drop like this. Really, really simple. So as you can see here
2:49
is a template that I can start to create. We can start the looproot a template or you can just do that
2:56
right away. So here I'm going to go and create my very first template. So let's say, for example
3:00
you're going to go into my top blocks. There we go. And I want to create, I'm going to get into save, like that
3:11
And this one is going to be sending me into my actual section to create my my wadjet
3:18
So once again, go into your actual tab to or go into your grid, like that
3:24
So here is my actual wadet here. So what I want to do is to add my first post title like that
3:34
Hello World. I'm going to type like tab 10 designers, something like that, like that
3:44
Here is the link you want to edit this later. So if I select here my actual template, if I hit into edit
3:51
template, I'm going to hit into save. And this one is going to be sending me into another section
3:56
where I can just drag and drop more and more information about what we are actually doing here
4:02
So let's say for example I want to edit this pod and then I'm going to go into these three dots here
4:09
like that in here I want to add let's say like an icon or just like a video or an image
4:15
I going to add that in here like that and here I going to choose an image So if you don know what kind of image you can choose let say that I want to go into the user from URL
4:26
And I want to go into creative web developer stuff. I don't know, something just really easy to add us into my actual website
4:39
So I'm going to choose to select an image that I wanted to add. I'm going to wait to have the actual rate resolution
4:46
I'm going to copy the image address and I'm going to paste that in here into Elementor
4:51
Like that, here into the insert media. And here's the image size
4:56
And boom, he's been already been added. So I want to go into the actual this
5:02
If you delete actually this one, I think that this is going to be that accurate
5:07
I'm going to just leave it like that. And here I have the saved and backed. But what I want to do just to make sure that I can add a little bit
5:16
more stuffed here into my actual grid. After you finish that, hit into saved and back
5:22
And now we're not going to be inside. We're going to be outside our actual grid
5:26
So what I can do is to choose something else to add into my grid
5:31
For example, I'm going to go back into content like this. And you want to look out for more images to add
5:39
if you want to keep using your grid or if you want to keep moving your grids
5:43
So here we have your text. let's say topped blocks, top five blocks of the 2022
5:52
like this. I'm gonna hit into style. I can change the text color
5:57
I'm gonna do something black like this, just to have more variation here
6:03
And there we go. Into the layout, you want to leave it like that. And to the margin, if you want to add this like a quick modulgent
6:09
you can do that like that. I want to move this into the very center part like this
6:15
like this. I'm gonna stick around with 50. There we go. So now with that being said, I can go into
6:22
the edit part and here have this template So I have three columns and I have items and I have items per page I going to leave into just four I going to just leave it into three like that And here into the layout here is my template
6:38
So once again, I'm going to go into the edit template. And you want to, of course, save your changes
6:43
You don't want to, if you don't want to actually save, lose your actual stuff
6:48
So once again, I'm going to go into the feature image. And what I want to do is to add something else into a new arrow here
6:56
So here I'm going to click in here. We have the motion effects
7:01
And I'm going to scroll the fixed. I'm going to use the responsive, the attributes
7:07
So what I did here is to just copy and paste my actual margin
7:12
So I can have more than two stuff here. So if you want to like have five, four, three
7:19
you can just drag and drop like I just did here. And what I'm going to do here is to once again add an image here
7:26
I can hit into the X mark and here I want to go into the inner selection
7:31
And here I do have two different options to add here. So I can tap, let's say for example, the contact us or I can go into the actual layout here
7:39
and I want to add like a button like this, button number one
7:45
And I do have the button number two. So I'm going to go back here and I'm going to look out for a button once again
7:52
And I'm going to copy and drag and drop like this. and we're actually good to go
7:56
So what I just need to do is to just use exactly the same elements
8:01
that I'm being using to actually edit my post. And without being said, we're actually good to go
8:08
So just in case you have any question, guys, you can leave it down below in the comment section. As you can see, it's really, really easy to post
8:17
to create, to make a lot of stuff here into your actual website
8:22
using the Elementor. we have now the Elementor for free, so we are good to go
8:27
We can use so much more stuff into both applications. So thank you once again for watching the video, guys
8:33
and hopefully I will see you next time
#Online Communities