In this tutorial I’m going to create a page with an overview of all blog posts organized by category.
This is helpful for visitors who want to search for relevant information on your website.
You can do this with the Query options for the Elementor Posts widget and I will show you exactly how it all works in this tutorial!
Watch tutorial on YouTube
Create new Page
To create a new page I go to Pages in the left menu and then I click on Add New.
After that I enter the title All Posts and then I click on Edit With Elementor.
Import template
Then I click on the icon to add a new template and I go to the My Templates tab. Here I select the template for the homepage and add it.
Customize template
I delete all sections except the Latest Posts section and in this section I also remove the Button.
I change the heading so it matches with a title for the posts category and for the first title I set it to Mens Watches.
Now I change the heading text to black by going to the Style tab.
After that I select the Section and change the background to white in the Style Tab.
Then I adjust the gray text to Category.
The border around the Posts widget is not visible because it is also white so I will make it black.
Therefore I go to the Style tab over to the Box options and here I adjust the Border Color to black.
Now I go to the Content options at the bottom of the Style tab.
I set the color for the Title to black and I also do the same for the Excerpt color.
Settings Posts widget
Now the design is ready and now I also want to show you how you can set this widget up so that only posts of a certain category are displayed which in this case is Mens Watches.
For this I go to the Content tab and then to Query. This is now set so all the latest blog posts are displayed in the overview.
You can see that because no settings have been made at the Include options.
But if I set Include By to Term and then type a space in the search bar, you will see an overview of the different categories and tags of your blog post.
In the tutorial about the Pages and Posts settings I have showed you how to set tags and how to use them.
So you can very specifically indicate which blog posts should be shown in the widget based on categories and tags.
Now I select the category Mens Watches and because there is now only one post created for this category you now only see that post in the widget.
If you don’t see the changes right away, you have to press the green button to save everything and refresh the page.
Because I have two other categories I will also create a section for that and that can be done very easily by duplicating the section again with the right mouse button.
I change the title to Womens Watches. Then I select the Posts widget and go to the Query options in the Content tab.
At Term I now select Categories: Womens watches.
We still have 1 category left so I now also want to create a section for that by duplicating this section again via the right mouse button and then select Duplicate.
I change the heading to Affordable luxury Watches. Now I select the Posts widget and go back to the Query options in the Content tab.
Here I select the category Affordable luxury watches at the Term options.
Above the second section I add another empty section by clicking the + sign.
Now I go to the overview with the widgets and select the Divider.
I drag this into the empty Column in the new Section.
On the Content tab of the Divider I set the Width to 70%
Then I set the Alignment to Center.
The color is already good, but I want to add a little more space at the top.
So I go to the Advanced tab and click on the Link Values Together icon at Margin. Now I only fill in 10 in the field Top Margin 10.
Now I right-click on this section and then Duplicate it and drag it above the Affordable Luxury Watches section.
Save settings
Now I save the settings by clicking the green button.
If you have a lot of posts on your website over time, it is useful to categorize them in this way and to display them clearly.
At a glance you can see all posts and also in which category they are placed.
But as I said before, you can also choose to place only one Posts widget on the page and just show all posts from all categories. It just depends on what you like.
And you can also add an Featured Image for this page in the WordPress dashboard.
In the previous tutorial i explained in detail how to do that.
Add link to your website
We are now almost ready and I will now go through all parts of the site one more time because the links to the All post page have to be added to a couple of buttons.
So I go back to the WordPress dashboard via the menu and the option Exit To Dashboard.
At permalink you can see the URL of this page. https://tutorials4wp.com/all-posts/ so I copy that so I can paste it in the buttons of the other pages.
Now I go to the homepage. In the View Posts button in the Latest Posts section I add the link to the All Posts page.
Also make sure that the Button in the About Us section is set correctly.
Only on the Archive page section is a button where I have to add a link.
I click on the icon with the 3 bars in the top left and then click on Theme Builder.
Now go to Archive in the left menu and click on Edit.
Go to the button and enter the link to the All Posts page we created.
Now I save the changes by clicking on the green Update button.
So now the All Posts page has been added and the link is also added to the relevant buttons on the website.
You can watch the video tutorial on YouTube over here.
Don’t forget to like and subscribe to the YouTube channel. I would appreciate that very much!
Now we are almost done with all the steps to finish this website.
The only thing I want to do now is add some cool motion effects to give a modern look and feel to it.
In the next tutorial I will exactly how to do that!
In other tutorials I have explained how to design: