Setting the proper colours is crucial for the landing page.
However, this task can be tiresome when you have to individually set the colours for each and every component of the page.
To solve this pain point, we have Global Colours.
How to access Global Colours:
Click on the global settings on the top left corner of the screen.
The third option from the top is Colors AKA Global Colors.
How to set colours in the Global colours:
Once you click the Global Colours, you will see quite a few predefined colour selectors namely Primary, Text, etc.
Each of these predefined colour selectors is customisable and can be linked to the modules.
If you click on, say Primary, you will see the colour selector of Primary.You can either set a solid colour or a gradient colour.
Let me show you how you can update the colour of one of the predefined colour selectors.
As an example, let's update the colour of the Primary.
I have shown you how to do this through the video below
in the same way, you can update all the predefined colour selectors.
How to link a predefined Colour selector to a module:
Now, you may wonder, how to add these predefined colours to the modules of the page.
I will show you how you can do this in this section.
Once you link a particular colour selector to a module, the colours within the selector get applied automatically to that module.
The linking process is mentioned below
To link a particular colour selector to the modules, you have to go to the colour settings of that particular module and select the predefined colour selector under the swatch colour palette.
Let me show this process through an example. Let's take a button module as an example.
Please see the video below.
I will add the Primary colour selector to a button module in the video below.
This linking process is almost the same for all the other modules that we have within the builder.
How to Unlink a predefined font selector from a module:
If you wish to unlink a predefined colour sector from a module, the process is quite easy.
This process too has to be done within the style setting of that module.
The unlinking process is mentioned below
Let me show this process through an example. Let's again take a button module as an example.
Please see the video below.
I will unlink the Primary Colour selector from the button module in the video below.
To unlink a predefined colour selector from a module, you simply have to go to the colour settings and replace the colour of the predefined colour selector with a solid colour.
This process is clearly shown in the video above.
This unlinking process is almost the same for all the other modules that we have within the builder.
How does Global Colours save you time?
When you make one change to a predefined colour selector, say, Primary, that change will be reflected automatically on all the modules that are linked to the Primary.
Let me show this process through a quick video
Custom colour selector:
If you want to create your own custom Colour selector, we have you covered.
The option to do that is at the bottom of the global colours settings.
Let me show you the option through the screenshot image below
You can create your own custom colour selector and give it a name.
You can unlink and unlink the custom colour selector in the same way mentioned above and inject the colours into the modules.