How to Create a Totally Custom Website Footer with Elementor

How to make a custom footer with Elementor

Lots of people ask me how I made the custom designed footer on my website.

It’s actually not part of my theme. I switch off my theme’s footer completely and instead use the Elementor page builder to build my footer template.

I then replace my theme’s footer with the Elementor footer template instead.

It’s really easy to do, and it’s likely you can do it with your current theme.

In this video, I take you through the entire process of how I built and integrated my own custom designed footer, step-by-step.

Click play below to watch.

Let me know what you think in the comments!

Get My Own Custom Footer Elementor Template

I’ll send you my own ‘Custom Footer’ Elementor template. Import into your own site with 1 click! 

Resources mentioned:

The first 2 links are affiliate links. If you buy the paid version of either, I get a small commission. No extra cost to you. Regardless, I’d 100% recommended both as the only WP theme and page builder to use.

Check these posts out too...

54 thoughts on “How to Create a Totally Custom Website Footer with Elementor”

  1. Its totally help me to build my website. Its trully coincident when I think I need custom footer and I look at my inbox, I found your newsletter talking about custom footer. How lucky me! Thanks Dave.

  2. Dave,

    I’ve imported your template, I want to now us it with GP Hooks, but I do not see the shortcode anywhere I look for the footer template. I’m using Elementor (not pro) where do I find the shortcode? In your video it is listed in the library view of all pages.

  3. Dave,

    I figured it out. I have to use the AE plugin and import that section template into AE in order to get a short code.

    thanks

      • Dave,
        Sorry, but I’m struggling. I’ve spent nearly 3 hours trying to figure all this out. I followed your 20 minute video and then copied the Freebie Footer file. I made the adjustments I could ( I still can’t change the title of the footer to white – says can’t do it if i’m using default colours, and I can’t get rid of the bullet points). Now I come to place it at the foot of website and i learn I need the shortcode. I downloaded the Anywhere Elementor plugin and i can’t see how to get your template into it so it shows the shortcode (n.b Dave Smith above said he imported the section into AE). Sorry I cannot see anywhere a button or anything remotely obvious that allows me to import the template from the Templates section under Elementor into the the Anywhere Elementor template folder. Any ideas?

        • Sorry you’re struggling, Chris. If you don’t have Elementor Pro (I assume you don’t?) then the free Anywhere Elementor plugin is the way to go. You’ve already got a footer template in Elementor’s template library? In that case, create a new ‘footer’ template in AE (set it as ‘footer’ in the dropdown in its settings). Edit with Elementor. Down in the left hand corner, click to access the page settings. Set template to ‘Elementor Canvas’. Then click the ‘add template’ button. Browse for your Elementor template in the list. Import. That’s it. You can delete the version in the Elementor template library now if you like.

          I always turn off Elementor’s default colors and fonts. That’s in Elementor’s settings. Causes loads of problems, and I prefer to set my default/global colors and fonts in my theme’s Customizer (Appearance > Customize).

  4. Hello Dave,

    Thank you for your tutorials and resources. I want to purchase the GeneratePress theme with your affiliate link, but the link above is leading me back to your Home page. Please let me know what link to follow in order to use your referral when you get the chance.

    Thank you!
    Miguel

      • Hello Dave,

        Thank you for providing the link. I just purchased the GeneratePress theme and I’m excited to get started! I’m curious as to what hosting provider you switched to, I know you have recommended SiteGround.

        Thank you once again!
        Miguel

        • Thanks for that Miguel. 🙂 I recently switched to Flywheel. I still think SiteGround is a superb host for shared hosting, and 100% recommend them. But my traffic has increased a lot recently and I decided to move to a more dedicated WordPress host. I will write a review of my experience at some point. So far, so good!

  5. Dave, I followed your instructions last month and the footer looked great. Today it isn’t there, and I can’t figure out how to get it back. I’m using Elementor Pro with Elementor Anywhere. Can you tell me where the footer template ID is supposed to go? I know it would be easy with GeneratePress Pro, but I currently have the non-pro version.

    I’m building the website on a temporary domain, and I’m almost ready to move it to the real one – but I need those footer menus back first!

    Thanks!

    • Well that’s odd? How did you place your Elementor footer template sitewide previously? If you don’t have GP Premium, it won’t have been with a hook. Did you use the Header Footer Elementor plugin? Prob easier to discuss via email if you want to drop me more details.

  6. It was my fault. I do have GP Premium, but I disabled it yesterday. I can’t remember why. Now I clicked the enable button and my footer came back. Not enough coffee, I guess. It’s been one of those weeks. 😉

    Sorry to bother you.

    By the way, did we need to log in to Facebook before commenting on your site before? If that was this site, thanks for getting a different system. This is so much easier.

  7. Hi, I have created the footer for my site and it really looks nice. But it doesn’t overlap the content above it. The white box hides beneath the content. What should I do? I am using Ocean Wp theme.

  8. Another great video Dave, thank you so much for all the hard work, and thanks for the simple instructions on how to import the template!

  9. Hi Dave

    Built a footer for myself based on your video. Great video. One little thing, the popup maker popup is named popup maker TM. This is important because the popup maker name is not the same as the one with the TM after it. Little thing, but otherwise big help. Of course the footer turns out to be the header but I have to figure that out? Hey I’m just beginning.
    Best
    Jordan

    • Hmmm. Pretty sure the one without the TM wasn’t released when I made this video. And it seems like they only use the TM on WordPress, they don’t have the TM on their own website anywhere. I’ll bear that in mind if I mention it again in future. Thanks for the tip.

  10. Dave,

    Great tutorial!

    I had one question, I’m very new to WordPress and Elementor, so please excuse me if it’s a silly question

    I thought that if you produced a website using Elementor, you would not be able to customise through WordPress, however at around the 18 minute mark, you were able to customise through WordPress as normal?

    Regards

    Ali

    • Thanks Ali. And no question is a silly question. 🙂 With Elementor, you only choose to edit each page, on a per-page basis. Elementor is just a plugin, it doesn’t actually take over WordPress or anything like that. So you can still use WordPress, and even if you edit 1 page with Elementor, that only really affects the main content field for that page. You can still edit the page title, excerpt and lots of other page settings.

      I hope that helps?

  11. Hi Dave. Great video. My youngest and myself are coming along great with them. Just a little question. Under your footer you have the copyright info, How did you get that in? Was it the same process as when you did the header with nested bits? Also is it possible to make that section smaller, ie not much bigger than the text?

    Thanks

    Daniel

    • Hi Daniel – good to hear from you! Glad the videos are useful. 🙂 The copyright info is just a GeneratePress feature. If you have GP Premium you can edit it in the Customizer, under Layout > Footer. The padding controls are there, to reduce the space. Let me know if that helps.

      • Looked at that, but you have to turn off Elementor canvas which leaves you unable to use the header widget (in Elementor Pro)…Puzzling…suppose it would be possible to create my own sub footer, but like that GP Premium auto updates the year..

        I may be missing something, but can’t see how to have GP Premium sub footer and elementor pro header widget..Fun, fun, fun as they say….

        • The Elementor canvas template is a purely blank page. It doesn’t hook into the theme’s header or footer feature whatsoever. So in that case, you’d have to add your footer template into each page you create, maybe using the Duplicate Post plugin to duplicate each new page so it has that already there.

          The canvas is really meant to be for one-off standalone landing pages.

  12. I followed you instructions and it looks great on my site, but when the page loads it flashed the footer first then the page loads. I am using slider revolution for each section of my page.
    Please advise?

  13. Hey Dave,
    We want to build our own copyright bar just below the footer like you’ve built here. What is the best way to disable the generatepress copyright bar? I saw the with the display: none css style but is there another way so the browser won’t be calling that css piece of code every page which adds msecs to load time.

    • Unfortunately I don’t know a way to do that Carol, without that code. But that tiny couple of lines is negligible in terms of download times, really, especially if your site is Gzipped and cached.

      However, tt would be nice to have a checkbox to remove it, I agree!

  14. Hi Dave Foy
    How can I set background image for just the home page, not for other page like about page and contact page. Maybe this is not the right place to ask. Hope you can help me.
    Best regards
    Erling

  15. Hi Dave, I’m not using a theme that has hooks how can i inject my elementor footer in the theme, I’ve not found a good tutorial on this?

    • I’ve not found a way to do this, if the developer hasn’t provided the means to hook into that part of the theme. The only way would be to edit the theme files themselves, in a child theme, and use PHP to insert the Elementor footer template shortcode. Not ideal!

  16. Hi Dave. How can I keep Elementor footer in the bottom of short pages. I tried selector {
    bottom: 0;
    width: 100%;
    position: fixed;
    } in Custom CSS but this keep footer sticked on the bottom of the site the whole time. Any idea?

  17. So, I downloaded the Anywhere Elementor plugin but was having some trouble with the html code. I added html code into the footer template so that I can have a Mailchimp subscription in the footer as well as shortcode to show my instagram feed. However, when I added the footer using the AE plugin the codes don’t work and show up as text. Any idea how to fix that?

  18. Hello Dave,

    I have watched your video about 4 times and followed step by step. I was able to create my custom footer and insert it into my custom home page I built. I am having issues trying to get the bullet points to go away now in my Footer Navigation Menus. I have tried the trick you mentioned in the video with no relief. I am using the 2016 Theme as that seems to be the best to use with Elementor. Could you please help me sir?

Leave a comment

Tweet
Share