The more you use Divi, more you discover how powerful the built-in capabilities are. It could even be tempting at times to start merging them. Harmony, as with anything in design, should take precedence. It’s better to use elements like scroll effects and sticky choices if they don’t overburden the design. Now, in this article, we’ll leverage Divi’s scroll effects and sticky options to build an easy-to-use design and scrolling experience for the user. The effects we’ll use have been carefully chosen to complement each other and bring value to the design. You will also be able to get the JSON file for free!
Let’s get started.
Build a design structure first.
Create a new section with a gradient background.
We’ll begin constructing the design before focusing on the scroll effects and sticky settings. Create a new part on the page you’re currently working, then enter the section options and add the gradient backdrop you want:
#78998c is the first color.
rgba is the second color (120,153,140,0.13)
Linear Gradient is a type of gradient. 90 degree angle
10 percent starting position
Position at the end: 10%
Hide both overflows on the advanced menu tab of the section.
Hidden Horizontal Overflow
Hidden Vertical Overflow
Create a new row and column configuration.
Continue by creating a new row and use the column structure below:
Enter the row options and make the following changes to the sizing settings before adding modules:
100 percent width
2580px is the maximum width.
Also include a bottom margin.
50px bottom margin with sticky options and 50px scroll effects
Spacing in Column 2
Now, in the column 2 options, add the margin amounts as follows:
5vh Top Padding
Padding at the bottom: 5vh Padding at the left: 8%
Padding on the right: 8%
Column 1 should have a Text Module added to it.
Start with a Text Module on column 1 and add H3 Content Time to add modules. Fill in the blanks with whatever material you choose.
Background with a gradient
After that, add the gradient background:
rgba is the first color (8,45,18,0.52)
rgba is the second color (255,255,255,0)
Linear Place is a type of gradient. Yes, there is a gradient above the background image.
Image for the Background
Then select a background image from your computer.
Size of background image: Cover
Position of Background Image: Center
H3 Text Options
Go over to the design tab and make the following changes to the H3 text settings:
Prata Heading 3 Font Style: Uppercase Heading 3 Font Font: Prata Heading 3 Font: Prata Heading 3 Font: Prata Heading 3 Font:
Heading 3 Text Alignment: Center Heading 3 Text Color: #ffffff
Heading 3 Line Text Size: 42px Heading 3 Text Size: 42px Height: 1.2 meters
Fill in the following spacing values in the module settings:
20vh top margin
20vh Bottom Margin
Padding at the top: 48vh
Padding at the bottom: 48vh
Column 2 should have Text Module #1.
Column 2 should have H4 Content On. The first module we require is a Text Module containing some H4 text.
H4 Text Options
Change the H4 text parameters as follows in the design tab of the module:
Prata Heading 4 Font Style: Uppercase Heading 4 Font Font: Prata Heading 4 Font: Prata Heading 4 Font: Prata Heading 4 Font:
Text color for heading 4: #155100
Text Size for Heading 4:
45px on a desktop, 40px on a tablet
Line 4 of the heading 1.3 meters in height
Column 2 Visibility should have a Divider Module added to it.
Make sure the “Show Divider” option is activated when you add a Divider Module below the Text Module.
Yes, you can see the divider.
Modify the line color on the design tab of the module.
#e8ddc9 is the color of the line.
Sticky choices and scroll effects
Then, change the size options.
5px is the weight of the divider.
5px in height
Column 2 should have Text Module #2.
Add another Text Module below the Divider Module to add description content. Fill up the blanks with your own description content.
Go to the design tab of the module and make the following changes to the text settings:
Lato is the text font.
#155100 is the color of the text.
Size of the text:
20px on a desktop, 16px on a tablet, and 16px on a phone
-0.5px Text Letter Spacing
1.8em Text Line Height
We’re also changing the width in the sizing options.
Desktop: 72 percent width
100 percent tablet and phone
Column 2 should have a Button Module added to it.
In column 2, we’ll need a Button Module as the next and final module.
Style the button as follows:
Use Custom Button Styles: Yes
Button 20px Text Size
Color of Button Text: #155100
Gradient Button Background
rgba is the first color (43,135,218,0)
rgba is the second color (224,198,159,0.48)
50 percent starting position
50 percent of the way there
Button Border Width: 0px; Button Border Radius: 0px; Button Border Height: 0px; Button Height: 0px; Button Height: 0p
Prata Button Font Style: Uppercase Button Font: Prata Button Font: Prata Button Font: Prata Button Font: Prata
2. Incorporate Sticky Effects
Activate the Column 2 Options
We can begin implementing the sticky and scroll effects now that our first row is in place. By opening the column 2 settings, we’ll begin with the sticky choices.
Make a sticky column
Go to the advanced tab of the column and apply the appropriate sticky settings:
Sticky: Stick to the Top Sticky: Stick to the Bottom Sticky: Stick to the Bottom Sticky: Stick Bottom Sticky Limit: Row Offset From Around Sticky Elements: Yes Top Offset: Desktop: 50px Tablet & Phone: 80px
Default and Sticky Transition Styles: Yes
Sticky Border Settings for Columns
Now that the column has been made sticky, we can begin applying sticky styles to the column and the modules within it. To begin, go to the borders settings and utilize the correct sticky border to column 2:
Left Border Color: #799a8d Sticky Left Border Width: 2px Left Border Color: #799a8d
Then, in a default and persistent state, we’ll change the transform translate settings.
10vw at the bottom
Button Modules & Text Modules Opacity That Sticks
In a default and persistent state, we’re also adjusting the opacity.
0 percent opacity
100 percent sticky opacity
Sizing of the Divider Module’s Sticky Settings
Then, in column 2, open the Divider Module. Modify the default and sticky widths in the size options on the design tab.
width: 0px height: 0px width: 0px height: 0p
Sticky Width (percentage): 21%
In the advanced tab, you can also lengthen the transition.
Transition time: 800 milliseconds
3. Include Scrolling Effects
Column 1 has an open text module.
The scroll effects are next on the list. These effects will be applied to the Text Module in column 1. To begin, go to the module’s settings.
Horizontal Motion is Added
Insert horizontal motion settings to the advanced tab: Yes
-5 is the starting offset.
0 Mid Offset (at 72 percent )
0 is the ending offset.
Add a scroll effect that fades in and out.
Apply the following Fading In and Out parameters to the same module to complete the scroll effects: Yes
Initially, the opacity is set to 0%.
0 percent mid opacity (at 46 percent )
Getting Rid of Opacity: 100% (at 52 percent )
4. Reuse Row Clone Row as Often as Necessary
We can now clone the full row and reuse it as many times as we want so that either the scroll effects and the sticky options are in place.
Duplicate Content Should Be Removed
Make careful to replace any duplicate content, and that’s all there is to it!
Now that we’ve completed all of the processes, let’s have a look at the finished product on various screen sizes.
We’ve taught you how to get creative with Divi’s scroll effects and sticky options in this post. More particular, we’ve demonstrated how to elegantly balance both effects. This resulted in a stunning scrolling experience on any device. You were also able to get the JSON file for free! Make sure to leave a remark in the space below if you have any queries or recommendations.