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.
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.
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.
Go to Advanced Tab → Position and set its position to Fixed
Use the Location option and set the position to be Bottom Centered
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;
}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 () {
diviCalcFooterHeight();
});
$(window).on('resize', diviCalcFooterHeight)
})(jQuery);
</script>
You can see the result in the below GIF:
