All Collections
Divi Documentation
How to create a Footer Reveal Effect without a plugin
How to create a Footer Reveal Effect without a plugin

Create an engaging Footer Reveal Effect using Theme Builder and Footer Layout

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

The Footer Reveal Effect is a great way to transform a typically overlooked and dull footer into an engaging element that captures your users' attention.

  1. Go to Divi > Theme Builder and create a Footer layout. This could be a Global Footer or a Footer layout assigned to a specific page.

  2. Edit the section that contains all the footer information and go to Advanced Tab > CSS ID & Classes > CSS Class and input divi-site-footer-section.

    Footer section class

  3. Go to Advanced Tab > Position and set its position to Fixed

    Footer section positioned fixed

  4. Use the Location option and set the position to be Bottom Centered

    Footer section fixed location
  5. Go to Divi > Theme Options > General Tab > Custom CSS and add this CSS code:

    #page-container:has(.divi-site-footer-section) #main-content{
    z-index: 2;
    position: relative;

  6. Go to Divi > Theme Option > Integration tab > Header and add this JS code:

    <script id="divi-reveal-footer-effect">
    (function ($) {
    function diviCalcFooterHeight() {
    var footerHeight = $('.divi-site-footer-section').outerHeight();
    $('#main-content').css('margin-bottom', footerHeight);
    $(document).ready(function () {
    $(window).on('resize', diviCalcFooterHeight)


You can see the end result on the below GIF:

Did this answer your question?