Creating scroll effects using the Section Divider is a simple and fun technique that can add life to your Website using the WordPress theme Divi. A section divider continues to be a versatile design element, useful for adding a touch of creativity to your transitions of contents of page. 

But with Divi's scrolling effects, section dividers become even more interesting! The trick is to isolate a section dedicated to the divider style of choice. Then you can add all kinds of scroll-generated movements to the section to create beautiful scrolling effects as a background for the contents of the page.

Let's start!

Possible outcome

Here is an overview of the designs we will be able to achieve after completing this tutorial.

Divi animation

How to create animated scrolling section dividers with Divi

Creation of the two content sections

Add a row

To start, create a row with one column in the default section.

Add divi section

Section margin (for tests)

For testing purposes, add a top margin to the section so that we can have room for scrolling. Open the section settings and add the following:

  • Top margin: 80vh
Configure divi section spacing

Add a text module

In the row of a column, add a new text module.

Divi text module

Content of the text module

Inside of contents of the body, add the following H2 heading:

<h2>Section Avec Séparateurs</h2>

Section with divider

Text module design

Under the design settings, update the following:

  • Text font: Roboto
  • Alignment of the text: center
  • Item 2 Text color: # bae0d8
  • Header 2 Text size: 80px (desktop), 50px (tablet), 30px (phone)
Divi font configuration

Add a second content section

Under the previous section, add a new regular section.

divider section divider scrolling effects

Add a row

In the new section, add a row to a column.

Add divi section 1

Add a text module

Then add a new text module to the line.

Add divi text module

Text module design

We can keep the default padding content inside the body for now. Let's move on to the design tab and update the following:

  • Text font: Roboto
  • Text text color: #dddddd
  • Text size: 16px
  • Text line height: 1,5 em
  • Text alignment: left
  • Maximum width: 400 px
  • Alignment of the module: center
Customize text style divi module

Section settings

Make sure to remove the section's default background color, but give it a completely transparent background. Then we can remove the top padding and add a bottom margin for scroll test purposes.

To do this, open the section settings and update the following:

  • Background color: rgba (0,0,0,0)
  • Bottom margin: 80vh
  • Padding: 0px
Divi spacing section configuration

Creation of the animated section separator

Once two content sections are completed, we are ready to add the section for our animated section dividers.

Add a new section

Go ahead and create a new regular section in the middle of the two content sections.

Add regular section divi

Context of the section

And again, remove the section's default background color, but updating the following:

  • Background color: rgba (0,0,0,0)
Personal background section divi

Section divider design

Don't worry, we'll create our background color with the section dividers. To do this, click on the design tab and add an upper and lower divider to the section as follows:

Superior divider design

  • Top Divider Style: see screenshot
  • Color of upper divider: # 524fbf
  • Height of the upper divider: 20vw
  • Horizontal repetition of the upper divider: 0,6x
  • Flip of the upper divider: horizontal
Divi section border configuration

Lower divider design

  • Bottom divider style: see screenshot
  • Lower separator color: # 524fbf
  • Height of the lower divider: 20vw
  • Horizontal repetition of the lower divider: 0,5x
  • Lower divider tilt: horizontal and vertical
Lower divi selector
Section height and padding

Since this section is purely for divider design, we can get rid of the height and padding so that only the divider style is displayed and no unnecessary space comes between the two content sections. Update the following:

  • Height: 0px
  • Padding: 0px high, 0px low
Low divider section divi
Section Separator Scroll Effects

Then give the section the following scrolling effects:

Under the tab Horizontal movement ...

  • Activate horizontal movement: YES

We can keep the default settings for this one on the view of the desk .

Horizontal scroll divi

Then update the horizontal movement parameters on the tablet :

  • Start offset: 3 (at 0% of the window)
  • Average offset: 0 (at 50% of viewport)
  • End offset: -3 (at 100% of viewport)
Horizontal defilment table divi

Under the tab Scaling Up and Down Effect , update the following on the desk ...

  • Starting scale: 200% (at 0% of the window)
  • Average scale: 150% (at 45% -65% of viewport)
  • End scale: 150% (at 100% of viewport)
Layout configuration

Then update the Scaling Up and Down effect on the tablet as following:

  • Starting scale: 400% (at 0% of the window)
  • Average scale: 300% (at 45% -65% of viewport)
  • End scale: 400% (at 100% of viewport)

The main reason we need to adjust the motion effects on the tablet (and phone) is due to the horizontal motion values ​​using pixel length units (i.e. 3 = 300 pixels), which are absolute and do not adjust to the width of the browser.

Now let's see the final result of our scrolling animated section divider.

Possible end result divi

Latest Thoughts

Animating section dividers on the scroll is a fun and effective way to bring a web page to life. Hope this gives you some inspiration to spark even more creative designs yourself.