Closeable Elements

This hack allows you to add a close button to any element. This is useful if you want to create a notification/message on the page and want the user to be able to close it.

Classes

  • closeable
  • keep-hidden-xxx

Usage

This hack gives the user the ability to close an element. Now you can add closeable sections, alerts, messages on your pages. Add the class closeable to any element to add a close button. The element will be hidden until you view/refresh the page.

If you want to keep an element hidden until the browser session ends, add the class keep-hidden-xxx, changing xxx with any other value to identify any unique element that you want to keep hidden (example: keep-hidden-promo, keep-hidden-message, keep-hidden-warning).

Use with

Any Section, Row, or Module

Design

To customize the look of the close button, add the following CSS variables the Element’s Custom CSS Box.

--close-button-color:
--close-button-width:
--close-button-height:
--close-button-size:

Closeable Element

Close this element by clicking the icon in the top right corner.

Closeable Element

Close this element by clicking the icon in the top right corner.

This element also has the class keep-hidden-box which will keep the element hidden even after the user refreshes the page.