Global/Block Classes
This feature allows you to have an overview of all the classes available on your installation (global classes) or those available on a specific page (block classes).
The information is accessible in an instant from the Classes Modal.
Classes Modal
Click the "+" Icon under the Classes field in the Block Inspector to open the Classes Modal.
Searchbar
You can find the class you require by inputting part or all of the required class name into the search-bar.
This will show the class as either Global or Block-specific.
Open the Classes Modal by clicking the "+" sign under the Classes field.
Input part or all of the class you are searching for.
Styles Preview
If you hover over a particular class, you will be able to visualise the styles that will be applied to your block. This will be Global or Block specific depending on whether the class is Global or Block specific.
Open the Classes modal.
Hover over a Global or Block class to visualise the styles that could be applied.
Select a Class
When you click on a class, the styles will be automatically added to your block and the the class name will be added next to Modal opening icon ("+").
Select a block.
Click "+" icon to open the Classes modal.
Find required class and click to add it to your block.
Visualise class name next to "+" icon.
Global classes will be shown in green.
Block classes will be shown in purple.
Visualise Classes in Modal
To make it easier to know which classes have been applied to a block, both Global and Block-specific, applied classes are highlighted in the Classes modal in green (global) or purple (block).
Open Classes Modal by clicking "+" icon.
Scroll through Global and Block classes to see which ones are applied to the selected block.
Added classes will appear in alphabetical order under the current block class for easy reference.
The current block class is identified by a "dot" icon to the right of the class name.
Create a Global Class
The Create property allows you to add a new Global class to your block that can be styled as required.
Created classes are always global.
To create a new class, input a unique name into the search field of the Classes modal and click "Create".
So that you know when a class is selected, the border becomes darker.
Create a Block Class
It is possible to create a block specific class and not one that will be applied globally.
Input required block name into the Class field in the Classes modal.
Press Shift/Enter to create a block class.
Remove a Class
Classes can be removed in two ways, directly from the block inspector or from the classes modal.
Remove from the Block Inspector
Hover over the class to be removed.
A "X" icon will appear.
Click "X" to remove.
Remove from the Classes Modal
When you hover over a class in the Classes modal, a "X" icon appears. When clicked, it removes the class from the current block.
With a Global class, this will remove the class from the current block alone but will not delete the class permanently.
Hover over class to be removed in the Classes modal.
Click "X" icon to remove class.
Delete a class permanently
If you wish to delete a Global class from your installation and not just from the current block, you can do so from the Classes modal.
Hover over the class to be deleted and click the "trash" icon.
This will remove the class permanently from your installation.
Copy a Class
This allows you to copy a class directly from the Classes modal to save time and improve your workflow.
Hover over class to be copied in the Classes modal.
Click "copy" icon to copy class.
Paste Styles
This allows you to paste copied styles wherever you require.
Hover over the class to which you wish to add copied style.
Click "Paste Styles" icon.
PasteStyles using keyboard shortcuts.
Stay Open
The "Stay Open" toggle allows you to keep the classes modal open for as long as you require. Otherwise, by default, the classes modal will close as soon as you perform another action.
Find the "Stay open" trigger.
Toggle on to allow the classes modal to remain open.
Toggle off to close the classes modal.
Re-position Classes modal
The Classes modal can be moved to the location that is most convenient for your workflow.
Grab and drag Classes modal and move to desired location.
Resize Classes modal
Th width of the Classes modal can be increased or decreased as required.
Find "Width" icon at the bottom right corner of the Classes modal.
Drag to required size.
Quick Editor (Global Classes)
The code of a selected Global Class can be edited directly from the Class.
Hover over the Global Class you want to edit using the Quick Editor.
Click Quick Editor icon to open the Quick Editor modal.
Last updated