How To Build A Custom Footer

18/03/2020

As part of the Avada Theme Builder, you can now create fully Custom Footers on your Avada website, using the full design power of Fusion 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 Custom Footers in Avada, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

The Theme Builder Interface

You find the Theme Builder at Fusion Builder > Theme Builder. 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.

When making a Custom Footer, which is a Layout Section, you can add it to either the Global Layout, or a Custom Layout. See the Introducing The Avada Theme Builder doc for a general overview of the Theme Builder, and the Understanding Layout and Layout Sections to understand the difference between these two parts of the Theme Builder, but for now, let’s now look at creating the Custom Footer Layout Section.

Avada Theme Builder

Creating A Custom Layout Section

You can create a Custom Layout Section for your footer in one of two ways. You can head to the Layout Section tab on the Theme Builder page, and create one from there, as seen below.

Alternatively, you can create one by clicking on the Select Footer link in an 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.

Layout Sections > Create Footer Layout Section

For a Custom Layout Section to appear on your site, it has to be added to a Layout. As mentioned, there is only a Global Layout initially. If you want to create a Custom Footer globally, you would add it to this layout. But if you want a conditional Custom Footer, you 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.

Let’s assume we are going to make a Global Custom Footer, and so the easiest method here is the second one. We can click on Select Footer on the Global Layout, and add a Section Name; for example, Global Footer. This creates and connects the Layout Section to the Layout, but at this point, it’s an empty Layout Section. 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 Custom Footer.

Global Layout > Edit Footer Layout Section

Editing a Custom Layout Section

Now we come to the Fusion Builder, and here we can create our Custom Footer. You can do this in either Fusion Builder or Fusion Builder 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 Fusion 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.

Taxi Demo > Basic Footer

Now look at the Custom Global Footer created, using the Theme Builder.

Taxi Demo Custom Footer
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 in controlled in the Layout Section, by the content options and the Layout Section Options, the equivalent of the Page Options in Layout Sections.

Assigning a Custom Layout Section

A Custom Layout Section can be assigned to multiple Layouts if required. Obvioulsy if it’s attached to a Global Layout, it will display on all pages, but you might want to show a specific footer on just your Blog Posts and your Portfolio Posts, for example.

If you want to add an existing Layout Section to a Conditional Layout, you need to create the Layout first. Then, 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

To get the Layout Section to show on the new Conditional Layout, there must also be conditions set. See Understanding Conditional Layouts for more information on this.

Conclusion

With the Avada Theme Builder, creating a Custom Footer is not only now a reality, but rather, an unlimited possibility. Not only can you use the power of Fusion Builder to create almost any Footer you can concieve 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.

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