Search
Close this search box.

How to Add Scroll Effects in Divi Builder

Adding scroll effects is a great idea to impress your site visitors. If you have a WordPress-based website built with Divi Builder, you don’t need to install any additional plugin anymore as Divi Builder comes with a built-in feature to add scroll effects. Instead of one, there are 6 scroll effect types offered by Divi Builder. This article will show you how to add scroll effects in Divi Builder.

Before we take a step further, let’s start with a brief intro about scroll effects. What is a scroll effect?

A scroll effect is the type of animation that occurs when a visitor scrolls down or up the page on your website. In this context, the animation timeline is based on the object’s position within the browser viewport. When adding a scroll effect in Divi Builder, you can control the viewport. While the speed is based on how fast a user scrolls the page as well as the magnitude of the effect.

How to add scroll effects in Divi Builder

Divi Builder offers three element types that you can use to design your page: section, row, and module. You can add scroll effects to these three elements. There are 6 scroll effect types offered by Divi Builder. You can use one effect or combine two or three — or even six at once — scroll effects to create a stunning animation effect to an element.

To add scroll effects, first, open the settings panel by clicking the gear icon on the element handle (blue for section, green for row, and grey for module).

On the setting panels, go to the Advanced tab and open the Scroll Effects block. On the Scroll Transform Effects section, select the scroll effect type you want to add and toggle the Enable Vertical Motion switch.

After toggling the Enable Vertical Motion switch, you can set the top viewport and bottom viewport. You can also set the motion effect trigger.

What is viewport by the way? Viewport is user’s visible area on the web browser.

Scroll effect types offered by Divi Builder

As said earlier above, there are 6 scroll effect types offered by Divi Builder:

1. Vertical Motion

This scroll effect option moves the object/element vertically.

Video from elegantthemes.com

2. Horizontal

This scroll effect option moves the object/element horizontally.

Video from elegantthemes.com

3. Fading In and Out

This scroll effect adds fading and fading movement to the object/element.

Video from elegantthemes.com

4. Scaling Up and Down

This option adds scaling up and scaling down effect to the object/element.

Video from elegantthemes.com

5. Rotating

This option adds rotating effect to the object/element.

Video from elegantthemes.com

6. Blur

This option adds blur effect to the object/element.

Video from elegantthemes.com
This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.