How to use?
Apply the custom helper CSS classes listed below in a block editor, in a page builder, or directly in HTML code of your website.
If you are using Beaver Builder page builder, you can apply the custom CSS class conveniently using a dropdown selector on “Advanced” tab of your page builder module edit form.
Table of contents
Text & typography classes
h1, h2, h3, h4
Styles the text the way H1, H2, H3 and H4 headings are styled.
has-left/center/right-text-align
Apply on any element. Forces text alignment.
has-uppercase-text-transform
Transforms elements text to uppercase letters.
has-SIZE-font-size
Sets element’s font size.
Possible SIZE values: extra-small, small, smaller, regular, larger, large, extra-large
has-100/200.../900-font-weight
Applies specific font weight on an element.
has-italic/normal-font-style
Applies specific font style on an element.
has-SIZE-line-height
Sets element’s line height.
Possible SIZE values: extra-small, small, regular
Layout classes
compensate-content-padding-top/bottom
By default the theme applies a top and bottom padding on content area. In case you are displaying a full width block at the top and/or bottom of the page/post content, you might want to “stick” these blocks to edges of the content area, rather than having the empty space (the content padding) above and/or below. Use this classes on your blocks to compensate for content padding accordingly.
has-half/phi/full-screen-min-height
Sets the minimum height of the element as a portion of browser window height (50%, 61.8%, 100%). Best applied on full width Cover block, for example.
has-ALIGN-content
Apply on Cover block, where it sets the content alignment.
Possible ALIGN values: alignleft, aligncenter, alignright, alignwide and alignfull.
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.
has-phi/no-padding
Sets element’s padding (1.618em, 0). Can be applied on Column block to force a specific column padding.
has-no-margin, has-no-margin-left/right/top/bottom/vertical/horizontal
Removes any margin from an element.
Accessibility classes
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.
Widget classes
widget-title-style
Apply on a widget in 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 page builder layout.
Hides widget title accessibly for search engines and assistive technology.
hide-widget-title
Apply on a widget in page builder layout.
Hides widget title inaccessibly.
set-flex-grow-2/3/4
As the theme uses CSS flexbox layout in its horizontal widgetized areas you can control the width of widgets displayed there with these classes.
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 and ease of use).
Page builder classes
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).
box-shadow-SIZE
Apply on Beaver Builder page builder column. Renders a drop shadow on columns.
Possible SIZE values: small, medium, large
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 can be a useful option to have.