How to Create a Seamless Service Transition with Divi’s Scroll Effects

Posted on March 26, 2020 by in Divi Resources | 3 comments

How to Create a Seamless Service Transition with Divi’s Scroll Effects

While designing your services page, you want to make sure your visitors notice all the different services you provide. In many cases, it’ll only be only one specific service they’re looking for, but if you provide a streamlined way in your service structure, chances are more likely your visitors will process 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’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

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

Desktop

service transition

Mobile

service transition

Download The Seamless Service Transition Layout for FREE

To lay your hands on the seamless service transition layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

1, Recreate Element Structure

Add Section #1

Spacing

Start by adding a new section to the page you’re working on. Open the section settings and modify the padding values across different screen sizes.

  • Top Padding: 80px (Desktop & Tablet), 0px (Phone)
  • Bottom Padding: 80px

service transition

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

service transition

Sizing

Without adding any modules yet, open the row settings and apply the following changes to the sizing settings:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 90%
  • Max Width: 1580px

service transition

Spacing

Add some custom top and bottom margin next.

  • Top Margin: 200px
  • Bottom Margin: 200px

service transition

Add Text Module to Column 1

Add H2 Content

Time to add modules, starting with a Text Module in column 1. Enter some H2 content of your choice.

service transition

H2 Text Settings

Move on to the module’s design tab and change the H2 text settings as follows:

  • Heading 2 Font: Questrial
  • Heading 2 Text Size: 80px (Desktop), 50px (Tablet), 40px (Phone)
  • Heading 2 Line Height: 1.2em

service transition

Spacing

Add some bottom margin on tablet and phone next.

  • Bottom Margin: 50px (Tablet & Phone Only)

service transition

Add Text Module to Column 2

Add Content

On to the second column. There, the first module we need is a Text Module with some description content.

service transition

Text Settings

Move on to the module’s 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 & Phone)
  • Text Line Height: 3em

service transition

Add Divider Module to Column 2

Visibility

The next and last module we need in this column is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

service transition

Line

Modify the module’s line color next.

  • Line Color: #000000

service transition

Sizing

Then, make some changes to the sizing settings.

  • Divider Weight: 3px
  • Width: 28%

service transition

Spacing

We’re adding some top margin too.

  • Top Margin: 10px

service transition

Add Section #2

Spacing

On to the next regular section. Remove the section’s default top padding.

  • Top Padding: 0px

service transition

Overflows

Hide the overflows too.

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

service transition

Add New Row

Column Structure

Continue by adding a first row using the following column structure:

service transition

Sizing

Without adding modules yet, open the row settings, go to the sizing settings and make the following changes:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 90%
  • Max Width: 1580px

service transition

Spacing

Remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

service transition

Column 1 Settings

Background Color

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

  • Background Color: #f7f7f7

service transition

Spacing

Complete the column settings by adding some custom padding values across different screen sizes.

  • Top Padding: 200px (Desktop), 100px (Tablet & Phone)
  • Bottom Padding: 200px (Desktop), 100px (Tablet & Phone)
  • Left Padding: 8%
  • Right Padding: 8%

service transition

Column 2 Settings

Spacing

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

  • Top Padding: 100px (Desktop), 50px (Tablet & Phone)
  • Bottom Padding: 200px
  • Left Padding: 150px (Desktop), 0px (Tablet & Phone)

service transition

Add Divider Module to Column 1

Visibility

In the first column, the first module we need is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

service transition

Line

Change the module’s line color next.

  • Line Color: #000000

service transition

Sizing

Make some changes to the sizing settings too.

  • Divider Weight: 3px
  • Width: 50%

service transition

Add Text Module to Column 1

Add H3 Content

The next module we need in column 1 is a Text Module with some H3 content.

service transition

H3 Text Settings

Move on to the module’s design tab and change the H3 text settings:

  • Heading 3 Font: Questrial
  • Heading 3 Text Color: #000000
  • Heading 3 Text Size: 50px (Desktop), 40px (Tablet), 35px (Phone)
  • Heading 3 Line Height: 1.1em

service transition

Add Text Module to Column 2

Add Content

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

service transition

Text Settings

Modify 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 & Phone)
  • Text Line Height: 3em

service transition

Add Button Module to Column 2

Add Copy

The next and last module we need is a Button Module. Enter some copy of your choice.

service transition

Button Settings

Style the button next.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 20px
  • Button Text Color: #ffffff
  • Button Background Color: #000000
  • Button Border Width: 0px

service transition

  • Button Font: Questrial
  • Button Font Weight: Bold

service transition

Spacing

Add some custom padding too.

  • Top Padding: 50px
  • Bottom Padding: 50px
  • Left Padding: 100px
  • Right Padding: 100px

service transition

Position

And reposition the button accordingly:

  • Position: Absolute
  • Location: Bottom Left

service transition

Clone Row As Many Times as Needed

Once you’ve completed the entire row and all its modules, you can clone the entire row three times.

service transition

Change All Content

Make sure you change all content in duplicate rows.

service transition

2. Apply Scroll Effects

First Row Scroll Effects

Horizontal Motion

Once you’ve completed all rows in your section, it’s time to add the scroll effects. Open the first row in the section and add some horizontal motion.

  • Enable Horizontal Motion: Yes
  • Starting Offset: -5
  • Mid Offset: 0 (at 26%)
  • Ending Offset: 0
  • Motion Effect Trigger: Middle of Element

service transition

Fading In and Out

Use a fading in and out effect too.

  • Enable Fading In and Out: Yes
  • Starting Opacity: 100%
  • Mid Opacity: 100% (at 50%)
  • Ending Opacity: 0% (at 53%)
  • Motion Effect Trigger: Middle of Element

service transition

Mid Rows Scroll Effects

Vertical Motion

Next, we’ll add some scroll effects to all rows in between the first and last row of the section. Use some vertical motion first:

  • Enable Vertical Motion: Yes
  • Starting Offset: -4
  • Mid Offset: 0 (at 26%)
  • Ending Offset: 0
  • Motion Trigger Effect: Middle of Element

service transition

Fading In and Out

Enable a fading in and out effect too.

  • Enable Fading In and Out: Yes
  • Starting Opacity: 0%
  • Mid Opacity: 100% (from 27% to 50%)
  • Ending Offset: 0 (at 53%)
  • Motion Effect Trigger: Middle of Element

service transition

Last Row Scroll Effects

Vertical Motion

Then, open the last row in the section and add the following vertical motion:

  • Enable Vertical Motion: Yes
  • Starting Offset: -4
  • Mid Offset: 0 (at 26%)
  • Ending Offset: 0
  • Motion Effect Trigger: Middle of Element

service transition

Fading In and out

Along with a fading in and out effect and you’re done!

  • Enable Fading In and Out: Yes
  • Starting Opacity: 0%
  • Mid Opacity: 100% (from 27% at 50%)
  • Ending Opacity: 100% (at 53%)
  • Motion Effect Trigger: Middle of Element

service transition

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

service transition

Mobile

service transition

Final Thoughts

In this post, we’ve shown you how to create a beautiful service transition with Divi’s scroll effects. Even before one service disappears, the other one starts appearing, giving a beautiful transition that’s pleasing to the eye. This approach will help you highlight each service on an individual level. You were able to download the JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

Premade Layouts

Check Out These Related Posts

3 Comments

  1. Lot of scroll effect examples but haven’t seen a usefull yet.

  2. Honestly folks. Everyone likes effects – and we all appreciate the bells and whistles
    But, can we get back down to earth an focus on issues quite possibly more important at this current time – than sliding stuff all over the screen, plugin reviews, or games at work? – i.e. building accessible websites with Divi. It is a huge subject – but a short series of posts to ensure that when designers are using their favourite builder, they support all those who need online information in the best way they can would be of great value right now.

  3. Hi Donjete
    It was a very good education. Very necessary and great.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest