Understanding Layouts and Layout Sections
With the Avada Theme Builder, 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 theme 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 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 the Theme Builder, 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 the Theme Builder, there are two types of Layouts. One is the Global Layout. It is empty by default, which means no custom Layout Sections are overrriding any of the default Layout Sections, and all content is coming from the Theme 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 theme options will not be active. An example of this would be a custom global Footer. The main beneift of using a Custom Layout Section in the Global Layout would be to take advantage of the full design capabilities of Fusion Builder to create the Footer. Layout Sections can contain anything that can be built in the Fusion Builder, and so can have complex layouts, that are not possible to create with just the theme options. Below is an example of a Custom Footer Layout Section added to the Global Layout.
The second type of Layout is a conditional Layout. These are created in the Theme Builder, and then conditions are added to them to limit when the Layout is used. For more details on Layout Conditions, see the Understanding Conditional Layouts document.
To create a new Layout in the Theme Builder, 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. NB. Customizable Header Layout Sections will be available in a future Avada release. 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 Fusion 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 sepecial elements.