Hi everyone, in this video will be looking at getting started with about a layout. This game changing tool introduced with about a 6.2 as the Avada theme builder and then further enhanced and renamed in about a seven enables you to create a range of custom layouts for your website.
In this video I will explain the basic principles of layouts and then show a series of examples of how you can, for example add layout sections to the global layout, how to add completely new conditional layouts and then populate them with layout sections and how the conditions work.
Make sure you subscribe to our YouTube channel to keep up with all the latest videos like this one. And if you don’t want to miss one, click the Bell icon to get notifications of all new videos on our channel. OK, let’s begin.
This also new feature can be found at Avada layouts.
From the Avada dashboard you will find links to the layout builder as well as the layout section builder.
To quickly understand and get started with this new tool, it’s useful to understand layouts and layout sections and how they work together.
Check out the link layout docs to read more about this, but it’s 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 page layout is comprised of content coming from 4 layout sections, a header section, a page title bar, section, a content section, and a footer section.
This is how the theme is constructed and normally you set the content of the layout sections through a combination of the global options and the pages you build.
What layouts allows you to do though, is to create and set your own custom 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 and then populate that layout with custom layout sections.
The structure is a little bit like the about a slider where you create a slider and then add slides to this slider.
Here you create a layout and override any default layout section with your own custom layout sections.
Additionally, you then set conditions for when the layout is to be used.
Let me demonstrate how this new feature works.
On the online shooter website here, for example, a custom footer layout section has been added to the global layout, effectively replacing the default folder site wide.
With this method you can use the full power of the Avada builder to build any footer you can imagine.
No custom header has been created for this website as it was made before the header builder was added to layout, but please view the How to build a custom header video linked here to see how the new header builder works.
But back to our folder.
I’ll just disconnect it to show how it’s added.
So now when I click on the select footer section in the global layout, I get the option to create a new layout section or to add an existing section.
We have the existing layout section, so let’s go to existing and select this layout section called custom footer.
This sends the custom layout section to the global layout and now when we mouse over it. We can either disconnect it or edit. It let’s do that.
This opens the layout section in a new tab with a new custom layer. It opens in the default WordPress editor and gives us the choice of how we’d like to build it, but existing ones open in the back-end builder.
As you can now see, this is a fully custom footer using many aspects and elements of the Avada builder, including a multiple container and column layout.
If I now move to the front-end builder.
We can say a footer in situ under some dummy page content. As always, it’s totally up to you which build interface you want to use.
One thing that’s important to understand here is that when creating a layout section there is no connection back to the usual theme options. In this case the footer options.
All options in settings come from the builder or the layout options found in the page options area when editing the layout section.
Indeed, if we go to the global options and the footer section, you will see the note that the options here are not available due to the layout section override.
But if we go to the layout section options, we can see some option tabs under settings. There is just the page title and the slug and there is a custom CSS tab and an import export tab for importing or exporting page options.
And in the layout section tab we also have a couple of options.
The first one is not relevant in this situation, as layout section elements are not available in the footer layout section.
But the idea of this option is to preview any dynamic content using real content, so you can get a clear idea of what it will look like on real pages.
We’ll see an example of this a bit later when looking at the single post layer.
Under this is the special effects tab, where you can choose a parallax or sticky footer special effect for the footer if you wish.
The background color for the footer, though, has been added through the container background and the Copyright bar is just a text block element in the column at the bottom of the layout section.
And so, for the theme options are not needed with this new way of building.
OK, so in that way we have added a new footer to the entire site by adding it to this global template.
Back in layouts we can also see several conditional layouts that have been created. The conditions are added at the bottom of the layout. If I mouseover one of these and click manage conditions, the layout conditions open with all possible conditions for when this layout will be used.
Now because this is a blog post layout here. If we go to the posts tab, we can see that the all posts condition has been included.
And so, this layer will be active on all single posts. It’s a simple system where you can include or exclude a condition, but it’s also possible to create complex conditions with this tool.
Here the icon has turned green showing us that we have included the condition all posts in this layer.
If I wanted to, I could further customize the conditions by excluding certain categories or posts or tags etc.
When I exclude a condition, it’s added to the manage conditions column on the right.
Let’s remove that exclusion so the layout shows on all posts.
It won’t, however, be displayed on any pages, portfolio items or FHQ items, etc.
In this way you can create separate custom layouts for many sections of your site based on the custom post types you see down the left-hand column.
What you see here will also depend on what plugins you have installed and therefore what custom post types are registered and available to you.
Now for the layout section has been added to this layout and so the footer will be the custom footer that was added to the global layout as that is global.
If, for example, we wanted a different footer just on posts, we would need to create a new custom layout section for footers and apply it to this layout.
Just to be clear, layout sections can be used on multiple layouts, but specific conditions can only be set on one layout.
As we can say above, the footer layout section, both custom content and custom page title bar layout sections have been added to this layer. If we quickly edit the blog post PTB layout section.
We can say it contains a dynamic title and then you breadcrumb element.
If I now edit the content layout section.
We can see here in the back-end builder, so we have a range of elements that together constitute the content section of the page.
In this case it’s a multi column arrangement with an image and a content element at the top and a column that is acting as a sidebar with some nested columns inside it.
Under this is a column with the comment’s element and below this There’s another column with the related post element.
If I click on add element, we can see here that only found in content layout sections. We have a new tab called layout section elements.
Hey, you can say 9 dynamic elements that full content into the page.
You can of course use all the standard builder design elements in your layout as well, but as mentioned, these layout section elements are only found in content layout sections.
If I go to add one of the new layout section elements to the layout, you can see it has a full range of options relevant to the element.
Also note that you can only use these elements once in a layout section, with the exception of the pagination element.
Before we preview this, let’s also take a look at the layout options. These are the layout section equivalent of the page options and here we can make a range of changes to the layout. Let’s look at them in Avada live to see that interface at work. I’ll just open the layout options and here in the settings tab we can just change page title and slug.
But in the layout section options tab as we mentioned before, we can preview our dynamic content using real site content instead of just dummy content to see what our layout will look like.
So, for this layout, for example, we would view the dynamic content as a post.
And we can even specify which post we’d like to see it as.
The post then reloads with that content, which can greatly help with the design process.
Here’s the content area with our nested column content.
The discussion section and the related post section.
OK, back in the content tab we can control the content area of this page with regards, padding and colors etc.
And if we wanted to assign sidebars to our custom layout, we do that in the next tab sidebars.
To compare this layout, let’s go back to the layout in avada layouts and disconnect the page title bar and content layout sections.
Now if we head to the live post and refresh, we will be loading the Post without a custom layout except the footer which is coming from the global layout.
For one final example, let’s head to the taxi demo and look at a custom 404 layer.
I have removed the conditions which makes this layout show on 404 pages.
And so here we can see what a standard 404 page looks like on that demo but looking at the layout we can see that both the custom page title bar layout section and a custom content layout section have been added to this layer.
Let’s set the conditions again so this page shows on all 404 pages.
And now let’s go back and refresh our 404 page.
There that looks a bit more interesting. Here we can see a rotating title effect and a link back to the home page in the page title bar layout section, as well as a full content section with custom content.
If we return to the layout conditions dialog, you can see that there are a huge range of conditions possible for a layout and that you can set exclusion conditions as well as adding conditions.
On the left of the custom post types on this install and selecting each tab will show the available conditions in the middle column.
Selected conditions are then shown in the right column, so you can quickly see what the conditions the layout has.
One thing to note here is that conditions can only be used by one layer.
As I already have an Old Post’s condition, if I try to add that condition to this layout, I get a message that it has already been assigned to another layer and that I can either cancel my request or I can set it here, which automatically removes it from the other layer.
Obviously, I’m not going to set a condition of all posts to a 404 layer, so I’ll cancel out here, but the principle is the same.
You can use layout sections on multiple layouts, but you can only include layout conditions once or the conditional logic just wouldn’t work.
There are many more possible examples for both layouts and the conditions you can apply to them, but hopefully you get the idea that there are almost no limitations for what you can do with this amazing tool.
OK, this concludes our video on getting started with about a layout.
Make sure you subscribe to our YouTube channel to keep up with all the latest videos and if you have any questions or need assistance, please create a support ticket and our team will gladly assist you.
As always, we want to thank you for choosing Avada.