Quick Look
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.
Granular Controls
Managing 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.
Suggested Use
Color 1 – you can use this as your primary brand colour.
Color 2 – alternative colour, used usually for the hover action
Color 3 – colour used for general text paragraphs
Color 4 – colour used for headings, subheadings and titles
Color 5 – colour used for borders
Color 6 – colour used for subtle backgrounds (page hero, footer)
Color 7 – colour used for the site’s background
Color 8 – lighter alternative colour, to be used in header backgrounds
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
Global Colours
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.
Important Notice!
You do not need to limit yourself to the colour palettes. Each colour can be overwritten by using the Design tab throughout the Customiser.
Developer Resources
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.
