Global colors save enormous amounts of time when designing large websites with many pages.
One color change in the Theme Options panel should update every module using that color everywhere. But sometimes certain modules refuse to follow the global color rule and keep their old colors. This frustrating behavior happens because those modules have manual color overrides applied directly to them.
The manual override takes priority over the global color setting in the Divi hierarchy system. A module with a manually selected color will never update automatically when the global color changes. The module remembers that someone specifically chose that color and assumes it should stay that way.
Here are the steps to identify and fix modules that ignore global colors.
- Open each problematic module and look for the color picker in its design settings
- Check if a specific color value appears instead of the global color variable name
- Click the arrow icon next to the color picker to reset the color to the default option
- Select the global color from the dropdown menu instead of picking a manual color value
- Save the module settings and update the page to apply the changes
Here is a comparison of how different color settings behave in Divi modules.
| Color setting type | Updates when global color changes | Best use case |
|---|---|---|
| Global color variable | Yes (automatically) | Brand colors used across the entire website |
| Manual hex code | No (stays the same) | One-time accents or specific design elements |
| Default theme color | No (fixed value) | Temporary designs that will change later |
| Custom CSS color | No (code-based) | Advanced customizations beyond module settings |
For more information about Divi design workflows and best practices, visit the Divi Builder page on wpwizzy.com.
Here is how to reset all module colors to follow global color rules.
- Open the problematic page in the Divi Visual Builder for editing purposes.
- Click on any module that refuses to update its color according to the global setting.
- Navigate to the design tab where the color picker appears for that specific module.
- Look for the circular arrow icon that typically appears next to the color picker field.
- Clicking that arrow resets the color to the default value inherited from the theme options.
- After resetting, select the desired global color from the dropdown menu instead of picking a hex code.
- Repeat this process for every module that shows the wrong color on the page.
This manual resetting process takes time but ensures that all modules respect global color changes. For new pages created after defining global colors, this problem should never appear at all.
The issue only affects modules that were created before the global color existed in the system.