Sticky Element

Introduction

The Sticky 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... Obviously, it can be set on something else than a button: a whole component such as a form, or a menu.

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

---

Content tab

• The "Select the element to stick" input allows you to select the link, button or whole <div> that you want to make "sticky".
• The "Foreground" toggler is toggled by default. When toggled, it allows you to change the z-index. value.
• The "Z-index" number input lets you define the value of z-index in order to position your sticky element among other elements already positioned on the z-axis.

---

Style tab

• The "Sticky position from top" input number and unit select allow you to define the scroll height before the widget start to become "sticky".
• If the "Add background color" checkbox is checked, then you can define a "Background color" for the selected element in the color picker.

---

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.