Source: https://divicake.com/blog/build-full-screen-footer-with-divi/ [Blog](https://divicake.com/blog/)/[Tutorials](https://divicake.com/category/tutorials/) # How to Build a Full Screen Footer with Divi By Divi Cake·21 September 2024·Updated 19 August 2026·6 min read How to Build a Full Screen Footer with Divi We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [How to Make a Full-Screen Footer in Divi](https://divicake.com#how-to-make-a-full-screen-footer-in-divi) - [Step 1: Open Your website Footer in the Divi Page Builder](https://divicake.com#step-1-open-your-website-footer-in-the-divi-page-builder) - [Step 2: Adjust Footer Sizing to Full-Screen Height](https://divicake.com#step-2-adjust-footer-sizing-to-full-screen-height) - [Setting Margin and Padding for a Full Screen Footer in Divi](https://divicake.com#setting-margin-and-padding-for-a-full-screen-footer-in-divi) - [Ensuring Tablet Responsiveness for Your Divi Footer](https://divicake.com#ensuring-tablet-responsiveness-for-your-divi-footer) - [Ensuring Mobile Responsiveness for Your Divi Footer](https://divicake.com#ensuring-mobile-responsiveness-for-your-divi-footer) - [Conclusion](https://divicake.com#conclusion) The [Divi](https://divicake.com/go/divi/) Theme is a highly flexible and popular page builder, offering a variety of options, including the ability to create custom footers or [use premade footer layouts](https://divicake.com/go/divi-footer-layout-bundle-1/). In this blog, we will guide you through transforming your website footer into a full-screen footer. By following our detailed step-by-step guide, you’ll be able to achieve a professional-looking, full-screen footer with ease. Whether you’re [using a premade layout](https://divicake.com/go/divi-footer-layouts-bundle/) or creating a custom footer, we’ve got you covered. If you’re starting from scratch, don’t worry just click on the link for our guide: [How to Make Your Custom Footer in Divi: Step-by-Step Guide.](https://divicake.com/blog/how-to-make-a-custom-footer-in-divi/) After creating your footer, follow along as we show you how to turn it into a full-screen footer. ## How to Make a Full-Screen Footer in Divi In the provided screenshot below, you can see that the current footer is a small, half-sized section. In this guide, we will walk you through the steps to transform it into a full-screen footer using the [Divi Page Builder](https://divicake.com/blog/what-is-divi-wordpress/). Our goal is to make your website not only more beautiful and attractive but also to enhance the user experience. Transforming a Half-Sized Footer into a Full-Screen Footer ### Step 1: Open Your website Footer in the Divi Page Builder In this step, we will enable the Divi Builder to edit the footer. Start by navigating to the Divi dashboard. First, click on [Divi](https://divicake.com/go/divi/), and then select Theme Builder. A new interface will appear showing various options, such as [Global Header, Global Body, and Global Footer](https://divicake.com/blog/divi-theme-builder-best-practices/). You will also see options for All Pages and Homepage. If you need to make the footer full-screen for either the homepage or all pages, the process remains the same. For this guide, we’ll focus on making the Global Footer full-screen or full-height. Click on the Global Footer Edit button to begin. The footer will open in the theme builder, and we’ll proceed with the next steps. Divi Theme Builder interface showing Global Footer edit option for transforming it into a full-screen footer. Read More: [Divi Footer Design: 6 Best-Practicing Tips for a User-Friendly Design](https://divicake.com/blog/divi-footer-design-tips/) ### Step 2: Adjust Footer Sizing to Full-Screen Height In the screenshots provided below, you can see that the footer is now opened in the Divi Theme Builder. To make the footer full height, we need to edit the entire row section. Click on the blue Section Settings button for the row. Next, navigate to the [Design tab](https://divicake.com/blog/getting-started-with-divi-design-settings/) and scroll down to find the Sizing option. Once inside the sizing settings, locate Min Height and enter 100vh. This ensures that the background covers the full height of the screen, regardless of screen size. As soon as you enter 100vh, your footer will expand to fill the entire screen. Congratulations! You have successfully made your website footer full screen. In the next step, we’ll cover some minor adjustments you may need to make. Making the Footer Full Height in Divi Theme Builder Read More: [How To Make The Row Full Width In Divi](https://divicake.com/blog/how-to-make-the-row-full-width-in-divi/) ### Setting Margin and Padding for a Full Screen Footer in Divi When building a full-screen footer for your Divi website, adjusting the padding and margin is crucial to ensure that the content is aligned properly. After applying the full-screen height, you may notice that the content within the footer shifts, either moving too far to the top or bottom, making the layout appear uneven. To fix this, go to the Row Section Settings, then navigate to the Design Tab and find the Spacing option. From there, you can adjust the padding and margin as necessary. For example, in our case, we applied 105px padding to the top, which aligned the content perfectly. Depending on your design needs, you may need to adjust the padding or margin on the top, bottom, left, or right to achieve the desired appearance. This step will help you fine-tune your full-screen footer, ensuring that it not only spans the height of the page but also presents a clean and well-aligned look across all screen sizes. Adjusting padding and margin in the Divi Theme Builder helps align footer content correctly in a full-screen layout. Use the Spacing settings under the Design Tab to fine-tune your footer’s appearance and ensure it fits well on all screen sizes. Read More: [How to Make Your Custom Footer in Divi: Step-by-Step Guide](https://divicake.com/blog/how-to-make-a-custom-footer-in-divi/) ## Ensuring Tablet Responsiveness for Your Divi Footer To ensure your Divi footer is responsive on tablets, it’s important to verify its appearance on tablet devices, given the increasing use of tablets for browsing. To check and adjust your footer’s tablet responsiveness, start by hovering over the three-dotted menu at the bottom of the Divi Builder interface. Click on the tablet icon to switch to tablet view. Next, click on the Row Settings button to access and modify settings specific to tablet displays. Make any necessary adjustments to ensure your footer looks and functions well on tablet screens. This step is crucial for maintaining a seamless user experience across all device types. View of the Divi footer on tablet devices, ensuring responsiveness for an optimal user experience. Click on the tablet icon in the Divi Builder to check and adjust settings as needed. Read More: [A Look at the New Divi Responsive Views](https://divicake.com/blog/a-look-at-the-new-divi-responsive-views/) ## Ensuring Mobile Responsiveness for Your Divi Footer To ensure your Divi footer is mobile-responsive, it’s essential to verify how it appears on mobile devices, as mobile searches have surpassed desktop searches in recent years. To check and adjust your footer’s mobile responsiveness, start by hovering over the three-dotted menu at the bottom of the Divi Builder interface. Click on the mobile icon to switch to mobile view. Then, click on the Row Settings button to access and adjust settings specific to mobile devices. Make any necessary changes to ensure your footer is displayed correctly and optimally on mobile screens. This adjustment is crucial for enhancing the user experience and maintaining strong search engine rankings. View of the Divi footer on mobile devices, ensuring responsiveness for improved user experience. Click on the mobile icon in the Divi Builder to check and adjust settings as needed. Read More: [Get Stylish Headers & Footers for Divi](https://divicake.com/go/divi-headers-footers-pack/) ## Conclusion Creating a full-screen footer with Divi is a powerful way to enhance the visual impact and functionality of your website. By following the steps outlined in this guide, you can seamlessly convert a standard footer into a full-screen design that commands attention and enriches the user experience. We began by accessing the Divi Theme Builder and selecting the footer you wish to modify. By setting the footer’s height to 100vh, you ensured that it occupies the full height of the viewport, making it a striking feature on any screen size. This adjustment alone significantly transforms a modest footer into a prominent, full-screen element that stands out to visitors. Next, we addressed the finer details by adjusting the margin and padding settings. These modifications are crucial for ensuring that the content within the footer remains well-aligned and visually appealing. Proper spacing prevents the footer content from shifting in an undesirable manner, maintaining a clean and professional layout across various devices. With the full-screen footer now in place and meticulously aligned, your website will not only look more polished but also offer an enhanced user experience. Whether you opted for a [premade footer layout](https://divicake.com/go/divi-footer-layouts-bundle/) or designed a custom footer, the techniques discussed in this guide will help you achieve a high-quality outcome. Congratulations on successfully setting up your full-screen footer! Implementing these changes marks a significant advancement in making your website more engaging and user-friendly. Continue to explore and experiment with Divi’s features to further customize your site and create a seamless browsing experience for your visitors. Read More: [Get Stunning Footer Sections for Divi](https://divicake.com/go/divi-footer-sections-pack/) ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Get the Divi Cake newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/) - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tutorials [ Getting Started with Divi: Theme Options - SEO Tab Tutorials5 min read ### Getting Started with Divi: Theme Options - SEO Tab What every setting in Divi's Theme Options SEO tab does — homepage title, meta description and keywords, canonical URLs, title autogeneration, and the separate controls for single posts and the index page. 21 October 2026](https://divicake.com/blog/getting-started-with-divi-theme-options-seo-tab/) [ Getting Started with Divi: Design Settings Tutorials8 min read ### Getting Started with Divi: Design Settings What the Design tab does in Divi: dividers, sizing, spacing, borders, box shadows, filters, transform and animation on sections, rows and columns, plus the full design settings for the blog module. 19 October 2026](https://divicake.com/blog/getting-started-with-divi-design-settings/) [ Getting Started with Divi: Content Settings Tutorials8 min read ### Getting Started with Divi: Content Settings A tour of the Content tab in Divi: where the section, row and module settings live, and what link, background, admin label, column structure and the blurb, blog, contact form and email optin settings actually do. 17 October 2026](https://divicake.com/blog/getting-started-with-divi-content-settings/)