Hello everyone, and welcome back! In today’s article, I’m gonna show you how to make any section stick on your website using Divi!
We’ll create one that sticks to the top and one at the bottom of your page.
But before we make our desired sections sticky… Why do we need this on our website anyway?
The answer is simple – to display some of the more necessary content you want your visitors to know about when they visit your site.
Whether it’s about cookies & data usage, a sign-up form, terms & conditions, disclosure, contact info, upcoming events, or a discount on products & services!
(Keep in mind that you can only stick to 1 section; putting more than 1 will be too much for your site and overwhelm your visitors.)
So now that we know why we need sticky sections and how they benefit your website – let’s get into Divi and create our sticky section!
ONE MORE THING…
If you want to follow along using the same page layout as me before testing it on your other pages. (you can download the sample layout I used in this tutorial!)
Now for those who downloaded the layout – from your WordPress dashboard.
Navigate to Pages and click Add New.
Once the page is created, you can name it however you want.
(I’ll call my page “Test Page” because it’s temporary)
After you’ve named your page.
Click the Portability icon.
Then click Import.
After clicking Import, click NO FILE SELECTED – Google will open a folder.
If you don’t see your json file in the selected folder, navigate to Downloads, and you should find the json file there!
Select the json file, click Open, and click Import Divi Builder Layout.
Wait for the page to import – once it’s done, update the page!
After the page has been updated, we can finally create a sticky section!
Once you’re on the visual builder, this is the section we’re going to make sticky!
Hover over the section, and when the blue border flashes, click the blue cog icon to edit the section.
Then navigate to Advanced, click Scroll Effects.
Lastly, you should see Sticky Position, and it’s set to Do Not Stick.
Change it to Stick to Top.
After that, click the checkmark to save the change and click Save at the bottom right.
If you don’t see the save button, simply click the 3 dots in the bottom center of your screen!
Once the change is saved, open a new tab and put in the link of the website you’re editing. (To see the results)
Like this…
Copy your link: https://dividemo.com/test-page/?et_fb=1&PageSpeed=off
(Ctrl + C) or (Cmd + C) to copy link.
Open a new tab and paste the link. (Ctrl + V) or (Cmd + V) to paste the link.
Then remove ?et_fb=1&PageSpeed=off from the link.
And it should look like this: https://dividemo.com/test-page/
ORR, you can simply click Exit Visual Builder!
Once you’re out of the visual builder, you should see that when you scroll down, the section sticks to the top.
Finally, we can move on to adding a section that sticks to the bottom of your page!
Before we do that, let’s stop our top section from sticking!
Hover over the section and click the cog icon.
Navigate to Advanced, click Scroll Effects and change Stick to Top back to Do Not Stick, and click the checkmark to save the change.
Now scroll all the way to the bottom until you see the last section!
Which is this one:
Again we’re going to do the same steps!
Hover over the section and click the cog icon.
(Remember that the color of the border that appears should be Blue, which indicates it’s the section)
- Blue is the Section
- Green is the Row
- Gray is the Module
Navigate to Advanced, and click Scroll Effects.
Then change Do Not Stick to Stick to Bottom.
After that, click the checkmark and click Save on the bottom-right!
Once the change is saved, click Exit Visual Builder to see the results.
Or you can again do the same method with the new tab.
And there it is!
Conclusion
So there you have it! I hope you liked this tutorial on how to create sticky sections – if this helped, feel free to share it with your family and friends as it would help them spark new ideas for website designs and so on! Until next time, I’ll see you all in another tutorial, happy learning!
