Divi Sticky Options
Introducing The Most Comprehensive Sticky System In Any WordPress Page Builder
Today we are excited to introduce Divi Sticky Options, a brand new feature that allows you to stick any element to the top or bottom of the browser viewport as you scroll up and down the page. This allows you to create sticky headers, menus and buttons and to keep other important information in view as you scroll, such as calls to action or floating opt-in forms. But that’s really just scratching the surface of what Divi Sticky Options can do.
Divi Sticky Options offer so much more than simple fixed positioning. This is an advanced system that allows for unique scroll-based interaction and sticky-style adjustment. You choose when and where elements become sticky based on the direction that a visitor is scrolling and the element’s position on the page. You also have full control over the sticky style of any element, allowing for sticky design transitions!
Sticky Option Examples
There is so much you can do with Divi and its new sticky options. Before we get into the details, take a look at some of these amazing demos that our design team created. Scroll up and down the entire page to get the full effect!
Stick To Top, Bottom Or Both
Using sticky options is easy. Simply go to Advanced > Scroll Effects > Sticky Position and choose from the available sticky options:
Stick To Top
This will stick the element to the top of the browser viewport as you scroll downward. Once the top of the element hits the top of the browser viewport, it will stick to the top and stay there as you scroll. This works great for sticky header menus, as shown below.
Stick To Bottom
This will stick the element to the bottom of the browser viewport as you scroll upwards. Once the bottom of the element hits the bottom of the browser viewport, it will stick to the bottom and remain there as you scroll. This works great for floating optin forms or calls to action, as seen below.
Stick To Top And Bottom
This will stick the element to the top of the browser viewport as you scroll downward past the element, and it will cause the element to stick to the bottom of the browser viewport as you scroll upwards past the element.
Sticky Style Adjustment & Transition
You can also give sticky elements unique styling, which is really where sticky options shine. Once sticky options are enabled for an element, all design settings obtain new sticky state styling options. This means that elements can have two different styles: a standard style, and a sticky style. Once the element becomes sticky, the design will transition from its standard style to its sticky style.
For example, in the video below I have enabled stick style editing for the menu background color option. Next, I assigned an orange background color for the sticky style and a transparent background color for the standard style. When I scroll downward and the menu becomes sticky, the background color transitions to orange. This orange background color ensure that the menu links remain readable as I scroll past a variety of different elements.
To enable sticky style adjustment, click the new sticky icon above any design setting. You can then adjust the standar style and sticky style independently. Once the element becomes sticky, it will assume its sticky style. For example, you could transition a sticky header’s background color from transparent to solid. You could reduce the height of the menu’s sticky state so that it shrinks and takes up less space as you scroll. There’s no limit to what you can do because every design setting can be adjusted to give sticky elements completely unique styles.
Applying A Sticky Boundary
You can also give sticky elements a sticky boundary. Outside of the sticky boundary, the elements will no longer remain sticky. For example, in the video below I have assigned the parent section as the sticky boundary for this floating sidebar menu. That means it will become sticky as the menu hits the top of the browser viewport, but will stop being sticky as I exit the parent section. This sticky menu is only relevant to the items within this section, so assigning a sticky boundary makes sense.
Sticky Options Are Available Today
The new Divi Sticky Options open up so many new possibilities for Divi websites. Not only does it allow you to easily create a wide array of sticky headers and menus, but sticky elements can also be combined in creative ways to make some really interesting new designs. Divi Sticky Options are available today, so download Divi and take them for a spin. Let us know what you think in the comments and don’t forget to check back next week for even more great Divi features coming your way.
Join Or Upgrade Today For 10% Off!
Today's The Best Day To Get Divi Or Upgrade Your Account To Lifetime
Join the most enthusiastic and loving WordPress theme community on the web and download Divi 3.0 today. Using the new Visual Builder, you can build websites faster than ever before with its incredibly fast and intuitive visual interface. You have to see it to believe it!
Join Today For 10% OFF!
Renew Your Account Today For 10% OFF!
Upgrade Your Account Today For 10% OFF!
Dear, good afternoon. I wanted to ask if you could please tell me what I should do to have access to “Divi Sticky”. I am interested in having this add-on or plugin.
thank you so much.
Greetings
Hi, the sticky feature is a default feature in Divi. There is no need to install a plugin to use it. Just make sure that the Divi you’re using is up-to-date.
Hello!
I’m trying to use this fabulous new features but I can’t visualise it! I already updated plug-ins and cleaned the web site cache but nothing happen. What I can do?… Maybe the problem could be that I’m using the Italian version of DIVI?
Thanks 😉
Great news
Great! How can I download the sticky demo’s?
Niloy You are right. I also want to download this demo’s.
HI Nick,
I’m with some of the folks above. I love all the new features when they come out, but I sometimes struggle with how to make them happen. I have a site that would be perfect for Sticky Demo 1 but I’m having trouble reproducing it. Could you please, with this, and in the future provide the downloadable link like you do with other items?
That would be truly helpful.
Great and usefull tool. Thanks a lot
Hi Nick,
I want to suggest a Favourable solution for AMP with Divi which can help elegant themes and its customer as well. Right Now a divi or extra theme built websites loses much content in AMP mode because of Builder.
Recent AMP 2.0 Version now have added the functionality to add reader themes which will work as AMP template and you can also chose to redirect your Mobile views to AMP.
Many themes like Newspapers were already folloing this process flow but with their customised theme. Now this is in-built in AMP plugin and this eases the work can be done from your side. You can work on Making Some reader themes compatible with Divi.
There is Divi- AMP solution by other “AMP for WP – Accelerated Mobile Pages
By Ahmed Kaludi, Mohammed Kaludi” Plugin but it is very costly not much effective.
Considering AMP is a seo factor now-a-days i thing elegant theme also should concentrate on functionality based enhancement and this will make elegant theme a formidable product.
It’s great, Very useful
Great update! I’m trying to use this so the header colors and logo change on scroll, but I’m not seeing an option to change the logo image on scroll. Unless I’ve missed something.
Hi there, thanks for the great update!
Quick question. Is anyone else experiencing issues in Safari (the latest version)? When I set something to stick the original element stays behind, with a duplicate sticking and moving.
When I check in Chrome it works as expected.
Any help/suggestions would be appreciated as Safari is my primary browser.
This is a major update. I was personally waiting for this. Of course it was possible to achieve sticky blocks thanks to extra CSS and JS, but as an embedded Divi feature, it will be quicker to get a result and besides it should me more stable that an extra snippet which can still create a conflict someday.
Great job. Thanks!
Lovin this – thank you Nick and team!
I was enthousiastic to try version 4.6 yesterday but I couldn’t even add a new section. Nothing happened. When I tried a second time, the whole page I was working on desappeared… and I had to roll back to former version to get it right again.
I don’t know if it’s the new code for the “sticky”, but we’ve had to rollback the version on all our websites (90+ sites unfortunately) because Divi 4.6 breaks several things in Internet Explorer. I know IE is a dinosaur, but many of our clients – and in turn, their customers – still use it. It causes toggles to not open and modules with animation to not show up. Might be more things, but those are big ones that we use a lot so they were obvious. Rolled back to Divi 4.5.8 and everything returns to normal in IE.
Thanks for this important addition.
I tried the sticky with an accordion module and it sucks.
I have a long accordion module inside a section (chapters list)
I used the sticky on top + bottom limit body area
when the accordion is closed, it looks OK, but when the accordion is open and I scroll, the accordion is stuck on screen height and does not scroll while the rest of the page is being scrolled till body ends. This hides all the content and makes the sticky unusable.
You should take care of sticky with accordion as well….
In addition,
1. I feel sticky is not stable yet. Changing an option makes the sticky behave odd, becomes transparent etc.
I needed to disable it, save and than re-enable it, but it is left half transparent for every sticky option, though no alternate background was set.
2. Setting the bottom limit is nice and needed but it is very limited.
If you’ll allow to set it to every element of the page, that would be awesome.
For example picking a new suggested ‘Custom’ option would open the “Go To layer” table to allow the picking of any element for the sticky to end, this would be a true sticky.
Looks good 🙂 And now for the millonth time – any chance finally of Divi including the Extra Theme Blog Elements ??? Seriously cant be that difficult ? ( Love one flustrated blog creator )
Thank you guys great feature!
Nice to have a few clicks away…
Thanks
Very cooool… Iike it a LOT!
Nice work 🙂
Keep up the good work. A really awesome feature addition.
Thank you! Thank you! Thank you!
Thank you! How an awesome tool! I have been tinkering with my site to try to avoid the right column and still get people the info I need them to click without creating a menu. Just in time, and great features, thanks again for the great work!
One of the best features introduced by Divi in a very long time!
I would have to code my optin forms to achieve similar results. Great update ET Team! Now this is definitely something I’ll actually use for my websites. Are you guys familiar with storefront by Woocommerce? I’m sure you guys are aware of it. That theme has a sticky bar when you have items on your cart. I’m thinking in my head it can be done using theme builder maybe but can you guys do a tutorial for that? I remember, Divi Space also has this customization going through their checkout system.
This is one of the greatest features you guys have ever added to Divi! Fantastic effort and received with massive thanks 🙂
hi Nick , I enjoying many features as ordinary user to publish nice rich web function amazing page! which may taken some times to figure out coding on raw wordpress thank you.!
I LOVE DIVI!!! This is so awesome and will be a great feature to use on my websites.
The Lords of stickiness heard our prayers. Thank you ET!
LOVE THE UPDATE!!!
Divi is getting better and better everyday, keep up with the good work, It’s amazing!!
I threw it here:
https://www.philsimon.com/about-phil/
Nice – good application of the sticky.
This is an awesome new feature, look forward to working on it. Is there a way we can download the demo templates?
Incredible! Nick, I love you for this update! Thousand thanks to you and all the developers working so hard on all these updates and features. It’s amazing! And sometime I’d like to say thank you for that motivated and dedicated support team. Whenever I had a question, it was answered and if there was a bug it has been fixed immediately. This is extraordinary and to be honest: I would pay an extra fee for “premium support” cause what you offer, is really premium!
Regarding the sticky feature: I tried to achieve something similar here https://osmium-fakten.de/elegante-ohrringe/ and it took weeks till it worked as it should. So thanks a lot to roll out this function which is 100 times better than my CSS stuff. THANK YOU!
Yes a super new feature!!!
Divi market place, divi presets, now divi sticky…. all in the space of a few weeks?
Well done Nick and the ET team 👍
I am thrilled. This feature has arrived just when I wanted it for one site I am finishing off.
Thank you
This is rad! Looking forward to implementing in a cool way!
Awesome! Please make the sticky demo’s downloadable 🙂
This looks great. Looking forward to seeing what people do with it. Going to make a few sticky CTA’s as a tester now 🙂
Totaly GREAT
Yes! Great feature guys. Long awaited! Thank you
Great as always! 🙂
Thank you for this new excited feature!
I Love You Divi Team
Coded my self when I need that, but great to see it included in the Divi core now. Very cool implementation!
Mind blowing. I can’t wait to start trying this out 🙂
Top much gimmickry in my eyes, much is not useful in mobile view. I think there are some issues ET could concentrate their whole energy on – a contemporary mobile menu for example.
Great again!
Great work, Nick. This looks very useful. I love the way it is set up. Thank you.
Chris
Great as always, congratulations, but … What about responsive mode?; Statistically 80% of people use mobile devices for internet inquiries, you know it … It is understandable that design is visually restricted on mobiles (I am a designer) but I think that, in terms of development of new functions currently It is very important to think first of “small screens” or not so fast connections in these devices that punish the speed or the optimization of the sites by more complex codes that in a mobile they are not really “used”. I hope my point of view is understood … Congratulations again for one more advance.
Totally agree
Great
This is true. The way that Divi is constructed may make this hard to achieve. Though if there was a way to work on small viewports with some of the bells and whistles turned off could be a solution. I use Asset CleanUp: Page Speed Booster to unload various resources added by plugins on pages where they are not needed. So, for example, if a page is built all with Divi, unloading the block library can help. Or, if you are using reCaptcha, on pages where there are no contact forms you can unload a resource for this built into Divi and one other other 3rd party resource associated with reCapthca. reCaptcha adds a certain amount of load that effects page load and having it disabled on your homepage can improve matters, that is if you don’t have a contact form there. I will add that Asset CleanUp: Page Speed Booster isn’t for the faint hearted and you need to dig deep to get an understanding of what is happening with your WordPress install to configure it properly.
On viewports, I still think we are missing settings for viewports around the small laptop/tablet landscape in Divi. This applies to other builders and WordPress itself (as used in WP customiser).
In terms of performance, the ball was dropped when Automattic where developing the block editor. Don’t get me wrong there are aspects of the new editor that are a big step forward for WordPress. The big oversight was constructing it in a way that 3rd parties build their own block solutions in a silo. Ideally the block editor should have been architected to include the foundation for all the most popular elements and constructions for layout: sections, containers, grids, rows and columns. With these an API should have been opened up for third party developers to build on these with their own features, bells and whistles. In this way we could have seen a new Divi with the block editor as a foundation and the end of the shortcode soup that we have if you ever decide to change to another theme. In the above scenario, if you turn off Divi at least your page layout and content would be mainly intact and more than likely you would not experience blocks that can’t be resolved.
Anyway we have what we have and there are always workaround.
The sticky update is very welcome and will make getting out of the starting blocks with headers a much swifter experience.
Great stuff!
That’s awesome, thank you so much for that!!!!
Another Divi homerun! Nick, you’re the Babe Ruth of small biz websites.
#DiviRocks
waited for these options, thanks for sharing the update! keep it up!
I smiled the entire way through that video! Be proud of what you guys have a achieved – its amazing!! Well done! I hope you guys celebrate releases like this. You should 🍻🥂
DIVI is a superior product. Is Apple, Amazon or Google gonna buy you now?
Thank you Nick! Great feature. I would like to see how demo 4 was done. – Mark
Absolutely brilliant! I can’t wait to try that on CTA banners! Who needs Divi Bars Plugin now? haha 😀
I love it, I can see this being particularly helpful for sidebar items on interior pages of blog rolls or long articles. Great feature!
Wow just wow!
This is such a great feature update. You are blessing Nick and your theme.
Looks great! For a few of the examples – like the stick to bottom and scroll back up – I could see people wanting to ‘X’ out of it. Is that possible?
Omg it’s like my prayers got answered! 😃 I was looking for this just a while back ! Thanks divi you are amazing! Best investment I ever made 😄😄😄
Hey is this achieved using JS or just CSS?
Sticky Option Are Available Today
Should be Sticky Options Are Available Today.
🙂
I had already started applying this feature with a custom css code, having it now just a click away is beyond my expectations! Thank you guys. Excellent work as always.
Is it possible to download the json file of the examples?
I second that. I’d like to download the examples as well.
We will definitely be covering this feature on the blog, so stay tuned 🙂
Thanks, Nick!
could we please get a layout or tutorial on this demo? https://elegantthemesexamples.com/sticky-elements-4/
Thanks Nick!
I wish there were a little more animation tutorials and this update, we ask you :Dª!
As if I need another reason to ‘stick’ with Divi! You guys are amazing. I can’t wait to play with this new feature. Thanks so much!!
WoW! It’s amazing! Not only the feature but the way it’s been developed! Congrats to the team!
That’s a cool feature that will change how people will interact with a website.
I second the above WOW. I was just needing this.
Will be interesting to see how this plays with Menu Modules.. Theme Builder!
Like, will sticky options in body layout consider header layout elements?
Looking forward to playing with this!
Yeah that’s cool! But what about mobile? It seems not working smoothly on small screens… (all the demos are not working properly)
This new functionality is very interesting, it makes the web look much more interactive, although I like it they will focus more on loading speed for future improvements
Wow! Incredible! Thanks!
Great tool !
Thanks a lot !
Great new functionality that will be very useful. The Divi team did a good job creatively thinking through how to implement this in a novel and innovative way. Nice work!
I had mentioned the other day while demoing Divi that I expect this feature to be available soon. I had no idea that you guys would be able to figure out such an intuitive way to integrating this – it already seems super natural and like it “belongs” in all the design options the theme offers.
I’m very much looking forward to giving this a spin. Now there’s no excuse left to not use the theme builder. ^^
This is extremely useful and very well implemented! Great work, guys!!
Impressive feature! Thank you!
One of the features I was waiting for.
whoop whoop. excellent
I am honestly amazed at the things you guys come up with. This is the investment I will never regret
hmm i’m confused, was not that already available?
also, i had to downgraded divi to the previous version because there is a conflict with the default header (not made in theme builder) in other pages not are not the home page, it looks without style.
Nope, this is a brand new feature. Be sure to check out the video in the post for a full overview and tutorial.
If you noticed styling being lost after updating, it probably means your website is caching an old version of the page with CSS files that no longer exist. Clearing your plugin or website cache will solve that issue.
thanks, i will try that!
Great job!
Sticky options look like a great addition to DIVI – thx for the new feature!
oh yeah… Time to get sticky with it….
Yes! I’ve been waiting for this feature for a long time. Great stuff!
Been waiting so long for this!
Well! Just when I thought ET were all out of cool new features to add! 🙂
WOW!👍👍
+1
Wow ! Its amazing ! Thanks for this update, more and more tools for a powerfull web design 😀