Build Beautiful WordPress Websites Using Divi and Divi Builder

How To Design A Sticky Hero Section On Scroll With Divi

Rifat Divi Tutorials May 18, 2021

Hero sections are considered as projecting part of a web page. For that reason, website owners use this section as a weapon to catch visitors' attention. If you are looking for an interactive sticky hero section animation on your website, Divi has got your back. Thanks to Divi's Sticky options because it's very easy to make a creative hero section scrolling effect with it.

Today, we will see how we can use a visually pleasing scrolling effect on our WordPress website's hero section. In the first part of the tutorial, we will look at the overall design, and in the next part, we will add effects there. So let's get started without delay.

Design Ouline

Before we proceed, let's have a look at how our final design will look like.

Create Design Framework

New Section Addition

Background Color

In the beginning, we will concentrate more on creating the design. Later in the part two, we will apply the sticky effects. Now, please create a new page and add a new section to it. Open the settings of that section and add a background color.

Create Amazing Websites

With the best free page builder Elementor

Start Now
  • Background Color: rgba(53,44,43,0.17)

Spacing

Let's move on the design tab of this section and change the values as follows.

  • Top Padding: 13vh
  • Bottom Padding 0px

Row 1 Adding

Column Structure

Now add a new row using the following column structure.

Sizing

Now add the row settings and move on the design tab to change sizing setting like below.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 2
  • Equalize Column Heights: 2
  • Width: Desktop - 80%, Tab and Phone - 90%
  • Max Width: 2580px

Spacing

Now we'll remove all the padding from top and bottom. So, Top and bottom padding is 0px.

Setting For Column 1 (Row 1)

Spacing

At this time, Open the setting for Column 1 and change the spacing settings.

  • Top Padding - Desktop 25vh, Tab & Phone 10vh
  • Bottom Padding - Desktop 25vh, Tab & Phone 10vh
  • 5% Padding both on left and right side.

Setting For Column 2 (Row 1)

Background Image

Next , add a background picture to your selection from the settings of column 2.

  • Background Image Size: Cover
  • Background Image Position: Center

Visibility

To be sure this works on smaller display screen sizes, we'll move on to the advanced tab of the second column and disable the visibility for tablets and phones.

Text-Module Adding To Column 1 (Row 1)

Header Content

We will add modules now. Let's start with a text module in column 1. Add any H1 content you like!

H1 Text Settings

Now change H1 text settings from the modules design tab.

  • Heading Font: Crimson Text
  • Heading Text Size: Desktop 6vh, Tablet 50px, Phone 40px
  • Heading Line Height: 1.2 em

Divider Module Adding To Column 1 (Row 1)

Visibility

It's time to add a divider module to our first column. Also, enable the show divider option.

Line

Now switch to the modules design tab and change the line settings.

  • Line Color: #35241f

Sizing

Change values on sizing settings.

  • Divider Weight: 5px
  • Width: 21%
  • Height: 5px

Description Content

Now we will add the last module we need in column 1 and that is another text module. Add some description there.

Text Settings

Modify the modules text settings as follows.

  • Text Font: Karla
  • Text Size: 18px
  • Text Line Height: 2.1em

Row 2 Adding

Column Structure

To make this impact work, its necessary that you simply add a brand new row below the primary one, under the same section. This row will need a background color and sufficient height and width so the first row can fit beneath it. We are using the following column structure.

Background Color

Now, add a background color to the row.

  • Background Color: #35241f

Sizing

Change the values in sizing settings from the design tab.

  • Width: 100%
  • Max Width: 3000px

Spacing

For the spacing setting, change values similarly.

  • Top Padding: Desktop - 30vh, Tab & Phone - 0vh.
  • Bottom Padding: 30vh
  • Left Padding: 10%
  • Right Padding: 10%

Image Module On Column 1 (Row 2)

Upload Image (Mobile and Tab Only)

Now, we will add and image module to the first column. Can you remember we disabled the visibility of image for Tablets and Phone? This image module will replace the image that used on the first row on smaller screen sizes. Use an image for tablets and phone only!

Move to the tablets and mobile view and add image.

Spacing

Move on to the modules design tab and alter the bottom margin as follows.

  • Bottom Margin: Desktop 0px, Tablet & Phone 50px

Divider Module Adding to Column 1 (Row 2)

Visibility

Now add a new Divider module beneath the image and enable the "Show Divider" option.

Line

Switch to module's design tab and alter the line color.

  • Line Color: #ffffff

Sizing

Change the sizing setting too from design section.

  • Divider Weight: 5px
  • Height: 5px

Text-Module Adding To Column 1 (Row 2)

Header Content

Add a new text module with some H2 content.

Header Text Settings

Modify the H2 text settings as follows

  • Heading 2 Font: Crimson Text
  • Heading 2 Text Color: #ffffff
  • Heading 2 Text Size: Desktop 6vh, Tablet 50px, Phone 40px.

Text-Module Adding To Column 2 (Row 2)

Description Content

The only module we will add on column 2 is a text module where there will be some description content.

Text Settings

Alter the text modules setting like given below.

  • Text Font: Karla
  • Text Font Weight: Regular
  • Text Size: Desktop 30px, Tablet & Phone 18px
  • Text Line Height: 2.2em
  • Text Color: Light

Apply Sticky Effects

Change Row Z Index Values

Row 1

Now that we have oriented the base of our design, now we will focus on some further step to make the hero cover effect. Open the first row settings and alter the Z index in the advanced tab.

  • Z Index: 1

Row 2

Change the Z index value of second row. The value needs to be higher than the first row.

  • Z Index: 2

Sticky Effect On Row 1

Now, Open first row setting once again and apply sticky effect from the advanced tab. Its mandatory make bottom sticky limit is set to section.

Sticky Setting For Column 1 (Background Color)

Now that the entire row has been turned sticky, we will apply some sticky effect on the child elements of the row. Open column 1 settings and apply the following sticky background color.

  • Sticky Background Color: #edeaea

Sticky Setting For Column 1 (Sticky Transform Skew)

Now, move to the design tab and apply the following sticky skew value.

  • Sticky Bottom Skew: -4deg

Sticky Setting For Column 2 (Sticky Transform Skew)

Apply the same sticky skew value from transform settings for column 2.

  • Sticky Bottom Skew: -4deg

Sticky Settings For Text-Module x2 (Sticky Transform Skew)

We are at the final part of our design. We'll complete the design and effect by changing the bottom skew value for both text modules in column 1 in a sticky state. This will even out the navigate sticky column skew value.

  • Sticky Bottom Skew: 4deg

Final Result

Since we have gone through all the steps and did what we asked for, our final product will look like this.

Final Words

Divi has a vast option for making a website more beautiful than others. Our today's tutorial is a great way to display short descriptions, services, and many more! If you have any questions or suggestions, feel free to leave a comment in the comment section. Also, if you found this tutorial helpful, a share will be splendid!