Helper CSS Classes

Apply a custom helper CSS class listed below in block editor, in page builder, or directly in HTML code.
Text & typography | Layout | Decorations

Text & typography classes

h1, h2, h3, h4

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


Styles the heading the way widget title is styled.


Apply on any element. Forces text alignment.


Transforms elements text to uppercase letters.


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


Applies specific font weight on an element.


Applies specific font style on an element.


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.


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.


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


Sets element’s padding (1.618em, 0). Can be applied on Column block to force a specific column 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.


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.


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


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.


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.


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


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.)


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