How to create a Reveal Footer in Elementor

How to create a footer that reveals itself as you scroll down. Slight parrallax effect. Created using the Elementor page builder plugin
1 min read

Hey kids, minor update, I used to use DIVI for my website, I now use a plain basic template called 'Astra' and on top of that, I use 'Elementor' plugin. That lets me WYSIWYG drag-n-drop build my website but it feels less bulky. I have options to turn off functions I'm not using, whereas DIVI made me feel like it was loading all sorts of functionality but it wasn't being utilised at all. Also, all my code is normal and typical code, it's not made up of all sorts of custom classes n such!

Anyway. I wanted a revealing footer, and it wasn't as simple as just copy pasting code that I found on the internet, -kinda. I copypasted some code but then tweaked it because I had a few problems.

The id's and classes didn't match my new theme for starters and also all my elements are in theory all floating on top of each other with no background colour, so I needed to add one of those in.

Here is the code:

#content{
z-index:2;
position:relative;
margin-bottom:100px; /* set to the height of my footer */
background:white;
}

footer{
bottom:0;
width:100%;
position:fixed;
z-index:-1;
height:100px; /* Must be set to match the #content 's margine-bottom*/
}

Paste that into your 'Additional CSS' in Appearance > Customize.

That will make it site wide. If you want it to be on only certain pages then customize that individual page through the page builder.

If you've made a custom footer through one of the Elementor Templates then I found that '.elementor-location-footer' was the right class to target instead of 'footer'

Hope this helped someone!

One comment on “How to create a Reveal Footer in Elementor”

  1. Thanks a lot!
    Perfectly works with Elementor 2.5 and Astra on one site for me. Replaced footer with .elementor-location-footer as you mentioned, because my footer is a Elementor Template.

    Not sure about this code, if the footer is very large (with sitemap), and changing its size in responsive-mode? Then there would be no fixed pixel size for the footer height, right?

    Just tried it on another side, which uses an overlay menu and two different footer templates (one for the home-page, only with social icons, which is about 100px) and one for the rest of the site (which has a sitemap and a much larger pixel count).
    One thing I ran into: Had to adjust the Z-Index of the overaly menu (to at least 3).
    Another is to adress the two different footer Templates with differenz margins, because of their different pixel heights.
    And the second margin would have to be flexible at least for mobile, because of the sitemap I used 3 columns for.

    Do you have any idea how to adress specific templates? All I can find is the template ID number.
    And maybe you know how to set the margin and height to the flex site of the (sitemap) footer?

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts

April 24, 2021
How to develop a reliable and consistent brand for creators

A consistent brand is one of the most important elements in any industry. When people expect to see a certain type of product each day, they have to recognise that brand and choose to support it.

Read More
April 16, 2021
XP Pen Deco Pro better than Wacom Intuos Pro?

The XP Pen Deco Pro was released in 2018 with its sights firmly set on dethroning the Wacom Intuos Pro, has it done it, for half the price?

Read More
April 5, 2021
How To Build A Remarkable Personal Brand with Video

Video is massive, and it's only getting bigger each year. In this post I'm going to be exploring what we can do with video to build your personal brand.

Read More

Like free stuff?

I'm working on a free Content Creator Kit. You'll get a bunch of design elements to help design and brand your online presence... Sign up with the button below to be one of the first to get it!
SEND ME THE KIT
Design & content © 2021 Chris Hart. All Rights Reserved
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram