How to create a Reveal Footer in Elementor

Reveal Footer Image

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!

Leave a Comment

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