If you’re going for a clean design style when building a new website, you’ll most likely want to find a way to still add an extra dimension to your website. This tutorial will be all about that. We’ll show you how to use Divi’s sticky options to change sticky styles without movement. Specifically, this means that as soon as visitors scroll past a certain part of your page, the styles of that part will change but the elements will stay in place. This type of effect is completely focused on user behavior. The change of sticky styles only happens when people scroll past it, which gives a beautiful outcome. In this tutorial, we’ll show you step by step how to get there. Once you get the approach, you’ll be able to use it in any kind of design you build! You’ll be able to download the JSON file for free 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!
1. Create Element Structure
Start by adding a new section to the page you’re working on. Open the section settings and hide the overflows in the advanced tab. This will help ensure no horizontal scrollbar appears.
Add New Row
Continue by adding a new row to the section using the following column structure:
Remove all default top and bottom padding next.
Then, open the column 1 settings and apply some custom padding values across different screen sizes.
Increase the z index of this column as well. Later on the tutorial, we’ll create a horizontal overlap between column 1 and 2. We’re increasing the z index to ensure the column 1 modules stay above the column 2 modules.
Next, we’ll add a background color to column 2.
We’ll use some custom padding values across different screen sizes too.
Column 3 Settings
Last but not least, we’ll add some custom padding values to column 3 as well.
Add Text Module to Column 1
Time to add modules, starting with a Text Module in column 1. Add a number to the content box.
Change the background color next.
Move on to the design tab and change the text settings accordingly:
Reposition the module as well.
Add Text Module to Column 2
Add H3 & H4 Copy
On to the second column. There, we’ll add a Text Module with some H3 and H4 copy.
Move on to the module’s design tab and change the text settings as follows:
H3 Text Settings
Then, modify the H3 text settings.
H4 Text Settings
Style the H4 text too.
Complete the module settings by going to the advanced tab and modifying the position settings as follows:
Add Text Module to Column 3
Add H5 & Paragraph Content
On to the third column. Add a Text Module with some H5 and paragraph content of your choice.
Move on to the module’s design tab and change the font in the text settings.
H5 Text Settings
Style the H5 text too.
2. Key Changes to Create Effect
Now that we’ve set the foundation of our design, we can start creating the custom sticky styles effect you were able to see in the preview of this post. The first step to achieving this effect is making sure your section’s top and bottom padding values are zero. Doing this will help us ensure that both the section and row start and end at the same point. This is important when we add the sticky position to our row in the upcoming steps. By setting the limit to the bottom of the section, we leave no room for the row to move. The row, however, will be turned sticky for those few seconds and will highlight the changed sticky styles in our design.
Open the row settings and turn the row sticky. As mentioned in the previous step, it’s important to make sure the bottom sticky limit of our row is the section. Because there’s no space between the end of the row and end of section, the sticky row will stay in place.
Sticky Row Background Color
Time to start applying some sticky styles to our elements! Start with the row background color.
To ensure a smooth transition, we’ll increase the transition duration in the row’s advanced tab.
Sticky Column 2 Background Color
Then, we’ll change the sticky column 2 background color.
Text Module in Column 1
Sticky Background Color
We’ll change the background color of the Text Module in column 1 too.
Sticky Text Color
Along with the sticky text color.
And we’ll increase the module’s width in the sizing settings.
We’re ensuring a smooth transition by modifying the module’s transition duration in the advanced tab.
Text Module in Column 2
Sticky Text Color
Up next, we have the Text Module in column 2. We’ll change the text color to light in a sticky state.
Text Module in Column 3
Sticky Text Color
Same goes for the Text Module in column 3.
3. Clone Section for Reuse
Now that we’ve completed the first section, including the sticky styles change effect, we can reuse this section up to as many times as we want by cloning it.
Change All Copy
Make sure you change all duplicate copy.
Add Some Top Margin to First Section & Bottom Margin to Last Section
And last but not least, we’ll add some top margin to the first section and bottom margin to the last section. This will help us prevent immediate transitioning before people start scrolling. That’s it!
In this post, we’ve shown you how to get creative with Divi’s sticky options. More specifically, we’ve used the Divi sticky options to change sticky styles without adding movement. As soon as people scroll past a certain part of your page, the styles of the design change, which highlights that specific part of the page. 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.