Introducing The Avada Theme Builder

18/02/2020

With Avada 6.2, we have introduced the brand new Avada Theme Builder, which allows you to create fully Custom Layouts for your site, including both Global and Conditional Layouts. This much-requested new feature can be found at Fusion Builder > Theme Builder.

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept
Avada Theme Builder

Layouts and Layout Sections

To quickly understand and get started with this new feature, it’s useful to understand Layouts and Layout Sections and how they work together. For full details, please see Understanding Layouts & Layout Sections, but 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. A layout is comprised of content coming from four layout sections: a header section, a Page Title Bar section, a content section, and then a footer section. This is how the theme is constructed, and normally, you set the content of the Layout Sections through the Theme Options and the pages you build.

What the Theme Builder allows you to do though, is to create and set your own layouts throughout the theme. This can be done globally, by adding custom Layout Sections to the Global Layout, or you can create your own conditional Layouts, for example, a layout for single posts, 404 pages, or for Search Results, and then populate that layout with custom Layout Sections.

The structure is a little bit like the Fusion Slider, where you create a Slider, and then add slides to the slider. As seen below, you have a Global Layout and any created Layouts, and then you can override any Layout Section with your own custom layout sections and create conditions for when those Layouts are used.

Layouts and Layout Sections

Understanding Conditional Layouts

Apart from the Global layout, you can also create your own Layouts, and these are displayed based on conditions you set for them. At the top and bottom of each Layout is a link to the Layout Conditions, and here you can specify in which situations the layout should display.

It can be as simple as on a particular page, or on all single posts, right down to mutiple conditions and exclusions on all custom post types. Layout Conditions are as simple or as complex as you need, with a well designed interface that allows you to quickly and intuitively decide when the Layouts should show. For more information on Conditional Layouts, please see Understanding Conditional Layouts.

Layout Conditions

Creating Layout Section Content

One you have created a Layout and set Conditions for when it will be used, you can create new or add any exsiting Layout Sections to your Layout. To assign a Layout Section to a Layout, you simply click on the + symbol on the relevant default Layout section, and add one from there. For more details on creating Layout Sections, see the Layout Sections area of the Understanding Layouts and Layout Sections doc.

Once you have made your Layout Section, it’s time to populate it with content. This is done in the Fusion Builder (back end or front end interface, your choice entirely) using the full range of Fusion Builder Elements at your disposal. You can use multiple Containers and Columns and Elements – in fact, anything you can build in Fusion Builder can be a Layout Section.

Below is an example of a Custom 404 layout, using a Custom Page Title Bar Layout Section, as well as a Custom Content Layout Section, built in the back end interface of Fusion Builder. Below that is the 404 page (minus the footer) as seen on the front end.

404 page Page Title Bar Layout Section
404 page Content Layout Section
404 Layout Example

Design Elements vs Layout Section Elements

With Footer and Page Title Bar Layout Sections, you will find the full range of Fusion Builder Elements, with which to design your content. But with Content Layout Sections, you will find a range of new Elements, in their own tab, called Layout Section Elements. For full details on this please see Avada Design Elements vs. Layout Section Elements, but in short, these new Elements allow you to add dynamic content in the Content Layout Section, such as blog posts, portfolio items, author information, related posts, and more. You can also use the normal design Elements when designing your Content Layout Sections, and as mentioned, these Layout Section Elements are only found in the Content Layout Section, where you need to display content from blog posts, archives, portfolio posts etc.

Layout Section Elements

Conclusion

The Avada Theme Builder is a real game changer when it comes to flexibility of design. Now you can create fully custom layout sections, and using the power of conditional layouts, use them wherever you want on your site. A future version of Avada will, of course, add the ability to add custom Header Layout Sections, but this Stage 1 of the Theme Builder already gives you unparalleled power to create the layouts you want.

Further documentation and videos will be forthcoming!