If you’re currently working on your website’s hero design inside Divi, you might be looking for some interesting ways to add an effect on scroll. With Divi’s sticky options, a ton of design possibilities are possible. In today’s tutorial, we’ll highlight one of those possibilities. We’ll show you, step by step, how to cover your section on scroll while applying effortless sticky styles to it as well. In the first part of the tutorial, we’ll focus on creating the design, and in part two we’ll move on to the sticky settings that are needed! You’ll be able to download the JSON file for free as well.
Let’s get to it.
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.
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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Create Design Structure
Add New Section
In the first part of the tutorial, we’ll focus on creating the design. In part two, we’ll apply the sticky effects. Create a new page or open an existing one and add a new section to it. Open the section settings and apply a background color.
- Background Color: rgba(53,44,43,0.17)
Move on to the section’s design tab and change the spacing values as follows:
- Top Padding: 13vh
- Bottom Padding: 0px
Add Row #1
Continue by adding a new row using the following column structure:
This article was written by Donjete Vuniqi and originally published on Elegant Themes Blog.