標籤： layouts

Introducing Avada Layouts

With the addition of a Header Builder, and the Avada WooCommerce Builder in Avada 7 and 7.2 respectively, Avada Layouts (formerly Avada Theme Builder) is now fully operational and firing on all cylinders, allowing you to create fully customized Layouts (templates) for all sections of your website, including both Global and Conditional Layouts. This much-requested, and game-changing feature, can now 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.,OverviewLayouts & Layouts Sections
Understanding Conditional Layouts

Creating Layout Section Content

Design Elements vs Layout Section Elements

Conclusion,Layouts and Layout SectionsTo 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. Together, you can consider them a template for how the page layout should look.
A layout is comprised of content coming from four layout sections: a Header Section, a Page Title Bar Section, a Content Section, and a Footer Section. This is how Avada is constructed, and normally, you set the content of the Layout Sections through the Options and the pages you build.
What Layouts allow 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 Avada 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 you can override any Layout Section with your own custom layout sections and create conditions for when those Layouts are used.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Understanding Conditional LayoutsApart 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 multiple conditions and exclusions on all custom post types. Layout Conditions are as simple or as complex as you need them to be, 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.,Creating Layout Section ContentOne you have created a Layout and set conditions for when it will be used, you can create new or add any existing 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 Avada Builder (back end or front end interface, your choice entirely) using the full range of Avada Builder Elements at your disposal. You can use multiple Containers and Columns and Elements – in fact, anything you can build in Avada 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, shown in the back end interface of Avada Builder. Below that is the 404 page (minus the footer) as seen on the front end.,Design Elements vs Layout Section ElementsWith Footer and Page Title Bar Layout Sections, you will find the full range of Design 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.,ConclusionAvada Layouts is a real game changer when it comes to flexibility of design. Now you can create fully custom Layouts for any area of your website, using the full design power of Avada Builder, and additionally, using the power of conditional layouts, use them wherever you want. This gives you unparalleled power to create exactly the website you want.

How To Build A Custom Page Title Bar Layout

As part of Avada Layouts, you can now create fully customized Page Title Bar Layout Sections to add to any Layout you wish on your Avada website, using the full design power of the Avada Builder. This flexible, practical area sits between the header and the page content, and now, Avada Layouts, it can show whatever content you like, wherever you like.
Read on to learn how to build a Custom Page Title Bar in Avada Layouts, and watch the video for a visual overview.,Overview
The Avada Layouts Interface

Creating A Custom Layout

Creating Custom Layout Sections

Editing A Custom Layout Section
Setting Conditions For The LayoutExample Of The Layout
Conclusion,The Avada Layouts InterfaceYou find Avada Layouts at Avada > Layouts, directly from the WordPress Sidebar, or from Layouts on the Avada Dashboard. This interface is where you both create and manage your Layouts and Layout Sections. Initially, there is just a Global Layout, and by default this is empty, with no attached Layout Sections, as you can see below.
When creating a Custom Page Title Bar Layout, the first thing to do is to decide where it will be shown. You could add a Page Title Bar Layout Section to the Global Layout, thereby showing you Custom Page Title Bar on all pages of the site, or you could create a Conditional Layout and decide where the Page Title Bar will be used.
You can use a Custom Page Title Bar Layout Section on multiple Layouts, or you can create unique Layout Sections for each Layout you create. The flexibility and choice is massive. For example, see the Restaurant or Takeout Prebuilt Website for examples of sites that use multiple Layouts and Page Title Bar Layout Sections.
See the Introducing Avada Layouts doc for a general overview of this awesome tool, and Understanding Layouts and Layout Sections for more information on the difference between these two parts of Avada Layouts, but for our purposes, let』s now look at creating a Conditional Layout to display the Page Title Bar Layout Section on just one section of the site. For this example, I』ll create a Single Post Layout.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Creating A Custom LayoutThe first step in creating our Custom Page Title Bar Layout then, is to create the actual conditional layout that the Page Title Bar Layout Section will be placed. For this example, we are going to add a Custom Page Title Bar Layout Section to a Conditional Single Post Layout. Creating the Layout is done on the Layouts page, by simply adding a name in the Layout Builder (in this case, perhaps Single Post would be most appropriate) and then clicking on Create New Layout.,Creating Custom Layout SectionsThe page reloads and the layout is added to Avada Layouts. At this point is has no conditions set, and no Custom Layout Sections added. Now we have the Layout, we can begin to create any Layout Sections that we will add to it. In this example, we will add a Page Title Bar Layout Section.
You can create a Custom Layout Section for a Page Title Bar in one of two ways. You can head to the Layout Section Builder at Layouts > Layout Section Builder from the Avada Dashboard, and create one from there, as seen below.
Alternatively, you can create one by clicking on the corresponding Layout Section in the existing Layout, and create one from there. The first method just creates a Layout Section, while the second method attaches it to a Layout at the same time.
There』s no wrong way to do this, but I generally prefer the second method, and so to create and add my Page Title Bar Layout Section, I would click on the Select Page Title Bar section of the Single Post Layout, and in the following dialog, under the New Section tab, I would give it a name (Single Post PTB would be appropriate) and click on Create New Section.
This creates and connects the Layout Section to the Layout, but at this point, it is still empty. If we mouse over the Layout Section on the Layout, as shown below, we can click on the edit icon to design and build our Layout Section.,Editing a Custom Layout SectionNow we come to the Avada Builder, and here we can create our Custom Layout Sections. You can do this in either Avada Builder or Avada Live. Please refer to Creating Layout Section Content for more information on this, but in short, you can build anything you want here.
Anything you can build in the Avada Builder can constitute the content of your Custom Page Title Bar Layout Section. You can have multiple columns, background images, dynamic data… anything. The freedom this gives is enormous. The Layout Section is literally that – a section where can create the Layout. The content itself comes from the Builder, and what you can do is only limited by your imagination.
The example below is relatively simple, despite how it looks. It basically just shows a date and a Title. For more information on how this specific Page Title Bar was constructed, please watch the video at the top of the page.,Setting Conditions For The LayoutWith a Conditional Layout, the last thing you need to do is to set the conditions of the layout. This is best done last, because as soon as you set the conditions, the layout is active, and if you do this after creating the Layout Sections, but before editing them, the pages displayed that fit the conditions would be empty in those sections.
To add a condition, or conditions, simply mouse over the bottom of the Layout, and choose Add A Condition. This brings up the Layout Conditions Dialog, as seen below. Please see Understanding Conditional Layouts for more information on Conditional Layouts, but for this example, as we want this layout to display on Single Posts, we just need to go to Posts and select the All Posts condition.,Example Of A LayoutAs an example, see below the Single Post Layout, and specifically, the Page Title Bar Layout Section, created for the Restaurant Prebuilt Website, below. See the live version of this layout here.,ConclusionWith Avada Layouts, creating any number of Layouts with Custom Page Title Bars is not only now a reality, but rather, an unlimited possibility. You can use the power of Avada Builder to create almost any Page Title Bar you can conceive of, and have it display wherever you want.
Avada Layouts is a game changer in the true sense of the word. It enables such freedom of design, and gives such flexibility in deployment, that building your website layout will simply never be the same again.

The Four Types Of Layout Sections

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.,Overview
Header Layout Section

Page Title Bar Layout Section
Content Layout Section
Footer Layout Section,Header Layout SectionThe content of the Header Layout section can be anything that you can build in the Avada Builder. You have access to the full range of Design Elements, and you can build the Layout Section in either the Back-end or Front-end interface of the Builder.
Most commonly though, you would use the Menu Element, the Image Element to place your Logo, and perhaps some other Elements for design, such as the Social Icons, Separator, Title, Text Block, or the Breadcrumbs Element. Plus perhaps some background color or effects on the container etc. It』s completely up to your imagination and requirements. With the Header Builder, you can create all manner of Headers, from basic to advanced.
In the Header Layout section, you do NOT have access to the Layout Section Elements that are found in Content Layout Sections, as they are specific to content areas. But apart from that, you can build whatever your imagination can design. You can also import pre-made Header Layouts from the Library tab when editing Header Layout Sections.
See below for the new Pet Supplies Prebuilt Website Custom Header Layout Section, as shown in the back-end of the Builder.
See Also: How To Build A Custom HeaderSee below for what this Header Layout looks like on the front end!
With Avada Layouts, and the Header Layout Section, there are now no impediments to creating completely custom Headers for your entire site, or even conditionally, for just some custom post types, categories or even single pages.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Page Title Bar Layout SectionWith the Page Title Bar Layout section, you can create custom Page Title Bars for any section of your website. All the Design Elements are at your disposal. In this example from the Taxi Demo below, there is a container with a dynamic title, and an instance of the new Breadcrumbs Element. The container itself has a background image and a gradient, that together, blend the Page Title Bar into the header above it. Simple, yet very effective.
See Also: How To Build A Custom Page Title Bar Layout,Content Layout SectionThe Content Layout Section is obviously the most flexible section of your website when it comes to content. This area is the main content section of the page, and can be static content generated by the Design Elements in Avada Builder, dynamic content generated by the special Layout Elements found only in the Content Layout Sections, or a combination of both.
This Layout Section can be used to generate the content section of a page, a single post, a portfolio item, a WooCommerce single product page, a custom search results page, or even a 404 error page. And these are just a few examples of how it could be used.
Let』s look at the Elements available with this Layout Section, and an example of what can be done.
Layout ElementsAs described in the Avada Design Elements vs. Layout Elements doc, these Elements pull dynamic content from archives, posts, products, portfolios and more.
As of Avada 7.3, there are now 21 Layout Elements to use, to cover the range of dynamic content that you might want to enter into a content section.
Read About the Full Range Of Layout Elements here!There are then the complete range of Design Elements for use as well, making this Layout Section the one with the most diverse possibilities, as it can be used for many situations.
Below is an example of a Content Layout Section, designed to show Single Blog Posts. There are four separate Containers for the Content area, the Discussion Area, and the Related Posts section, and at the bottom is also a Global Container, which is a very useful way to add global content to your posts.
See Also: How To Build A Custom Single Post LayoutAnd here, on the front end, you can clearly see the four separate sections of the page.,Footer Layout SectionThe content of the Footer Layout section can be anything that you can build in the Avada Builder. You have access to the full range of Design Elements, and you can build you layout Section in either the Back-end or Front-end interface of the Builder.
In the Footer Layout section, you do NOT have access to the Layout Section Elements that are found in Content Layout Sections, as they are specific to content areas. But apart from that, you can build whatever your imagination can design.
See below for the Taxi Prebuilt Website Custom Footer Layout Section, as shown in the back-end of the Builder.
See Also: How To Build A Custom FooterSee below for what this Footer layout looks like on the front end! Note how the Copyright Bar is created with a Code Block Element in the bottom column of the Footer Layout, rather than through the Global Options. The background image, as well, is a background image of the layout section container.
With Avada Layouts, and the Footer Layout Section, there are now no impediments to creating completely custom Footers for your entire site, or even conditionally, for just some custom post types, categories or even single pages.

How To Build A Custom Portfolio Post Layout

As part of Avada Layouts, you can now create fully Custom Portfolio Post Layouts on your Avada website, using the full design power of the Avada Builder. The changes you make to a Portfolio Post Layout could be as little as adding a Custom Page Title Bar section, or it might be a reworked Header, Content Section, or Footer, or any combination of the four.
Read on to learn how to build a Custom Portfolio Post Layout in Avada, and watch the video for a visual overview. (Just note, the video was made when Avada Layouts was called the Avada Theme Builder. Otherwise, it』s pretty much all the same.),Overview
The Avada Layouts Interface

Creating A Custom Layout

Creating Custom Layout Sections

Editing A Custom Layout Section

Adding Other Layout Sections
Setting Conditions For The LayoutExample Of The Layout
Conclusion,The Avada Layouts InterfaceYou find Avada Layouts at Avada > Layouts. This interface is where you both create and manage your Layouts and Layout Sections in Avada. Initially, there is just a Global Layout, and by default this is empty, with no attached Layout Sections, as you can see below.
A Custom Portfolio Post Layout is a Conditional Layout that only shows on Single Portfolio Pages. So the first step is to create a Layout, and then decide which Layout Sections we want to customize on our Single Portfolio Posts…
See the Introducing Avada Layouts doc for a general overview of the Avada Layouts, and Understanding Layout and Layout Sections for more information on the difference between these two component parts.,Creating A Custom LayoutFor this document, I』m going to recreate the Single Portfolio Layout as created on the Restaurant Demo, and seen in the video above.
Creating the Layout is done on the Layout Builder page, by simply adding a name (in this case, perhaps Single Portfolio would be most appropriate) and then clicking on Create New Layout, as can be seen below.,Creating Custom Layout SectionsThe page reloads and the new layout is added to the Layout Builder. At this point is has no conditions set, and no Custom Layout Sections added. Now we have the Layout, we can begin to create any Layout Sections that we will add to it. In this example, we will add a Page Title Bar Layout Section, a Content Layout Section, and a Footer Layout Section.
You can create Custom Layout Sections in one of two ways. You can head to the Layout Section Builder link at Layouts > Layout Section Builder from the Avada Dashboard, and create one from there, as seen below.
Alternatively, you can create one by clicking on the corresponding Layout Section in the existing Layout, and create one from there. The first method just creates a Layout Section, while the second method attaches it to a Layout at the same time.
To use the second method, I would click on the Select Page Title Bar section of the Single Post Layout, and in the following dialog, under the New Section tab, I would give it a name (Single Portfolio PTB would be appropriate) and click on Create New Section.
This creates and connects the Layout Section to the Layout, but at this point, it is still empty. If we mouse over the Layout Section on the Layout, as shown below, we can then click on the edit icon to design and build our Layout Section.,Editing a Custom Layout SectionNow we come to the Avada Builder, and here we can create our Custom Layout Sections. You can do this in either Avada Builder or Avada Live. Please refer to Creating Layout Section Content for more information on this, but in short, you can build anything you want here.
Anything you can build in the Avada Builder can constitute the content of your Layout Sections. You can have multiple columns, background images, dynamic data… anything. The freedom this gives is enormous. The Layout Section is literally that – a section where can create the Layout. The content itself comes from the Builder, and what you can do is only limited by your imagination.
The example below is relatively simple. The end result shows a Title, a dynamic Title below this that pulls the Portfolio Category Term, and the container itself has a background gradient and dynamic featured image, as well as a couple of Separators for control over various screen sizes. For more information on how this specific Page Title Bar was constructed, please watch the video at the top of the page.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Adding Other Layout SectionsFor this example, we also want to add another two Layout Sections, a Content Layout Section and a Footer Layout Section. We go about this in the same way as we did with the Page Title Bar Layout Section.
First, we create the Layout Section, and then we edit it. With the Content Layout Section, the Layout Section Elements become available. See the Avada Design Elements vs. Layout Section Elements doc and the How To Use The Layout Section Elements Video for more info on these special Elements.
For the Restaurant Demo Content Layout Section, just the Content Element was used, as well as an Image Element with dynamic content. See the Content Layout Section below.
For the Footer Layout Section, just a few columns with some icons were added to the standard footer. See this Layout Section below.,Setting Conditions For The LayoutWith any Conditional Layout, the last thing you need to do is to set the conditions of the layout. This is best done last, because as soon as you set the conditions, the layout is active, and if you do this after creating the Layout Sections, but before editing them, the pages displayed that fit the conditions would be empty in those sections.
To add a condition, or conditions, simply mouse over the bottom of the Layout, and choose Add A Condition. This brings up the Layout Conditions Dialog, as seen below. Please see Understanding Conditional Layouts for more information on Conditional Layouts, but for this example, as we want this layout to display on Single Portfolio Posts, we just need to go to Portfolio and select the All Portfolio condition.,Example Of  The LayoutSee below for a front end example of a full single Portfolio post from the Restaurant Prebuilt Website, showing all three Layout Sections that were added. First is the Custom Page Title Bar Layout Section, then the Content Layout Section, and finally the Footer Layout Section. See this portfolio post on the Restaurant website for a live example of this Layout.,ConclusionWith Avada Layouts, creating a custom Layout for your Single Portfolio Posts is not only now a reality, but rather, an unlimited possibility. You can use the power of the Avada Builder to create almost any Layout you can concieve of, and with the power of Conditional Layouts, have it display on all portfolio posts, a specific category, or even just a single item.
Avda Layouts is a game changer in the true sense of the word. It enables such freedom of design, and gives such flexibility in deployment, that building your website layout will simply never be the same again.

The Layout Builder

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 LayoutsAt 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.,Managing Your LayoutsAs 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.

How To Build A Custom Search Results Layout

As part of Avada Layouts, you can now create a fully Custom Search Results Layout on your Avada website, using the full design power of Avada Builder. The changes you make to the Custom Search Results Layout could be as little as adding a Custom Page Title Bar section, or it might be a reworked Content Section (where the Search Results show), or Footer, or any combination of the three.
Read on to learn how to build a Custom Search Results Layout in Avada Layouts, and watch the video for a visual overview.,Overview
The Avada Layouts Interface

Creating A Custom Layout

Creating Custom Layout Sections

Editing A Custom Layout Section

Adding Another Layout Section
Setting Conditions For The LayoutExample Of The Layout
Conclusion,The Avada Layouts InterfaceYou find Avada Layouts at Avada > Layouts. This interface is where you both create and manage your Layouts and Layout Sections in Avada. Initially, there is just a Global Layout, and by default this is empty, with no attached Layout Sections, as you can see below.
A Custom Search Results Layout is a Conditional Layout that only shows on Search Results Pages. So the first step is to create a Layout, and then decide which Layout Sections we want to customize on our Search Results page.
See the Introducing Avada Layouts doc for a general overview, and Understanding Layout and Layout Sections for more information on the difference between these two parts of Avada Layouts.,Creating A Custom LayoutFor this document, I』m going to recreate the Search Results Layout as created on the Podcasts Demo, and seen in the video above.
Creating the Layout is done on the Layouts page, by simply adding a name (in this case, perhaps Custom Search Results would be most appropriate) and then clicking on Create New Layout, as can be seen below.,Creating Custom Layout SectionsThe page reloads and the layout is added to Avada Layouts. At this point is has no conditions set, and no Custom Layout Sections added. Now we have the Layout, we can begin to create any Layout Sections that we will add to it. In this example, we will add a Page Title Bar Layout Section, and a Content Layout Section.
You can create Custom Layout Sections in one of two ways. You can head to the Layout Section Builder page and create one from there, as seen below.
Alternatively, you can create one by clicking on the corresponding Layout Section in the existing Layout, and create one from there. The first method just creates a Layout Section, while the second method attaches it to a Layout at the same time.
There』s no wrong way to do this, but I prefer the second method, and so to create and add my Page Title Bar Layout Section, I would click on the Select Page Title Bar section of the Single Post Layout, and in the following dialog, under the New Section tab, I would give it a name (Search Results PTB would be appropriate) and click on Create New Section.
This creates and connects the Layout Section to the Layout, but at this point, it is still empty. If we mouse over the Layout Section on the Layout, as shown below, we can click on the edit icon to design and build our Layout Section.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Editing a Custom Layout SectionNow we come to Avada Builder, and here we can create our Custom Layout Sections. You can do this in either Avada Builder or Avada Live. Please refer to Creating Layout Section Content for more information on this, but in short, you can build anything you want here.
Anything you can build in the Avada Builder can constitute the content of your Custom Page Title Bar Layout Section. You can have multiple columns, background images, dynamic data… anything. The freedom this gives is enormous. The Layout Section is literally that – a section where can create the Layout. The content itself comes from the Builder, and what you can do is only limited by your imagination.
The example below is the Custom Page Title Bar Section created for the Search Results Layout in the Podcasts demo. The container itself has a background color, and in the container there are several elements. At the top is a Title with dynamic content – in this case it is a Request Parameter, which displays what you have searched for. This is followed by the Search Element below. For more information on how this specific Page Title Bar was constructed, please watch the video at the top of the page.,Adding Another Layout SectionFor this example, we also want to add another Layout Section, the Content Layout Section. This will show the actual search results, and any other content we might add in the content section of the Search Results Layout. We go about it the same way as we did with the Page Title Bar Layout Section.
First, we create the Layout Section, and then we edit it. With the Content Layout Section, the Layout Section Elements become available. See the Avada Design Elements vs. Layout Section Elements doc and the How To Use The Layout Section Elements Video for more info on these special Elements.
For the Podcasts Prebuilt Website Content Layout Section, the Archives Layout Section Element was used to display the Search Results, and under that two columns added that link to various section of the demo.. See the Content Layout Section below. Again, for more information on this Layout Section, watch the video at the top of the page.,Setting Conditions For The LayoutWith a Conditional Layout, the last thing you need to do is to set the conditions of the layout. This is best done last, because as soon as you set the conditions, the layout is active, and if you do this after creating the Layout Sections, but before editing them, the pages displayed that fit the conditions would be empty in those sections.
To add a condition, or conditions, simply mouse over the bottom of the Layout, and choose Add A Condition. This brings up the Layout Conditions Dialog, as seen below. Please see Understanding Conditional Layouts for more information on Conditional Layouts, but for this example, as we want this layout to display on the Search Results pages, we just need to go to Other and and select the Search Results condition.,Example Of The LayoutSee below for the front end example of the two Layout Sections on the Custom Search Results page on the Podcasts Prebuilt Website. First is the Custom Page Title Bar Layout Section, and below that, the Content Layout Section. See this search on the Podcasts Prebuilt Website for a live example of this Layout.,ConclusionWith Avada Layouts, creating a custom Search Results Layout is not only now a reality, but rather, an unlimited possibility. You can use the power of Avada Builder to create almost any Layout you can concieve of.
Avada Layouts is a game changer in the true sense of the word. It enables such freedom of design, and gives such flexibility in deployment, that building your website layout will simply never be the same again.

The Layout Section Builder

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…,Creating New Layout SectionsAt the top of the Layout Section page are two sections. The first outlines the process of using the Layout Sections in Layouts (Hint: you can close this with the X), and on the right hand side is an area, from where you can directly create different types of Layout Sections. From the drop down box, choose your Layout Section type (i.e. Header, Page Title Bar, Content or Footer) and then give it a name in the field to the right of this. Then click on Create New Layout Section.
Using this method simply creates a Layout Section, and allows you to edit it. It does not assign it to any specific Layout. This would be particularly useful when assigning Layout Sections to Global Layouts, as they are live as soon as they are added, and at this point, they are still empty. Remember you can use your Layout Sections on Multiple Layouts if needed.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Managing Your Layouts SectionsAt the bottom of the page, existing Layout Sections are listed. As you can see in the screenshot below, this area has a very similar layout and functionality to the Avada Builder Library.
Along the top, you can see a summary of your Layout Sections, and what type they are. You can also see this individually on each Layout Section from the colored label in the right column.
When you mouse over a Layout Section, there are a range of options available. Edit is the first one, and this will open it in the back-end interface of the Avada Builder. Next to this is Clone, which just duplicates the Layout Section in the Layout Sections List. Avada Live is the next link, and this will open the Layout Section for editing in Avada Live. Finally, you can delete your Layout Section with the Trash link. This adds it to the Trash, but does not permanently delete it.
OK, that』s it. To allocate your Layout Sections to specific Layouts, return to the Layouts page, from where you can create and manage your Layouts. If you still need some clarification on the differences between Layouts and Layouts Sections, please follow the link to that doc.