Author 詩語

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.
Dynamic Content In Avada LiveWhen 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.

As part of Avada Layouts, you can create fully Custom Archives Layouts on your Avada website, using the full design power of the Avada Builder. The changes you make to a Custom Archives Layout could be as little as adding a Custom Page Title Bar section, or it might be a reworked Content Section, or Header or Footer, or any combination of the above.
Read on to learn how to build a Custom Archives Layout in Avada, 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 Other Layout Sections
Setting Conditions For The LayoutExample Of The Layout
Conclusion,The Avada Layouts InterfaceYou can find Avada layouts at Avada > Layouts. This interface is where you both create and manage your Layouts and assign 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 Archives Layout is a Conditional Layout that only shows on Archives Pages. So the first step is to create a Layout, and then decide which Layout Sections you want to customize on your Custom Archives Layout, and finally, set the conditions in which the layout is used…
See the Introducing Avada Layouts doc for a general overview of Avada Layouts, and Understanding Layout and Layout Sections for more information on the difference between Layouts and Layout Sections.,Creating A Custom LayoutFor this document, I』m going to recreate the Custom Archives Layout as created on the Restaurant Demo, and as seen in the video above.
Creating the Layout is done on the Layout Builder page, by simply adding a name (in this case, we will call it Archives) and then clicking on Create New Layout, as can be seen below.,Creating Custom Layout SectionsThe page reloads and the layout is added to the 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 just add a Page Title Bar Layout Section.
You can create Custom Layout Sections in one of two ways. You can head to the Layout Section builder page (Avada Dashboard > Layouts > Layout Section Builder) 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, it just depends on your preferences. As you can see in the screenshot below, to create and add the Page Title Bar Layout Section using the second method, you would click on the Select Page Title Bar section of the Single Post Layout, and in the following dialog, under the New Section tab, give it a name (Archives PTB) 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,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,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 Page Title Bar Layout Section example below could hardly be simpler. The end result just shows a dynamic Title that pulls the Archives Page name, and the container itself has a background gradient and a background 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.,Adding Other Layout SectionsIf we wanted to, we could, of course, add further Layout Sections to this Layout. For example, we could add a Content Layout section to redesign the content section, using a combination of Design Elements and Layout Section Elements, such as the Archives Element, or a Custom Footer Section.
Without a Custom Content Layout Section, the layout of the actual Archives Content is coming from their respective options in the Global Options. For Blog posts, there is the Blog Archive Layout Option, found under the Options > General Blog page, and for Portfolio Posts, the Portfolio Archive Layout Option, found under the Options > General Portfolio page.,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 All Archives, we just need to go to Archives and select the All Archives Pages condition.,Example Of  The LayoutSee below for a front end example of an Archives page (Blog category) from the Restaurant Prebuilt Website, showing the Custom Page Title Bar Layout Section that was added to the layout. Here, you can see a live example of this Layout.,ConclusionWith Avada Layouts, creating a custom Layout for your Archives pages 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, and with the power of Conditional Layouts, have it display on all archives, or just specific ones.
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.

As part of Avada Layouts, you can now create fully customized Footers for your website, using the full design power of Avada Builder. These footers can be global, or they can be conditional; i.e. just on certain pages, categories, custom post types etc. Read on to learn how to build Footer Layouts in Avada, and watch the video for a visual overview.,Overview
The Avada Layouts Interface

Creating A Custom Layout

Creating A Custom Layout Section

Editing A Custom Layout Section

Creating A Conditional Layout
Conclusion,The Avada Layouts InterfaceA Footer Layout is, technically, a Layout Section that you add to a Layout. So, when making a Custom Footer, you need to create a Footer Layout Section, which you can add to either the Global Layout or a Custom Layout. See the Introducing Avada Layouts doc for a general overview of this amazing tool, and Understanding Layout and Layout Sections to understand the difference between these two parts of Avada Layouts, but for now, let』s now look at creating a Custom Footer Layout Section.
You can find Avada Layouts at Avada > Layouts, from the WordPress sidebar, or from the Avada Dashboard. 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 can be seen below.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Creating A Custom LayoutYou can add a Footer Layout Section to the Global Layout, or to a Conditional Layout, set to only show on specific custom post types, or evben single pages etc. The Global Layout is already there by default, but for a Conditional Layout, we have to first create a Layout.
Creating a Layout is done on the Layouts page, by simply adding an appropriate name and then clicking on Create New Layout, as can be seen below.,Creating A Custom Layout SectionIf you already have a Layout you want to add a Custom Footer Layout Section to, or you want to add it to the Global Layout, then you can go ahead and create a Footer Layout Section.
You can do this on the Layout Section Builder page, by simply choosing the type of Layout Section, and then adding a name (in this case, Footer, and perhaps a name of Global Footer might be most appropriate) and then clicking on Create New Layout Section, as can be seen below.
Alternatively, you can create a Layout Section directly from the Layout you wish to add it to, as can be seen below. For a Layout Section to appear on your site, it has to be added to a Layout. And as mentioned, there is initially only a Global Layout. So, if you wanted to create a Global Custom Footer, you would just add it to this Layout. But if you wanted a conditional Custom Footer, you would need to create a new Layout, assign a Custom Footer Layout Section to it, and then add conditions to it to get the Layout to display according to those conditions.
There』s no wrong way to do this, but it』s important to think of the circumstances. If the layout is already active (i.e. it has conditions or is the Global Layout) then any Layout Section added would also be immediately active, and at this point would still be empty. So in the example of adding a Custom Footer to a Global Layout, it would make more sense to add it via the Layout Section Builder page first, and build it before adding it to the Global Layout.
Alternatively, if we were adding a Footer Layout Section to A Conditional Layout, then we could add it in this way, and then build it. Conditional Layouts are not in use until there are conditions added. If we mouse over the Footer 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 SectionWhen you first edit a new Layout Section, you come to the default WordPress Editor. From here, you can choose to use Avada Builder, or Avada Live. It is here we create our Custom Layout Sections. 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 Footer. You can have multiple columns, background images, anything. The freedom this gives is enormous. The Layout Section is literally that – a section where the footer content will show. The content itself comes from the Builder, and what you can do is only limited by your imagination.
As an example, see below the initial footer created for the Taxi Demo. This was created using the traditional method of customizing the theme options and the footer widgets.
Now look at the Custom Global Footer created, using Avada Layouts.
IMPORTANT NOTE: It』s important to note that when you have a Footer Layout Section attached to a Global Layout, the Footer Options in the Theme Options will not be available. Everything in the footer is controlled in the Layout Section by the content options and the Layout Section Options, the equivalent of the Page Options in Layout Sections.,Creating A Conditional LayoutWith a Global Layout, there are no Conditions. This is because it』s global and any Layout Sections added to it will be used on every page. If, however, you wanted a Custom Footer just on some pages of your site, for example, single Blog posts, you』d need to add the Footer Layout Section to a Conditional Layout.
If you want to add an existing Layout Section to a Conditional Layout, you need to create the Layout first. Then, you can simply click on the Select Footer tab of the Layout, and navigate to Existing, from where you can add the Layout Section, as seen below.
With any Conditional Layout, you need 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 first creating the Layout Section, but before editing it, 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, if we wanted a Custom Footer on just the single blog posts, we would select All Posts in the Posts Conditions tab, as shown below.,ConclusionWith Avada Layouts, creating a Custom Footer is not only now a reality, but rather, an unlimited possibility. Not only can you use the power of Avada Builder to create almost any Footer you can conceive of, but thanks to the power of Conditional Layouts, you can also show, or hide, the Footer on any page, category, custom post type, or any combination of conditions you can think 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 Footers will simply never be the same again.

When creating Headers with the new Header Builder in Avada Layouts, one thing that might not appear obvious is how to make the Header transparent (or semi-transparent). It』s actually quite simple. Keep reading below to look at a few scenarios using the Online Tutor Prebuilt Website, and how to achieve them, and watch the video for a visual overview.,OverviewFully Transparent Header Container
Transparent Sticky HeaderSemi Transparent Header With Gradient,Fully Transparent Header ContainerIn this scenario, we』re going to recreate the Header of the Online Tutor Prebuilt Website in Avada Layouts. As you can see below, the site header has two containers; the orange top bar, with contact information and social links, and the second container with the logo and the menu. It is this second container we want to be transparent, so that the background image of the top page content container moves up underneath the header.
OK, so I』ve started by creating the Header Layout Section. As you can see in the Wireframe view, there are two containers, with two Elements in each.

Step 1. In your Header Layouts Section, set the transparency of the second Header Layout Section Container to full transparency, by setting the alpha channel to zero in the Background > Color > Container Background Color option, as seen below.

Step 2. Go to the Extras tab of the second Header Layout Section Container, and turn the Position Absolute option to On, as seen below. That』s it. As the top Container in the page content has a background image, then this content will slide in under the now transparent header.
OK, here』s our site with the new Header Layout Section activated. Identical to the original site.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Transparent Sticky HeaderYou can also enable any level of transparency for sticky headers, either independently, or in conjunction with the above initial Header.

Step 1. In the Extras tab of the second Header Layout Section Container, set the Position Sticky option to On. Two options under this, you will see the Sticky Container Background Color option. Set this to be transparent (or semi-transparent). In our case we will make it White, at 90% – rgba(255,255,255,0.9). That』s it. Remember to save the Header Layout Section.

On the front end, as you scroll, the top bar disappears, but the second header container becomes sticky, and semi-transparent, with the content sliding in behind it as you scroll.,Semi Transparent Header With GradientYou might also want something a bit more complex. You can also apply any level of transparency to your Header Container Background, or as in the example here, set a gradient background with varying levels of opacity.

Step 1. To start, set the Header Container Background to Gradient. In the example below, the top gradient has been set to white at 94% opacity, and the bottom gradient has been set to fully transparent, as seen below.

Step 2. Again, in the Extras tab, the Position Absolute option has been turned to On.
As a result, the second container in the header has an almost solid white at the top of the header, quickly graduating to fully transparent. You can adjust where the opacity starts and ends, and how smoothly it graduates, with the Gradient Start and End Position.
OK, that』s it. There are many ways you can use transparency in your Header Layouts, but this should give you the tools to achieve pretty much any header effect you are thinking of.

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.