In this article, we will show you how to create an archive page inside of Elementor using Unlimited Elements widgets. By creating an Archive Page, you can easily assist readers in navigating through previously published content, such as blogs. Archive Pages organize posts under a particular post type, category, or tag. You can use different archive terms to filter them, such as Author, Date, Category, Search results, Recent posts, Tags, or any other taxonomy.
Now, we will look at the step-by-step guide on how to create an archive page with Elementor.
Step 1:
Create an Elementor Template
Go to Template >> Theme Builder >> Add New
Select archive from the list, give your template the desired name, and click create template.
Step 2:
Select the layout of the Archive Page
You can choose any archive block and insert it or design your archive template layout using Elementor Widgets. Here we will use some Unlimited Elements widgets to create the layout for the archive page template.
Step 3:
Add Post Grid Widget
Firstly we will use the Unlimited Elements Post Grid Widget because it has a lot of customization and styling options. It also supports advanced options such as Post Query and Remote Connection.
Using its layout settings, you can show or hide the elements like images, categories, titles, text, buttons, etc. You can also display additional data such as date, time, time ago, author, comments, etc.
So you can make your desired post grid layout for the archive page template using this widget’s customization options.
Step 4:
Set the Post Query
By using its advanced post query feature, you can display the exact posts you want. You can choose the post source and include or exclude the post using specific terms. You can also set the order of posts with different terms.
So you can make your desired post grid layout for the archive page template using this widget’s customization options.
Similarly, you can create an archive template for your WooCommerce products using Unlimited Elements WooCommerce Product Grid Widget. The widget has a lot of customization and styling options. Using this widget, you can create a great product archive layout very quickly.
It is possible to turn on or off any part of the WooCommerce Product Grid to customize its appearance to your website’s requirements.
The Advanced Product Query settings allow you to select exactly which products you want displayed in your grid in Elementor.
To learn more about query settings, please visit our article on Advanced Post Selection.
Step 5:
Add Pagination
Add the Unlimited Elements Post Pagination widget below the post grid. You can Style the widget using its different styling options.
Step 6:
Add Post Filters
You can also add the post filters provided by Unlimited Elements to filter the posts in the archive post grid. Below are some post filter widgets.
You can use Dynamic Post Popup Widget to dynamically create a popup to add a quick view of the post without leaving the page. You can create the layout of the dynamic popup using an Elementor single post template.
Step 6:
Publish and Set Display Conditions
After you have finished designing, click publish and set the display condition to include or exclude a condition.
