How to Add Scroll Effects in Divi Builder

Updated: December 28, 2020

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.

2. Horizontal

This scroll effect option moves the object/element horizontally.

3. Fading In and Out

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

4. Scaling Up and Down

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

5. Rotating

This option adds rotating effect to the object/element.

6. Blur

This option adds blur effect to the object/element.

Original posted on: December 28, 2020

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.