Creating Layout Section Content

11/02/2020

Creating the content for a Layout Section depends largely on what type of Layout Section you are making. At this point, there are three types of layout sections you can create (Header Layout Section is on the way!) – the Footer Layout Section, the Content Layout Section, and the Page Title Bar Layout Section. Let’s have a quick look at the differences in these three Layout Sections when it comes to generating content for them.

Footer Layout Section (a.ka. Footer Builder)

The content of the Footer Layout section can be anything that you can build in the Fusion 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 new Taxi Demo Custom Footer Layout Section, as shown in the back-end of the Builder.

Taxi Demo Custom Footer Layout Section

See 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 Theme Options. The background image, as well, is a background image of the layout section container.

With the Theme Builder, 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.

Taxi Demo Custom Footer

Content Layout Section

The 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 Fusion Builder, dynamic content generated by the special Layout Section 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 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 Section Elements

As described in the Avada Design Elements vs. Layout Section Elements doc, these Elements pull dynamic content from archives, posts, portfolios and more.

There are eight Layout Section Elements to use, to cover the range of dynamic content that you might want to enter into a content section.

Layout Section Elements
  • Archives – This Layout Section Element can be used for any archives, including Blog Archives, Portfolio Archives and FAQ categories. Basically, anything that is dynamically generated from a Custom Post Type can be displayed using this Element. Remember it is the Layout itself that holds the conditions for the when the Layout will be used, so the Archive Element will only display results if there is an archive content type selected in the layout conditions. Search Results are also a type of archive, but these are found under the ‘Other’ Layout Conditions, along with the 404 Error page.

  • Author – This is used primarily for a Blog single post layout , and displays the Author information for the post.

  • Comments – This is also used primarily for a Blog single post layout, and displayes the comments made on the post.

  • Content – This pulls the content from the Content Layout Section for the specified Layout Condition. For example, if we use a Content Element on a Single Blog Post Layout, the Content would be the editor content of the post.

  • Featured Images Slider – This pulls the Featured Image, or Featured Images Slider, from any post type that contains featured images.

  • Pagination – This is the pagination usually seen at the top of blog posts, and will show relevant previous and next arrors according to the post or portfolio item it is on.

  • Project Details – This element pulls the Project details from a Portfolio item. This Element would not show anything unless the Layout it was in included Portfolio items.

  • Related Posts – This Element shows Related Posts to the post displayed, and is primaruily used with a Blog single post layout.

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 separate columns for the Content area, the Discussion Area, and the Related Posts section. At the bottom is also a Global Container, which is a very useful way to add global content to your posts.

Taxi Demo Single Post Content Layout Section
Taxi Demo Single Post Content Layout Section Front End

Page Title Bar Layout Section

With 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 dyamic title, and an instance of the new Breadcrumbs Element.

Taxi Demo Custom Page Title Bar Layout Section
Taxi Demo Front End Custom Page Title Bar Layout Section