How to Create a Fully Custom Website Footer with Elementor

Ever wonder how you can create & customize your own website footer without touching a single line of code? 

Sounds like a fairy tale, right? 

Well..The story becomes reality this time!

With the most popular page builder Elementor, you will get full flexibility to create a prominent footer. 

As 66% of web visitors actually roam below the fold, so the footer section must be user-interactive. Otherwise, you will lose a huge portion of your customers in a blink of an eye.

But, don’t get paranoid yet! In this article, I’m going to show you the effective way to Create a Fully Custom Website Footer with Elementor for your website! 

So, let’s get into it! 

Why Does Footer Matter?

Do you know, you can spike the revenue of your business by about 16% just by adding an easily navigable footer?

Besides that huge user engagement, it’s highly effective for SEO too. It improves the internal linking structure and makes the navigation smoother than ever.

Fortunately, you can enjoy all of these facilities just by adding an eye-catchy footer containing the internal links as sitewide links, or boilerplate links.

But, does a footer contain only links? 

Nope!!

You can add your product demos, subscription buttons, or contact forms too! Thus, your customers can not only surf your website easily but also get a clear concept about your products too.

Quite impressive, huh?

Hold on! Here’s another bonus fact especially for you!

Besides adding all of those functions under the fold, don’t forget to add an eye-catchy CTA button! Thus the users might get impressed and will convert into your real customers.

It’s a win-win situation for both, right?

Discover how to make the footer section and how it can benefit your brand by improving the experience of your visitor using Elementor.

Things You Must Add on Your Website Footers

Here are the main elements of good website footer design. I will try to cover all the sections that you can create and custom on your end. 

1. Logo
2. Company info 
3. Contact details
4. Navigation
5. Support
6. Copyright, terms of service, privacy policy
7. Social media icons
8. Call-to-action

Note: Never overdo your footer, try to keep it as simple as possible.

What you need to create custom footers with Elementor

To follow this tutorial blog, you will need two things–>

• Elementor
• ElementsKit

And Done!

Why Elementor & ElementsKit? 

If you are having trouble designing your web page with lots of code and all that. No worries! Your most powerful page builder Elementor is here! 

Enjoy full drag-and-drop control over your website’s footer. Elementor is your best choice if you don’t like how your current footer looks. 

Elementor includes useful add-ons to customize your website with ease. ElementsKit is the most popular among them with powerful footer builder, 70+ widgets & readymade footer layout to improve your design. 

Here in this tutorial, you will get to know how to build beautiful custom footer with Elementor & ElementsKit! 

So, let’s get started..

Creating a Custom Footer Using Elementor

In this section, we will show how you can custom or create an user-interactive footer for your website with just few steps!

Step->1: Add Footer

Login into your website admin dashboard panel. 

• Navigate to ElementsKit → My Templates 
• Click Add New. 

A popup box will open with options.

Creating the Footer

Step->2: Select Footer Options

• Then in the popup box type a Title. For Ex: Custom Footer
• Select the Type → Footer
• Select the Conditions → Entire Site
• Toggle the Activation Option 
• Click “Edit With Elementor”

A editor page will open, here you’ll build the look of your Footer Section

Setting up Footer Settings

Step->3: Choose a Footer Design

You can start building your Footer from scratch or, you can choose one of our previously made footers for a starting point.

• To get the Footer you have to click on the Selected Icon-> Go to the Footer Tab
• Just click on the Insert Button to add & You’re Done!. 

Selecting Desired Footer Design

Step->4: Set Up The General Layout

In this setting, choose the types of layout you want to create a custom footer.

• Click on the Main Customization Button: To edit the Layout section in the sidebar of your footer part.
• Enable Stretch section: Stretch the section to the full width of the page using JS.
• Set Content Width: Select the content width boxed or full width from the drop-down. Also control it by simply dragging. 
• Choose Columns Gap: Select Narrow, extend, wide, wider
• Adjust Height: Choose Fit to screen or min-height
• Choose Vertical Align: Select Top, Middle, Bottom, Space Between, Space Around, Space Evenly
• Overflow: Keep it Default or Hidden 
• Select HTML Tag: Select from drop-down

Setting The Layout

Step->5: Add a Logo

A company logo that will take users back to the home page when you click on it. You can add a logo very easily with just a simple step. 

• Click on the Logo Image→ Easily upload an image or choose from your media file.
• Easily select the Image Size from the drop-down
• Choose the Alignment left, center or right
• You can add any type of Image Caption like Attachment caption or Custom caption
• Choose the Link Type Media File or Custom URL. You can provide any redirect URL. 

Customizing The Logo Image

Step->6: Add or Edit Company Description

Now, your website footer is a place to display important information. You can easily add a short brief about your company 

• In this setting, you can Add or Edit any type of text 
• Enable Drop-Cap to show a Large letter at the beginning of the content that looks more eye-catchy. 

Adding Company Short Brief

Step->7: Add the social sharing Icons

Did you know, 72% of websites have social media icons in their footer? Adding a widget that displays your latest posts like Twitter, Facebook, or Instagram will help users to stay connected. 

To custom social media icons & add the social sharing links to the icons at the bottom. You need to→

• Click on the social widget to edit the Social Icons. 
• Choose your style: Icon, Text or Both
• Select Alignment position Left, Center or Right
• Click on the Facebook Content to expand
• Add Icon: Upload Icon From Library
• Add/ Edit Label
• Provide Social Link
• Customize Icon for both normal and hover
• Add Background color
• Add Border Type: Solid, Doubled, Dotted, Dashed, Groove
• Select Text Shadow: Blur, Horizontal, Vertical
• Select Box Shadow: Horizontal, Vertical, Blur, Spread
• Select Position: Outline or Inset

Customizing Social Share Icon

Step->8: Copyright

Your copyright information is a must have element of any footer. As it is the best way to protect your website from plagiarism. 

• Easily add or Edit the Content
• Choose HTML Tag from the Drop-down 

Adding Copyright Section

Step->8: Customise the Contact Info Heading

According to Web design standards, contact information should be found at the right or center of the footer. However, you can easily custom it with few steps→

• Add/Edit your Contact Heading text here
• Provide Redirect Link
• Choose Size, HTML Tag from the drop-down
• Choose the Alignment left, center, right or justified

Customizing Contact Info Heading

Step->9: Add Company Location 

The location of your company helps intensely with local SEO. Here’s the process of adding your company address→

• Choose the Layout: Default or Inline
• Add or Edit the company location 
• Upload any Icon from the icon library with Redirect Link

Customizing Company Location 

Step->10: CTA Location Button

A study shows that the best option for putting your Call to Action below the fold on every marketing page. Follow the process to add a CTA button for showing the company location→

• Label: Add or Edit Button Text
• URL: Provide Redirect URL link
• Enable Add icon to provide Button Icon
• Upload Button icon from Icon library or you can upload from your own library
• Select Icon Position: Before Text or After Text
• Provide Class Name or ID

Customizing CTA Button

Step->11: Customize Telephone no & Email

Adding the contact number to your site helps to improve with SEO. Let your contact number clickable so that visitors can simply tap to call. Now we will modify the telephone & email.

• Choose the layout: Default or Inline
• Add or Edit the company Telephone no & Email
• Upload any Icon with Redirect Link

Customizing Telephone no & Email

Step->12: Showcase Page List with Redirect Link

Another common footer component is a link with a page. Add any page list like privacy policy, Terms & Conditions, or others. Simply show page details of the website’s policy, information, Rules & regulations etc. Let’s check out how to do it→

• Select Layout
• Add or Edit Text
• Add or Edit Subtitle
• Enable Toggle to Show Icon
• Upload Icon
• Select Icon Color
• Select Icon Position
• Search for your page where you want to show Page List
• Enable to Show Label
• Add or Edit Label
• Customize Background Color, Typography, Padding, Alignment, Radius

Adding Different Pages

Step->13: Custom Instagram Feed On Footer

The website footer can be a perfect section to put in relevant social media feeds, such as Instagram feed. Let’s see what functionality you will get to customize→

• From the Layout Setting=> Select Grid style List, Grid or Masonry
• Select your Column Grid 1,2,3 or 4 means how many columns you want to choose to display pictures.
• Enable Feed Style to provide Instagram feed effect
• Provide count value of how many post you want to display
• Enable Comment Box to showcase the user’s comment and reaction to your post
• Enable Show Caption to display the picture attractive caption
• Enable Follow Button to add Follow Us Button and provide Instagram Link of the following page
• Follow Button Text: Customize Button Text
• Follow link: Provide Follow link
• Alignment: Select position of the Button where you want to display your Button- Left, Right or Center

Pro tips: You should not use auto play functionality, as this can turn your visitors off.

Customizing Instagram Feed

Step->14: Publish your Footer

Here comes the most important part. After designing your footer just click on the “Update Button” 

Publishing Footer

The basic thing of this section is to click “Preview”. And, that’s it! Finally, your footer part is ready.  Yeeeee!!!

Final Preview

Wrapping Up

That’s all about the footer! 

We believe that in this Elementor tutorial blog, you have learned how to effectively create footers to display using Elementor & the importance of footers on your site. 

Hope that you can now easily design any footer for your WordPress site. 

However, if you have any questions to ask feel free to leave a comment below. We would love to help you.