Ensuring that the footer stays anchored at the bottom of your page, regardless of content length, improves the overall design and user experience of your website.
This article will guide you through the steps to properly display the footer at the bottom of the page using CSS and Divi settings, ensuring a consistent and polished layout for your site.
Using the Theme Builder
Go to Divi → Theme Builder
Edit or Create a Global Footer layout
Edit the Section that contains your Footer elements
Go to Advanced Tab → Position and choose Fixed
Set the Alignment to the bottom center
Without Using the Theme Builder
Go to WordPress Dashboard → Divi → Theme Options → Integrations Tab
Add this JS code:
<script id="change-footer-position">
document.addEventListener('DOMContentLoaded', function () {
if (document.body.offsetHeight < window.innerHeight) {
var footer = document.querySelector('footer');
footer.style.position = 'fixed';
footer.style.bottom = '0px';
footer.style.left = '0';
footer.style.right = '0';
}
});
</script>