How to Limit Scroll Effects to Column Containers with Divi

How to Limit Scroll Effects to Column Containers with Divi

Divi’s scroll effects help bring an entirely new dimension to the design you’re creating. With every new Divi feature, we also try to share tutorials that’ll help you view your web design from a different perspective. In this tutorial, we’ll show you how to limit module scroll effects to column containers. This means that whatever kind of scroll effect you add, the module’s motion effect won’t surpass the column container. This results in a beautiful boxed and interactive design. We’ll recreate an example from scratch and you’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

Mobile

column containers

Download The Free Limit Scroll Effects Layout for FREE

To lay your hands on the free limit scroll effects layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Let’s Start Recreating!

Add New Regular Section

Start by adding a new regular section to the page you’re working on.

column containers

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

How to Limit Scroll Effects to Column Containers with Divi 1

[…]

 



This article was written by Donjete Vuniqi and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top