How to Build an Interactive List on Scroll with Divi’s Sticky Options | Elegant Themes Blog

Divi’s sticky options allow you to effortlessly add interaction to the pages you create and design. If you’re looking for a way to mention multiple items without just creating a static list, you’ll enjoy this tutorial. Today, we’re showing you how to build an interactive list on scroll using Divi’s sticky options. As people are scrolling down the section, different items are added to the list on the left. This helps keep an overview. You’ll be able to download the free JSON file as well!

Let’s get to it.

Download The Layout for FREE

To lay your hands on the free 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.

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

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

Create Element Structure

Start by adding a new section to the page you’re working on. Add a background color to the section.

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

Without adding modules yet, open the row settings and change the sizing settings as follows:

Column 1 Background Color

Then, open the column 1 settings and add a background color.

Column 1 Spacing

Modify the column’s spacing settings next.

Column 1 Z Index

And increase the column’s z index in the advanced tab.

Add Text Module #1 to Column 1

Add Content

Time to add modules, starting with a first Text Module in column 1. Add some content of your choice.

Text Settings

Move on to the module’s design tab and change the text settings as follows:

Add Text Module #2 to Column 2

Add H3 Content

Add another Text Module to the column with some H3 content of your choice.

H3 Text Settings

Move on to the module’s design tab and change the H3 text settings as follows:

Add some custom top and bottom margin next.

Then, apply some custom transform scale settings.

Transform Translate

And complete the module settings by applying the following transform translate settings:

Add Divider Module to Column 1

Modify the module’s sizing settings too.

Add Image Module to Column 2

Leave Image Box Empty

In column 2, the first module we’ll add is an Image Module. Leave the image box empty.

Background Image

Use a background image instead.

And to allow the background image to show up, we’ll modify the spacing settings as follows:

Add Text Module to Column 2

Add Content

The next and last module we need is a Text Module below the Image Module. Add some description content of your choice.

Text Settings

Move on to the module’s design tab and change the text settings as follows:

Complete the module settings by changing the module’s spacing settings accordingly:

Apply Sticky Effects

Turn Column #1 Sticky

Now that all elements are in place, we can start applying the sticky settings. Open the column 1 settings and use the following responsive sticky settings in the advanced tab:

Text Module #1 in Column #1: Sticky Settings

We’re modifying the opacity too.

Text Module #2 in Column #1: Sticky Settings

Transform Scale

Next, we’ll open the second Text Module in column 1. Bring back the transform scale values to “100%” in a sticky state.

Change the sticky transform translate settings too.

And complete the module settings by increasing the transition duration in the advanced tab.

Divider Module: Sticky Settings

Last but not least, we’ll also modify the Divider Module’s max width.

Clone Row Twice

Once your first row has been completed, you can clone it twice.

Change All Content & Images

Make sure you change all content and images and you’re done!

In this post, we’ve shown you how to get creative with Divi’s sticky options. More specifically, we’ve shown you how to build an interactive list on scroll. As people are scrolling down the section design, different items of your list are collected on the left side. This gives a structured overview and helps you create an interactive design. You can use this approach for any type of list you want to share on your pages! You were able to download the JSON file for free as well. If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

This content was originally published here.