Search

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 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. In case you are looking for a more reliable hosting to host your Elementor-powered WordPress sites, you can try our selections of the best web hosting services for Elementor.

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

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?