Global Colors For Divi
Update Colors Across Your Entire Website Instantly
Today we are excited to release Global Colors for Divi, a new dynamic color system that allows you to create and control colors across your entire website. Now you can build your own dynamic color palette of global colors. When you change a global color, all elements using that color are updated. That means you can control your entire website’s color scheme from a single location while using the builder; adding and managing colors as you see fit.
Build Your Own Dynamic Color Palette Of Global Colors
When you adjust a color setting in Divi, you will notice a new “Global” tab next to the existing “Saved” and “Recent” color palettes. Opening the global tab will reveal your global color palette, allowing you to manage and apply global colors. Click the plus icon to add a new global color to your palette, or click the gear icon to manage existing colors.
Clicking on a global color with apply that color to your element. You can tell if a color setting has a global color applied by looking at the shape of the color swatch. Global colors are signified by their unique droplet shape. Global colors are different than static saved colors because their color values are dynamic and linked between all elements that use them. If you change a global color, all elements using that color across your entire website will change too.
Instantly Update Your Entire Website's Color Scheme
Once your website is using global colors, you can adjust your website’s color scheme in just a few clicks. Global colors can be used for anything: backgrounds, buttons, text and anything else on your page. Not only can you add new global colors, you can also edit existing global colors. When an existing global color is updated, all elements using that global color are updated too. A Divi website using global colors can have it’s entire color scheme changed in just a few moments. That’s the beauty of Divi’s global color system.
Pro Tip: Convert Static Colors To Global Colors!
Starting off a new website using global colors is a great time saver, but it’s also easy to update your existing website to use global colors. You can right click on any existing static color and choose the “Covert To Global” option. This will automatically add the color to your global color palette and apply the global color to the active color setting.
Next, you can use Divi’s Find & Replace system to replace your static colors with global colors in one fell swoop. Once your page has been converted to global colors, you can change the entire page’s color scheme using the global color palette.
Join Or Upgrade Today For 10% Off!
Today's The Best Day To Get Divi Or Upgrade Your Account To Lifetime
Join the most enthusiastic and loving WordPress theme community on the web and download Divi today. Using the new Visual Builder, you can build websites faster than ever before with its incredibly fast and intuitive visual interface. You have to see it to believe it!
Join Today For 10% OFF!
Renew Your Account Today For 10% OFF!
Upgrade Your Account Today For 10% OFF!
Bit late to the game on this, but a question regarding tints.
If I have colour X which I had in a regular palette, pulled from theme options, and I’ve been using tints/opacities of this colour for styling various elements of modules, if I then convert the 100% version of the colour to a global colour and subsequently change the hue, will it update the hue of all the tint/opacity instances based on the original colour x?
Unfortunately, the palette in the Theme Option isn’t a Global by default, any instance of it will not be updated. If you convert a color to Global in a Module, it will be set to that Module only, so you will need to set color other Modules/Settings to that Global Color as well.
A quick way to change all instances of that specific color (color X) to a Global Color instance is to use find and replace, you can see the option when clicking on the Three-dot option above the color palette, this option is available in most Divi Elements’ design tab: https://prnt.sc/w1QuGkfsTu13
You just need to find the color and replace it with the Global Color, nothing to touch on the “Within” option and check the “Replace All” in the option: https://prnt.sc/1TU9JwuBfz_L
Another tool for the toolbox! Great to know I’m saving time on all my future builds. Thanks ET team…
I’ve been waiting for a feature like this for a while, glad it’s finally here.
The only thing that would make this better (and another feature I’ve been wanting) is if there was some way to use find & replace for the entire website.
But with the new and previous global features, including the theme builder, new sites I build are always very easy to change site-wide.
All in all, this feature-add is the reason I choose Divi over other page builders. It’s the constant addition of tools to make designer’s and developer’s lives easier. Awesome stuff!
Loving the new Global Color feature.
But my question is for us developers that are creating child themes or layouts to sell online. I’d love to set all the colors as global, package it up with global colors. When the buyer installs and activates the child theme…the global colors should already be saved as global.
Thus, the buyer can easily change the colors of the child theme to match their branding colors as the new global colors. I’ve been playing with this and I’m not seeing the global color settings save and then follow through to a new site/page.
Maybe I’m missing something…please respond, I’m going to give a presentation on this new feature to the Divi Chicago group in a few weeks.
Thank you!
Great addition, thank you. This is one feature I will add to my build process immediately. This will be a time saver when using layouts as a starting point too, if colours will be set as global within the layouts. Thanks guys.
Nice update but it miss some of it’s potential since it’s not possible to use Search & Replace on an entire website, only page by page.
Super!…. Great job you guys. Keep it coming.
Oh, how I wish I had this for my first 100 Divi and Extra websites! Thank you for adding this excellent new feature, again setting the bar for what a design and theme can do in WordPress! The new Global System is a no brainer for all new websites, and I will roll it out for older sites as I work on them. Thank you, ET team!
Very good!
It is what I needed few days ago.
Totally and radically awesome! This is a new feature I really appreciate. But, I do have a related request per Divi updates, to include in the changelog minimum RAM requirements. My fav machine is an older portable with a 16:10 screen, 4Gb RAM max. It can no longer handle the Divi back end. Of course, most machines have higher RAM. But RAM use is important while “page loading overhead” is critical. The recent back-end page loading improvements are great. Any such refactoring, involving feature redundancy or not, is much appreciated and will help keep Divi the world’s most awesome site-building framework (:
WoW! This is an excellent update. Getting more and more like CSS and InDesign master pages. I like it!
Good evening @nickroach
This is going to be super usefull. Thanks.
Can we hope those global color to be added in the html code as global css var?
This would be super helpful for all custom CSS, HTML, JS, CODE and MODULE and would save a lot of time 😀
Great way to implement color schemes and save us a lot of time but … I can’t find these colors like css var in the css code of my pages. I’m stupid or @Divi just forgot to add very simple lines of code with CSS var so that we can use those colors absolutely anywhere on our DIVI website, even in our custom codes, modules or third party plugins. .
How can I enable or add my WordPress website?
Just update Divi to the latest version. See the post and video above for instructions on how to use Global Colors.
Excellent enhancement!
and interesting new haircut 🙂
Live is so colorful now with this colorful update of Divi. Thanks!
Ninjas! This is a great add to the functionality, I cannot imagine how much more time will be saved, fantastic! Thanks
Love it!!!!
Is there a reason why my comment is still waiting moderation?
I think you answered your own question. If a comment is awaiting moderation, it hasn’t been moderated yet 🙂
My apologies. I was fooled by an overzealous browser cache that stuck on to the page for a day!
Backend editor neglected again. For example, it is not possible to specify a color in HEX.
I am not sure what you mean Patryk. You can definitely define hex colors when using Global Colors. Let us know if you need help with anything.
NIck: On one page in the backend editor I do not have this option (hex). In frontend its OK. But on the others site its backend and frontend OK. Maybe a cache or a conflict with some plugin. Fortunately, this is a test page 🙂
Thanks for this great awaited update !
BUT, the translations are making Divi almost unusable. I did not understand how this new feature works until I switched to English.
ALSO, as I requested it long ago, please allow us to turn Divi UI translations off without having WordPress Admin turning into english, because when it happens, some plugins like Woocommerce will have their front-end turning also into english. This make the non-english websites look like not “polished”.
So each time, a modification is done, I need to go back to Divi options and reactivate the translations so Woocommerce front-end can be in french to keep it professional.
Thanks for seriously taking this into consideration asap.
Cheers.
You can turn off translations for the builder in the Divi Theme Options.
Yes You can, but it also changes the language for WordPress to ENG/US. This makes other plugins switch to displaying text in ENG/US. Changing WordPress settings doesn’t work for this.
You don’t need to change your website’s language. You can disable the Divi Builder translations specifically in the Divi Theme Options.
Disabling translation in the Divi Theme Options changes the language code for the entire WordPress to ENG / US. Trying to restore in WordPress settings does not do much, because e.g. plugins also automatically switch to ENG / US support. Only turning on translation in Divi helps.
+1 for sure
Also Dutch translation is making me laugh often 🙂
See: PRyC WP: Languages remover for Divi Builder (https://www.wordpress.org/plugins/pryc-wp-remove-languages-for-divi/)
Bravo, this is fantastic!
I love updates that speed up development process.
Thank you ET!
Hello,
Another great job!
For 7 years I have only used Divi and Extra for all my sites!
The first version was already great! and more time
going on and more this this builder is easy and fun to use.
Thanks thanks thanks
Fr to En
Nice feature! It would be great having global settings also for fonts in future.
It’s in the works 🙂
This is fantastic, thanks! Such a time saver! This is the best theme ever.
We’ve waited so long for this but it was so worth it! Thanks Nick and the team!! Amazing job!
This is fantastic, so exciting and helpful!
This is a useful feature, but not the most important one… When will you make custom row width sizes? The Elementaries have had it for a long time.
Hi Andrei. You can adjust the width of any sections, row or module in the builder. See the Sizing option group in the Design tab.
Great work guys, well done!
Thank you very much!
Bravo, c’est magique !
Thumbs up!!! 🙂 JUST GREAT!
Thank you – what a superb feature and so timesaving!
Thanks so much. I can’t wait to apply this. Amazing!
Great stuff, as always, from the Divi theme. Can we also expect something similar for the fonts ?
Yep, we are hoping to enable “globalness” to everything that it makes sense for. We have a lot of ideas around how this could work with option group presets as well.
Nick no doubt it’s a great update. I’ve been waiting for this feature for a long time. Now I am feeling more confidant and comfortable
Great work, thanks!! Makes a lot of things much easier!
Thanks for this great update.
Great time saver.
Wonderful update! 😀
Fantastic addition!!!
Can’t wait to start using it!
Thanks for this great update, just wondering if there’s any ETA on the front-end speed enhancement upgrade?
Cheers!
I am afraid we don’t give ETA’s because they are never accurate enough, and it just leads to stress within the community when we miss them. We never really know for sure when a feature will be released until it’s a few weeks from being finished and already being QA tested.
So glad you’ve added this! Just last week I had a client ask for a color update on their website. I’d set it up so I didn’t have to change it in too many places, but this will be so much better!!!
I am still having trouble since update 4.8 that the divi builder is not working. Modules are not popping up anymore and disabling other plugins didn’t help fixing it…
Drop our support a line so we can help. Most likely a caching problem, plugin conflict or firewall issue.
This will be a time saver!
Oh great! I’ve been waiting for that for a long time.
Will it be also available in Divi theme options page while selecting default colors?
It’s only available in the builder. That being said, you don’t need to go to the Divi Theme Options to edit your static color palette anymore. That can be done in the builder too. Just click the gear icon and you can manage your static and global colors 🙂
Nice work Nick and ET team.
Great time saver.
Excellent! This gives new opportunities to copy and change websites for new customers really quick. THANKYOU
Nick wasn’t it better to have this global colors in Divi theme color palette. As we start creating a new website with first setting this color palette in divi options. And once set mostly we use these three to four lr max five colors throughout the website. Instead of having global colors i think having the color palette itself global would have made more sense.
Divi has three color pallets. Saved Colors, Global Colors and Recent Colors. They can all be managed in the builder so there is no need to go to the Theme Options for colors anymore.
What about Divi “settings”? I understand that you are moving away from the theme “customiser” but Divi settings have to stay as it has settings that otherwise your system does not otherwise cater.
There is a great benefit to us if we can see the global palette next to the saved palette. It would allow us to simply open the settings page, alter a global colour while viewing the result while browsing the website on a separate browser window.
From what I can see the current process is a bit convoluted.
Go to the page where the colour is used
Enable Visual Builder
Find the module that use the colour you want to change
Find the colour inside the module
Select global palette
Edit the colour
Save
You even have to exit the Visual Editor if the colour is also used on a part of the page built by the theme builder.
Don’t see this is a moan. I’m ecstatic that you introduced global colours. As a life member from before Divi existed I simply want Divi to have the best of the best 🙂
I do see what you are saying, but at the same time the process you describe seems more complicated to me. Navigating to the Divi Theme Options, adjusting colors where you can’t see the result, then opening a page in another browser and refreshing each time you change a color. I’d rather just enable the builder on that page and adjust the colors while seeing the live result.
Ultimately we want to make the builder the place where everything is managed, and this will make more sense when more and more of the website is managed using the builder.
I don’t have a problem of managing global settings in a centralised location within the builder but I cannot see the logic of doing that within the setting of a module on a page instead of centralised place. There is a reason why we are using the term “global” after all. However, you even have removed the palette from the page options!
I’m sure you are saying opening a second browser windows is more complicated is an argument for the argument sake 🙂
Thank you for listening.
But the Saved Colors can only be saved in the Theme Options, right? Or is there another way that I can’t find.
I kind of agree with Ravindra that the ‘old’ saved colors could have been converted to global. Having a separate options just adds complexity. On the other hand, I can see automatically changing saved to global could be an issue for existing sites.
It’s useful that you can convert a static color to a global color, but I don’t understand why we then need to take the extra step to find & replace existing colors for global colors on every page.
Hi John-Pierre. Nope, you can adjust your saved colors in the builder now, just like Global Colors (we snuck that improvement in with this update). No need to go the Divi Theme Options anymore if you don’t want to.
Nice, I didn’t catch that. Probably because there is some inconsistency in editing saved versus global colors.
– Saved colors: you have to clock the cog icon to edit them
– Global colors: you can edit them without first clicking the cog icon
Or is that a bug? Because once I have selected a global color, the color picker transforms to he global color icon and when you then pick another color, it’s going to change the global color (even when you are in ‘saved color’ mode).
By the way, when you go to a coor box, the ‘saved colors’ is the default view. Can that be changed to ‘Global’? With this option available I don’t see myself using saved colors anymore, and global is one click further away.
Thanks
JP
Yes we need futures like pre design block section like Elementor in Divi.
Please consider this as positive response. Hope divi team reply in this ASAP.
Thanks and congratulations on global colore feature.;-)
Pre-made sections is definitely something we will be doing eventually, but there are other improvements to the Divi Library we need to do first. Higher on the priority list for us are pre-made headers and footers.
Wow this is motivating.
I would really like to add a global gradient, color moving effect – just like here, but for every element.
So that we basically have an ever changing color rainbow in a smooth transforming way.
How could I do this? Can we get some kind of global color css ID to add this effect?
Please think about it. thx
Hallelujah!! Fantastic new upgrade! This will be a definite time saver! Thanks so much!
This is going to be a very handy addition, especially for those with client s who like to change their minds every 2 minutes! The ability to convert to global and then find & replace to get your existing site up to speed is pretty slick too! Good job ET 🙂
Wow, such an awesome and time-saving update! I found updating colour to be so repetitive and boring – now it’ll be super easy! Can’t wait to take the new global colours for a spin! Keep up the awesome work Elegant Themes! 🙂
My eyes almost teared up…
Needed this.
Simple, clever and extremely useful – thanks for making this part of DIVI by default and not an add-on.
(Any chance you have plans to extend these “global” settings… maybe to FONTS ???)
Yep 🙂
This is awesome! We recently updated our color scheme so instead of having to go through each page manually, it will be nice to know we have a shortcut now. Thanks DIVI!
There are a few things still missing. The global colors aren’t available on the site customization (seems like a big miss) and the “extend styles” doesn’t extend the global color selection across other modules… love the concept, still a few things to tweak, please!
Extend Styles will extend a global color across all modules on a page if you choose to extend styles to “All Modules” throughout “This Page” in the extend styles popup. You can also use Find And Replace and select the “Replace All” option.
We are moving away from the Theme Customizer bit by bit. Right now we are focused on the builder and using the builder to design the entire website.
Why are you moving away from the theme customizer? It’s the standard for WordPress and they are even adding more functionality in there.
Are you also going to add a global option for text settings as a replacement for the customizer? Because the customizer is the only place to set a global font etc. I know you can use the default preset for that, but that is per module type, not global. Also, for modules with a title field (e.g. blurb, toggle, accordion), you can only have settings for that title, it doesn’t apply to titles used in the module body.
Thanks guys perfect drop!
This looks super promising, it seems like a great feature.
I hope the way it is being implemented is via CSS variables or a CSS class. And not having inline code for every single element that will then say stuff like:
.et_pb_column_0 { background-color: #f00; }
.et_pb_blurb_0 .entry-title { color: #f00; }
… and so on…
These improvements are certainly great for the people using the interface, but please also think of the code you’re generating and try to condense it as much as possible and work with CSS variables and classes (or in other words: best practices). This is the main reason why I have yet to fall in love with presets, the implementation is just severely lacking.
Really not trying to hate for no reason, as I said, this looks super promising, but I also want to highlight the other side of these updates that often gets overlooked for some reason.
You say “Instantly Update Your Entire Website’s Color Scheme” but I can only see the option to update the page you are on. Where is the entire website update option?
Also, I couldn’t find a place on the Divi setting where I can define the global colours. Is it missing?
Global colors are used across your entire website. So if you have hundreds of modules across your entire website and across different page using the same global color, you only have to update the color once. All modules using that global color will also change.
It looks like in order to update a global colour you must open any module that uses it and alter it within that module? It will be nice to be able see/edit global colours in the Divi settings menu along with the saved colours.
It will also be nice if we can see the changes to the colour reflected on the headers and footers made by the theme builder without saving and exiting the Visual Builder.
We have an update coming soon that will address that second issue, and more 🙂
Can I officially report bugs somewhere, but not in the chat? Bugs also on current global colors.
PS: Cool update!
Bobo and Nick, I second the bugs issue. I’m really excited about this feature but from my initial attempts at using it, it’s too unreliable right now. I’ve had instances of global color settings not saving to a preset, global color settings in presets not applying to the element the preset is applied to, updating a global color not updating all instances of it, global color settings randomly going away and just leaving a blank color. It’s just not in a state where I can use it on a live site. I need to do a full deep dive test on a local dev site in order to record my findings and submit them to elegant themes. Darn. Was really hoping to use this right out of the gate.
The official place to report bugs is via our support chat. All bugs reported there are logged and we prioritize bug fixes based on how many times the bug has been reported.
Fantastic new functionality, great work!
Another amazing feature! Nice job!
Great. Yesterday I have been thinking about such an option. And now I see it real..
good luck.
Something that I need, something that I have. Happy to be a lifetime member!
Great feature 🙂
Mind..Blown! Game changer/Time saver!!
Thanks Nick. I like this a lot and will save a bunch of time on new sites. I am not 100% clear on how this works when it comes to changing a color on an entire existing website. Convert a static color to global, then find & replace on that page. But then I assume we need to do this on each page?
Ohhhh its Amazing ! thanks !! Its very fun play with colors and help us to work more efficiently
You guys are the best Nick! We love using Divi and you guys keep making it better. Keep the global settings coming! 🙂
Bon travail!
This is a great feature, and reduces a lot of time in managing colors!
great feature, but im confused now if i should use presets or global colors… can this global color feature be used in presets too?
Yep, Global Colors can be used inside of Divi Presets. Presets are for managing module-specific designs, but you shouldn’t have to modify 40 module presets just to update your website’s colors. That’s where global colors come it. You can apply global colors to all your presets and manage them in one place.
ok I got it now, thanks Nick!
Keep up the great work!
Amazing feature!!❤️
So happy for this to be added to the DIVI builder!!!! I love it that I need to do less and less in custom CSS files. Thank you, DIVI Team!! :))
yeaaaaaaaah ! It’s just what i was looking for, for many months, when I first purchase Divi, and now it’s here ! Let us make the client happy when he says for the 10th time.. ” hmmm I think this red is too much red ! ” Now we can answer : “Ok, and now?” Not only find and replace on this page but on the entire website. Great 👍
Thank you !
DonBa
Awesome work Nick and ET team. Love this new feature!
It’s a nice upgrade, saving us design time. 😀
I keep wondering when ET will make an update that improves the performance of the theme or includes the icons of whatsapp or telegram in Divi natively 😓
I am waiting for whatsapp and telegram icons as well!!
Hey – this is great. Thank you! Seeing the regular updates/improvements is why I’m glad I went with DIVI for my small agency.
Another home run. I will be using Gutenberg for SOME sites in the future, but Divi is and will always be my favorite choice for web development. I’ve been a member of Elegant Themes since BEFORE Divi was developed. It’s one of the best decisions I ever made as a developer.
Oh, thank you!!!
Thanks for so great work. Color Palette looks really fine.
Love it!
Does this mean that Dark Mode is coming soon?
I think we can do it using it ?? as i think
Awesome! Thank you Nick and ET Team for the new Global Color feature.
Excelent !!
Thats great! Loving the new features on making life easier recently.
Great, nice to have and use!
First comment here 😀 maybe
At least great feature and waiting for the frontend speed improvments
i love it
thanks Nick and elegantthemes team
Nice!
Now this is the updates tha i love. I ve been waiting for global colours for a while. Weldone guys good job.
😍😍😍Hoooooorrrayyy! This is fantastic. Thank you. So much easier than global search and replace. Divi just keeps getting more fun every week.
WOW! Amazing
Very nice additional option to the existing options like Presets, Find & Replace, and Extend Styles! Great idea to provide the option to change colors throughout all elements of the whole site!
I was wondering if that would be addressed.
Love this! Great work guys!!
YES! Great work Nick and team. This is a game changer! 🙂
Can’t wait to play with this later 🙂
😍❤️🧡💛💚💙💜