The versatility of Divi’s sticky options goes further than just using the settings for a sticky header. You can use it to trigger changes in your design as well. In this tutorial, for instance, we’ll use Divi’s sticky options to trigger image transition. The image transitions take place as soon as visitors are nearing the image on scroll. We’ll recreate two different examples from scratch, but once you get the approach, you’ll be able to create your own unique image transitions using Divi’s built-in options only. 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 them 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. General Steps
In the first part of the tutorial, we’re going to build the foundation of our design. Once that’s in place, we can focus on applying the right settings to achieve the two examples in the preview of this post. Add a new section to the page you’re working on, move on the section’s design tab and remove all default top and bottom padding.
Continue by adding a new row using the following column structure:
Remove all default top and bottom padding next.
Z Index
And set a z index in the position settings. This will help us ensure that the row remains below the next row we add later on the tutorial.
Next, open the column settings and set the overflows to hidden.
Add Image Module to Column
Leave Image Box Empty
The only module we need in this row is an Image Module. Leave the image box empty.
Background Image
And use a background image of your choice instead.
To allow the image to show up, we’ll use some custom padding values across different screen sizes.
Add Section #2
Add another section right below the previous one. Open the section settings and remove the default top padding in the spacing settings.
Continue by adding a new row using the following column structure:
Z Index
Add a z index for this row as well.
Add Call to Action Module to Column
Add Content
In this row, the only module we need is a Call to Action Module. Add the content of your choice.
Add Button Link
Along with a button link.
Then, add a white background color.
Move on to the design tab and change the text settings.
Title Text Settings
Style the title text too.
Body Text Settings
As well as the body text.
Button Settings
Then, style the button.
Next, we’ll add some custom margin and padding values to the spacing settings.
Box Shadow
And we’ll complete the module settings by adding a subtle box shadow.
2. Apply Sticky Effect to Row
Open Row in Section #1
Now that we’ve set the foundation of our design, it’s time to apply the sticky effect. This sticky effect will help us change styles as people scroll past the element. The element we’ll add our sticky effect to is the row in the first section which contains the image.
Apply Sticky Effect
It’s important to make sure the bottom sticky limit is set to section. The beginning and endpoints of our row are the same as the section’s, which makes sure the row doesn’t actually become sticky, but sticky styles are applied. The sticky top offset determines at what point the transition starts to take place. If this value was zero, for instance, that’d mean the top of the browser would have to touch the top of the row to start the transition. By setting the sticky top offset to “300px”, we create that transition earlier.
Make Sure There’s Top Offset Equal Above First Section
Since we’ve set the sticky top offset to “300px”, we need the space at the top of our page to make that happen. If you’re using this design somewhere midway through your page, you don’t have to worry about this step. However, if you’re using this approach at the top of your page, you’ll either have to modify the sticky top offset or add enough space at the top. We’ll add some top margin to our first section to generate that space.
3. Apply Ken Burn Effect to Image Module
Now that our row has been turned sticky, we can start applying sticky styles to the row and all of its child elements. Although the possibilities are endless, we’re showing you two different examples and how to achieve them. To make it easier to play around with the two different examples, we’ll clone both sections once and place them below the first ones.
Example #1
Sticky Row Settings
To recreate example #1, which you were able to see in the preview of this post, open the row settings and apply the following box shadow settings:
Include a smooth transition in the advanced tab as well.
Sticky Image Module Settings
Next, open the Image Module and apply a transform scale effect in a sticky state.
Ensure a smooth transition by modifying the transition settings of the module accordingly:
On to the second example! Open the row settings and apply the following transform translate settings:
Modify the row’s transition settings too.
Sticky Image Module Settings
Then, open the Image Module and play around with the filters in default and sticky state.
In this post, we’ve shown you how to get creative with Divi’s sticky options. More specifically, we’ve shown you how to trigger image transitions. As soon as people scroll past the image, the styles of the image change which results in a beautiful transition. We’ve handled two different examples but the possibilities are endless. 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.