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

How To Create Archive Layouts Using Theme Builder For Elementor

Xpro Theme Builder for Elementor lets you design your archive layouts, like blog or category pages, the way you want. With this plugin, creating sidebars and customizing category pages for your online store is super easy.

The default archive layout on most themes is unattractive and does not match according to your preferences. You have to deal with coding or complicated workarounds to customize it according to your vision and requirements. 

However, using Xpro Theme Builder for Elementor, you can design and customize your blog category page, product categories, tags, and author page without any coding knowledge. You can create anything you want. There is no need to deal with coding or switch between the WP backends. Xpro Theme Builder allows you to create archive layouts directly from the live front-end dashboard. Some salient features of creating an archive layout using our theme builder are:

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

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

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

Before diving into creating your blog archive page, here are some requirements you need to check to make sure everything goes smoothly.

Make sure to install and activate the theme and all these plugins on your WordPress website. To install the free plugins, just go to the Add New Plugins page and search for each plugin. After that, just click Install and then Activate. 

Check out our step-by-step guide on the installation of Theme Builder for Elementor.

Creating an Archive Page Layout Using Theme Builder:

After installing and activating the plugins, let’s look at the default WordPress theme’s blog archive page. This is a page where you can display a collection of your posts. It can be the blog category page, all-posts page, or blog tag page. 

To view your default blog archive/category page, log in to your WordPress Admin Dashboard, navigate to the All Pages section, and select your blog page. This will display the default blog list.

Let’s make your blog archive page interesting and engaging using the Xpro theme builder for Elementor. 

First, we will access the Xpro theme builder dashboard by clicking on the Xpro icon located in the bottom left corner of the screen. Then, click on the Archives option to create a new layout for blogs, category archives, or edit an existing one. 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

In my case, I’ll create a new blog archive and customize it using Elementor.

Type the name of your blog archive page and press Enter. Now, it will be available to edit. 

Simply hover over the newly created Archive Layout and click the Edit Icon to customize its settings.

Here you can change the Title of your Archive Layout, set Display ConditionsUser 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/Posts pages’ because we are going to create a custom blog archive layout. You can also apply the don’t ‘display on condition’ and set user roles according to your requirements. 

Remember, you need to change the status of your archive layout to ‘Published’ from the Status option. 

Now, click on Elementor to create & customize an archive layout using Elementor widgets

Now, you will be redirected to the Elementor editor page. Here, you can customize the archive layout from scratch using any Elementor widgets or simply import any of the pre-built archive templates for a blog page or category page to quickly get your website live.

Remember, Xpro Elementor Theme Builder for Elementor is fully compatible with popular Elementor themes (like Xpro, Hello, GeneratePress, and Astra) Elementor Addons. So, you can import any pre-designed Elementor templates and customize them according to your requirements. 

In my case, I am going to create a custom blog category page using Xpro Elementor Addons to access the free Elementor Widgets, like the post grid widget, advanced heading widget for elementor, and more. 

If you also want to create it from scratch, download the free version of Xpro Elementor Addons to access its widgets specifically designed for creating archive pages.

After installing and activating the Xpro Addons, we’ll drag the ‘Xpro Elementor Post Grid’ widget from the widget panel and drop it in the desired location. 

Once you drop the post grid widget, it will automatically fetch all blog posts from your WordPress backend and put them in a grid layout for you. There is a General Tab, Query tab, and a Pagination tab to control the widget. 

From the General section, you can customize the number of columns, choose from different layouts, set image sizes, and much more. 

Now, move on to the Query Section to choose the source of the post grid and set it for a specific author, category, tag, format, exclude, and more.

You can also enable/disable the pagination option in the Pagination section. 

You might check out our detailed guide on How To Configure Post Grid widget in Elementor

Similarly, you can add more Elementor widgets according to your requirements. 

Here’s a custom layout to help you better understand which widgets you can use in your blog archive sidebar.

I’ve mentioned all the widgets to create this amazing blog page layout above. You can create your own layout using the FREE Xpro Addons and Xpro Themer widgets.

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

Here’s your new blog archive/category page layout.

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

In the same way, you can create singular layouts (post pages, search pages, 404 pages, etc.) for your website using Xpro Theme Builder. 

Check out our detailed guide on creating custom singular templates using Theme Builder for Elementor and instantly impress your website visitors with a perfect web experience.

How can we help?