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