By using the Astratic theme you gain access to additional CSS classes. You can use them to extend the capabilities of the Gutenberg blocks or to customize the appearance of the elements. Some classes are available for all blocks, some for specific blocks only, below you can find a full list of them:

CSS classes -all blocks

• --hidden-on-phone – disable element/block on mobile (phone) resolutions
• --hidden-on-tablet – disable element/block on mobile (tablet) resolutions
• --hidden-on-desktop – disable element/block on desktop resolutions
• --disable-margin-top – disable default top margin
• --disable-margin-bottom – disable default bottom margin
• --disable-vertical-margins – disable default top and bottom margins
• --disable-vertical-paddings – disable default top and bottom paddings
• --disable-horizontal-paddings – disable default left and right paddings
• --radius-value, e.g. --radius-5 – set a border-radius property value to 5px (20 is a maximum value)
• --shadow – adds a light and smooth shadow to block/element
• --ml-value, --mr-value, e.g. --mr-40, --ml-20 – adds margin-left (ml) or margin-right (mr) property value to the block/element (values from 0 to 200, a multiple of 10)
• --pl-value, --pr-value, e.g. --pl-20, --ml-10 – adds padding-left (pl) or padding-right (pr) property value to the block/element (values from 0 to 200, a multiple of 10)
• --breakpoint-ml-value, --breakpoint-mr-value, e.g. --md-mr-40, --xxl-ml-20 – adds margin-left (ml) or margin-right (mr) property value to the block/element for specific breakpoints, you can find available breakpoints below (values from 0 to 200, a multiple of 10)
• --breakpoint-pl-value, --breakpoint-pr-value, e.g. --lg-pl-20, --xl-ml-10 – adds padding-left (pl) or padding-right (pr) property value to the block/element for specific breakpoints, you can find available breakpoints below (values from 0 to 200, a multiple of 10)

Available breakpoints:

• sm – device resolutions above or equal to 576px
• md – device resolutions above or equal to 768px,
• lg – device resolutions above or equal to 992px,
• xl – device resolutions above or equal to 1200px,
• xxl – device resolutions above or equal to 1400px,
• xxxl -device resolutions above or equal to 1800px,

Block columns

• --cols-disable-horizontal-margins – disable default horizontal margins between columns
• --cols-disable-vertical-margins – disable default vertical margins between columns on mobile
• --cols-height-100 – set the height of block in column to 100% of parent block (columns block). It works for group and cover blocks added to the column

Block cover

• --linked – if you add link inside the cover block then the whole area of cover block will be clickable
• --linked-text-on-hover – if you add link inside the cover block then the whole area of cover block will be clickable. Content of link will be visible only on hover state

Navigation Menu items

•  --label – changes a look of the default menu item to a label, hidden on desktop, useful to group a few menu items on mobile
•  --button – changes a look of the default menu item to a button

How to use additional CSS classes?

It’s really easy! You need to make only a few steps:

1. In the Gutenberg Editor, select the block to which you would like add a class
2. In the right sidebar with the block settings find “Advanced” tab and expand it, now find a field with “Additional CSS class(es)”
3. Put a selected class to this field and save changes, that’s all!

You can also check our video showing how to add class to the block:

When it comes to additional classes for navigation menu items, it’s also easy, just follow these steps:

1. Go to the navigation menus area – from main navigation in WordPress dashboard you need to select Appearance -> Menus
2. Find the “Screen option” panel in the top right corner and expand it
3. In the extended panel, under “Show advanced menu properties” label find “CSS Classes” checkbox and check it
4. Now, select the navigation menu which you would like to edit
5. Expand the menu position to which you would like add the class
6. Put the class in “CSS Classes (optional)” field and save the menu

You can also check our video showing how to add class to the menu position: