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
- Redinfo
- Blueneutral
- Greysuccess
- Greenwarning
- 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. Whensimple light
applied, white (light) button is displayed. Withsimple dark
the button becomes dark outlined.