New Global Color System in Divi

color is the pillar of any sort of design today i'm excited because divi has released a brand new color feature called the divi color global system so let me show you how it works and how you can get started with it and also don't forget if you buy divi using my affiliate link you will get access to my web design formula course a course that teaches you how to design professional looking websites with divi okay so i've got this page that i've just created now let's take a look and see how the new color system works so what you need to do is to click here on this gear icon and anywhere that there is color on your page is where you can find this global system so let's just go to the background here so here we can see we have colors here for our background so the new update is right here where it says global so if i click here on global you're going to notice that we can actually add more colors here so let's add a color so i'm going to click on this icon and we are going to add our color just like that okay so now let's click on this plus button and now our color has been added so this color here now has become global so anywhere else that i choose to add this color when i decide to change these colors later on the colors will be applied and will be updated wherever this color has been applied let's see how this works so for now i'm going to save this now let's head over here to our title so i'm going to click here on this title and then i'm going to go to my design heading text and you can see here we have our color system so what i'm going to do now is to apply the global color so i'm going to click here on global and here we have it already so i'm going to select it save so now i've applied my global colors to this background and this title here let's find somewhere else where we can add it one more time and that is going to be here on this text so i'm going to click here go to design and right here i'm going to choose my color click on global and i'm going to choose my global color like that and save okay so now that i've um appointed my global color to specific areas and that is here on this background here on this title and then all the way down here on this paragraph text let's see what happens when we change this global color so what i'm going to do now it doesn't matter where you go it can be changed from here or even here on this title so let's do it here on this title so i'm going to come over here go to design heading text so what i'm going to do now is i am going to go to this global color now one way of noticing how if this is a global color or not is to see this little triangle here so i can see already that this is my global color but of course if you want to go into the color itself you can just come over here to global so i'm going to click on this and i'm going to change the color okay so now i have my full color spectrum so look notice what happens as soon as i change my color the color now is changing here on the background as well and as well as over here on this paragraph text now let's keep on moving this color there we go let's go a bit crazy so you can see now that it's updating everywhere that we've used this color so this is how you use the global color system okay so let's bring our color back here to let's say this color right here okay so what i'm going to do next is i am going to go in and choose other areas where we can change our colors so this time i am going to uh come over here change my color here for my title click on design and this time i am going to choose a totally different color i'm going to go with this orange here and i'm also going to go with a different color here on the bottom so i'm going to come over here to design so for text color i'm gonna go with orange now you notice now what i've done here is this is not global and if i do come over here on the global you notice that the color is not there yet okay so what you need to do is as you're designing if you need to change this color to global all you have to do is to right click on it so you come over here right click and set this color and convert it to global so now this color now is now global and it has also been added to our color palette here which is really really cool now that we have our colors here let's decide where else we need to add them so i think i'm going to add it right here so i'm going to click on my blurb and go to design let me start with the title here go to my global colors assign my global color go to my paragraph go to global again i'm going to assign my global color here and then save okay so now we've applied a second color and these are being applied here and here so what's going to happen now is if i go in and change this color it pretty much updates where this color has been added and this is very very powerful let's see how this works so if i click on this gear icon go to design so now i am going to customize this color i'm going to come over here on this global color and you can see i've made it slightly darker now it has been updated you see that so as i'm moving this it is being updated and that is really cool so now we can go ahead and save save one more time okay great so our color has been updated here it has been also been updated here so you may be thinking okay if we do add another blurb what's going to happen are we going to have these colors well the answer is no because these colors are only updating where they've been applied so if i come over here and add my blurb you're going to notice that our blurb just goes in as normal so if you want your colors to be applied to any elements that you add on your website you have to use the global preset which is right here so you have to assign a preset with your global colors and this is how this would work so every time you add your blurbs which are based on a global preset when you update your global presets this is also going to update and pretty much this is applied across the whole website so as you can see this is very very powerful okay so let me show you how you can also use this new global color system so i'm going to click here on this gear icon click on design and let's go to our colors so i'm just going to go to my title here so what you can also do here is once you're in this global you can also add new colors by clicking on this plus button and you can just navigate through here choose your color or if you have a specific color to add you can just paste your color in here and once you've done that pretty much your color is ready to go and right now it has been added so let's say you need to customize these colors what you need to do is to click on this gear icon and now you have the ability to go in and change these colors update them perhaps like that or if you want to delete it completely you can just come over here and delete it and then here it tells you if you need to delete it so as you can see once you finish you can just go ahead and click on finish editing you can also add a lot of colors here for your global color system and like i said if you need if you need to come here and change any of these colors at the later stage it's quite easy to do that now let's do this one more time because as you can see we've added this dark color in the background it's also here and it is also here at the bottom so let's say a client comes to you and says oh you know what we've changed our color palette now we're going to be using different colors all you have to do is to come over here click on background and then you can just click directly on this color and start playing around with new colors just like that okay so if you want to base it on this um really dark blue now everywhere where this color has been applied this is going to be updated and as you can see it's updated here it's also updated here at the bottom so using global color presets is very powerful i highly recommend that you go ahead and start using them right away it's going to make your design process much much easier and much much faster so this is available right now all you have to do is to update divi and once you've updated it you are going to see all the color options all right guys that's all i have for you today's video thank you very much for watching and i'll see you in the next video take care

Channel: MAK

Views: 1,600

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, Mak, tutorLMS, tutor lms, online courses, create online courses, online course business, fluencrm, fluent crm

Id: U2TbOLPlnBo

Length: 8min 54sec (534 seconds)

Published: Tue Feb 16 2021