Source: https://divicake.com/blog/how-to-download-and-install-divi-header-layouts-for-free/ [Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/) # How to Download and Install Divi Header Layouts for Free By Divi Cake·11 September 2024·Updated 19 August 2026·5 min read How to Download and Install Divi Header Layouts for Free We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [How to Download a Free Divi Header Layout](https://divicake.com#how-to-download-a-free-divi-header-layout) - [How to Upload a Free Header Layout to Your Divi Library](https://divicake.com#how-to-upload-a-free-header-layout-to-your-divi-library) - [Implementing the Uploaded Free Header Layout](https://divicake.com#implementing-the-uploaded-free-header-layout) - [Customizing Your Free Header Layout](https://divicake.com#customizing-your-free-header-layout) - [Finalizing Your Header Layout](https://divicake.com#finalizing-your-header-layout) - [Final Result](https://divicake.com#final-result) - [Conclusion](https://divicake.com#conclusion) Creating a visually appealing and professional header for your website is crucial for enhancing user experience and establishing your brand’s identity. However, finding high-quality [Divi](https://divicake.com/go/divi/) header layouts for free can be a challenge, as many are paid or locked behind subscriptions. But worry not! In this comprehensive guide, we will walk you through the entire process of downloading, uploading, and customizing a free [Divi header layout](https://divicake.com/blog/header-footer-layout-packs/) step by step. This tutorial will make the task straightforward, providing you with everything you need to give your website a polished and modern look. ## How to Download a Free Divi Header Layout To download a free Divi header layout, you first need to obtain the header package from Elegant Themes. Start by visiting the [Elegant Themes](https://divicake.com/go/divi-header-ui-kit/) website, then find the [Table of Contents](https://divicake.com/go/download-divi-header-ui-kit/) and Click on the second option, which is Subscribe to Download for Free. A subscription option will appear as shown in the screenshot below, click the blue color button labeled Download the Layout Kit. A new interface will open, allowing you to choose the folder where you’d like to save the layout. Select your desired folder, and the layout will begin downloading. Once the download is complete, locate the folder named divi-100-header-ui-kit and unzip it. In the next step, we will proceed with uploading and applying this layout to your Divi theme. Stay tuned for the continuation! Screenshot showing the download interface for a free Divi header layout from Elegant Themes, with the option to subscribe and download the layout kit. How to Download a Free Divi Header Layout ## How to Upload a Free Header Layout to Your Divi Library In this step, we will guide you through uploading your free header layout to the Divi Library and saving it. Start by ensuring you’re on your [WordPress dashboard](https://divicake.com/blog/wordpress-tutorial/). From there, click on [Divi](https://divicake.com/blog/what-is-divi-wordpress/), as shown in the image below, and then select Divi Library. A new interface, the Divi Library, will appear. At the top of the Divi Gallery, you’ll see two options: Manage Categories and Import & Export. Click on Import & Export. This action will bring up the Portability interface. Next, click on Import within the Portability window, and then select Choose File. Navigate to the folder where you extracted the divi-100-header-ui-kit in the previous step. Look for the Header Divi Kit.json file and click to upload it (as demonstrated in the screenshot below). Finally, click on the blue button labeled Import Divi Builder Layout to successfully upload your free header layout. Your Divi header layouts should now be imported and ready to use! Screenshot showing the process of selecting and uploading the Header Divi Kit.json file to the Divi Library via the Import & Export option in the WordPress dashboard. How to Upload a Free Header Layout to Your Divi Library Read More: [Divi Headers with Slide-in Design Layout Pack](https://divicake.com/go/divi-headers-with-slide-in-design-layout-pack/) In the image below, you can see the result of the upload. If your screen matches the results shown in the images, congratulations! You have successfully uploaded and saved your [Divi Header Layout](https://divicake.com/blog/header-footer-layout-packs/). In the next step, we will guide you on how to implement it. Stay tuned! Screenshot displaying the successful upload of the Divi Free Header Layout in the Divi Library, confirming that the layout is ready for use. Upload Successful Confirmation Read More: [Download the Divi Header Layout Pack to create stunning headers that enhance your brand.](https://divicake.com/go/header-layout-pack/) ### Implementing the Uploaded Free Header Layout In this step, we’ll set the uploaded Free Header Layout as the header for all pages of your website. Start by clicking on Divi, and then select [Theme Builder](https://divicake.com/blog/divi-theme-builder-overview/), as shown in the screenshot below. This will open the Divi Theme Builder interface. Next, click on Add Custom Header, and then choose Add From Library. From there, click on Your Saved Layout and select the Header Divi Kit that we uploaded earlier from your PC. Once selected, the Free Header Layout will be applied to all pages of your website. In the next step, we will walk through how to customize this header. Screenshot displaying the steps to apply the uploaded Free Header Layout through Divi’s Theme Builder by selecting “Add Custom Header” and “Add From Library” options to apply the saved layout to all pages. Implementing the Uploaded Free Header Layout ### Customizing Your Free Header Layout Now we’re going to select and customize our free header layout. Click on the Custom Header edit button, which is shaped like a pen. This will open your page builder, where you’ll find a collection of free premade header layouts, as shown in the image below. Take your time to browse through these options and select the one that best suits your preferences. For this example, we chose the Green header layout. Screenshot showing the Custom Header edit button (pen icon) in Divi’s page builder, with various premade header layout options, highlighting the selection of the Green header layout for customization. Customizing Your Free Header Layout Read More: [Premio – Header and Footer Layouts Bundle](https://divicake.com/go/premio-header-and-footer-layouts-bundle/) ### Finalizing Your Header Layout After selecting your preferred header, you’ll want to clean up the remaining headers. Hover your mouse over each header that you wish to delete and press the delete icon button. Delete them one by one until only your favorite header remains. Once you’ve done this, your header will be ready to use for your website. Just ensure that all your work is saved to avoid losing any changes. Screenshot showing the deletion process of extra headers in Divi’s page builder, with the delete icon being pressed, leaving only the selected Green header layout. Finalizing Your Header Layout ## Final Result In the images below, you can see the final result of your customized free header layout. The header looks stunning and blends seamlessly with your website’s design. You can easily tailor it to fit your specific needs and style preferences, ensuring it enhances the visual appeal of your website. Enjoy your new, beautifully designed free header! Screenshot showcasing the final customized free header layout, displaying a stylish and integrated design that complements the website’s overall look. Final Result Read More: [Smooth Divi Header Templates Pack](https://divicake.com/go/smooth-divi-header-templates-pack/) ## Conclusion To conclude, you have successfully transformed your website with a custom Divi header layout by following these detailed steps: You began by downloading the free header package from [Elegant Themes](https://divicake.com/go/elegant-themes-home-page/). By subscribing to their download option, you were able to acquire the layout file and save it to your desired folder. Next, you navigated to the Divi Library on your WordPress dashboard and used the Import & Export feature to upload the header layout. You ensured that the file was correctly imported by selecting and uploading the Header Divi Kit.json file. Once the layout was successfully uploaded, you set it as the default header for all pages using the [Divi Theme Builder](https://divicake.com/blog/divi-theme-builder-overview/). You applied the uploaded layout across your site by selecting it from your library. After this, you customized the header by choosing the most suitable premade layout from the options available. You selected your preferred style and edited it to align with your website’s branding and needs.By following these steps, you [enhanced your Divi website’s appearance](https://divicake.com/blog/divi-enhancement-guide/) with a professionally designed header that aligns with your brand’s identity, giving your site a fresh and functional look. Read More: [Ultimate Divi Headers Design Layout Pack](https://divicake.com/go/ultimate-divi-headers-design-layout-pack/) About the author Written by Divi Cake. ## 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 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/) ## 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 Blogging [ Selling Divi websites and child themes Blogging10 min read ### How to Make Money Selling Divi Websites and Child Themes How to earn from Divi three ways: building sites for clients, selling finished websites through a brokerage or marketplace, and packaging child themes for sale. 29 September 2026](https://divicake.com/blog/selling-divi-websites-and-child-themes/) [ Top reasons to choose a pre-built theme for your website Blogging10 min read ### Top Reasons to Choose a Pre Built Theme for Your Website Why a pre-built theme is often the faster and cheaper way to launch a site, compared with a custom build on cost, responsiveness, customization, SEO and support. 21 September 2026](https://divicake.com/blog/reasons-to-choose-a-pre-built-theme-for-your-website/) [ Why Web Designers Use Divi Theme to Build Better Websites Blogging7 min read ### Why Web Designers Use Divi Theme to Build Better Websites Design agencies pick Divi for its visual builder, reusable layout packs, and faster client handoff. Here is what Divi for web designers changes day to day. 14 April 2026](https://divicake.com/blog/why-web-designers-use-divi/)