animated hero section divi

Animated hero section divi: Most websites have a “Heroes” section, which no longer needs to be proven. Its role is not only to stand out but also to be divided into several elements that reinforce the call to action that exists. The easy-to-understand structured animated hero section divi is very popular and frequently used by different types of websites.

And while creating animated hero section divi for the desktop sounds simple, you can’t always be fooled by appearances. This is where this tutorial will come in handy. We’re going to be recreating a highly interactive mobile animated hero section divi that will not only look good on mobile but regardless of screen size. We also combine great animations to match the 2019 design style perfectly. We hope this tutorial inspires you to create your own animated hero section divi.

animated hero section divi

Interface design

Add a new section

Spacing

Start by creating a new page or opening an existing one. Add a new regular section to it, go to the spacing settings, and remove all the default top and bottom padding margins.

  • Best padding: 0px
  • Bottom Padding: 0px

Add a new row

Column structure

We’ll continue by adding a new row and using the following column structure:

Background color

Without adding any modules yet, open the row settings and add an all-black background color.

  • Background Color: # 000000

Column 1 Background color

Also, add a black background color to the first column.

  • Column 1 Background color: # 000000

Column 2 Background color

The same goes for the second column.

  • Column 2 Background color: # 000000

Sizing

Then go to the sizing settings and let the row and its columns occupy the entire width of the screen.

  • Make this line full width: Yes
  • Use custom gutter width: Yes
  • Gutter width: 1
  • Equalize Column Heights: Yes

Spacing

We also remove all default top and bottom margins from the row.

  • Padding on top: 0px
  • Bottom Padding: 0px
  • Right Padding: 1vw

Display

Finally, we’ll make sure the two columns appear side by side on smaller screens. To do this, we will need to add a single line of CSS code to the Advanced tab of the line.

Add an image module to column 1

Leave the image area blank

We are now going all the modules we need! You have to start with the image module in the first column. Instead of uploading an image to the image area, we will upload the image to the background settings in the next steps, so we need to remove the image added by default. So we can play with how the image is positioned and how much space it takes up in our row.

Add background-color

Go to the background settings of the Image module and add a background color. In the next step, we will combine this background color and a background image using a blending effect to darken the image.

  • Background Color: # 686868

Add background image

Add a background image of your choice and change the background settings accordingly:

  • Background Image Size: Cover
  • Position of the background image: center
  • Repeat background image: No repeat
  • Background image blending: multiply

Sizing

We used two columns of equal size for the row we are working on, but the result is not the same. We are going to manually change the size of each added module to make it look like we are using a different column structure. The reason we are doing this (instead of just choosing another column structure) is to make everything responsive.

on smaller screens. Go to the image module sizing settings and change the width. Width:

  • 88% Module
  • alignment: left

Spacing

Now we need to decide the size of our image in the spacing settings. We also use a display unit for these values ​​to ensure that our design remains fully responsive, regardless of screen size.

  • Top padding: 26.3vw (desktop), 48vw (tablet), 72vw (phone)
  • Bottom padding: 26.3vw (desktop), 48vw (tablet), 72vw (phone)

Animation

Finally, we will add a slide animation to the Image module. Once you apply the animation, you will notice that the image will not start appearing until the moment it enters the first column. The background color of the second column remains at the top of the imaging module as it is dragged to the left.

  • Animation Style: Slide
  • Animation Repeat: Once
  • Animation direction: left
  • Animation Duration: 1450ms
  • Animation Intensity: 60%
  • Animation Starting Opacity: 100%

Add a button module to column 1

Add a copy

The next module we need in column 1 is a button module. Enter a copy of your choice.

Button settings

Then go to the Design tab and change the button settings.

  • Use custom styles for the button: Yes
  • Button text size: 1.5vw (desktop), 2.5vw (tablet), 4vw (phone)
  • Button Text Color: #ffffff
  • Button Background Color: # e02b20
  • Button border width: 0px
  • Button border radius: 1px
  • Button Font: Poppins
  • Font Weight: Bold

Spacing

Also change the spacing values.

  • Top margin: -3.3vw (desktop), -6vw (tablet), -9.1vw (phone)
  • Left Padding: 8vw
  • Right Padding: 8vw

Shadow box

And add a subtle shadow to create depth on the page.

  • Box Shadow Blur Force: 20px
  • Shadow color: rgba (0,0,0,0.3)

Add text module # 1 to column 2

Add H1 content

On the second column! The first module we will need is a text module. Add any H1 content of your choice.

H1 text parameters

Then go to the Design tab and change the H1 text settings.

  • Police: Poppins
  • Title text color: #ffffff
  • Text Title Size: 4vw (desktop), 5vw (tablet), 6vw (phone)

Spacing

Change the spacing values ​​as well.

  • Top margin: 12vw
  • Left margin: -20vw
  • Right margin: 17vw (desktop), 15vw (tablet), 1vw (phone)

Animation

And add subtle animation.

  • Animation Style: Slide
  • Animation Repeat: Once
  • Animation Direction: Down
  • Animation Duration: 1450ms
  • Animation Intensity: 10%
  • Animation Starting Opacity: 100%

Add a division module to column 2

Visibility

The next module we need in the second column is a division module. Make sure the “Show Separator” option is enabled.

  • Show Divider: Yes

Color

Then go to the Design tab and change the color of the separator.

  • Color: # e02b20

Animation

Add animation to the division module next.

  • Animation Style: Slide
  • Animation Repeat: Once
  • Animation Direction: Right
  • Animation Duration: 1450ms
  • Animation Intensity: 83%
  • Animation Starting Opacity: 100%

Read more: How to create image reflections on Divi

Add text module # 2 to column 2

Add content

Let’s move on to the next and last module we need in the second column! Add a description of your choice.

Text settings

Then go to the text settings in the Design tab and make some changes accordingly:

  • Text Font: Poppins
  • Text Font Weight: Light
  • Text Color: # 919191
  • Text size: 0.9vw (desktop), 1.8vw (tablet), 2.2vw (phone)
  • Text letter spacing: 0.1vw
  • Text Line Height: 2.2em

Spacing

Also change the spacing values.

  • Top margin: 9vw (desktop), 19vw (tablet), 23vw (phone)
  • Bottom margin: 12vw (desktop), 19vw (tablet), 23vw (phone)
  • Left margin: -3vw
  • Right margin: 20vw (desktop), 6vw (tablet), 3vw (phone)

Animation

And at the end, add a fade animation to the module and you’re done!

  • Animation Style: Fade
  • Animation Repeat: Once
  • Animation Duration: 1400ms
  • Animation delay: 1000ms
  • Animation Starting Opacity: 0%

Final thoughts

In this tutorial, we’ve shown you how to create an awesome animated hero section Divi. The animated hero section is very popular and frequently used on the web, but it is also important to ensure that they are highly responsive.

 

For website maintenance service contact us.

Leave a comment

echo "";