The list of CSS classes below is organized into groups and each CSS class information is represented as:

Group title:

css-class-name

CSS class description.

Layout modifiers:

text-center | text-left | text-right

Apply on any element. Forces text alignment.

fullwidth

Best applied on a page builder module, form, image or button element. Makes certain nested elements (such as buttons, images or form fields) full width of the container.

hide-accessibly

Apply on any element. Hides the element accessibly (it will be still available for search engines and assistive technology). If applied on the Beaver Builder page builder element, the element will be visible in editing mode, but hidden otherwise.

split-screen-row

Apply on Beaver Builder page builder row. Will improve the 2-column row style for split screen use (make sure the row is set to full height).

zindex-10 (or z-index-10)

Apply on Beaver Builder page builder element to bring it to front, above other elements. This will basically rise the CSS z-index value of the element to 10.

Page builder column decorations:

Widgets modifiers:

Apply on a widget in a page builder layout. Styles the widget title the same way as it is styled in the sidebar and other widgetized areas.

hide-widget-title-accessibly

Apply on a widget in a page builder layout. Hides widget title accessibly for search engines and assistive technology.

hide-widget-title

Apply on a widget in a page builder layout. Hides widget title inaccessibly.

set-flex-grow-#

As the theme uses CSS flexbox layout in its horizontal widgetized areas you can control the width of widgets displayed there with these classes. Replace # with 2, 3 or 4. For setting up a widget CSS class we recommend using Widget CSS Classes plugin (the theme integrates the classes to the plugin’s interface automatically for your convenience).

Other classes:

background-size-stretch

Apply on Beaver Builder page builder row or column to set it’s CSS background size property to background-size: 100% 100%; (which is not possible with Beaver Builder out of the box). This will make the row/column background image to stretch, instead of just fill or fit. Depending on the background image you are using, this is sometimes desired.