Are you looking to add global colors to your WordPress site? Global colors make it easy to control your site’s color scheme from one central place. Instead of changing colors one by one, you can update a single global color and see it applied across your entire website. This helps keep your design consistent, saves time, and makes future updates quick and hassle-free.
With the Nexter Theme, you can easily set global colors for your website and use them across your website.
Setting Global Colors
To access the Nexter Theme global colors from the Dashboard, go to Appearance > Customize > Styling Colors > Color Palette.
Here you’ll find an existing global color palette. Follow the steps to edit the color palette.
1. You can change any color in the palette by clicking on it and choosing a new color from the color picker.
2. If you need more colors than the available slots, click the + icon to add a new color slot. Then, click on that slot and select your desired color using the color picker.
3. Once the changes are done, click on the Publish button to save the changes.
Link Global Colors from Customizer
Each color in the Global Color Palette can be used for any color setting on your site through the Customizer. To do this, you need to link the global colors to the required elements.
Follow these steps to link a global color:
1. Refresh the Customizer page after setting your global colors.
2. For example, to link a global color to the H1 heading:
- Go to Customizer → Styling Colors → Headings H1–H6.
- Click on the H1 color option.
- The color palette will open. At the bottom of the palette, you’ll see all the global colors.
- Select the global color you want to use.
3. Click the Publish button to save your changes.
In the same way, you can link global colors to any color element available in the Customizer.
Even after setting Global Color Palettes, you can still use static colors just like before. However, if you change a linked setting to a static color, it will disconnect that setting from the global palette. This means future changes to the global color will no longer apply to it automatically.
If you want to use palette colors again, simply link the global color to that setting again.
Use Global Colors in Content
The Global Color Palette works seamlessly with both Gutenberg (any block) and Elementor.
Once you set your global palette colors, they automatically appear in the color options of your page builder. This means you can use the same palette colors while creating and styling your content, without any extra setup. Simply define your palette colors once and apply them everywhere for a consistent and unified design across your site.
Gutenberg Blocks
To use a global color on any Gutenberg block, open the block’s color settings. You’ll see your global colors listed there, simply select the one you want, and it will be applied to the block instantly.
Elementor Widgets
Similarly, to use a global color in any Elementor widget, go to the widget’s color settings and click on the globe icon. All your global colors will appear there—simply select the one you want to apply.
Just like with the Customizer options, these colors stay linked to your palette. So, when you update your color palette, the colors used in your content will automatically update as well—keeping your design consistent everywhere.
