Divi Sticky Options (Divi feature update)

Divi Sticky Options are built-in design settings that allow you to make any element in Divi stick to the top, the bottom, or the top and bottom of the web page.

You can give each sticky element unique design settings that are applied when the element is sticky, you can choose how sticky elements interact with other sticky and non-sticky elements, and you can choose which areas of the page the sticky options should be applied within.

“…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.”

There are endless possibilities to use the built-in Divi Sticky Options but the following list gives you an idea of some of the most popular effects you may want to achieve with sticky options;

• Divi sticky header – Make your header, secondary menu, or any elements of your Divi header stick to the top of the page.
• Divi sticky footer – Make your footer stick to the bottom of the page, even with very little page content.
• Divi sticky CTA – Get more clicks on your CTA by making it sticky and always be visible to users.
• Divi sticky sidebar – Stop your sidebar disappearing off your long pages by making it stick.
• Divi Sticky buttons – Get a higher CTR on your buttons by making them visible no matter how long your page is.
• Divi Sticky menu – Create sticky sub-menus or easy table-of-contents for your blog posts.

This post will show you the main features of the new Divi Stick Options and how to use them to create sticky elements in Divi.

How to use Sticky Options

1. Do not stick, stick to the top of the page, the bottom, or both

Every Divi element has an option to activate and customize Sticky Options.

In your section, row, column, or module go to Advanced > Scroll Effects > Sticky Position and you can choose between 4 options;

• Do Not Stick – The default for every element is non-sticky
• Stick To Top – Stick the element to the top of the browser viewport as you scroll downward
• Stick To Bottom – Stick the element to the bottom of the browser viewport as you scroll upwards.
• Stick To Top And Bottom – Stick the element to the top of the browser viewport as you scroll downward, and stick the element to the bottom of the browser viewport as you scroll upwards.

Once you have activated the sticky option on your element you will see more options load into the settings window.

2. Sticky offset settings

The first option is the Sticky Offset which allows you to set the distance in pixels between the top or bottom of the screen and your sticky element.

By default, your sticky element will stick to the top or bottom of the page without a gap.

To add space between the top and/or bottom of your page and the sticky element you just need to add a pixel amount into the offset settings area. This means that your sticky element can stick to the top or bottom of the page, but also anywhere in-between. If you have selected to stick your element to both the top and bottom, you can set the offset for each individually.

3. Sticky Limit settings

The next option is for the Sticky Limit which allows you to set where on the page the sticky effect will be activated.

By default, it is set to none and any sticky element will be able to be sticky on the entire page.

A sticky limit is a boundary where sticky elements can be sticky. As soon as the selected limit has passed off the screen the sticky element will no longer be sticky.

You can set Sticky Limits depending on what type of element you are making sticky, but options can be for none, body area, section, row, and column.

4. Offset From Surrounding Sticky Elements setting

When the Offset From Surrounding Sticky Elements button is set to YES it means that sticky elements will stack below each other.

When the Offset From Surrounding Sticky Elements button is set to NO it means each stick element will stick to the top of the browser regardless if there is another element already stuck there.

Most of the time this would cause unwanted elements overlapping, but it can be used for some unique effects too.

5. Transition Default and Sticky Styles

When set to YES, the Transition Default and Sticky Styles option will activate animated transitions between the default and sticky styles when the element becomes sticky.

This makes any design changes look a lot smoother and nicer and would in almost all cases be better left active.

Adding Sticky design settings

Making elements sticky is great, but what really allows creative freedom is the ability to change any of the design settings for a sticky element based on whether it is currently sticky or not.

To set a sticky design setting you will need to click on the pin icon above any of the design settings in the sections, row, column, or module.

You can set a sticky design setting for anything available in the Divi Builder, such as background colors, box-shadows, padding, fonts, and so on.

Examples of Sticky Options from Elegant Themes

Elegant Themes have created three Sticky Options examples as part of the release post* (affiliate link) on their website.

Keep an eye on the Elegant Themes blog too as there are usually plenty of demo layouts released in the weeks after a new feature update.

• Example 1 – A mix of sticky elements and parallax on a restaurant landing page.
• Example 2 – A blog post with the sticky banner advert, CTA, and section titles.
• Example 3 – A Gym page with staggered sticky blocks and a sticky info panel.

Final Thoughts

Sticky Options are a great addition to Divi and allow non-coders to achieve some really impressive effects. When the Divi Theme Builder was released the first thing everyone asked was ” How do I make my header sticky?”. With these new options, making your Divi header sticky is very easy and you can make anything at all sticky too.

Have you created any sticky elements yet with the new options?

Drop a link below with your sticky Divi elements.