Footer Builder: The Missing Piece

The Problem

In the last lesson, we created some branding content using the “Footer One” widget area:

It was supposed to get displayed in the site’s footer, but it was not.

Ideally, the content inside the footer-based widget areas must be displayed on our website’s footer portion automatically.

Most themes work this way.

But that is not the case with the “Neve” theme.

This is because the “Neve” theme uses something called the “Footer Builder” to give you control over where to display each footer-based widget area on the frontend.

So, here is what we need to do.

As an additional step, we must allocate the footer-based widget areas to the “Footer Builder” to fix the problem.

When we do this, the content of these widget areas will get outputted to the frontend as expected.

This is better shown than explained.

First, we need to access the Footer Builder

The Footer Builder is a proprietary feature of the “Neve” theme.

So, we can easily find it by going to:

Admin Dashboard -> Appearance -> Customize -> Footer

If you go there, the “Footer Builder” is located on the bottom-right-hand of the screen:

0:00

/

1×

And inside the “Footer Builder”, there are three sections to help you build the footer’s design.

The first section is for the top portion of the footer. The “Neve” theme calls it “Footer Top”. We could use it to place the newsletter form, for example.

Next, the second section, “Footer Main” represents the main footer area. For example, we could use it to place navigation links and branding elements.

Finally, the third section, “Footer Bottom” represents the bottom portion of the footer area. We could use it for displaying the copyright statement, for example.

And you can put anything you want in these three sections.

And if we can use these three sections properly, we can build a helpful footer design.

But don’t get excited 😛

The free version of the “Neve” theme has some limitations regarding the number of components we can place inside the “Footer Builder”.

You can only use all three sections effectively if you have purchased a premium theme.

And because we are using the free theme for this course, here is the plan:

1. We will ignore using the “Footer Top” and “Footer Bottom” areas of the footer builder.
2. We will use the “Footer Main” area for building the following footer design:

To start building this footer design…

First, let’s assign the “Footer One” widget area to the “Footer Main” section of the builder.

To do this, ensure you’re inside the “Footer” panel of the “Customize” screen.

Next, click on the first box of the “Footer Main” area.

Clicking on it will bring up something called the “Components” popup.

If you notice, there are five components, one of which is the “Footer One” component.

The “Footer One” component inside the builder represents the “Footer One” widget area.

Because of this, adding the “Footer One” component to the builder will display the contents of the “Footer One” widget area on the frontend.

So, click on the “Footer One” component to add it to the first box inside the “Footer Main” section:

0:00

/

1×

Finally, click on the publish button to save the changes.

Now let’s see if the content of the “Footer One” widget area appears on the frontend:

It is indeed!

That’s exactly how we build the footer content using the widget areas and the “Footer Builder”.

We can repeat the same process for building the rest of the footer.

To recap

1. We first added content to the “Footer One” widget area inside the “Widgets” screen, thinking it would appear automatically on the site’s footer. But it did not.
2. This was because we didn’t assign that widget area to any section inside the Footer Builder.
3. To fix this, we used the “Footer One” component to assign the “Footer One” widget area to the builder.
4. Finally, when we did assign it, the content of the “Footer One” widget area started appearing the on the site’s footer.

We will follow the same process for building the remaining three columns of the footer design.

But before that, in the next lesson, we will add one more column to the builder’s “Footer Main” section.