create footer in wordpress with elementor

Would you like to create a footer in WordPress with Elementor?

Not all WordPress themes have the ability to customize the footer. If so, programming skill (PHP) is required if you want to customize the theme’s footer.

If you are using a WordPress theme that offers a page builder, you have more freedom to customize the footer without coding. You will be able to add elements such as an email subscription form, social media icons, links, website logo, etc.

There is a solution if you want to customize your theme’s footer, but don’t have any programming skills: use Elementor.

Elementor is a page builder that comes with Theme Builder functionality. You can use this feature to create a new custom footer to replace your WordPress theme’s default footer.

create footer in wordpress with elementor
create footer in WordPress with elementor

How Elementor Theme Builder Works

The way Elementor’s Theme Builder feature works is pretty straightforward. Once you’ve created a new footer and published it, it will replace the theme footer you’re currently using. Your new footer can be applied to the entire website or specific pages only.

How to create a custom footer with Elementor’s theme builder

Elementor is a page builder that comes with a visual interface. To create a footer (or web page), you just need to drag the widgets you want to Elementor’s editor and create the settings according to your needs.

Elementor itself offers over 90 widgets. Technically, you can use all of these widgets when creating a footer. However, you certainly don’t need all of them. In this example, we’ll show how to create a custom footer with the following elements.

Read more: How to create a custom header in WordPress with Elementor

Let’s start

Assuming you have Elementor Pro installed on your WordPress website, go to your dashboard and then to Templates -> Theme Builder.

On the theme builder page, go to the Footer tab and click the Add button to create a footer template

A pop-up will appear asking you to give your footer template a name. Type in your preferred name and click on the CREATE TEMPLATE button.

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

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 on the plus button in 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 editor columns.

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

  • Add social media

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

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

  • Add links

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

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

Again, you can go to the Style tab to customize the links. You can define elements such as the color of the link text, the typography, etc.

  • Change the background of the footer

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

Applying the new footer

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

In 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 whole website, you can just click on 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. Specify the pages on which you want your footer applied.

Click the SAVE & CLOSE button when you have finished specifying the display condition.

Potential errors

You may encounter a technical error while creating a footer with Elementor. The most common mistake is that the editor does not appear. If you are having this problem, try using a different WordPress theme.

 

for website maintenance service contact us.

Leave a comment

echo "";