hero section for divi

9 Hero Section Layouts for Divi (Free Download)

Want to create a new website with Divi? If you need some inspiration of the hero section, we have some layouts to break your deadlock. You can download them for free.

In web design, hero section refers to the top section on a web page. Due to its strategic location, this section has a vital role in determining the first impression of users. Often times, creating the hero section is one of the time-consuming parts as hero section is used as the reference of other sections. Hopefully, these hero section Divi layouts help you get your website project done more quickly.

How to Use the Layouts

The hero sections are put together into a single page layout. Thus, you need to import the page layout first, and then copy a section you like to the page you are currently working on.

Start by downloading the layout file by clicking the Download button above. Extract the ZIP file to find the JSON file of the layout. Next, create a new page and edit it with Divi. On the appearing dialog, select the leftmost option.

Once you enter the Divi Builder editor, click the three-dot icon on the bottom side to open the menu icons. Click the rightmost icon (the two-arrow icon).

On the appearing dialog panel, go to the go to the Import tab. Click the NO FILE SELECTED button to select a JSON file you want to import. Click the Import Divi Builder Layout button to import the layout.

Wait a moment until Divi Builder is done importing the layout. Once done, select a hero section you like. Click the three-dot icon on the section handle (the blue handle) and select Copy Section.

Go to the page you are working on. Right-click on the blue plus icon and select Paste Section.

If you are new to Divi, you can read our previous post to learn how to work with section in Divi.

To streamline your workflow, you can store the hero section layouts to Divi Cloud. By doing so, you can simply import them on any page you create more effortlessly. Be it on the same domain or different domain.

This page may contain affiliate links, which help support our project. Learn more.

Hand-picked Managed WordPress Hosting

Try one of the best managed WordPress hosting services.

More Templates

Subscribe to our newsletter to download

Enter your first name and email address to download the layout. 2,551 readers already subscribed!

Subscribe to our newsletter to download

Enter your first name and email address to download the template. 2,551 readers already subscribed!

Thanks for downloading

Subscribe to get new Elementor template releases