Sticky Option Examples


There is so much you can do with Divi’s 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!


View Demo #1


View Demo #2


View Demo #3

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.


View The Demo

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.

Premade Layouts

Check Out These Related Posts

Introducing The Divi Marketplace

Introducing The Divi Marketplace

Posted on July 30, 2020 by in Theme Releases

The Best Place To Find Divi Modules, Child Themes & Layouts Today we are excited to release the Divi Marketplace. The Divi Marketplace is a repository of third party Divi Modules, Child Themes and Layouts. It’s a place where Divi developers and designers can upload their creations and make...

View Full Post

92 Comments

  1. Wow ! Its amazing ! Thanks for this update, more and more tools for a powerfull web design 😀

  2. Well! Just when I thought ET were all out of cool new features to add! 🙂

    • WOW!👍👍

      • +1

  3. Been waiting so long for this!

  4. Yes! I’ve been waiting for this feature for a long time. Great stuff!

  5. oh yeah… Time to get sticky with it….

  6. Sticky options look like a great addition to DIVI – thx for the new feature!

  7. 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!

  8. I am honestly amazed at the things you guys come up with. This is the investment I will never regret

  9. This is extremely useful and very well implemented! Great work, guys!!

  10. 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. ^^

  11. 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!

  12. Great tool !
    Thanks a lot !

  13. 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

  14. 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)

  15. That’s a cool feature that will change how people will interact with a website.

  16. 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!

  17. I wish there were a little more animation tutorials and this update, we ask you :Dª!

  18. 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?

  19. Sticky Option Are Available Today

    Should be Sticky Options Are Available Today.

    🙂

  20. Hey is this achieved using JS or just CSS?

  21. 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 😄😄😄

  22. 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?

  23. This is such a great feature update. You are blessing Nick and your theme.

  24. Wow just wow!

  25. I love it, I can see this being particularly helpful for sidebar items on interior pages of blog rolls or long articles. Great feature!

  26. Absolutely brilliant! I can’t wait to try that on CTA banners! Who needs Divi Bars Plugin now? haha 😀

  27. Thank you Nick! Great feature. I would like to see how demo 4 was done. – Mark

  28. DIVI is a superior product. Is Apple, Amazon or Google gonna buy you now?

  29. 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 🍻🥂

  30. waited for these options, thanks for sharing the update! keep it up!

  31. Another Divi homerun! Nick, you’re the Babe Ruth of small biz websites.

    #DiviRocks

  32. That’s awesome, thank you so much for that!!!!

  33. 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.

    • 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!

    • Totally agree

  34. Great work, Nick. This looks very useful. I love the way it is set up. Thank you.
    Chris

  35. 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.

  36. Mind blowing. I can’t wait to start trying this out 🙂

  37. Coded my self when I need that, but great to see it included in the Divi core now. Very cool implementation!

  38. Thank you for this new excited feature!
    I Love You Divi Team

  39. This looks great. Looking forward to seeing what people do with it. Going to make a few sticky CTA’s as a tester now 🙂

  40. Awesome! Please make the sticky demo’s downloadable 🙂

  41. This is rad! Looking forward to implementing in a cool way!

  42. 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 👍

  43. 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!

  44. This is an awesome new feature, look forward to working on it. Is there a way we can download the demo templates?

    • Nice – good application of the sticky.

  45. LOVE THE UPDATE!!!

    Divi is getting better and better everyday, keep up with the good work, It’s amazing!!

  46. The Lords of stickiness heard our prayers. Thank you ET!

  47. I LOVE DIVI!!! This is so awesome and will be a great feature to use on my websites.

  48. 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.!

  49. This is one of the greatest features you guys have ever added to Divi! Fantastic effort and received with massive thanks 🙂

  50. 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.

  51. One of the best features introduced by Divi in a very long time!

  52. 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!

  53. Thank you! Thank you! Thank you!

  54. Keep up the good work. A really awesome feature addition.

  55. Nice work 🙂

  56. Thank you guys great feature!
    Nice to have a few clicks away…

    Thanks

  57. 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 )

  58. 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.

  59. 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.

  60. 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.

  61. Lovin this – thank you Nick and team!

  62. 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!

  63. 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.

  64. 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.

  65. 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.

  66. 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.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest