1. Home
  2. Docs
  3. Xpro Elementor Theme Builder
  4. Layouts

Layouts

Introduction

Xpro Elementor Theme Builder lets you customize every layout of your WordPress theme. It is fully integrated and works seamlessly with popular themes like Hello, Xpro, GeneratePress, and Astra. You can create custom layouts for your blog archives, post types, WooCommerce products & categories, search page, 404 pages, and much more. You can personalize your WooCommerce store experience by changing the default layout and tweaking it as you please. Not to mention the massive library of our pre-built Page Templates and Blocks which you can easily import and get your site live in no time.

There’s more to what you can customize with our powerful Elementor Theme Builder, You can fully customize header, footer, singular (404, single post, single page, single product, cart, checkout, account), archive (blog post, categories, tag archive, author archive), and much more. There’s no limit to what you can customize, it’s all up to your imagination. Let’s design what you love by exploring our easy-to-use guides for Xpro Elementor Theme Builder.

Understand the Layout of Xpro Elementor Theme Builder

Using Xpro Elementor Theme Builder, you can design & customize each theme part right from the front-end live dashboard. You can:

  • Build a new or customize pre-built header and footer
  • Edit theme parts like archive pages (blog post, categories, tag archive, author archive)
  • Customize a theme’s single post or single page templates (single post, single page, single product, cart, checkout, account)
  • Design a theme’s search page format and layout
  • Customize a theme’s 404 page format and layout
  • Get complete control over WooCommerce store layout
  • Design WooCommerce product pages
  • Manage display conditions and user roles

Now let’s first understand the basic layout of Xpro Elementor Theme Builder and what features it has to offer. Remember, you need to install and activate the plugin first, only then you will be able to edit each theme part from the front end.

From the WordPress dashboard, open the page/post you want to edit. Now from the front-end view, click on the Xpro icon to open the Theme Builder dashboard.

This is the default front-end view of Xpro Elementor Theme Builder.

Now let’s explore each option of the Theme Builder. To enhance your dashboard view, simply click and drag the ‘Drawer’ option to maximize the dashboard view at your convenience.

You can also ‘Expand’ and ‘Collapse’ the dashboard menu as you like. The complete layout names would appear if you expand the menu. In the same way, you can click on the icon again to collapse the menu.

Now let’s discuss the default view. On the left side, all site parts/layout are visible and once you click on a specific layout type, its detail view will appear on the right panel. By default, ‘All Layouts’ is open and visible. All available options are Header, Footer, Singular, Archive, and of course the Settings.

‘All Layouts’ showcases your custom-created layouts for any site part. It has the following features:

  1. 3 filters for layouts; Status, Sort, and Order
  2. Search Bar to simply type and search for any layout
  3. Option to create a new layout

Let’s create a new layout and assign its type from the All layouts section. Simply type the name of your layout in the ‘Create New Layout’ field and click the Enter button.

On clicking the enter button, your layout will be available on the All Layouts section like this:

Click on the edit icon to assign Type to your new layout.

Here we can change the title of our layout and assign it to any site part. Here I have assigned it to the Header part from the Type option. You can set your header layout as Sticky, assign specific Display Conditions, and set User Roles.

Now click on the update button.

The settings will be updated and then simply open the Elementor Editor by clicking the Elementor button.

Articles

How can we help?