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

January 31, 2019

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings Theme Builder Layout

Mobile

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-1 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings Theme Builder Layout

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)

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-1 Theme Builder Layout

Spacing

Add some custom padding values as well.

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-2 Theme Builder Layout

Add Row

Column Structure

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-3 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-4 Theme Builder Layout

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.

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-5 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-6 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-7 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-8 Theme Builder Layout

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)

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-9 Theme Builder Layout

Spacing

And increase the spacing values in the spacing settings.

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-10 Theme Builder Layout

Add Row

Column Structure

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-11 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-12 Theme Builder Layout

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.

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-13 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-14 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-15 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-16 Theme Builder Layout

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.

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-17 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-18 Theme Builder Layout

Add Text Module #2 to Column 1

Add Content

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-19 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-20 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-21 Theme Builder Layout

Color

Continue by changing the divider color in the design tab.

  • Color: #ffffff

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-22 Theme Builder Layout

Sizing

Make some changes to the sizing settings too.

  • Width: 59%
  • Module Alignment: Center

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-23 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-24 Theme Builder Layout

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.

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-25 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-26 Theme Builder Layout

Animation

And add an animation to the module.

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-27 Theme Builder Layout

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.

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-28 Theme Builder Layout

Change Module Content

Change the content of the duplicates.

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-29 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-30 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-31 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-32 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-33 Theme Builder Layout

Customize Blurb Icon #3

Icon Color

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

  • Icon Color: #ffe500

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-34 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-35 Theme Builder Layout

Customize Blurb Icon #4

Icon Color

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

  • Icon Color: #00ff9d

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-36 Theme Builder Layout

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

how-to-persuasively-lead-visitors-down-the-page-with-divis-built-in-animation-settings-37 Theme Builder Layout

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!

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you’re looking for someone to help you tell your company’s story, she’ll know how to handle it.

Share this article:
 

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

how-to-start-a-podcast-with-wordpress Theme Builder Layout

How to Start a Podcast with WordPress

Let’s talk about podcasting. Because it seems like everybody already is. Podcasting is taking over content creation and media and spreading like wildfire. Nearly everyone wants to get a part of the billion dollar industry, so we want to give you a definitive look at...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.