Helper CSS Classes

Text & typography classes

h1, h2, h3, h4

Styles the text the way H1, H2, H3 and H4 headings are styled.

has-widget-title-style

Styles the heading the way widget title is styled.

has-left/center/right-text-align

Apply on any element. Forces text alignment.

has-uppercase-text-transform

Transforms elements text to uppercase letters.

has-SIZE-font-size

Sets element’s font size.
Possible SIZE values: extra-small, small, smaller, regular, large, extra-large, huge

has-100/200.../900-font-weight

Applies specific font weight on an element.

has-italic/normal-font-style

Applies specific font style on an element.

has-SIZE-line-height

Sets element’s line height.
Possible SIZE values: 1, extra-small, small, regular

Layout classes

megamenu or megamenu fullwidth

Use on a primary navigation top level menu item (how to?) to style the submenu as megamenu. Applying additional class of fullwidth will stretch the megamenu full width of the screen while keeping the megamenu content withing content width (set up in theme options).

Check the theme documentation for more details on how to create a megamenu.

has-half/phi/full-screen-min-height,
has-70/75/80/85/90/95-percent-screen-min-height

Sets the minimum height of the element as a portion of browser window height (phi = 61.8%). Best applied on full width Cover block, for example.

has-wide-content-width

Apply on Cover or Group block to make the block content wider.

has-phi/no-padding

Sets element’s padding (1.618em, 0). Can be applied on Column block to force a specific column padding.

has-SIZE-padding

Sets element’s padding size.
Possible SIZE values: extra-small, small, regular, large, extra-large

has-no-padding, has-no-padding-left/right/top/bottom/vertical/horizontal

Removes any paddingfrom an element.

has-regular-margin-bottom

Applies theme’s default bottom margin on the element.

has-no-margin, has-no-margin-left/right/top/bottom/vertical/horizontal

Removes any margin from an element.

has-center-vertical-align or is-cascade

Use in Latest Posts or any WooCommerce products list block to align items horizontally to center (in a row). This creates interesting cascading layout.

has-no-gaps or has-no-gap

Use on Gallery block to remove gaps between images.

has-info-overlay

Use on any WooCommerce products list block to position product info as overlay over the product thumbnail.

has-info-on-hover

Use on any WooCommerce products list block to position product info as overlay over the product thumbnail and display it only when mouse hovers over the product thumbnail.

is-sticky-within-container

Use on a block that should stick while scrolling within its container. Best used on a Group block within a column block while other column(s) in the row contain long content. The Group block will stay stuck to the top of the screen while scrolling through the long content in other column(s). See an example.
Works on large screens only.

has-order-first/last

Use on Column block to force position a column first or last in a row on larger screens.

Example: This is useful if you would like to display a section heading on the right side of the actual section content. While keeping the logical HTML code order, you can actually visually reorder columns with these classes to your needs.

Decorative classes

has-image-shape-1/2/3/4

Use on Image, Gallery or Media & Text block, or even on Latest Posts or any WooCommerce block listing products, to apply a blob shaped decoration on images of the block. (Note that this may not work in all browsers – check the support. If browser does not support the feature, no decoration is applied on images.)

has-decorative-overlay

Use on any block to add a blob decorative overlay in the block’s bottom right corner.