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…

The Layout Section Builder is accessed from Layouts > Layout Section Builder from the Avada Dashboard. You will be taken to a page similar to that of the Avada Builder Library. It also acts in a similar way, but just for Layout Sections. If you’re not sure what Layout Sections are, please read the Understanding Layouts and Layout Sections doc. Read on to find out more about what you can do on this page…

Layout Elements are special, dynamic Elements that are found in Avada Builder. These are found primarily when editing Content Layout Sections through Avada Layouts, but some are available when editing Page Title Bar Layout Sections, and when editing Post Cards in the Avada Builder Library. Currently, there are twenty seven of these special Elements, which can be used to dynamically populate the Content Layout Sections and Post Cards.

Scroll down to read a brief description of each of the Layout Elements in Avada, follow the links for details on each specific element, and watch the video below for a visual overview of the Layout Elements, and their usage.

Avada Layouts allow you to create custom layouts for all areas of your website, including Single Blog Posts and Portfolio Posts. When designing the Content Layout Section of these kinds of Layouts, you are typically adding Layout Section Elements; dynamic elements that add content based on the Layout Conditions.

As you are designing a layout that will be used for multiple pages, dummy content is used in the design stage. But this doesn’t give you a good idea of what the end result will look like. So to help with that, we have added an option in the Layout Section Options, called ” View Dynamic Content As”.

This option allows you to specify what sort of content your Layout will be using, and even allows you to specify a particular post or portfolio item etc to use in the preview. Let’s run through how this works.

When editing a Content Layout Section with Layout Section Elements in Avada Live, it will initially look like this. In this example, it is a Single Post Layout.

Note how all the dynamic content in the Content area is either shown as a placeholder, dummy text, or a notice. To preview the Dynamic Content, go to the Layout Section Options, and choose a Content Type from the dropdown to select what type of content to preview. As this is a single post layout, we would select Post.

A second, optional choice, is to choose a specific post to use as the display preview content. Choose the specific content, and then click the Preview button.

Your Layout Section will now be displayed using content directly from the source you specified, helping you to visualize what you design will look like on the Front End for that type of content.

Avada offers a large range of Elements in Avada Builder, from Design Elements, Layouts Elements, and Avada Form Builder Elements. See the Avada Builder Elements doc to see the full list of all Elements in Avada.

The Design Elements, however, are the main ones, and can be used everywhere in the Avada Builder, including in any Layout Sections created in Avada Layouts. However, a special class of Elements is designed for use only in Content Layout Sections to help build these dynamic templates. These are called Layout Elements.

These Elements allow you to place dynamic content into Content Layout Sections and, to a lesser extent, Page Title Bars and Post Cards. As you can see below, there are a range of Elements to suit whatever type of Content Layout Section you are designing—whether that’s a blog layout, a portfolio layout, a WooCommerce single product layout, or even a 404 page or Search results layout.

These Elements have a full range of options, in the same way the other Elements do, and you work with them in entirely the same way. Below, for example is the Author Element options panel.

The full range of Design Elements is also available to use when building Layout Sections, but the Layout Elements are only available when building Content Layout Sections. They are all dynamic Elements, that pull their content from the relevant section of your content. NB. This is not to be confused with dynamic content options inside normal elements.

For example, if you have created a Content Layout Section, in a Layout whose conditions specify that it will only be shown on Single Posts, then the Content Element would show the single post blog content. Likewise, if you made a Content Layout Section on a conditional Layout that only showed a particular Portfolio category, then the Archives Element would show only that category of Portfolio posts.

It’s these Elements then, that allow you to build the content in your Content Layout Sections. As mentioned before, these Layout Sections Elements are only found in the Content Layout Sections. In the Header and Footer Layout Sections, you have full access to all the Builder Elements, as well as the Dynamic Content options found inside these elements, but not the Layout Elements.

With the combination of Design Elements and Layout Elements, you can now design and build totally unique Custom Layouts, using the full power of the Avada Builder. With these powerful design tools, there’s virtually nothing you can’t achieve.

When you mouse over any Conditional Layout, you will see Manage Conditions at the very bottom of the layout. Click that to open the Layout Conditions dialog.

As seen below, it’s is split up into three columns, the first one being broken up into the Custom Post Types available on your installation. If you select a Post Type, the middle column is then populated with all possible conditions for that post type. For each condition, there is a tick box and a cross box. Use the tick box to include a condition, and the cross box to exclude a condition. Selected conditions are then shown in the third column, for a simple overview of the conditions chosen for the layout.

Rather than go through every single condition, let’s show a few examples of how the Layout Conditions might be used. The possibilities are almost endless and depend entirely on your situation, but once you understand how the conditions work, you will easily be able to apply them to your specific site and situation.

A Custom 404 page is now very easy to create. Simply make a new Layout, and in the conditions, assign it to Other > Custom 404 page. Then, using a Content Layout Section, you can design whatever 404 page you like, with any content and design, using the full power of the Avada Builder.

The next example, is a Custom Single Posts Layout with an exclusion. As you can see from the Layout Conditions below, this Layout would be shown on ALL posts, with the exception of posts in The Designer Show Category. For this category, the default single posts layout would load, unless you created a custom layout for just that category.

In this example, the Layout conditions have been set to only show the Layout on certain Post Categories, in this case, Business and Business Broadcast. This might be, for example, if you wanted a Custom Advertising Banner above or below your normal Post Content for only these two Categories.

Creating the content for a Layout Section depends largely on what type of Layout Section you are making. In Avada Layouts, there are four types of layout sections you can create – a Header Layout Section, a Page Title Bar Layout Section, a Content Layout Section, and a Footer Layout Section. Let’s have a quick look at the differences in these four Layout Sections when it comes to generating content for them.

With Avada Layouts, there are two main components – Layouts, and Layout Sections. It is crucial to understand the difference between these two. It is perhaps easiest to think of a Layout as simply a container that holds the page content. The content itself, however, comes from the Layout Sections.

Structurally, Avada has four Layout Sections: the Header, the Page Title Bar, the Content area, and the Footer. In the Header, for example, is the Logo area and the menu, and sliders, when attached through the global options, are also in the Header Layout Section.

Then, whether it is used or not, the Page Title Bar Layout Section sits directly beneath the header. Under that is the Content Layout Section, which holds the page content coming from the editor, and which goes all the way down to the start of the Footer Layout Section, which finishes the page. See an example of the Layout Sections on the Treatment page of the Avada Spa Demo, directly below.

In Avada Layouts, as you can see below, you can see these four default Layout Sections represented in the Global layout. Here, however, a Custom Footer has been added to the Global Layout, adding a new footer to the website. Also, next to the Global Layout, is a new 404 Page Layout with a Custom Layout Section added to the Content Layout Section, and conditions set so that it only shows on 404 Error pages.

So, in Avada Layouts, there are two types of Layouts. One is the Global Layout. It is empty by default, which means no custom Layout Sections are overriding any of the default Layout Sections, and all content is generated from the Avada Options, Page Options and actual page content. However, if any custom Layout Sections are added to this Global Layout, the custom Layout Section will display globally across the site, and the relevant global options will not be active. An example of this would be a custom Global Footer or Global Header.

The main benefit of using a Custom Layout Section in the Global Layout would be to take advantage of the full design capabilities of Avada Builder to create a custom Layout Section, such as the Footer or Header. Layout Sections can contain anything that can be built in the Avada Builder, and so can have complex layouts, that are not possible to create with just the Avada options. Below is an example of the Global Layout on the Pet Supplies Websites, that has several Custom Layouts Sections, as well as a number of Conditional Layouts.

The second type of Layout is a conditional Layout. These are created in Avada Layouts, and then conditions are added to them to limit when the Layout is used. For more details on Conditional Layouts, see the Understanding Conditional Layouts document.

To create a new Layout in the Avada Layouts, simply give the Layout a name and click Create New Layout. The Layout will then appear below this, next to the Global Layout.

At this point, the Layout is not active. As can be seen at the bottom of the Layout, no conditions have been set, and no Custom Layout Sections have been added. It’s important to note that Conditions are set on the Layout, and Layout Sections provide the content. Once these two tasks are completed, the new Layout will be active on the site based on the conditions set, and using the content added via one of the three currently active Layout Sections. See below on how these Layout Sections work.

Custom Layout Sections are added to the Layout on by clicking the + symbol on the corresponding Layout Section on the desired Layout. As can be seen below, you can create a New Layout Section by adding a Section name and clicking on Create New Section, or if you have any Existing Layout Sections, they will appear under the Existing Section tab.

Existing Layout Sections will also appear in the Layout Sections tab, which is basically a Library of your Custom Layout Sections. These sections can be reused on any number of Layouts.

If you mouse over a Layout Section on a Layout, you will see two icons – an edit icon and an disconnect icon. To disconnect the Layout Section from the Layout, simply click the disconnect icon. To edit the contents of the Layout Section, click the edit icon. The WordPress editor will load, and you can choose which editor you prefer to use. Your preference will be remembered next time you edit the Layout Section.

The last thing to do with the Layout Sections is to create the content. as this is done using the Avada Builder, you can create virtually any layout you like. When creating Content Layout Sections, you will notice a range of new Layout Section Elements. Please see the Creating Layout Section Content and the Design Elements vs Layout Section Elements docs for more information on how to build content for your Layout Sections and to use these new special elements.

Avada Layouts is a templating system that uses the Avada Builder to create fully customized Layouts for all sections of your website, including both Global and Conditional Layouts. This game-changing feature can be found at Avada > Layouts.

The main advantages of using Avada Layouts are twofold. Not only does it allow you to have Custom Layouts, both Global or Conditional, on various sections of your website, but also that the Layouts themselves can be created using the full design power of the Avada Builder.

The flexibility this bestows is unparalleled and allows you to unleash your full creativity on all sections of your website. Read on to discover more about the awesome Avada Layouts, and watch the video for a visual overview.