Custom CSS Classes

A list of theme-predefined, helpful custom CSS classes you can use on page builder elements and widgets.

How to use?

Apply the custom CSS classes listed below on a page builder element, shortcode or HTML element as you like.
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 element edit form.
With WebMan Amplifier shortcodes you can use a class attribute, just like with HTML code.

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.

Posts list modifiers:

masonry
Applies masonry layout on the list of posts. Use it on page builder elements (or shortcodes) which output list of posts (such as “WM Posts / Custom Posts”, “WM Testimonials”, “WM Content Module”).
compact-layout
Apply on “WM Posts / Custom Posts” page builder element when displaying Posts only. The posts list will be styled alternatively.
hide-title
Apply on “WM Content Module” page builder element. Hides the content module title (inaccessibly).
hide-more-button
Apply on “WM Content Module” page builder element. Hides the content module “Read more” button if it’s displayed.
item-border
Apply on “WM Content Module” page builder element. Applies border around displayed content module(s).

Page builder column decorations:

box-shadow-#
Apply on Beaver Builder page builder column. Renders a drop shadow on columns. Replace # with small, medium or large.

Layout modifiers:

text-center | text-left | text-right
Apply on any element. Forces text alignment.
fullwidth
Best applied on a page builder column, 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
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.

Widgets modifiers:

widget-title-style
Apply on a widget in page builder. Styles the widget title the same way as it is styled in the sidebar and other widget areas.
hide-widget-title-accessibly
Apply on a widget in page builder. Hides widget title accessibly for search engines and assistive technology.
hide-widget-title
Apply on a widget in page builder. 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 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).

Typography modifiers:

font-size-#
Apply on any element. Changes the element font size relatively to normal website size (which is m – medium). Replace # with one of these values: xs – Extra small; s – Small; sm – Smaller; l – Large; xl – Extra large

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 and fit. Depending on the background image you are using, this is sometimes needed behavior.
Skip to content