The Layout Builder

Last Update: March 12, 2024

The Layout Builder page is home to your Layouts, and is where you create any Conditional Layouts, apart from the Global Layout that exists by default. It is also where you assign Layout Sections to your Layouts, and set Conditions on your Conditional Layouts.

The Layout Builder is accessed from Layouts > Layout Builder from the Avada Dashboard. The best way to explain Layouts, is that they are Containers that hold the four layout sections of a page – the Header section, the Page Title Bar section, the Content Section, and the Footer section. If you’re still not sure of the difference between Layouts and Layouts, please read the Understanding Layouts and Layout Sections doc. Read on to find out more about what you can do on this page…

Creating New Layouts

At the top of the Layout Builder page are two sections. The first outlines the process of populating the Layout Sections in the Global Layout or creating Conditional Layouts (Hint: you can close this with the X), and on the right hand side is an area, from where you can directly create new Layouts. Just enter a name for your new Layout, and then click on Create New Layout. Using this method simply creates a blank Layout, with no Layout Sections or conditions assigned.

Avada Layout Builder

Managing Your Layouts

As you create Layouts, they populate the Layout Builder page. At the top of each Layout, you can rename it, you can click on the cog icon to set conditions for the Layout, and you can delete the Layout by clicking on the Bin Icon. You can also click on the bottom of all Layouts except the Global Layout, to see and assign conditions.

Within each Layout, you can see the four Layout Section that can be assigned to each Layout. When you mouse over each Layout Section, you will see a plus icon which enables you to assign a Layout Section to that area of the Layout. You can either assign an already existing Layout Section here, or you can create a new section as well.

Layouts and Layout Sections

Moving Layouts

When you have multiple Layouts, you can also drag them around to change their position on the page. This is important, as Layouts further down the page take precedence over Layouts higher up. This is because it’s possible for conditions to apply to multiple pages.

For example, let’s say you have a Single Post Page Layout that has the Conditions of All Posts. But then you also have another Layout where just a few posts have been added to the conditions. These posts would be valid for both Layouts, and so in this situation, it would be important for the second Layout to be lower than the All Posts Layout.

Make sure to Save the Layout order with the save button at the bottom of the page.

Avada Layouts > Saving Layout Positions