You can keep a uniform color scheme on your website with global color options. These colors will be applied to theme sections throughout the website.
Color palette #
Color palettes inside the theme are not just a combination of a few colors. You can change the look and feel of the entire website with just a few clicks using the color palettes. In this document, we will explain how to properly use the color palettes so that you get the maximum out of this amazing feature.
How to create color palettes #
To access Color palettes go to the WordPress dashboard and navigate to Customizer > Global > Colors.
Color palettes are a combination of colors that you can use to change the way your website looks. Each palette is customizable to match the theme and the logo color of your website. 9 colors will be added by default to each of the color palettes. You can simply edit them and add the colors as per your requirements. By default, the color palette one is selected for your website and you can change the active palette as well as per your requirement.
How to change color palettes #
You can simply click on the pencil icon next to the Global palettes and you will get the option to choose the three available color palettes. This feature will help you change the entire look of the site just by simply changing the color palettes.
Let’s start by editing palettes, following these steps:
Step 1 – Click on one of the three available palettes to start editing. This will show you available color slots;
Step 2 – You can set each of these colors by clicking on the color slot. This will open a color picker.
Step 3 – Choose the color you want to apply to this slot;
Step 4 – In the same way, you can set all other colors;
Step 5 – Click the “Publish” button to save changes.
You can repeat these steps for each of the three color palettes.
Theme colors #
In the previous text, you learned how to create and change color palettes. Now we will show how to use color palettes and apply global colors on your website.
List of options available in Colors are listed below.
- Text Color – Color for body text and description on the website
- Theme Color – Color for all theme elements like buttons, selected text background color, etc.
- Link Color – Color for all text to which links have been added
- Link Hover Color – Hover color for all text to which links have been added
- Background (Color and Image) – This color will be applied as a background color to the body of the entire site. If you set both – color and image – make sure to adjust the opacity of the color to make the image visible.
And buttons, that article you can find here.
Linking global colors #
Each palette color can be used for any of the color settings on your website. You just need to link the global palette color to your settings and you’re done.
Numbers 1 and 2 – If the color has a globe that means that global color is set up from Color palettes.
Number 3 – If you choose a color from the color picker, the globe will be removed and in that case, you set the global color manually. It means that the Theme color will not change after you switch to another Color pallet.