Fix Elementor Global Colors Not Updating When Adding New Colors
This post will share a fix to Elementor global colors not updating when adding new colors in the site settings. I recently stumbled upon a really annoying bug in the Elementor editor, to which I couldn't find any solution online. While designing a new Elementor website, we added to existing templates some new Elementor global colors and global fonts.
After adding the Elementor global colors in the Site Settings, we got back to the editor. Every now and then, the colors disappeared. It seemed like the configuration we updated did not change anything. We had to refresh every time, or even worse, try to add and remove the colors again.
I looked online and couldn't find any answer that actually solved the problem. Suddenly I noticed that when entering the website via Incognito, things started to work again. This triggered me to find the solution, which like all good things, is really simple.
1. Regenerate Elementor CSS files
This is the standard “reset your computer, and it will work” solution. In my experience, it didn’t really help, but it’s still worth trying.
– Go to your WordPress Dashboard
– Click Elementor -> Tools -> Regenerate File
2. Empty Cache and Hard Reload Page in your Browser
Leave the dashboard and go back to your website. Right-click the page and click Inspect Element. When the Inspect Element is open, right-click the refresh button at the top of the screen. You’ll now have an option to Empty Cache and Hard Reload Page, which you should click. This deletes a lot of data the browser stores about the website
3. Open the Application Tab in the Inspect Element Window
In your open Inspect Element window, click on the Application tab on the top part.
You should see a lot of data related to your website, including cookies, local storage, static content, and some more.
4. Delete All Local Storage
– On the right-hand side, search for Local Storage and click on it.
– Look for your website name (should be first)
– Right-click on your website’s name and hit Clear
5. Delete All Cache Storage
– On the right-hand side, search for Cache Storage and click on it, this should be further down.
– You should see only one entry
– Right-click on that entry and hit Delete
Conclusion
Although this bug can be quite a headache, the solution is very simple. Simply hard delete local cache, accessing the Application specifically. This will solve the issue with Elementor global colors and global fonts not updating when you try to add a new one.
