Divi UI Challenge #3 – Hero Section

by | Oct 21, 2016 | Divi UI Challenge, Tutorial | 10 comments

This week’s Divi UI Challenge brings you a ‘Hero Section‘ – a focal element of your site (typically found on the front page) that highlights your cause, any call-to-actions and main features. This is a slightly bigger tutorial than previous ones, but we can assure you it’s worth it. Don’t forget that you can also follow along the tutorial via our youtube channel here or watch below .

Here’s a preview of what we’ll be building today.

Ok, Let’s go!

Firstly from your Dashboard homepage in the top function bar select +New and Page

Add new page

Give your page a title (we went with Super Hero Section 2) and in the far right function column under Template select Blank Page (this removes the footer and menu from the page which makes it a bit easier to design when previewing back and forth).

Blank Page under Template

Now click on Use the Divi Builder. 

use the divi builder

 

Now when building a ‘Hero Section’ there are a million different approaches you could take, all determined by the particular look or goal you are trying to achieve. For this tutorial, our goal was to feature an image backdrop which means we need to contain all of our builder elements into a single section. Then we can easily apply a background image to that section and it covers everything. Using multiple sections would get a lot trickier.

So looking at the finished product, this tutorial will work through its layout element-by-element…. starting with the logo in the top left corner.

In your Divi Builder select Insert Column/s within the Section.

insert column/s

Select the two halves columns. Looks like this.

two halves column

Save & Exit and the builder section will now look like this.

Two column section

We’re going to pop the logo into the left-hand Module and for this tutorial our ‘logo’ is actually just an icon from the Blurb settings, but you would obviously have your own design.

So click Insert Module/s on the left-hand Module.

For our icon we select Blurb, complete as follows

Scroll down (leave Title, Url and Url Opens as is) to toggle Use Icon to YES and then select our icon, we chose..

icon

Icon Color: White

Circle Icon: No

Image/Icon Placement: Left

Image/Icon Animation: No Animation

Text Color, Text Orientation and Content: leave as is (not relevant here)

Save & Exit

Now for previewing purposes we are going to set a block colour behind the entire section. We’ve chosen a dark blue (as our final image is dark, if you’re final image is light chose a lighter colour).

To do this, click on the Settings Icon (three horizontal lines) on the far left Layout column (the blue one) – this is the Section settings

Section w blurb

Scroll down to Background Color and select your chosen colour.

select color

Let’s preview and see what we have.

Ok, so the next element of the final product we’re going to build is the Main Text & Try Now Button.

In the bottom left hand side of the page layout you’ll see +Add Row

add row

Now again select the two 1/2 column option.

two halves column

For our Module we could use the Call to Action option but instead will build it with the Text option.

So on the left hand column, click Insert Module, and scroll down to select Text. 

Change Text Color to Light,  and insert your text into the Content Box. We’ve just grabbed our dummy text from lorem2.com 

Ok, now over to Advanced Design Settings for this Module.

Complete as follows.

Max Width: leave blank

Header Font: we’ve chosen Montserrat and set to Bold and All Caps (TT)

Header Font Size: 54

Header Text Color: Should be fine to leave blank as we’ve previously selected for light text.

Header Letter Spacing: 0px

Header Line Height: 1em

Text Font: Lato Light

Text Font Size: 18

Text Text Color: We have chosen a light blue for the subheading. (#7c35b)

Text Letter Spacing: 0px

Text Line Height: 1.8em

Background Color: Leave unselected

Background Image: Leave unselected

Use Border: Leave

Custom Margin: Leave

Custom Padding: Leave

Now we actually want our subheading text italicised so head back into the Module Settings (three horizontal lines on the Grey Text Module box).

Now instead of editing the subheading text in the Advanced Design Settings we are going to do it through the General Settings Content Box. This avoids having the whole text (including the Header) italicised.

So in General Settings, in the content box, highlight the subheading text only and select

italic

in the control toolbar.

Save & Exit

and Preview

The next step is to build the pink Try Now Button.

So, in the same Row as the Main Text Module, click on Insert Module/s

insert new module

Select Button

Button

and complete as follow

Button URL: # (insert your URL link)

URL Opens: In The Same Window

Button Text: Try Now

Button Alignment: Left

Leave remaining settings as is and move onto Advanced Design Settings. 

advanced design settings

Complete as follows.

Use Custom Styles for Button: toggle to YES

Button Text Size: 16

Button Text Color: White

Button Background Color: We’ve chosen a pink (#ce2560)

Button Border Width: 2

Button Border Color: The same pink (#ce2560)

Button Border Radius: 0

Button Letter Spacing: 1

Button Font: Montserrat and All Caps (TT)

Add Button Icon: Yes

Button Icon: We selected the Right Hand Arrow

Button Icon Color: White

Button Icon Placement: Right

Only Show Icon on Hover for Button: No

note: one of our reasons behind keeping our icon permanently fixed (not only visible on hover) is because we will be playing around with the button padding in CSS in a minute… and have noticed that when padding is determined by Custom CSS, a ‘display on hover only’ icon tends to get messed up a bit.

Button Hover Text Color: White

Button Hover Background Color: We’ve taken the pink color and just toggled the selected down to darken it. (#af1f54)

Button Hover Border Color: Same darkened pink (#af1f54)

Button Hover Border Radius: 0

Button Hover Letter Spacing: 1

Now to extend the padding on the button (make it wider regardless of text content) we are going to pop over to the Custom CSS.

Custom CSS

Scroll down to Main Element and insert the following

padding-left: 40px; !important;

padding-right: 50px; !important;

Including !important in Custom CSS ensures that your styling edits are given preferences over defaults

The reasons that the padding on the right hand is bigger than the left is that the padding is calculated on either side of text only (not icons) and as we have an icon included in our button, we’d like to include that in our ‘centred’ content.

now we have noticed the custom padding here playing up a bit. Has worked perfectly in one trial (like in our youtube tutorial) and not at all in another…. a bit of a bug, so if you’re hitting your head against a brick wall, just change back to the default padding settings)

Save & Exit and Preview

So our next element is the Three Features down the bottom of the Hero Section.

So back in the Divi Builder, click on + Add Row

add row

And select a three column row.

three column row

Click on Insert Module/s in the first column, and select Blurb. Complete as follows.

Title: Big Feature 1

URL: # (insert your URL link)

URL Opens: In the Same Window

Use Icon: Toggle to YES

Icon: we chose…

icon 1

Icon Color: we’re using the same (original) pink color (#ce2560)

Circle Icon: Toggle to NO

Image/Icon Placement: Left

Image/Icon Animation:  No Animation

Text Color: Light

Text Orientation: Left

Content: Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

 

Now Over in Advanced Design Settings

advanced design settings

Complete as follows.

Image Max Width: Leave blank

Use Icon Font Size: Leave as is (NO)

Header Font: Montserrat and Bold

Header Font Size: 18

Header Text Color: White

Header Letter Spacing: 0px

Header Line Height: 1em

Body Font: Lato Light

Body Font Size: 13

Body Text Color: Our light blue again (#7c95b2)

Body Letter Spacing: 0px

Body Line Height: 1.7em

Background Color: leave unselected

Background Image: leave unselected

Use Border: No

Custom Margin: No

Save & Exit

Back in the Divi Builder, on our Blurb module (the one we’ve just completed) click on the Duplicate icon twice

duplicate

This will create the three Blurb modules.

three blurbs

 

Now because we want them side by side, not above each other, just click and drag on the second and third icon, into the two empty Module Columns to the right. To look like this.

side by side

Now for the second and third Module, click on the Settings Icon

settings

In General Settings input the relevant changes for each Module. i.e. Title, URL, Icon and Content. 

Save & Exit and Preview.

Ok, after checking out the preview, we’d like to add some extra padding around the Main Text element, and reduce the padding along the bottom of the Features element to bring it closer to the base.

So, in the Divi Builder, select the Settings Icon (in the green column) for the Row that contains the Main Text.

Row Module - Main Text

In the General Settings scroll down to Custom Padding and input 60px in Top and 80px in Bottom. 

Now, similarly click on the Settings Icon (in the green column)  for the Row that contains the Feature Blurbs

side by side

In the General Settings scroll down to Custom Padding and input 0px in Bottom and Toggle Keep Custom Padding on Mobile to YES.

Save & Exit

Now to add in our background image

The Page Layout should be looking something like this

page layout

In the left hand blue column, click on the Settings Icon. In General Settings you want to Upload an Image. Our’s is from unsplash.com, which we have edited with a blue wash.

Then the last addition we’d like to make is the Menu overlay in the top right hand corner.

As it stands, there is no standard width Module option for menus, so we’re overlaying ours as a fullwidth section. This gets a little bit trickier. Bear with us.

From the Divi Builder main page at the bottom of the layout you want to click on + Fullwidth Section, looks like this.

Add Fullwidth Section

This will create another Section at the bottom of the layout, like this.

new fullwidth section

Click on Insert Module/s and select Fullwidth Menu. 

Select your chosen menu from the drop down (or create a new one)

Background Color: Transparent – so set to White and toggle the opacity right down to the bottom (far right column).

transparent color

Text Color: Light

Text Orientation: Right

Everything else can be left As Is.

Save & Exit

Section Module Settings by clicking on the Settings icon (three horizontal lines) in the far left purple column. Under General Settings set the Background Color to transparent as well.

It’s very important to do these steps in this particular order.

Under Custom CSS scroll down to Main Element and input the following….

position: absolute;

width: 100%;

top: 0;

A few little tweaks. We just want to move our logo (in the top left corner) a bit further up the page. This change would obviously depend a lot on your logo size/style.

Back in the Divi Builder. Click on the Settings Icon in the first Blurb Row Module (Green column)

Blurb Row

Scroll down to Custom Padding: and just change Top to 0.

Save & Exit and Preview. 

 

LOOKING GOOD! 

Hope you’ve enjoyed this week’s Hero Section tutorial! We’ll see you here again next week! Don’t forget to subscribe to our monthly newsletter as well for some pretty epic Divi freebies.

Have anything specific you’d like us to tackle? Comment below.

Want the Download?

Add this Hero Section to your Divi Library. Hit the download button below and import on your own site. 🙂

Download Now

Get 1 Free Divi Layout Pack, Child Theme or Plugin

In your Inbox. Once a month. Every month.

Are you ready for Gutenberg?

We've built a plugin that makes it super easy to create Custom Gutenberg Blocks.

Check it out

You have Successfully Subscribed!

Pin It on Pinterest