The Scroll Effects options in Divi let you control how a module behaves and transforms during scrolling. These settings can make modules sticky, adjust their scroll speed, or trigger visual effects based on their position in the viewport.
Where to Find the Scroll Effects Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Advanced Tab: Locate the Scroll Effects option group.
Scroll Effects Customization Settings
Sticky Position: Make the module stick to the viewport during scrolling.
Top: The module becomes sticky at the top of the viewport.
Bottom: The module becomes sticky at the bottom of the viewport.
Top and Bottom: The module remains fixed between the top and bottom of the viewport.
Scroll Transform Effects: Apply transformations, such as scaling, rotating, or skewing the module, as the user scrolls.
Vertical Motion
Horizontal Motion
Fade in & Out
Scale up & down
Rotate
Blurb
Motion Effect Trigger: Set when the scroll effect begins:
Top: The effect starts when the top of the module enters the viewport.
Middle: The effect begins when the middle of the module is visible.
Bottom: The effect is triggered when the bottom of the module is in view.
Sticky Position: Allows you to have the module remain a fixed distance from the top or bottom edge of the browser window as the user scrolls.
Tips for Using Scroll Effects
Sticky Headers or CTAs: Use Sticky Positions for elements like navigation bars or promotional banners to keep them visible during scrolling.
Create Dynamic Layouts: Combine Vertical Motion with Transform on Scroll for engaging parallax effects.
Scroll Effects provide powerful tools to create interactive and engaging designs, keeping users focused on important content and enhancing your site’s visual appeal.