Other Layouts – Avada Website Builder https://avada.com For WordPress & WooCommerce Tue, 29 Oct 2024 21:01:06 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 How To Create A Single Event Layout Section in Avada https://avada.com/documentation/how-to-create-a-single-event-layout-section-in-avada/ Wed, 11 Sep 2024 20:46:20 +0000 https://avada.com/?post_type=documentation&p=894881

If you’re a user of The Events Calendar, with Avada 7.11.10 and up you can create Single Event Layout sections using Avada Layouts and a range of Events Calendar dynamic content items. Read on for more details of this, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

Creating The Layout

A Layout section is just part of a Layout, so the first thing to do is to create a Layout for your Single Event Pages. You can assign any of the four possible layout sections to it, but generally, it’s only the Content Layout Section you need. For the Layout Conditions, just assign All Events to the Layout, as seen below.

Event Single Layout

Adding Dynamic Content To The Content Layout Section

For the Content Layout Section, you have all the freedom and flexibility you need. By utilising the Events Calendar Dynamic Content items to populate your Layout, you can design your Single Event pages any way you want. You could of course, also add Dynamic Content to a Page Title Bar Layout Section, but for this example, we are just looking at the Content Layout Section.

In the example below, from the Campaign EventSingle Page Layout, you can see every item of dynamic content in the Single Event Content Layout Section, coming from regular dynamic content items (Title), dynamic elements (Content Element & Post Card Element) and the Events Calendar dynamic content items.

Breakdown of single event content layout section

Events Calendar Dynamic Content Items

Listed below are the standard Events Calendar Dynamic Content items you will find in Elements such as the Text Block Element. Below this, there are also a few extra ones that require specific plugins to be enabled.

  • Event Date
  • Event Cost
  • Event Status
  • Event Website
  • Event Subscribe Link

  • Event Venue Name

  • Event Venue URL

  • Event Venue Post Content

  • Event Venue Address

  • Event Venue City
  • Event Venue Country

  • Event Venue State / Province

  • Event Venue Postal Code

  • Event Venue Phone

  • Event Venue Website

  • Event Venue Google Maps Link

  • Event Venue Full Address

  • Event Organizer Name

  • Event Organizer URL

  • Event Organizer Post Content

  • Event Organizer Phone

  • Event Organizer Email

  • Event Organizer Website

  • Main Events Page URL

  • Event Series Name
  • Event Series URL
  • Event Venue Address Latitude
  • Event Venue Address Longitude
  • These require The Events Calendar Pro plugin

  • Event Ticket Capacity
  • Event Ticket Availability
  • These require Event Tickets plugin

]]>
How To Build A Custom Archives Layout https://avada.com/documentation/how-to-build-a-custom-archives-layout/ Mon, 13 Apr 2020 19:49:20 +0000 https://theme-fusion.com/?post_type=documentation&p=725160

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, 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.

For privacy reasons YouTube needs your permission to be loaded.

The Avada Layouts Interface

You 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.

Avada Layout Builder

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 Layout

For this document, we will recreate the Custom Archives Layout from the Avada Restaurant prebuilt website, 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.

Layout Builder > Create New Layout

Creating Custom Layout Sections

The 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.

Layout Section Builder

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.

Adding a New Page Title Bar Layout Section To A Layout

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 Layout Sections

Editing a Custom Layout Section

Now 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.

Restaurant Single Archives Layout Page Title Bar

Adding Other Layout Sections

If 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 Layout

With 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.

Setting Archive Conditions

Example Of  The Layout

See 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.

Restaurant cal Page

Conclusion

With 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.

]]>
Creating Custom Portfolio Layouts with Avada Layouts https://avada.com/documentation/creating-custom-portfolio-layouts-with-avada-layouts/ Mon, 13 Apr 2020 02:42:44 +0000 https://theme-fusion.com/?post_type=documentation&p=725162

With Avada Layouts, you can easily create fully customized Portfolio Layouts for your Avada website, using the full design power of the Avada Builder. The two Portfolio related areas you can create custom Layouts for are the Single Portfolio Page, and the Archives page. 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.

With the help of Layout Elements, and with the help of Dynamic Content within normal Design Elements, you can build virtually any layout you can think of, using the full power of the Avada Builder. And using the power of Conditional Layouts, you can specify exactly when and where your Layout will be used. You could make a Custom Layout for ALL single portfolio pages, just for a single portfolio post, or category etc, or you could also just exclude a single post of category. The Conditions can be as simple or as complex as you need them to be.

The Avada Layouts Interface

You 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.

Avada Layout Builder

Technically, 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 you want to customize for your 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 Layout

For 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.

Layout Builder > Create New Layout

Creating Custom Layout Sections

The 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.

Layout Section Builder

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.

Adding a New Page Title Bar Layout Section To A Layout

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 Layout Sections

Editing a Custom Layout Section

Now 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.

Restaurant Portfolio Single Post Page Title Bar Layout Section

Adding Other Layout Sections

For 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.

Restaurant Single Portfolio Layout Content

For the Footer Layout Section, just a few columns with some icons were added to the standard footer. See this Layout Section below.

Restaurant Single Portfolio Layout Footer

Setting Conditions For The Layout

With 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.

Setting Single Portfolio Post Conditions

Example Of  The Layout

See 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.

Restaurant Portfolio Single Layout Example

Portfolio Archives Layout

You might also want to create a Custom Layout for your Portfolio Archives pages. Just remember, that a Custom Layout can include as little or as much as you want.

You may just want to add a Custom Page Title Bar, or Custom Footer, but you might also want to customize the Content Layout Section of the page. For this, there is the Archive Element, one of the Layout Elements, as well as the other Layout Section and normal design elements. See the How To Use The Layout Elements video for more info on this.

If you don’t set a Custom Content Layout Section, your Archives layout will be controlled from the Portfolio Archives Layout Options, found under the Options > General Portfolio tab.

Conclusion

With Avada Layouts, creating a custom Layout for your Single Portfolio Posts or Portfolio Archive pages is not only 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.

]]>
How To Build A Custom Search Results Layout https://avada.com/documentation/how-to-build-a-custom-search-results-layout/ Sun, 12 Apr 2020 23:52:21 +0000 https://theme-fusion.com/?post_type=documentation&p=725158

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.

For privacy reasons YouTube needs your permission to be loaded.

The Avada Layouts Interface

You 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.

Avada Layout Builder

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 Layout

For 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.

Layout Builder > Create New Layout

Creating Custom Layout Sections

The 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.

Layout Section Builder

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.

Adding a New Page Title Bar Layout Section To A Layout

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 Layout Sections

Editing a Custom Layout Section

Now 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.

Podcasts Demo - Custom Post Title Bar Layout Section

Adding Another Layout Section

For 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.

Podcasts Demo - Custom Post Title Bar Content Layout Section

Setting Conditions For The Layout

With 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.

Setting Search Results Conditions

Example Of The Layout

See 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.

Podcasts Demo - Custom Search page Layout

Conclusion

With 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.

]]>
Creating Single Post Layouts With Avada Layouts https://avada.com/documentation/creating-single-post-layouts-with-avada/ Sun, 12 Apr 2020 21:25:46 +0000 https://theme-fusion.com/?post_type=documentation&p=725152

As part of Avada Layouts, it is easy to create completely custom Layouts for your Blog pages. The two main Blog related areas you can create custom Layouts for are the Single Post Page, and the Archives page. The changes you make to the Single 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.

With the introduction of Layout Section Elements, and with the help of Dynamic Content within normal Design Elements, you can build virtually any layout you can think of, using the full power of the Avada Builder. And using the power of Conditional Layouts, you can specify when your Layout will be used. You could make a Custom Layout for ALL single post pages, just for a single post, or category etc, or you could also just exclude a single post of category. The Conditions can be as simple or as complex as you need them to be.

Read on to learn how to build a Custom Single Post Layout in Avada, and watch the video for an example of creating a Custom Single Post Layout from the ground up.

For privacy reasons YouTube needs your permission to be loaded.

The Avada Layouts Interface

You 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.

Avada Layout Builder

A Custom Single Post Layout is a Conditional Layout that only shows on Single Post Pages. So the first step is to create a Layout, and then decide which Layout Sections we want to customize on our Single Post pages…

See the Introducing Avada Layouts doc for a general overview of the Layout Builder, and Understanding Layout and Layout Sections for more information on the difference between these two parts of the Builder.

Creating A Custom Layout

For this document, I’m going to recreate the Single Post Layout as created on the Taxi Demo.

Creating the Layout is done on the Layouts page, by simply adding a name (in this case, perhaps Single Post would be most appropriate) and then clicking on Create New Layout, as can be seen below.

Layout Builder > Create New Layout

Creating Custom Layout Sections

The 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.

Layout Section Builder

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 it’s important to note that if the layout is active (has conditions or is global) then the Layout Section would also be immediately active, and at this point would be empty. In my case, I have set no conditions as yet, and so the Layout is inactive.

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.

Adding a New Page Title Bar Layout Section To A Layout

This creates and connects the Layout Section to the Layout, but at already mentioned, 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 Layout Sections

Editing a Custom Layout Section

Now 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. It shows a dynamic Title and some Breadcrumbs, and the container itself has a background gradient and dynamic featured image. For more information on how this specific Page Title Bar was constructed, please watch the video at the top of the page.

Taxi Demo Custom Page Title Bar Layout Section

Adding Another Layout Section

For this example, we also want to add another Layout Section, the Content Layout Section. This will show the actual posts, and any other content we might add in the content section of the single posts 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 Taxi Prebuilt Website Content Layout Section, many of the Layout Section Elements were used, including the Author, Content, Comments, Pagination, and Related Posts Elements, as well as several Design Elements. See the Content Layout Section below.

Taxi Demo Single Post Content Layout Section

Setting Conditions For The Layout

With 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.

Setting Single Post Conditions

Example Of The Layout

See below for the front end examples of the two Layout Sections added to the Single Post Layout on the Taxi Prebuilt Website. First is the Custom Page Title Bar Layout Section, and then the Content Layout Section. See this post on the Taxi prebuilt site for a live example of this Layout.

Taxi Demo Front End Custom Page Title Bar Layout Section
Taxi Demo Single Post Content Layout Section Front End

Post Archives Layout

You might also want to create a Custom layout for your Blog Archives pages. Just remember, that a Custom Layout can include as little or as much as you want.

You may just want to add a Custom Page Title Bar, or Custom Footer, but you might also want to customise the Content Layout Section of the page. For this, there is the Archive Element, one of the Layout Section Elements, as well as the other Layout Section and normal design elements. See the How To Use The Layout Section Elements video for more info on this.

If you don’t set a Custom Content Layout Section, your Archives layout will be controlled from the Blog Archives Layout Options, found under the Options > General Blog tab.

Conclusion

With Avada Layouts, creating a custom Layout for your Single Post and Post Archive pages is not only 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 posts, a specific category, or even just a single post.

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.

]]>
How To Build A Custom Page Title Bar Layout https://avada.com/documentation/how-to-build-a-custom-page-title-bar-layout/ Thu, 09 Apr 2020 22:05:00 +0000 https://theme-fusion.com/?post_type=documentation&p=725156

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.

For privacy reasons YouTube needs your permission to be loaded.

The Avada Layouts Interface

You 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.

Avada Layout Builder

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.

Creating A Custom Layout

The 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.

Layout Builder > Create New Layout

Creating Custom Layout Sections

The 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.

Layout Section Builder

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.

Adding a New Page Title Bar Layout Section To A Layout

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 Layout Sections

Editing a Custom Layout Section

Now 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.

Restaurant Demo - Single Post Custom Page Title Bar Layout Section

Setting Conditions For The Layout

With 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.

Setting Single Post Conditions

Example Of A Layout

As 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.

Restaurant Demo Custom Page Title Bar Example

Conclusion

With 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.

]]>
How To Build A Custom 404 Layout https://avada.com/documentation/how-to-build-a-custom-404-layout/ Thu, 09 Apr 2020 03:15:21 +0000 https://theme-fusion.com/?post_type=documentation&p=725154

As part of Avada Layouts, you can now create a fully customized 404 Layout on your website, using the full design power of Avada Builder. No longer do your users have to see boring 404 pages, as now you can create something that matches the visual style of your site.

Wait.. What is this 404, you might ask? Put simply, a 404 page is just an error page that is displayed when the URL you enter does not lead to an existing page. Read on to learn how to build a Custom 404 Layout in Avada, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

The Avada Layouts Interface

You 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.

Avada Layout Builder

To create a Custom 404 Page, the first thing to do is to create a Custom Layout. See the Introducing Avada Layouts doc for a general overview of the Theme Builder, and Understanding Layout and Layout Sections for more information on the difference between these two parts of Avada Layouts, but for now, let’s now look at creating the Custom 404 Layout.

Creating A Custom Layout

The first step in creating a Custom 404 Layout, is to create the actual conditional layout itself. This is done on the Layouts page, by simply adding a name (in this case, perhaps 404 Layout would be most appropriate) and then clicking on Create New Layout in the Layout Builder, as can be seen below.

Layout Builder > Create New Layout

Creating Custom Layout Sections

The 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 a 404 Layout, we can begin to create the Layout Sections that we will add to it. In this example, we will add both a Custom page Title Bar and a Content Layout Section.

You can create a Custom Layout Section for your 404 Layout in one of two ways. You can head to the Layout Sections page at Layouts > Layout Sections from the Avada Dashboard, and create one from there, as seen below.

Layout Section Builder

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 it’s important to know the differences.

So to create and add the Page Title Bar Layout Section, I would click on the Select Page Title Bar section of the Layout, and in the following dialog, under the New Section tab, I would give it a name (404 PTB would be appropriate) and click on Create New Section. I would then repeat this process for the Content Layout section (404 Content).

Adding a New Page Title Bar Layout Section To A Layout

This creates and connects the two Layout Sections to the Layout, but at this point, they are 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 two Layout Sections.

Editing Layout Sections

Editing a Custom Layout Section

Now we come to the Avada Builder, and here we can create our Custom Layout Sections. You can do this in either the 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 and Content Layout Sections. You can have multiple columns, background images, anything. The freedom this gives is enormous. The Layout Section is literally that – a section where the content will show. The content itself comes from the Builder, and what you can do is only limited by your imagination. See below for an example of the Content Layout Section of the 404 Layout on the Taxi Demo.

Taxi Demo Content Layout Section

Setting Conditions For The Layout

With 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, all we need to do is set the conditions for a 404 page.

Setting 404 Conditions

Example Of A Layout

As an example, see below the Page Title Bar and the Content Layout Sections created for the Taxi Prebuilt Website 404 Layout. To see a live example of the 404 Layout, just follow this misspelt link.

Taxi Demo 404 Custom Layout Sections

Conclusion

With Avada Layouts, creating a Custom 404 Layout is not only now a reality, but rather, an unlimited possibility. You can use the power of Avada Builder to create almost any 404 Page you can conceive 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.

]]>
How To Design A Website Footer With Avada https://avada.com/documentation/how-to-design-a-website-footer-with-avada/ Wed, 18 Mar 2020 00:18:08 +0000 https://theme-fusion.com/?post_type=documentation&p=711920

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.

For privacy reasons YouTube needs your permission to be loaded.

The Avada Layouts Interface

A 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.

Avada Layout Builder

Creating A Custom Layout

You 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.

Layout Builder > Create New Layout

Creating A Custom Layout Section

If 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.

Layout Section Builder

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.

Adding Footer To 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.

Adding Footer Layout Section To Conditional Layout

Editing a Custom Layout Section

When 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 global options and the footer widgets.

Taxi Demo > Basic Footer

Now look at the Custom Global Footer created, using Avada Layouts.

Taxi Demo Custom Footer

Creating A Conditional Layout

With 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.

Assigning A Custom Layout Section

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.

Conditional Layout Conditions

Conclusion

With 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.

]]>