Creating Layout Section Content

27/07/2020

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.

The 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 Header
Pet Supplies > Custom Header

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

Pet Supplies > Custom Header

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 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
Taxi Demo Custom Page Title Bar Layout Section
Taxi Demo Front End Custom Page Title Bar Layout Section

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 Design Elements in Avada 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 nine 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 Element 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 Element This is used primarily for a Blog single post layout , and displays the Author information for the post.

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

  • Content Element 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 Element This pulls the Featured Image, or Featured Images Slider, from any post type that contains featured images.

  • Meta Element This pulls your preferred Meta Information into the content area, including the new Last Modified option.

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

  • Project Details Element 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 Element This Element shows Related Posts to the post displayed, and is primarily 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 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 Layout
Taxi Demo Single Post Content Layout Section

And here, on the front end, you can clearly see the four separate sections of the page.

Taxi Demo Single Post Content Layout Section Front End

The 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 new Taxi Demo Custom Footer Layout Section, as shown in the back-end of the Builder.

See Also: How To Build A Custom Footer
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 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.

Taxi Demo Custom Footer