There are many ways to control global parts of your site and some users have problems with this. Just few workflows which are in mind:
- Plugin’s global elements
- Theme’s global elements
- FSE Global Style Editor
- CSS frameworks like ACSS or Core framework
We can’t give you exact way which you should use, because each of you can find your own way which is best. But our Stylebook makes it perfect for situations when you want to keep everything in Greenshift with option to have Figma Synchronizations, presets, import/export, etc
You can open StyleBook from two places. From Greenshift – Stylebook and when you click on G icon when you edit posts in editor.
Stylebook has several parts
Elements
This is place where you add default sizes and typography for your headings (h1-h5) and body text + core button block styles (used in core button block, Advanced button and woocommerce button blocks)
To edit typography, click on Heading item and you will see dropdown with options
Important. You need to click on Save button to save element options. Without saving, you can experiment with settings, but they will be lost after page reload
Colors
In Color options, you can set own set of custom colors and gradients. Once you do this, they will be available in Color selector in blocks
Variables
Variables allows you to create presets for options. For example, you want to have specific spacing for your blocks and you tired to set specific number in your options. You can create variable here and then select it in options.
Variables have much wider usage and especially useful for making dynamic css.
Global classes
Global classes allows you to make Global design styles. For example, you want to have specific styles for buttons and use it on site on different parts. And you want to make them different from core button styles. You can make global class for such button and reuse it on blocks. If you will want to change styles, you don’t need to edit each block, you edit only global class
Presets
You can set current styles for whole Stylebook in Preset. You can easily replace current preset with previously created.
Figma synchronization
Greenshift has a special free plugin for Figma which allows you to make Stylebook in Figma with one click and then connect and synchronize it with the Greenshift site