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.
