In the previous tutorial I showed you how to create blog posts and in this tutorial I will show you how to create archive pages.
If you have different categories for blog posts on your site then all post from one certain category will be displayed on a Archive page.
I will explain everything about archive pages in this tutorial!
Watch tutorial on YouTube
What are Archive pages
To give an example I have added 3 links in the navigation menu that refer to Category pages and those are the Mens watches, Womens watches and Affordable luxury watches.
I’ll open a new browser tab to show you what I mean.
Now I click on a link for a category page in the navigation menu in the header like Mens Watches.
When the page has loaded you will see that only the post is classified in that specific category.
Because is have made only 1 post for this category, only this one is visible now but if new posts will be added to the same category they will be also displayed on this page.
The layout of this page is not very stylish yet and you can easily adjust that with the Elementor Pro plugin,
Thats what I will show you now so let’s get started.
Create Archive Pages template
I’ll leave this tab open and go back to the other tab with the Elementor editor.
In the previous tutorial I have finished the third blog posts so let’s pick up from there.
I go to the Theme Builder options by clicking the icon in the top of the menu bar.
After that I select the Theme Builder option.
The page we have just viewed is an Archive page and I haven’t set up a template for that yet, so I’m going to do that now.
Therefore I click on Archive and then on Add New.
Now I click on the My Templates tab and there I choose the template I made of the homepage.
Then I go to the gear icon at the bottom left and there I set the Page Layout to Elementor Full Width.
Now I’m removing all sections except the Latest Posts.
Archive Title widget
The next thing I’m going to do is add a new widget by going to the left menu and search for the Archive Title.
I now drag this widget above the title on the canvas and you can copy the layout of the title below and paste it to the Archives Title.
Now I want to change the title color to black by going to the Style tab and then go over to the Text Color options.
I will now adjust the background color by selecting the entire section and go to the Style tab and here I change the Color to white.
Archive Posts widget
Unfortunately we can’t copy the styling settings of the Posts section for the next widget I’m going to add to the canvas, so I delete it.
Now I go back to the overview with the widgets and I drag the Archive Posts widgets below the gray text. This is the widget we need for this page as the name also implies.
Now I’m going to adjust the Archive Posts widget and the first thing I do is change the Skin to Cards. After that’s done I adjust the Image Size to Medium Large to make it sharper.
I set the Image ratio to 0.56
I remove the Meta Data by clicking on the cross next to Date and Comments.
After that I disable the Badge and Avatar options.
Now I go to the Style tab and there I go to the Card options. Here I set the Border Width to 2.
Then I set the Horizontal Padding to 20. Below you also have the Box Shadow option and I disable it.
Now I go to the Content tab and here I adjust the Title Color to black. At Typography I set the Font to Rubik with a Weight of 600 and I also set the Line-Height to 1.2 and the Letter Spacing to 2.3
Then I enter 20 at Spacing to add some extra space. For Excerpt I only adjust the color to black and I leave the other settings as it is.
Now I go to the Read More settings and here I adjust the color to gray.
Then I change the Font to Rubik via Typography and set the Size to 16 PX. After that’s done I go to Weight and set it to 600.
I want less space between the title and the image so I go to the options for Image and there I set the Spacing to 10.
Now I still have to delete this Title widget that isn’t visible because it’s the same color as the background and I almost forgot to do that.
So I click on the title widget and select Delete.
Now I go to the button below the Archive Posts widget and I want to change the color. So I go over to the Style tab and I set the Text Color to white and the Background Color to black. Then I click on the Hover tab and adjust the Border Color to black.
Just to be sure, I check what everything looks like on tablet and mobile with the Responsive Mode.
It looks good on the tablet view and when I switch over to the mobile view I see everything is fine here too!
Save section
If you want to save the section as a template you can click on it with the right mouse button and then select Save as Template.
Save settings
Now click on the green Publish button to save the settings. Click on Add Condition and set it to All Archives as it is already indicated. Then click on Save & Close.
First I want to show you in the other broswertab that the page is modified when we refresh it. Now we see that the design is the same as I have just set it up in the template.
If you click on a blog you will go to this blog page. With the links in the breadcrumbs or the navigation menu you can navigate to the Category page.
As you can see everything look fine now!
So now you know how to design the archive pages!
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!
If you have responsive issues with designing in Elementor for mobile or tablet view you should check out this tutorial. There I will explain how you can fix this very easily.
In other tutorials I have explained how to design:
- Search results pages with Elementor
- Blog overview organized by category on one page with Elementor
- Header and footer with Elementor
- Pages with Elementor
- Posts with Elementor
- Error 404 page with Elementor
- Landing page (without header & footer) with Elementor
- Under construction/Coming soon page with Elementor