How to Persuasively Lead Visitors Down the Page with Divi’s Built-in Animation Settings

Posted on January 31, 2019 by in Divi Resources | 13 comments

How to Persuasively Lead Visitors Down the Page with Divi’s Built-in Animation Settings

One of the main purposes of hero sections is to convince people to keep scrolling down the page and discover more content and information you’ve shared. With Divi’s built-in animation options, you can add interactive animations to your page that will help you persuasively lead visitors down the page. In this tutorial, we’re going to motivate visitors to scroll down to the services section using arrow icons that lead them to the services section.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome on different screen sizes.

Desktop

animation settings

Mobile

animation settings

Let’s Start Creating!

Add Section #1

Background Color

Create a new page and add a regular section to it. Open the section settings and change the background color.

  • Background Color: #0f0f0f

animation settings

Bottom Divider

Continue by adding a bottom divider to the section.

  • Divider Style: Find in List
  • Divider Color: #ffffff
  • Divider Height: 30px
  • Divider Horizontal Repeat: 10x (Desktop), 4x (Tablet & Phone)

animation settings

Spacing

Add some custom padding values as well.

  • Top Padding: 269px (Desktop), 100px (Tablet & Phone)
  • Bottom Padding: 674px (Desktop), 200px (Tablet & Phone)

animation settings

Add Row

Column Structure

Then, add a new row using the following column structure:

animation settings

Sizing

Without adding any modules yet, open the row settings, go to the sizing settings and enable the ‘Make This Row Fullwidth’ option.

  • Make This Row Fullwidth: Yes

animation settings

Add Text Module

Add Content

The only module we need in this row is a Text Module. Go ahead and add some H1 content of choice.

animation settings

Heading Text Settings

Change the heading text settings next.

  • Heading Font: Didact Gothic
  • Heading Font Weight: Bold
  • Heading Text Alignment: Center
  • Heading Text Color: #ffffff
  • Heading Text Size: 170px (Desktop), 50px (Tablet & Phone)
  • Heading Line Height: 0.8em

animation settings

  • Heading Text Shadow Vertical Length: 1.5em
  • Heading Text Shadow Color: rgba(0,0,0,0.11)

animation settings

Add Section #2

Background Color

Continue by adding the second section to the page. Change the background color in the section settings.

  • Background Color: #0f0f0f

animation settings

Top Divider

Add a top divider to the section as well.

  • Divider Style: Find in List
  • Divider Color: #ffffff
  • Divider Height: 30px
  • Divider Horizontal Repeat: 10x (Desktop), 4x (Tablet & Phone)

animation settings

Spacing

And increase the spacing values in the spacing settings.

  • Top Padding: 245px
  • Bottom Padding: 245px

animation settings

Add Row

Column Structure

Continue by adding a new row with the following column structure to the section:

animation settings

Sizing

Open the row settings, go to the sizing settings and make some changes.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 2

animation settings

Add Blurb Module

Select Icon

The first module we’ll need in the first column is a Blurb Module. The only part of the element of the Blurb Module that we need is the icon. Select the arrow icon that points downwards.

animation settings

Icon Settings

Then, go to the design tab and change the icon settings.

  • Icon Color: #4ffcff
  • Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 150px

animation settings

Spacing

To increase the reach of the icon, we’ll need to add some negative top margin. This will allow the Blurb Module to overlap the previous section and will allow the animation between two sections to happen smoothly. To make up for the custom margin, we’ll add custom top padding as well. This will make sure the icon remains in the exact same position as before. The only thing that changes is the size and reach of the entire module.

  • Top Margin: -550px
  • Top Padding: 550px

animation settings

Animation

Last but not least, add an animation to the Blurb Module using the following settings:

  • Animation Style: Slide
  • Animation Direction: Down
  • Animation Duration: 3000ms
  • Animation Delay: 1200ms
  • Animation Intensity: 100%
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Ease-In-Out
  • Image/Icon Animation: No Animation

animation settings

Add Text Module #1 to Column 1

Add Content

The next module we need in the first column is a Text Module. Add some content of choice.

animation settings

Text Settings

Continue by changing the text settings.

  • Text Font: Didact Gothic
  • Text Font Weight: Bold
  • Text Color: rgba(255,255,255,0.03)
  • Text Size: 350px
  • Text Orientation: Center

animation settings

Add Text Module #2 to Column 1

Add Content

Add a second Text Module to the first column with some H3 content of choice.

animation settings

Heading Text Settings

And change the heading text settings in the design tab.

  • Heading 3 Font: Didact Gothic
  • Heading 3 Text Alignment: Center
  • Heading 3 Text Color: #ffffff
  • Heading 3 Text Size: 40px (Desktop), 30px (Tablet & Phone)
  • Heading 3 Letter Spacing: -1px

animation settings

Add Divider Module to Column 1

Visibility

The next module needed in the first column is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

animation settings

Color

Continue by changing the divider color in the design tab.

  • Color: #ffffff

animation settings

Sizing

Make some changes to the sizing settings too.

  • Width: 59%
  • Module Alignment: Center

animation settings

Animation

And add an animation to the module as well.

  • Animation Style: Slide
  • Animation Direction: Center
  • Animation Duration: 2000ms
  • Animation Intensity: 10%
  • Animation Speed Curve: Ease-In-Out

animation settings

Add Text Module #3 to Column 1

Add Content

The next and last module we need in column one is another Text Module. Add some content of choice.

animation settings

Text Settings

Continue by changing the text settings.

  • Text font Weight: Light
  • Text Color: #b7b7b7
  • Text Size: 18px
  • Text Line Height: 1.8em
  • Text Orientation: Center

animation settings

Animation

And add an animation to the module.

  • Animation Style: Slide
  • Animation Direction: Up
  • Animation Intensity: 20%
  • Animation Speed Curve: Ease-In-Out

animation settings

Clone Modules 3 Times & Place Duplicates in Remaining Columns

Now that we’re done modifying all modules in column 1, we can clone all modules in column one 3 times and place the duplicates in the remaining columns.

animation settings

Change Module Content

Change the content of the duplicates.

animation settings

Add Animation Delay to Divider Modules of Duplicates

Add some animation delay to each one of the Divider Module duplicates as well.

  • Divider Module in Column 2: 400ms
  • Divider Module in Column 3: 800ms
  • Divider Module in Column 4: 1200ms

animation settings

Add Animation Delay to Text Module #3 Duplicates

Do the same thing for the last Text Module in each column.

  • Last Text Module in Column 2: 400ms
  • Last Text Module in Column 3: 800ms
  • Last Text Module in Column 4: 1200ms

animation settings

Customize Blurb Icon #2

Icon Color

We’re also modifying the blurb icon’s color and animation for each one of the duplicates. Open the Blurb Module in column 2 and change the icon color.

  • Icon Color: #ff6b86

animation settings

Animation

Change the animation settings as well.

  • Animation Type: Slide
  • Animation Direction: Down
  • Animation Duration: 2000ms
  • Animation Delay: 800ms
  • Animation Intensity: 62%
  • Animation Starting Opacity: 100%
  • Image/Icon Animation: No Animation

animation settings

Customize Blurb Icon #3

Icon Color

Continue by opening the Blurb Module in column 3 and change the icon color.

  • Icon Color: #ffe500

animation settings

Animation

Modify the animation settings as well.

  • Animation Type: Slide
  • Animation Direction: Down
  • Animation Duration: 1000ms
  • Animation Delay: 600ms
  • Animation Intensity: 69%
  • Animation Starting Opacity: 100%
  • Image/Icon Animation: No Animation

animation settings

Customize Blurb Icon #4

Icon Color

Open the last Blurb Module, in column 4, and change the icon color.

  • Icon Color: #00ff9d

animation settings

Animation

And finish the design by changing the animation settings in the design tab.

  • Animation Type: Slide
  • Animation Direction: Down
  • Animation Duration: 3000ms
  • Animation Delay: 400ms
  • Animation Intensity: 100%
  • Animation Starting Opacity: 100%
  • Image/Icon Animation: No Animation

animation settings

Final Thoughts

In this post, we’ve shown you how to persuasively lead visitors down the page using Divi’s animation settings. The basic idea is that you use Blurb Modules for their icons and increase their animation reach to the hero section. You can use this approach on any kind of website you build and get as creative as you want. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

13 Comments

  1. Clever – I like it. thanks…

  2. Donjete and Jason have really been sharing some cool ideas. Thanks ET team for all of the helpful resources!

    • Donjete Vuniqi

      Thanks, Ryan! It’s nice to see you find the resources helpful. 🙂

  3. Thanks Donjete.

    I will definitely try this out on my website.

    • Donjete Vuniqi

      You’re welcome, Tendai! Nice to hear you’re planning on using it on your own website. 🙂

  4. do you have the live demo page link ?

    • Yes, LINK please!

  5. Wow, this is fabulous … I can’t wait to try and put my own spin on it … Just goes to show how powerful Divi has become!

  6. nice post………..thank you for sharing

  7. Amazing way to capture the attention of any visitor going down to a page. Thanks for the tutorial.

  8. Amazing way to capture the attention of any visitor going down to you web page. Thanks for the tutorial!

  9. Great artical.Thank you very much for sharing this awesome post with us.

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

554,210 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest