How to Create Custom Footer in WordPress with Elementor

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 page, go to the Footer tab and click the Add New button to create a new footer template.

A popup will appear, asking you to give your footer template a name. Type your preferred name and click the CREATE TEMPLATE button.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!