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
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).
Column text color is set to blue.
text-center
text-right
Affecting various elements
Centers text in the element or aligns it to the right respectively.
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.
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.
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.
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.
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.)
No last class applied here. This is standard columns layout.
The last class is applied on the image column here. However, on mobile devices the columns are stacked as expected.