How to Create Custom Footer in WordPress with Elementor

Updated: January 15, 2022

Not all WordPress themes have an option to customize the footer. If this is the case, programming skill (PHP) is required if you want to customize the footer of the theme use you.

If you use a WordPress theme that offers a page builder such as Newspaper theme by tagDiv, 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

Please note that Theme Builder is only available on Elementor Pro. Find the differences between Elementor Free vs Elementor Pro.

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.

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.

To create a footer that hosts an email subscription form, social media icons, and links, you need an Elementor section with three columns. So, click the plus button on the Elementor editor to add a new section and select the three-column structure option.

  • Adding the email subscription form

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

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. Visit this post to read the detailed instructions on how to integrate your Elementor with an email marketing tool.

  • 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 bottom side of the left panel.

On the next step, you will be asked to specify the display condition. By default, your footer will be applied to the entire section of your website. So, if you want your new footer to be applied to the entire website, you can simply click the SAVE & CLOSE button.

Conversely, if you want your new footer to be applied to certain pages only, click the ADD CONDITION button to set the display condition. Speficy the pages you want your footer to be applied to. Click the SAVE & CLOSE button once you are done specifying the display condition.

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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general