How to Create a Professional Hero Layout Using Divi 2019

In this tutorial we are going to go over how to create a Professional Hero Layout using Divi.

Divi is a popular premium theme and layout builder from Elegant Themes. There are only a handful of themes or builders that let you edit your web page from the front end and Divi is one of those.

Before we get started, if you want to follow along, you will need to have a WordPress website installed and have purchased and installed the Divi Theme. If you are new to WordPress and need some help learning it, you can find other videos in our YouTube Channel.

Let’s get started.

Log into your WordPress website.

Let’s create a new page by hovering over the Page menu and then clicking on Add New.

If you have the latest WordPress installed you will see the Gutenberg editor and a purple button prompting you to use Divi.

Let’s click on that button.

Here we have some choices to make and we are going to choose — Start Building.

Now we’re ready to begin laying out the page from scratch.

Let’s create a Row.

Divi prompts you to choose how many columns you want for the row. We are going to start building the hero section so choose the single column.

Next pops up Insert Module. I want a full width image with text in front, so I am going to choose the Text Module.

In the Text Settings, enter in some text so we can start styling the section.

Select your first line and make it an H1 tag, for the second, make it H3

Apply your changes by clicking on the Save Changes button.

I want to also add a call to action button.

By hovering over my row, a few options appear. If you want to keep these options always displayed, go to the bottom center purple circle and click on it, then click on the three vertical dots in the box on the left side… under Builder Default Interaction Mode, select Grid Mode.

Hover over your content, and click the Add New Module button and choose BUTTON

In Button Settings under Content, type in some button text, add a LINK

Under Design, choose Alignment and Center Align the button, Save those changes.

Now we are going to add an image to the background. When choosing a hero image, make sure that the image contrast works well with the color of your text and button.

Hover over the hero area and click on the Section Settings gear icon.

Select Background and click on the image icon tab, then Add Background Image. I have two images, one is light and the other is dark. Let’s select the light colored image first.

The title can be seen clearly, but let’s see if the dark one will be better.

I like the dark better so I will make the color adjustments on the text to make it work.

Click on Save Changes and then the Module Settings for the text. In Text Settings, under Content, highlight your text and make the color White.

I’m going to bold the first line to make it stand out more.

Save Changes and then select the button module to edit.

In the Design tab, expand the Button menu and toggle YES for Use Custom Styles for Button.

Choose white under Button Text Color and Save Changes.

The image looks great, and the overlaying text is easy to read, but the image doesn’t fill up our screen like the kind of hero images we are use to seeing on great looking websites.

We’re going to fix that, but first let’s give our page a name.

Click on the purple circle button at the bottom and choose the Page Settings gear icon.

Add a Page Title and Save Changes.

Let’s Save Draft before we continue.

Under Section Settings for the Row, click the Design tab, and click on Spacing.

If you’re using the latest version of Divi, and hover over the Padding Top box, you will see that these gray lines appear.

You can click and drag here to increase or decrease the values. You can then see the changes happen as you slide left or right. Do the same for Padding Bottom.

Save Changes.

Save Draft

To use some CSS to make the image fit the full height of the browser window we will need to add some custom CSS properties.

Select the Row Section Settings and click on the Advanced tab. Click on Custom CSS and in the Main Element box, paste in the code found in the description below:

min-height: 100vh;
display: flex;
flex-direction: column;

You should see your hero image fill up the screen.

And then Save Draft, Publish or Update.

There you have it, you’ve just created a Professional Hero Layout using the Divi Theme and Builder.

That’s it for me, I’m Jesse and don’t forget to subscribe to our YouTube Channel and check out some of our other WordPress Training Videos.