Custom CSS classes

Change the appearance and behavior quickly and simply using these special predefined CSS classes.
All of these classes are conveniently available in page builder as dropdown list.

The classes on this page are ordered by popularity/usage.

Please note that the video is for a different theme, but the principle is the same.

set-colors-TYPE

Affecting row/column colors

Apply on column or row to set the predefined colors on it automatically, without needing to remember any color hex value. Use one of predefined color types for TYPE (all of these can be set in theme customizer): accent, header, navigation, header-info-widgets,content, sidebar, footer, footer-info-widgets, credits, error, info, neutral, success or warning.

Accent

Navigation

Sidebar

Error

Info

Neutral

Success

Warning

hover-color-TYPE

Affecting row/column colors

Apply on column to change it's colors on mouse hover. Use one of predefined color types for TYPE: error, info, neutral, success or warning.

Hover me.

Error

Hover me.

Info

Hover me.

Neutral

Hover me.

Success

Hover me.

Warning

color-simple
color-simple light
color-simple dark
form-button-simple

Affecting buttons only

Apply on a button module or shortcode. Clears the button background color creating a simple outlined button. When only color-simple class applied, the button inherits the row/column text color. When simple light applied, white (light) button is displayed. With color-simple dark the button becomes dark outlined.

Apply the form-button-simple on a module, column or a row that contains a form. The submit button in the form will be styles as simple button (see above).

text-center
text-right

Affecting various elements

Centers text in the element or aligns it to the right respectively.

Sorry, there is nothing to display here…
Sorry, there is nothing to display here…
Sorry, there is nothing to display here…
inline
hide-title
bordered

Affecting Content Modules

Apply inline class on icon boxes to display the horizontal layout.
Apply hide-title class to hide the module title (the title will still be accessible).
Apply bordered class on posts list to draw border around items.

Sorry, there is nothing to display here…
Sorry, there is nothing to display here…
Sorry, there is nothing to display here…
masonry

Affecting posts lists

Apply this class onto WM Content Module, WM Posts (custom posts) or WM Testimonials page builder module when displaying multiple items to apply masonry layout on them.

Sorry, there is nothing to display here…
hide-media

Affecting posts list

Apply on WM Posts (custom posts) page builder module (for standard posts) to hide the post media (featured image, video or audio).

hide-excerpt

Affecting Staff posts list

Apply on WM Posts (custom posts) page builder module (for Staff posts) to hide the post excerpt text (if set). This will make sure only the basic info of Staff is displayed.

Sorry, there is nothing to display here…
fullwidth

Affecting various elements

Apply on button to stretch it the whole width of the column.
Apply on photo module to stretch the small image the full width of the column (note that this is great for keeping images stretched on mobile devices).
Apply on element which contains a form and the form fields will be stretched to the column width.

button

Altering navigation items

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.

size-TYPE

Affecting divider only

Apply on WM Divider / Gap page builder module to set its width. Use one of predefined size types for TYPE: small, medium, large or extra-large.

Normal divider size:


Divider size altered with size class:





last
first

Affecting columns only

These classes change the alignment of columns. Apply on column to alter its large and medium screen (desktop and tablets landscape orientation) alignment. On mobile devices the columns will be stacked normally. Very useful for altering layouts (see the example below). Usually you will find yourself using last class only. The first class is added for completion.
(Tip: try to resize browser's window to see the effect bellow.)

ffffff.png?text=placehold.it

No last class applied here. This is standard columns layout.

ffffff.png?text=placehold.it

The last class is applied on the image column here. However, on mobile devices the columns are stacked as expected.