Freeze (Sticky) Element

Introduction

The Freeze Element widget helps you to keep an important element in the viewport of yours visitors. This allows to limit confusion and always remind them what is the main expected task to be done on a page.

For example, on product pages, it can be the "Add to cart" button, on travel websites, the "Book now" button, on SaaS apps, the "Save" button...

You can use this widget in many different ways and contexts. It is very easy and fast to set up.

---

Style tab

• The "Element to stick" input allows you to select the link, button or whole <div> that you want to make "sticky".
• The "Automatically select parent container" toggler enables you to choose in which element the sticky element will be sticky to. When untoggle, by default, it is the whole body element. But you can limit it to a <div>, a <section>, an <aside>...
• The "Margin top" input lets you define how far from the top you want your sticky element to be positioned. It really depends on how clutter is the rest of the page and how much "air" would need the sticky element to stand out better.
• The "Starts from" will let you define if the stickyness happens immediately when the element is about to get out of the viewport or once you've already scrolled down 20, 50 or more pixels... Defining it will let you the choice between two animation options: "Fade in" and "Slide down".
• "Put on foreground" is checked by default because depending on the level of z-index (layer level) of the other elements in the page, you may not see the sticky element if an element is overlapping it. But if, in your situation, it helps you to display it in the background, uncheck this option.
• "Add background color" (if checked) lets you add a background color to the sticky element in order to make it stand out by contrasting with the background of the page and/or the other elements.

---

Demo

A picture is worth a thousand words but a gif is worth a thousand pictures. Here is a demo on how to set a Freeze Element widget.

If you want to: edit, duplicate, rename, delete such a widget, please check the Widget Frequently Asked Questions article.