When designing your services page, you want to make sure that your visiteurs notice all the different services you provide. In many cases it will only be one specific service they are looking for, but if you provide a streamlined way in your service structure it is more likely that your visiteurs deal with them all.
In this tutorial, we'll show you how to get creative with the scroll effects of Divi and create a seamless service transition. You will also be able to 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.
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
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
Spacing
Then add a custom top and bottom margin.
- Upper margin: 200px
- Bottom margin: 200px
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 the contents H2 of your choice.
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
Spacing
Then add a lower margin on the tablet and the phone.
- Bottom margin: 50 pixels (tablet and phone only)
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 a certain contents description.
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
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
Line
Then change the line color of the module.
- Line color: # 000000
sizing
Then make some changes to the sizing parameters.
- Divider weight: 3px
- Width: 28%
Spacing
We also add a top margin.
- Upper margin: 10px
Add section # 2
Spacing
Let's move on to the next regular section. Remove the default top padding from the section.
- Upper padding: 0px
overflows
Also hide the overflows.
- Horizontal overflow: hidden
- Vertical overflow: hidden
Add a new line
Column structure
Continue adding a first row using the following column structure:
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
Spacing
Then remove all of the default upper and lower padding.
- Upper padding: 0px
- Bottom padding: 0px
Column 1 settings
Background color
Then open the settings for column 1 and change the background color.
- Background Color: # f7f7f7
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%
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)
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.
- Show separator: Yes
Line
Then change the line color of the module.
- Line color: # 000000
sizing
Also make changes to the sizing parameters.
- Divider weight: 3px
- Width: 50%
Add a text module to the 1 column
Add H3 content
The next module we need in column 1 is a text module with contents H3.
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.
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
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.
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
- Button Font: Quarterly
- Button font weight: bold
Spacing
Also add custom padding.
- Upper padding: 50px
- Bottom padding: 50px
- Left padding: 100px
- Right padding: 100px
Position
And reposition the button accordingly:
- Position: Absolute
- Location: bottom left
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.
Change all content
Make sure to edit all of the content in duplicate lines.
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
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
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:
- Activate vertical movement: Yes
- Start offset: -4
- Average offset: 0 (at 26%)
- End offset: 0
- Motion trigger effect: middle of element
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
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
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
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.
Latest Thoughts
In this article, we showed you how to create a beautiful serve transition with the scroll effects of Divi. Even before one serve disappears, the other begins to appear, giving a nice transition that's easy on the eye. This approach will help you highlight each service on an individual level. You were also able to download the JSON file for free! If you have any questions or suggestions, feel free to leave a comment in the comment section below.
