How To Build A Custom Footer

27/07/2020

As part of Avada Layouts, you can now create fully Custom 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 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 Avada Layouts Interface

A Custom Footer 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 Layouts

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

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 first one. We can click on Select Footer on the Global Layout, and add a Section Name; for example, Global Footer, and click on Create New Section.

Global Layout > Edit Footer Layout Section

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.

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

Taxi Demo > Basic Footer

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

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