1. Home
  2. Docs
  3. Xpro Elementor Theme Builder
  4. Elementor Theme Builder Layouts
  5. How To Create Archive Layouts Using Elementor Theme Builder

How To Create Archive Layouts Using Elementor Theme Builder

Introduction

Xpro Elementor Theme Builder is a premium FREE theme builder for elementor that lets you design your archive layouts like blog or category pages the way you want. The plugin makes it super easy for you to create sidebars or customize category pages of your online store. Now you can easily define the main page for your blog posts or category pages just like you imagined.

An archive template is used to display the following:

  • A paginated list of all your blog posts
  • A paginated list of all your WooCommerce products
  • A paginated list of all your blog posts in a particular category, and more

Now why there’s a need to customize your archives? We all know that the default archive layout of most of the themes is quite unattractive and you might want to customize it to match your vision. This was previously only possible with the Pro version of Elementor but now you can design your own blog or category archives using Elementor Theme Builder Free. You can fully customize archives like blogs, categories, tag archives, author archives as per your imagination. There’s no limit to what you can customize using our FREE Theme Builder for Elementor.

There’s no need to deal with any shortcode, no more going back and forth the WP backend, you can seamlessly create archive layout right from the live front-end dashboard of Theme Builder For Elementor. Some salient features of creating an archive layout using our theme builder are:

  • Create unique pages for individual categories
  • Customize WooCommerce store layout
  • Pick display locations
  • Custom layouts for search results

Let’s learn how to create a FREE archive page for your WordPress website.

How to Use Xpro Elementor Theme Builder to Design a Custom Archive Page

First, we are going to see the default Blog Archive of a WordPress theme. It can be different for different themes but mainly it’s based on the same structure. For this, simply login to your WordPress Admin Dashboard and view your blog page from the All Pages option. This is the default Blog List.

Remember, you need to install and activate our Elementor Theme Builder Free to create a custom archive layout. Click here to view the installation guide. On the front-end, you will see the Xpro Elementor Theme Builder icon on the bottom left side of your page. Click on it and a dashboard will open up for you.

Now simply click on the Archives option to create a new layout for blogs, category archive, or edit an existing one. Here we will create a new blog archive so that we can replace the existing ordinary-looking layout (shown above).

Type the name of your new Blogs list archive and press Enter. Your new layout will be available to Edit.

Simply Hover over the new Archive Layout you just created and click the Edit Icon to customize the settings.

Here you can change the Title of your Archive Layout, set Display Conditions, User Roles, and Status of the layout. Whenever you make a change, don’t forget to ‘Update’ your settings otherwise it won’t work for you. Here, I’m setting the Display On option for ‘Blog/Po2sts pages’ because we are going to create a custom blog archive layout. Remember, you need to change the status of your archive layout to ‘Published’ from the Status option.

After updating your settings, simply click on the Elementor button to get started.

Moving forward, in the next part I will explain how you can create a blog archive template from scratch using Xpro Elementor Theme Builder.

How to Create a Custom Main Blog Page Layout for Your WordPress Website using Elementor

You can create a stunning archive template from scratch using Xpro Elementor Theme Builder. But first, let me explain what it is. Archive templates are used to display many items on the same page. For example your main blog layout, WooCommerce category pages, post type archives. and more.

You can apply a custom template to:

  • All archives
  • Taxonomy archives for the specified taxonomies
  • Post Type archives for the specified post types
  • Author archives for the specified authors
  • Date archives

With our Free Elementor Theme Builder, you can create any of the above-mentioned custom archive templates for FREE. The robust theme builder gives you two options to design custom singular templates:

  • You can design a new Archive Layout from the scratch using Xpro Elementor Addons.
  • You can simply import any of the premium pre-built archive templates for a blog page or category page to quickly get your site live

Remember, Xpro Elementor Theme Builder is fully compatible with popular Elementor themes like Xpro, Hello, GeneratePress, and Astra. Moving forward, let’s design a main blog page layout using Xpro Elementor Theme Builder. Simply click on the Theme Builder Icon, move to the Archives Layout section, and edit an existing layout or create a new one.

Set the Display Conditions, set user roles, and much more. Here I am going to set the Display On option for the main blog page, i.e., ‘Blog/Post Pages’.

Similarly, you can set rules from the Don’t Display On option to hide your Archive Layout on a specific page/post.

Finally, update your settings, change the status to Published, and click on the Elementor button to edit your Archive Layout.

As I mentioned earlier, you can create a new archive layout from scratch or simply insert one of the pre-built Xpro Archive Templates to quickly add professional archives like blogs, categories, tag archives, author archives, and more. Here I am going to create a custom main blog page layout using Xpro Elementor Addons so that we can replace the existing bland template with our customized one.

Now once you click on the Elementor button from the Xpro Theme Builder Dashboard (shown above), you will be redirected to a new tab with Elementor Editor opened in it.

Click on the Xpro Themer section available in the Elements tab. You will find all widgets of Xpro Themer in this section. Use creative widgets like Post Meta, Post Comment, Post Title, Post Content, Featured Image, and many more.

You can also use any of the FREE widgets under Xpro Addons. Here I am going to add the ‘Post Grid’ widget to create a nice layout for our Blog Posts. Simply search for the widget in the search bar and drop it in your desired location.

Once you drop the widget, it will automatically fetch all blog posts and put them in a nice grid layout for you. Now you can customize the number of columns, choose from different layouts, set image size, and much more. You can also turn on the pagination option from the Pagination section. From the Query Section, you can choose the source of the post grid, set it for a specific author, category, tag, and much more. This is just an overview of the creative freedom Xpro Theme Builders gives to you. You can view the detailed documentation for the Post Grid widget to fully utilize its features.

Now let’s add the ‘Search widget’ from the Xpro Themer section. You can then style it from the Style tab as you like.

Similarly, add widgets you like and complete your stunning main blog page layout. Your imagination is the only limit here. Here I have created a custom layout as per my liking:

I’ve mentioned all widgets used to create this awesome blog page layout above. You can create your own layout as you like using a mixture of FREE Xpro Addons and Xpro Themer widgets.

Once you’ve finalized your layout from the Elementor Editor, simply click on the Update button. Your changes will be saved and the layout will be updated.

Here’s your new main blog page layout.

How to Set Display Conditions for Archive Layouts using Xpro Elementor Theme Builder

You may want to keep the same archive template for taxonomy archives, post type archives, date archives, and more. But sometimes you may want different layouts for different WooCommerce categories, post type archives, author archives, and more. Luckily, Xpro Elementor Theme Builder free lets you easily manage your display conditions for multiple archive layouts.

To do this, you have to assign a blog, category, or any other archive layout. This can be easily done with Xpro Elementor Theme Builder. It gives you the complete freedom to easily customize Display Conditions right from the front-end dashboard.

To do this, simply edit your Archive Layout (here we created a custom main blog page layout) and change the Display On/Don’t Display On conditions. Here, I’ll demonstrate Display Conditions for Archive Layout titled ‘Blog Archive Demo’.

From the Display On option, you can make your Blog Page Archive Layout visible on All Posts, any specific date archive, author archive, all posts archive, category archives, and more. You can also add multiple display rules by clicking the Add Display Rule button.

Similarly, if you don’t want this specific Blog Archive Layout on certain author/date/posts archives then simply open the dropdown menu of the Don’t Display On option and apply your exclusion rule.

Finally, update your settings to save Display Conditions.

This is all from our custom Archives Layout guide for WordPress. I hope you have a better understanding of using Xpro Elementor Theme Builder to create FREE archive layouts for blogs, categories, tag archives, author archives, WooCommerce categories, and much more.

In the same way, you can create singular layouts (page, post, search, 404 pages, etc.) for your website for FREE using our powerful Theme Builder. Check our detailed guide on creating custom singular templates using Xpro Elementor Theme Builder and instantly delight your site visitors with a perfect web experience.

How can we help?