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 straightforward.
With the Nexter Theme, you can set global colors for your website and use them across every page and template.
Best Used For:
- Brand websites that need one central place to manage and update a consistent color palette
- Agency sites where multiple pages share heading and background colors that change per project
- WooCommerce stores that need button and accent colors updated globally without touching each block
Setting Global Colors
To access the Nexter Theme global colors from the Dashboard, go to Appearance > Customize > Styling Colors > Color Palette.
Here you will find an existing global color palette. Follow the steps to edit the color palette.
1. 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. This is useful when you want a heading color or button color to update across the entire site when you change the global palette.
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 will 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, link the global color to that setting again.
Use Global Colors in Content
The Global Color Palette works with both Gutenberg (any block) and Elementor. Once you define your palette colors, they automatically appear in the color options of your page builder so you can apply the same colors consistently across all your content.
Define your palette colors once and apply them across your site for a consistent design. For a dynamic variation, see How to Add an Animated Gradient Color Background in a WordPress Container.
Gutenberg Blocks
To use a global color on any Gutenberg block, open the block’s color settings. You will see your global colors listed there. Select the one you want, and it will be applied to the block instantly.
Elementor Widgets
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. Select the one you want to apply. For more on managing colors on scroll, see How to Change Background Color On Scroll in WordPress.
Just like with the Customizer options, these colors stay linked to your palette. When you update your global color, the colors used in your content update automatically, keeping your design consistent across every page.
