Search
Close this search box.

How to Create Custom Footer in WordPress with Elementor

If you use a WordPress theme that offers a page builder such as Divi, you have more freedom to customize the footer without coding. You will be able to add elements like an email subscription form, social media icons, links, website logo, and so on. There is a solution if you want to customize the footer of your theme, yet have no programming skill: using Elementor.

Elementor is a page builder that comes with a theme builder feature. You can use this feature to create a new, customized footer to replace the footer of your theme.

How the Theme Builder Feature of Elementor Works

The way the theme builder feature of Elementor works is pretty simple. Once you created a new footer and published it, it will replace the footer of the theme you are currently using. Your new footer can be applied to the entire website or specific pages only.

How to Create a Custom Footer with the Theme Builder of Elementor

Elementor is a page builder that comes with a visual interface. To create a footer (or webpage), you just need to drag the widgets you want to the editor and make the settings according to your needs. Elementor itself offers more than 90 widgets.

Technically, you can use all of these widgets when creating a footer. However, you definitely don’t need them all. In this example, we will demonstrate how to create a custom footer with the following elements.

  • Email subscription form.
  • Social media icons.
  • Links

Getting Started

Assuming you have installed Elementor Pro on your WordPress site, go to Templates -> Theme Builder.

On the Theme Builder screen, go to the Footer tab on the left panel and click the Add New button to create a new footer template. Or you can also click the plus icon.

Elementor offers several footer templates you can choose from. Choose the one you like and click the Insert button to load it to the editor. Or, if you want to create the footer from scratch, you can simply close the template library to open the editor.

In this example, we create a footer from scratch. So, click the plus button on the Elementor editor to add a new section/container.

  • Adding the Email Subscription Form

To add the email subscription form, drag the Form widget to one of the columns on the canvas area.

Go to the left panel to make the settings. Commonly, an email subscription form contains only an email field so you can remove the unnecessary fields (name and message). You can integrate your email subscription form with MailChimp, MailerLite, and GetResponse.

  • Adding Social Media Icons

To add social media icons, drag the Social Icons widget to one of the columns on the editor.

Go to the left panel to make the settings. You can add a new social media icon or remove the existing one. To customize the icon, you can go to the Style tab.

  • Adding the Links

There are several widgets that you can use to add links from your website. In this example, we use Icon List. So, drag the Icon List widget to the remaining column on the editor.

Again, go to the left panel to customize the Icon List widget. To add a link, click the item you want to add the link to and paste the link you want. If you want to remove the icon, hover your mouse over the icon and click the trash icon.

Again, you can go to the Style tab to customize the links. You can set things like link text color, typography, and so on.

  • Change the Footer Background

If you add a new section in Elementor, it has the white color by default. If you want to have different footer color, activate the section of the footer by clicking it on the Navigator and click the Style tab on the left panel. Change the background on the Background section.

Applying the New Footer

There are so many setting options offered by Elementor for each widget, which is impossible to cover them all here. You can play around with the left panel until you get satisfied with the result. Once you are done, click the PUBLISH button.

On the next step, you will be asked to specify the display condition. Simply set the location where you want to apply the custom template to. Once done, click the SAVE & CLOSE button.

Potential Errors

You might encounter a technical error when creating a footer with Elementor. The most common error is the editor doesn’t show up. If you encounter this problem, try to use a different WordPress theme. Read this post to learn more about this problem.

The Bottom Line

The Theme Builder feature of Elementor allows you to create a custom template for your site footer. With the feature, you can create a footer for your website with your own design, without needing to rely on the optimization options that your theme offers.

The good thing about the feature is that you can assign the custom footer template to specific area of your website. If you want it, you can create different footer templates for different pages, which is great to run a certain campaign.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Haven’t used Elementor Pro yet?
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.