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: