Greenshift is the only free page builder with a powerful Class component system available.
You can find classes in the sidebar in most of the blocks of Greenshift.
There are several types of classes.
Classic classes – it’s the same as core WordPress classes, which you can add in the Advanced panel of core blocks.
Local classes
Local classes – they are similar to classic but you can attach also designs to them and sub-selectors. Data from classic styles are saved inside blocks but it’s shareable between blocks on the same page. For example, if you create one local class and then attach the same class on another block, it will use the design from the class (so, you don’t need to attach a design to each block with the same class). The plugin automatically detects local classes on the page and you can select previously created classes.
To attach styles to class, click on it’s name and you will see that it’s Green highlighted, then you can attach design via style tabs panel.
Also, if you add a local class to one block, then select it in another block, then when you edit another block, you will see a message that the local class is controlled by another block and button which helps to locate it.
Additionally, local classes have the option to set the class to be “Localed”. It means that the design that you set to such a class will be located only in the current block. If you add such localed class to other blocks, then the class will be added but styles – no.
There is also a special icon (filter icon) near the class which opens the option to limit style visibility by environment. For example, you can set them to work only in Frontend or only in the editor. This is helpful, for example, when you create animated panels which are hidden by default. You can set them to be hidden only on the frontend part while remaining visible in the editor so you can edit blocks.
Also, there is a visibility icon, this will disable/enable the class without its removal. Useful, when you need to test styles with and without class.
Global classes
Global classes are very similar to local. The difference is that they are saved in a global database instead of a post and you can share them across the site instead of just one page.
If you add styles to a global class in one block, and then attach it in another block on another page, attributes will be automatically transferred. So, you can edit your global class from any block and page where you add them. They will be updated across the whole site.
Global classes are also available in Stylebook, so you can see all classes on your site and transfer them to another site
It’s important to mention that only when you click on the save button, current styles will be saved to the database. Without this, you can test styles but they will be reverted to saved once you reload the page.
Global classes also have the Component icon, this will limit the global classes to be block-type based. It means that if you add such a class on a button block, then, it will be available for selection only on other button blocks.
Custom attributes
You can use the class panel not only for classes but also for adding custom attributes, like data-…, aria-label, etc. Just create the name of the attribute, then attach it to the block. After this, click on the attribute name and attach its value.
Sub Selectors
Any class system makes no sense if it doesn’t support subselectors. For example, you can set .btn class and also .btn.active class
For this, you need to set a sub-selector; simply add the name of the sub-selector (it must be with dots and spaces if you need. When you need to add styles to a sub-selector, select parent class, then click on the sub-selector name, and you will see that it’s green highlighted
Technically, you can use any subselectors because they are text fields where you can type anything.
You can use also Rule builder to select proper layer from your page, for this, click on Selector Builder icon.
Auto Creation of Sub Selectors
You can save your time if you use Auto Creation of Sub Selectors. So, imagine a situation when you have parent block and many child blocks with classes. And you want to control all child items from parent block. For this, you can create local class on parent block and use auto creation of subselectors
Preset classes
In the selector of classes, you will see predefined classes and attributes. These presets are just fast, predefined classes with styles; you can’t edit them, but you can combine different presets. Also, you can add presets programmatically, it’s described in documentation for developers
Custom classes from the Design system
You can add also custom CSS in Stylebook – Styles. Code that you will add will auto detect classes and they can also be available in the class selector
Copy/Paste styles and Rename option
If you click on brush icon, you can copy paste from one class/sub selector to another. This will work also if you copy styles from local styles to classes
Which type of class to use?
You can ask which type of class to use in different scenarios. So, Local class is good if you need to build complex design with sub selectors for specific page. Also they are good for using with Interaction Layers. Think about global classes as Components. I don’t recommend to use more than 20-30 global classes on site. Use global classes if you need complex solutions with many subselectors. With global classes you can style also inner elements of blocks. For simple classes where you attach few options, I recommend to use Custom classes with Design system inside Stylebook – Styles.
Please, note that Global Styles are loading on all pages, even if you don’t use specific class on page. Global, preset and local classes are loaded conditionally only if you use them on page in blocks