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.
List of predefined CSS classes:
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»).
- simple-layout
- Apply on «WM Posts / Custom Posts» page builder element when displaying Posts or Projects only. The posts/projects list will be styled alteratively.
- inline
- Apply on «WM Content Module» page builder element. Will put the content module icon inline with its title and aligns the text left (or right for RTL websites). (Default contentn module layout is: icon above the module title, text is centered.)
- hide-title
- Apply on «WM Content Module» page builder element. Hides the content module title (inaccessibly).
- 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. Applies drop shadow on columns. Replace
#withsmall,mediumorlarge.
Layout modifiers:
- text-center
- Apply on any element. Forces text alignment to center.
- text-left
- Apply on any element. Forces text alignment left.
- text-right
- Apply on any element. Forces text alignment right.
- 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).
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.
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 smalls– Smallsm– Smallerl– Largexl– Extra large
Other classes:
- form-button-simple
- Apply on a form element. Styles the form buttons as simple, outline buttons.
- columns-#
- Apply on Beaver Builder page builder text element. Divides the text into columns (please note that this might not work in certain browsers that does not support the applied CSS3 styles). Replace
#with number of columns from 2 to 5.