Creating scrolling effects using the section divider is a fun and easy technique that can add life to your website using the Divi WordPress theme. A section divider continues to be a versatile design element, useful for adding a touch of creativity to your page content transitions.
But with the scrolling effects of Divi, the section dividers become even more interesting! The trick is to isolate a section dedicated to the style of a divider of choice. Then you can add all kinds of scroll-generated movements to the section to create beautiful scrolling effects as the background for the page content.
Table of Contents
How to create animated scrolling section dividers with Divi
Creation of the two content sections
Add row
To get started, create a single column row in the default 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
Add a text module
In the row of a column, add a new text module.
Content of the text module
Inside the body content, add the following H2 title:
<h2>Section Avec Séparateurs</h2>
Text module design
Under Design Settings, update the following:
- Text font: Roboto
- Text alignment: center
- Item 2 Text color: # bae0d8
- Header 2 Text size: 80px (desktop), 50px (tablet), 30px (Phone)
Add a second content section
Under the previous section, add a new regular section.
Add row
In the new section, add a row to a column.
Add a text module
Then add a new text module to the line.
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
- Module alignment: center
Section Parameters
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
Creating the animated section separator
Once two content sections are completed, we’re 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.
Section context
And again, remove the section’s default background color, but updating the following:
- Background color: rgba (0,0,0,0)
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
- Top Divider Color: # 524fbf
- Top Divider Height: 20vw
- A horizontal repeat of top divider: 0.6x
- Flip top divider: horizontal
Bottom divider design
- Bottom divider style: see screenshot
- Bottom divider color: # 524fbf
- Bottom divider height: 20vw
- A horizontal repeat of bottom divider: 0.5x
- Lower divider toggle: horizontal and vertical
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
Read more: 8 Divi child themes for personal coaches
Section separator scroll effects
Then give the section the following scrolling effects:
Under the Horizontal movement tab …
- Activate horizontal movement: YES
We can keep the default settings for it on the desktop view .
Then update the horizontal motion settings on the tablet :
- Start offset: 3 (at 0% of window)
- Average offset: 0 (at 50% of viewport)
- End offset: -3 (at 100% of viewport)
Under the Scaling Up and Down Effect tab, update the following on the desktop …
- Starting scale: 200% (at 0% of the window)
- Average scale: 150% (at 45% -65% of viewport)
- End scale: 150% (at 100% of viewport)
Then update the Scaling Up and Down effect on the tablet as follows:
- 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.
Final 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.
For website maintenance service contact us.
