Custom CSS Classes

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”).
cubic
Apply on “WM Posts / Custom Posts” page builder element when displaying Projects only. The class will apply a special mouse hover effect on the projects display.

Page builder row styles:

intro
When you disable the default intro heading, you can apply the intro class on the first row of your page builder layout. The automatic parallax effect will be applied on this row’s content.
sticky
Apply on page builder row only. This will stick the row below the sticky header once you scroll down to it.

Page builder column styles:

hover-color-#
Apply on column to change its colors on mouse hover. Use one of predefined color values. Replace # with one of these values:

  • error – Red
  • info – Blue
  • neutral – Grey
  • success – Green
  • warning – Orange

Layout modifiers:

text-center
Apply on any element. Forces text alignment to center. Plus changes layout for Content Module and Testimonials modules.
text-right
Apply on any element. Forces text alignment right.
fullwidth
Apply on Button to stretch it the whole width of the column. Apply it on Photo module to stretch the small image the full width of the column. Apply it on an element containing a form and the form fields will be stretched to the column width.

Navigation classes:

button
Apply this class on a navigation menu item. Example can be seen in the website header. (You will need to enable menu item classes in Screen Options in your WordPress admin beforehand, probably.)

Other styles:

inline
Apply on list widget (page builder module). Or wrap a list in DIV.inline to display the list items inline instead of each list item on a new line.
simple, simple light, simple dark
Apply on a Button module. Clears the button background color creating a simple outlined button. When only simple class applied, the button inherits the row/column text color. When simple light applied, white (light) button is displayed. With simple dark the button becomes dark outlined.