How to Add a custom Footer in Elementor

How to Add a custom Footer in Elementor

Share This Post

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Table of Contents

In this WPDesigns article, we will learn how we can add a custom footer in Elementor Pro. Using Elementor Pro you can easily add a custom footer to your site.

You’re no longer limited to editing just the content field on your website, and you’re no longer dependent on your WordPress theme to create the desired footer. You can do it yourself with Elementor, and the most impressive thing is you won’t have to touch a single line of code (unless you want to)! 

How to Add Custom Footer in Elementor

To add a custom footer you need to own a copy of Elementor Pro. Only the pro version has these features to add a custom footer in Elementor, there is a workaround with various other plugins for the free version but the usability and style of the footer are not quite the same.  Using Pro you can quickly add a custom footer for the whole site by importing a template from the Elementor template library. You can only use this feature when you own a licensed version of Elementor Pro. 

In the next steps we will look at how to add the footer.

Elementor And Template Option After Installing Elementor And Elementor Pro
The Elementor & template option after installing Elementor & Elementor pro

Step 1 - Template

Firstly, head to your WordPress dashboard and install Elementor and Elementor Pro. After installing both of them you will get the option Elementor and templates. If you need help on how to install it you can check out the WPDesigns Plugin Guide.

Step 2 - Template Selection

Then, when you mouse over or click on templates, you’ll see an opportunity to add a new template.  Add a new item by clicking on it.  You will be presented with a form through which you can choose various different template options. So, as you’d expect you’ll pick “Footer” for the footer, you can then give it a name, and click on the Create Template button.

How To Add Template From Elementor Template Option
Add template from Elementor template option
Choose Template Type
Choose template type
Footer Templates Of Elementor
Footer templates of Elementor

Step 3 - Elementor Library

In the next window, you can either pick a premade footer from Elementor’s library of Templates or close the box and create your own custom footer in Elementor. If you would like to use a premade template, simply choose the one you want and hit the Insert button and it will be imported into your website footer.

Instead of doing that we are going to start with a fresh one and build our own.

Step 4 - Columns

Add a section by clicking on the red plus icon and then you will see the option to choose the number of columns. For the purposes of this demo we are going to make a footer that has four columns.

Adding Section With Four Column
Adding section with four column
Custom Footer In Elementor
After finishing 4 columns footer section

Tip

When adding your custom footer in Elementor you can make the links in the contact details of your footer clickable.  If you would like to make your email address clickable.  Open the icon box with the email and add “mailto:” into the the link followed by your email address. For example – mailto:contact@example.com

You can also do this for telephone numbers using “tel:” followed by the phone number. For example – tel:078854548787

When someone clicks either of these links it will open up either their phone or email client in order to use the details given.

Step 5 - Content

The logo will be placed in the first column. So, you can look for the site logo in the search bar and then drag and drop it into the column. If you have not set your site logo this can be done through the WordPress Dashboard > Appearance > Customise > Site Logo.

We’ll add information about the website into the next column. So, first, we’ll look for the heading widget, which we’ll then drag and drop to the second column. Then, in the heading text, change it to say  “About“.

Now we will add some text beneath the title to give a brief explanation of the site. Open the widget selector tab and look for the text editor widget.  You can then drag it to the bottom of the heading.  You have full control over the text so you can change it to say whatever you like or leave it as the lorem ipsum text for now.

In the second box, we’ll add the site page links.  You can set your title as before using the header widget and then for the list, the “Icon List” widget is great.  You can drag and drop the icon list widget in and create your list.  For more information on creating a list, you can read our article on creating a list in Elementor. You can set the icons, name the links, and style it as you like.

Next up we’ll add policy pages for the website. Again, we’ll use the header and icon list widgets for this.

The final column of the footer will be “Social” or you can even make it “Contact” and use the icon list for both the contact details and then the social details below. When creating your social media list it is recommended that you just have the icon with the relative link and no need for the text to go with it. 

Step 6 - Copyright

Beneath the footer it is generally practiced to add the developer or site creator and the copyright information.

You can create this by adding another section below and then adding in a text or heading box and linking it to the relevant site.

Don’t forget to also check how it looks on mobile and tablet.  You can read more about editing mobile and tablet views in our post on Mobile and tablet in Elementor.

Site Info Section Of Footer
Site info section of footer
Setting Up Footer Display Condition
Setting up footer display condition

Step 7 - Publishing

The final step after everything has been checked and rechecked is to click the “Publish” button.

When you press the Publish button, you’ll be asked to select the page conditions that you’d like to add. These conditions specify where the footer or other theme components will display. We’ll pick the “Entire Site” option from the list because we want it to appear on the entire site.  If you would like to have the footer appear on or be excluded from certain pages that can be done from here too.

And finally, we have made our custom footer!

Search

Social Media

Recent Posts

Josh

Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.