How To Use The New Divi Global Color System | Full Guide by Pee-Aye Creative

hey everyone it's nelson miller here with pa creative and today i want to look at the new global callers feature update from elegant themes so this has just updated on february 10 2021 and this makes divi version 4.9 let's go ahead and look at the blog post where this was announced so i really like their tagline here in the blog post manage your entire website's color scheme from inside the visual builder and that right there is actually really key to keep in mind as you think about this update because you may be thinking well why why do this update if we already have a color palette things like that well the goal is to make everything within the divi builder so that you don't even need to go to the things like the customizer or the theme options those are being slowly and surely depreciated if you haven't taken notice to that just think about that as you see the new divi updates coming out so first of all what are these new global collars well these are actually separate from the existing colors and this was the first thing that threw me for a loop and i'm still not sure why they have done it and maybe you can help clear this up in the comments let me know what you guys think i i would have imagined that they would have just made the the previous collar palette global colors like i don't get why we had to make a separate thing for having global color so we still have what we refer to as static or saved it's called saved in the builder or um so anyway we'll get into that but basically these new global ones are in addition to what we did have they're not replacing what we had so i want to make that clear up front and then you can actually see here on some of their their screenshots and gifs here like there there's a new option any setting that has a color picker like the background color text color anything like that now has the option to toggle over to global colors and use those and the goal is really just so that you can right here instantly update your entire website color scheme you know just by clicking on one of the colors so it is really cool um and it's very helpful and we're going to get into this and show you how to do it and kind of do it in a slow way that you actually understand rather than you know by their promo video so here we are in a website that is not yet updated to this and i just wanted to show you quickly what this looks like and here i just randomly chose a body text color you can see that we have saved and recent so we're not really concerned about the recent but saved is you know the default the color palette that's default so i just wanted to point it out that this is the difference we don't have the option for global but this is where it appears now these collars here that we call saved are these here that we normally set in theme options you know typically i always would recommend you know go to theme options set up your branding the colors that match your brand and those you know populate throughout the builder you know as needed you know wherever there's a color picker field and so now that step is not as crucial as it was before 4.9 because you know once you kind of set them up you know those are the ones you're going to be using but now you can actually edit those in the builder and this is kind of think of this as like two updates in one okay so i'm going to go to a page here and and show you what i'm talking about let's imagine that they did not actually release global colors and that all they did was add new features to the existing color palette okay let's think about just that here for a few minutes and and why that's actually you know a really good part of this update that may sort of get overlooked with the global caller's hype all right so let's just say i'm i showed you on this old site how it looked i was in a blur whatever um let's say you know i go into it doesn't really matter a section like the background color here you can see anywhere where this color picker shows up now we have global now by default it's going to be unsaved so you'll have to manually click global anytime you want to use them and you can see right away that there's these different shapes here for global items but i'm going to get to that but first i want to i want to talk about saved here for a minute so even if we hadn't gotten global like i was saying hypothetically let's say we only got an update to the saved ones there's this gear icon that's new here so if i click on that you can see these little it's a pencil assembly no edit appears so let's say that i didn't like this red color as my colors now i could go in here click on this and then you know whatever find find whichever color i want but i'm in the builder here and i've i've made my decision here while i'm in the builder to change this red color right now you can do that this was not possible before this update so i could click here and you know whatever i want to do maybe i want to make it this nice bright blue find it the hex color changes here and then i'll click this check mark there you can see it changed to blue and you can do that to any of these colors now when i'm done i'll click finish editing saved colors and now there's blue there so now if i go into this text module and i go in here to text well blue is an option now because that's i've literally edited it it would have been the same as in the past if i had going back here made this blue come back here x is the builder refresh the page come back in and then the blue would appear here right so we've essentially eliminated all of that hassle so now what i'll do since i'm you know now it's saved anywhere i go any page i'll go you're going to see that blue instead of the red and so now let's go back to theme options refresh here and the blue appears here so that's pretty cool so my point is like let's say that was all there was to the update well that's kind of exciting a nice little handy thing there where you can change it on the fly i might be working on another page and i decide you know what i don't want this to be that light blue anymore i want to make it some other color now that also can lead us into global colors because think about it let's say i've gone through now i've made some of my text blue and whatever but you know now i've decided that you know let's say i'm working over here and i've i've made the decision now that i don't i don't really like that blue so i'm going to edit it i'm going to come in here and you know whatever i want it to be more of a pink color save that and then i'm done well then it dawns on me hey that blue didn't update that's why we need global colors now in my humble opinion it would have made a lot more sense and and i'm probably missing something i'm sure there's a good reason but i'm probably missing something why not just make the default color palette global so when i made that change there anywhere where i had blue and it could have been like hey are you sure you want to change these colors you know from this blue to pink sure and i could have said yes and then boom you know that text would be pink i'm not sure help me out leave a comment down below i'm i'm probably just too tired and missing something um you know i don't know maybe there's a better reason or maybe there's more things coming that we don't see it so anyway back in here let's get started talking about what global colors are so we already just presented i guess the problem and now the solution now if i had saved that blue color as a global color in fact let's go in here i want to show you this so first of all when i click on global you notice that they're a different shape that indicates that these are global it's like a teardrop shape all right and then i can click this plus button and and let's just do that i'm going to click the plus button and now we were on the blue did you notice how the blue was selected there and i click this it just added that blue color as one of the global colors here and that's that's wonderful there it's a little confusing how it works um so like there i could just pick that and since it was on that blue now let's say i wanted to use a yellow i could do that and then click this check mark and added the yellow um and then this is still like a different um it's still on this text color so i could click any of these see how it's like highlighting the one that it's active there but that's how easy it is to add like a new global color like so what you could do now now that you have these global colors go through and add your color palette even if even if you would take what you had back here set up even if you would take that one by one and move them in here and say new and then paste the the hex color here you know whatever that may be click check mark and they all line up here that would be one way of doing it another way is when i'm back on this save tab here take a look at this if i go to like this purple and um well i clicked on there but if i right click on here you get some contextual options i can say edit saved color in fact i should have mentioned this earlier this is a way to edit that individual color so now i'm editing that saved color so if i make it like a real dull pink save that see how that's that's purple now it would have been the same as me going to here and editing it right but but this way i can do them all at once or whatever if i wanted to but i forgot to mention if i right click you can um sorry right there edit saved color so yeah think of that before now there's this other option make global color all right so let's say i want to make this purple color into a global cloud i want to add this to my global ones right so if i say make global color right here oh and then switch back here oddly enough it does not add it there and i'm a little fuzzy on how that works to me it should just have appeared here now i can just go here now now that it's highlighted i can click on here it's selected there and click the check mark and now i've added it i guess in my mind it would have made a a little more sense if i could literally click on here and say make little color and then when i switch here it's there am i missing something but either way it's fine it's here and i can just click that check mark and now it's here yeah whether i've missed something or not it's pretty simple okay so now i have all these colors in here what can i do with them how is this beneficial to me how is it different than the regular ones and and here's where you know it can kind of it's i feel like there's a little bit of an oversight here from elegant themes on this feature notice in this particular template that i have just ignore this orange that's a theme builder header i'm going to show you that later but notice there's a lot of blue and green i did this on purpose so there's there's green here's blue there's blue down through here is a lot of blue and green now the goal of this global colors thing is that i could i could just say hey i want to change all of these blue collars i don't care if it's in the theme builder on any page you know on 100 different pages whatever i want to change all of them at once that's the goal and that's the ability however there is a rather large caveat here and if you look closely on the release post you'll notice that nick even mentions it pro tip converts static colors to global colors it says starting off a new website using global colors is a great time saver right so the goal would be if you're building a new website start right away with global callers that's a pro tip that's a good good point to keep in mind start right away like i said instead of going to theme options go right ahead and set them up as global callers and then it says but it's easy to update your existing website to use global colors i would say it's not easy something's lacking here let me explain here well let's continue reading um you can right click on any existing static color and choose convert to global this will automatically add the color to your global color palette which it did not do for me i'm not sure if that's a bug anyway and then it says next you can use divi's find and replace system to replace your static colors with global colors in one fell swoop this is where i'm not feeling super impressed and maybe again maybe i'm missing something again so what i need to do now is go to every single page on my site and i can do this rather quickly in one swell one foul swoop or whatever the what's the terminal yeah one fell swoop i've heard that term before but i don't understand it anyway um i can do that rather quickly let me show you here's a blue icon if i go into this blue icon um where is it at right here no over in design tab of course and here's that blue color let's say i want to replace this with a global color now i can right click on here like usual and do the whole find and replace it's called i've i did a whole other tutorial on this but find and replace and i could choose i could choose one of these other colors here and great but here's the problem i that doesn't help me make them global right how does that help me make them global and then i can even pick this replace all the values in every option type not limited to the icon and that's a that's a game changer there being able to select this if i change this blue color in this icon it's going to also change in this divider in this background in blue text right to green to this green or whatever i choose here well this is still not helping the goal here and it's so easy to miss but keep in mind you have to choose global here find the color that you want to convert to global pull up this find and replace box and then choose the global option choose your color like let's choose this light blue make sure it has that teardrop shape and then click replace now what we're doing is converting all of that blue color anywhere on this page notice this drop down this page in any option type look at that we're done it changed it up here it changed all of these other icons let me get out of here it changed this divider it changed this text and we can go on and on now those are global that is very good now now we're in good hands let's do a couple more like this button here so what i don't quite like there's there's no way to just like convert these all on my entire site into this so here's the problem like i can convert this now i can say find and replace for this green do that same thing make sure you know this page is selected i wish there was this site right if they had this site that's the answer to my problem if it said replace this collar on this entire site with this collar with this global collar like this purple we'd be we'd be set we'd be done we'd be happy and throwing a party here i'm going to click replace and because i have this selected anywhere where there was that green it is now going to be the purple for example down here i think there was oh here yeah here we go that's changing as you go there you can see it but i think there were some icons these icons were green this button was green now they're purple i am going to go now to another page now you'll notice on this page there's blue and there's that green again so you might be thinking well did it update no because there's no way to convert all of your static colors into global colors that's what i'm saying that's missing but now what i've got to do i've got to come in here again and find this blue color which i can't even find there um and do the same thing convert it to global okay so if i go to this line here now again i'm going to do the same thing i'm going to do find and replace this page switch to global do this replace great that is wonderful like nick said if you had done this at the beginning when you're building a site man you are set but if you didn't and you want to start applying these globally then it's a little hassle i'm going to do one more thing i'm going to go to my theme builder just to kind of make a point that it would apply to all pages and all locations and it's really just you understand but i'm just doing it to make the point here i'll go to my header template and go into the background color okay so what i'm going to do with this i'm just going to actually click on global here and just go ahead and click this and you'll see why saving that basically now i've have this blue color at three different locations so i have it here on this sample page and then on this another sample page and then in the theme builder header so what i am going to do now is refresh here so everything's cleared up that's blue again let's get out of here just so you can see that everything's working all right so now i can this is my about page this is my other home page i'm gonna go back into this one wow a lot of blue and here's the beauty of this let's say when i was building this site i decided that blue was my color of choice and i really liked it but now i'm starting to think that i wish it was just i just wish it was different well you have some options now that you've made them global i could come in here and play around all i want and just find the one i want remember now that it's global i could come here and be like hmm let's make it let's let's make it um this kind of in between purple blue color or no i want to make it really super like gold colored okay notice how everything's changing instantly literally it's changing watch this isn't that incredible i mean even if you were just using this feature to like i don't know preview you're trying to like sort out your branding like you're doing like the exploration phase you're like what color would look good on this website you know that kind of thing well there you go this would work great for this now let let's say um that i've decided well let's see what what color do i actually want this to be i don't know i don't know oh and here okay okay here's the the key i made it like that dark green right since i've edited the actual global color it's aware that i'm going to like make a major change on this site so it says you've made changes to this global collar this will affect all instances of this global collar across your entire site do you wish to proceed well i do i do wish to proceed thank you we're done i'm going to save my page and get out of here and enjoy my new green color scheme and i'm exiting the page and just like that hey my header is updated hmm that's great now what about this page i didn't do anything on this page all the headers changed on this page oh dividers are changed on this page the icons that's right there is what we're talking about and so this is yeah this is exciting it really is but it's like converting like let's say you download or import one of the free divi layouts well have fun going through and converting everything to global before you can really take advantage of this feature and that's where i wish that the find and replace had like the global option i think that would solve everything and you know hopefully hopefully you guys and elegant themes if you're listening um either will set me straight or or take my opinions to heart and and implement that okay and you probably are you're probably getting that in the works anyway what have we missed i feel like we've missed something but i don't know what it is oh yeah so on our blog post here we talked about the these these new settings versus what we already had right well man at first i was super confused i was like now wait a minute we have find and replace we have presets we have the extend styles you know all of those but i guess this is kind of like i feel like this global colors feature is like somewhere between presets you know and find and replace or something you know what i mean like it's it's not really presets and i think that's what really threw me off well number one was why not just make all our collars global why have the static collars i'm not sure not sure and then presets versus global colors well presets the thing that i reasoned through there was i guess it didn't make sense to have colors as the presets because presets work within the module in other words if i if i was to edit this blurb and i made my blurb have a box shadow and i could set that as hey i want this to apply as the default preset therefore every blurb whether it was on this page or this page whatever there was a blurb would have a box shadow that's a little different i guess than the colors because the colors would apply to like dividers backgrounds text every every single module in every single section row so i guess they are a little more quote global but i just felt like my first impression of this was like why not just like why not just incorporate it more tightly with presets but hey you know it works and then we talked about the find and replace caveat there so yeah i this is good i'm excited let me know what you guys are thinking after watching this video have i helped you hopefully i've helped clear some things up there as far as you know the static colors and how you can use them and then switching over to global colors and then explore the possibilities again you can have multiple ones you know i don't know if there's a limit or not let's find out i know with the the regular color palette you have um i think it's what eight of them want to yeah global can i just keep adding more and more and more let's see see what we're gonna soon find out huh i feel like we're getting close to like the end here ah oh wait new line okay now i'm not gonna do this too much longer we've concluded that we can at least do two lines um okay so there you go you could have a lot of different global colors in your website all right well i'm going to end this i hope you guys found this useful i also have a whole nother tutorial on using the the presets and the extend styles and the find and replace i call that you know how to quickly and easily change the color scheme in divi and you know since i've already made that video and tutorial i'm just going to link this new one onto that post because obviously this is like the next step up from that but really if you're looking to learn more about the copy and paste extend find and replace the presets definitely check out that video because i go into detail about how you can do that and they're really cool and they all have a used place you may think that like it keeps like stepping up and one is better than the other but they all have a used case all right well we continue to release our regular tv tutorials every tuesday here on youtube and on our blog so be sure to be subscribed for those and we'll see you guys in the next video you

Channel: Pee-Aye Creative

Views: 1,634

Keywords: Divi colors, Divi color managment, Divi color palette, global colors in Divi, new Divi feature, The Divi Teacher, change Divi color scheme, Divi global colors, Divi global color system, new Divi colors stystem, Divi color palette fix, how to use Divi global colors, Divi global colors tutorial, Divi global colors full guide, Divi Global colors release, Divi global colors update, new Divi Theme fature, Divi theme color system, colors in Divi, Pee-Aye Creative Divi colors

Id: RXTuh82LexU

Length: 27min 10sec (1630 seconds)

Published: Thu Feb 11 2021