Skip to Main Content

How to Create a Seamless Transition with Scroll Effects on Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

When designing your services page, you want to make sure that your visitors notice all of the different services that you provide. In many cases, this will only be one specific service that they are looking for, but if you provide a streamlined way in your service structure, your visitors are more likely to treat them all. 

In this tutorial, we'll show you how to get creative with Divi's scroll effects and create a seamless service transition. You can also download the JSON file for free!

Let's go.

Possible Outcome

Before we dive into the tutorial, let's take a look at the result on different screen sizes.

Transition between section divi

1, recreate the structure of the elements

Add section # 1

Spacing

Start by adding a new section to the page you are working on. Open the section settings and change the padding values ​​on different screen sizes.

  • Upper padding: 80px (desktop and tablet), 0px (phone)
  • Bottom padding: 80px
Divi parameter section

Add a new line

Column structure

Continue adding a new row using the following column structure:

sizing

Without adding modules yet, open the line parameters and apply the following changes to the dimensioning parameters:

  • Use a custom gutter width: Yes
  • Gutter width: 1
  • Width: 90%
  • Max width: 1580px
Divi spacing configuration

Spacing

Then add a custom top and bottom margin.

  • Upper margin: 200px
  • Bottom margin: 200px
Divi line spacing configuration

Add a text module to the 1 column

Add H2 content

It's time to add modules, starting with a text module in column 1. Enter any H2 content you want.

Our services offered by the experts of the moment

H2 text settings

Go to the module design tab and change the H2 text settings as follows:

  • Title 2 Police: Quarterly
  • Header 2 Text size: 80px (desktop), 50px (tablet), 40px (phone)
  • Height of line 2 of the head: 1.2em
Head divi police

Spacing

Then add a lower margin on the tablet and the phone.

  • Bottom margin: 50 pixels (tablet and phone only)
Divi text spacing configuration

Add a text module to the 2 column

Add content

Let's move on to the second column. There the first module we need is a text module with some description content.

Content divi text box

Text settings

Switch to the module design tab and change the text settings accordingly:

  • Text font: cabin
  • Text font style: uppercase
  • Text color: # 000000
  • Text size: 18px (desktop), 15px (tablet), 13px (phone)
  • Text letter spacing: 3px (desktop), 1px (tablet and phone)
  • Height of the line of text: 3em
Divi text parameter

Add a separation module to column 2

Visibility

The next and final module we need in this column is a separation module. Make sure the “Show Separator” option is enabled.

  • Show separator: Yes
Visible divider

Line

Then change the line color of the module.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

  • Line color: # 000000
Divider color background

sizing

Then make some changes to the sizing parameters.

  • Divider weight: 3px
  • Width: 28%
Divi separator sizing

Spacing

We also add a top margin.

  • Upper margin: 10px
Divi separator module spacing

Add section # 2

Spacing

Let's move on to the next regular section. Remove the default top padding from the section.

  • Upper padding: 0px
Section 2 divi spacing

overflows

Also hide the overflows.

  • Horizontal overflow: hidden
  • Vertical overflow: hidden
Hide divi module overflows

Add a new line

Column structure

Continue adding a first row using the following column structure:

Choose a divi layout

sizing

Without adding more modules, open the line parameters, access the dimensioning parameters and make the following modifications:

  • Use a custom gutter width: Yes
  • Gutter width: 1
  • Equalize column heights: Yes
  • Width: 90%
  • Max width: 1580px
Gutter configuration divi section

Spacing

Then remove all of the default upper and lower padding.

  • Upper padding: 0px
  • Bottom padding: 0px
Divi 1 line module spacing settings

Column 1 settings

Background color

Then open the settings for column 1 and change the background color.

  • Background Color: # f7f7f7
Divi line module background configuration

Spacing

Complete the column settings by adding custom padding values ​​on different screen sizes.

  • Upper padding: 200px (desk), 100px (tablet and phone)
  • Bottom padding: 200px (desk), 100px (tablet and phone)
  • Left padding: 8%
  • Right padding: 8%
Row module column settings

Column 2 settings

Spacing

Continue by opening the settings in column 2. Go to the advanced tab and add custom padding values ​​on different screen sizes.

  • Top padding: 100px (desktop), 50px (tablet and phone)
  • Bottom padding: 200px
  • Left padding: 150 px (desk), 0 px (tablet and phone)
Divi module spacing settings

Add a separation module to column 1

Visibility

In the first column, the first module we need is a separation module. Make sure the “Show Separator” option is enabled.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

  • Show separator: Yes
Show divi 1 separator

Line

Then change the line color of the module.

  • Line color: # 000000
Divi separator settings

sizing

Also make changes to the sizing parameters.

  • Divider weight: 3px
  • Width: 50%
Divi separator sizing

Add a text module to the 1 column

Add H3 content

The next module we need in column 1 is a text module with H3 content.

Divi content section setting

H3 text settings

Switch to the module design tab and change the H3 text settings:

  • Title 3 Police: Quarterly
  • Text color of item 3: # 000000
  • Item 3 Text size: 50px (desktop), 40px (tablet), 35px (phone)
  • Height of line 3 of the head: 1.1em

Add a text module to the 2 column

Add content

In the second column, the first module we need is a text module with some description content.

Divi text module setting

Text settings

Change the module's text settings as follows:

  • Text font: cabin
  • Text font style: uppercase
  • Text size: 18px (desktop), 15px (tablet), 13px (phone)
  • Text letter spacing: 3px (desktop), 1px (tablet and phone)
  • Height of the line of text: 3em
Divi text mold font adjustment

Add a button module to the 2 column

Add a copy

The next and last module we need is a button module. Enter a copy of your choice.

Text module content setting

Button settings

Then style the button.

  • Use custom styles for the button: Yes
  • Button text size: 20 pixels
  • Button text color: #ffffff
  • Button background color: # 000000
  • Button border width: 0px
Divi button style setting
  • Button Font: Quarterly
  • Button font weight: bold
Divi button color settings

Spacing

Also add custom padding.

  • Upper padding: 50px
  • Bottom padding: 50px
  • Left padding: 100px
  • Right padding: 100px
Divi module button spacing settings

Position

And reposition the button accordingly:

  • Position: Absolute
  • Location: bottom left
Divi button module position adjustment

Clone the line as many times as necessary

Once you have completed the entire line and all of its modules, you can clone the entire line three times.

Clone divi module

Change all content

Make sure to edit all of the content in duplicate lines.

Edit divi section content

2. Apply scrolling effects

First row scrolling effects

Horizontal movement

Once you've completed all the lines in your section, it's time to add the scrolling effects. Open the first row of the section and add horizontal movement.

  • Activate horizontal movement: Yes
  • Start offset: -5
  • Average offset: 0 (at 26%)
  • End offset: 0
  • Trigger motion effect: middle of element
Apply divi scrolling effects

Fade in and out

Also use an incoming and outgoing fade effect.

  • Activate fade in and out: Yes
  • Initial opacity: 100%
  • Average opacity: 100% (at 50%)
  • End opacity: 0% (to 53%)
  • Trigger motion effect: middle of element
Configure fade animation section divi

Middle row scrolling effects

Vertical movement

Next, we will add scroll effects to all the lines between the first and the last line of the section. First use a vertical movement:

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

  • Activate vertical movement: Yes
  • Start offset: -4
  • Average offset: 0 (at 26%)
  • End offset: 0
  • Motion trigger effect: middle of element
Divi scrolling aniation configuration

Fade in and out

Also activate an in and out fade effect.

  • Activate fade in and out: Yes
  • Initial opacity: 0%
  • Average opacity: 100% (from 27% to 50%)
  • End offset: 0 (at 53%)
  • Trigger motion effect: middle of element
Divi line fade animation

Last Line Scroll Effects

Vertical movement

Then open the last line of the section and add the following vertical movement:

  • Activate vertical movement: Yes
  • Start offset: -4
  • Average offset: 0 (at 26%)
  • End offset: 0
  • Trigger motion effect: middle of element
Divi line module scrolling animation

Fade in and out

With an incoming and outgoing fade effect and you're done!

  • Activate fade in and out: Yes
  • Initial opacity: 0%
  • Average opacity: 100% (from 27% to 50%)
  • End opacity: 100% (to 53%)
  • Trigger motion effect: middle of element
Divi line module appearance animation settings

Final result

Now that we've gone through all of the steps, let's take a final look at how it looks on different screen sizes.

Final demo

Latest Thoughts

In this article, we have shown you how to create a beautiful service transition with the scrolling effects of Divi. Even before one serve disappears, the other begins to appear, giving a nice transition pleasing to the eye. This approach will help you highlight each service on an individual level. You could also download the JSON file for free! If you have any questions or suggestions, feel free to leave a comment in the comments section below.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
0 shares
Share
tweet
Save