Blocksy offers you a super easy way to customise the colours of your website. Our Global Colour Palette system lets you easily define some preset colours and re-use them throughout your website, and even in supported Gutenberg plugins such as Stackable, as well as third party page builders such as Elementor.
The global colors options can be found in Customizer → General Options → Colours.
The default installation of Blocksy comes with 15 colour palettes already pre-populated, but you may always add your own or even extend one of these palettes with additional colours.
Start by clicking on the dot dot dot menu and choose “Colour Palettes“. The palette management screen will open. Here’s the place where you can check out the preset palettes as well as managing your personalised ones.
To save a new palette, first populate it with the colours you desire and then choose the dot dot dot menu and click “Save Palette“. This should add it to the Custom tab of the palette manager.
Adding a new Colour
In case the default 8 colour swatches aren’t enough for your website, you may always add additional swatches using the dot dot dot menu and choosing “Add New Colour“. The interface should look like this –
These additional colours are also recognised by the Gutenberg editor –
Additional Colour Controls
The Global Colours section will let you easily set some pre-defined colour categories. These colours are automatically applied to the entire website.
Base Text – this option sets the default overall font color, it is applied to each paragraph throughout your website.
Links – this option sets the link initial color and hover color.
Text Selection – applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
All Headings (H1 – H6) – this option will set the color for all H1 to H6 tags at once.
Heading 1, Heading 2, Heading 3… – these options will set the color for an individual heading by overriding the parent option “All Headings (H1 – H6)”
Site Background – this option controls the global background color or image of your website, this means that setting a background color from here it will reflect on all your pages or posts.
You do not need to limit yourself to the colour palettes. Each colour can be overwritten by using the Design tab throughout the Customiser.
All colour pickers from the Customiser should now support defining custom CSS variables. This means that you can define your CSS colours in the Additional CSS pane as variables and reuse them throughout the Customiser.