Style guide

The main part where you need to change your global styles is Style editor. The theme has many predefined colors and you can hover over each color to see where it’s used. Also, theme has some predefined style variants. It’s important to mention that there are two critical colors – Base and Contrast color which are responsible for the content background and content text. If you change these colors, then, the background under your content will be also changed so we don’t recommend changing it too much. Anyway, both colors must be opposite to make them contrast.

If you want to change colors in Templates, edit the template in Site Editor and replace colors in Main parent Group

Base and Contrast colors are used also in Night mode (they switch each other), so if you want to make a block that has always dark background or white text, set the Custom color as #000000 or #ffffff. In this scenarios, they will not depend on your base and contrast global colors

Styles for Blocks

Greenshift theme has a lot of ready style presets for each core blocks.

For example, here are button variants

Or example of Heading block style

Heading Gradient mask style

It’s easy to find such styles for each block, they are placed in the style selector

Additional classes

But there are also some additional styles that you can get if you add special classes inside the Class panel

You can mix these classes with styles.


Post featured Image block

Class to make some hover scale effect


Buttons block


Use this if you want to make button as center align on tablets and mobiles


Use if you want to replace right align to left align on tablets and down

Column block


Will make collapsible columns not only on mobiles but also on tablets


Leave a Reply

Your email address will not be published. Required fields are marked *