Using Divi Global Colors to Create a Dynamic Palette for Your Website

hello and welcome to divi coaching today in the first of a short series of tutorials we're going to be looking at colors in divi the next videos in the series are going to be looking at presets and then finally library items and all of these are aimed at building a dynamic site template that you can use to define styles that are used throughout your divi site okay with no further ado let's start looking at colors so in the old days and i say old days i mean before february 2021 when elegant themes introduced global colors the way to set up colors was to go into this page into the color picker's default palette and to go through and to set up the colors that you were going to use throughout your site now you can do that still but the disadvantage of using these colors is that if you do set them anywhere and you then decide you want to change a color you have to go into every area where you've used that color and manually change it by using divi's new global colors you can set colors in one place and if you do change them they will dynamically change throughout your site now i've come up with a workflow that i believe works really well for using global colors and that's what i'm going to talk about today first thing we're going to do is go into the dashboard we're going to choose pages i'm going to open a page that i've already created which is simply a blank page i've called it dynamic style template and i've enabled the divi builder so we'll go into that page now first thing i'm going to do is add a new row and i'm going to choose a single column row and i'm going to add one module to it which is a text module but i'm actually going to delete all of the text in that module as i'm just using it as a placeholder and i'm going to click save i'm then going to go into the row settings and i'm going to apply a preset to this row which is literally just for me to position it over to the left hand side to make everything clearer for the demonstration i'm then going to go into the design settings for the row into the sizing settings and i'm going to click on use custom gutter width now i know there's only one column in there at the moment but we are going to be adding more to make our color swatches and so we want the custom cutter width to be reduced to two to reduce the spacing between those columns and then also going to enable the equalize column heights option and i'm going to come down to the minimum height and i'm going to give a minimum height of 200 pixels to my row i'm going to click on settings again but this time i'm going to choose the column settings i'm going to choose design and i'm going to apply a box shadow to the column no the column not the row i'm going to apply a box shadow to the column setting i'm going to go back to the row settings again and i'm going to copy so that i've got six columns in this row so just literally keep duplicating until i've got six columns and those columns are going to be my color swatches now when it comes to choosing a color palette i like to use a site called coolers that's c-o-l-o-r-s i'll leave a link in the description below and they have a fantastic area on their site called trending color palettes and i'm going to choose one of these for our site in fact i'm going to choose this one and i'm going to click on this little dot dot here and choose view palette and that will pop the palette and as you click on each of the colors you get the all the codes for those particular colors so coming back to my site actually to make life easier i think we need some labels underneath these swatches so i'm going to add a row and i have a row in the library where i've already defined some labels so we need a little bit of positioning there so the colors i'm defining are for my primary secondary an accent button hover and a text color now obviously you can choose whatever you want as your colors and if you need more than six colors you can always put another row of swatches underneath so in order to add the colors to these swatches we can now start using the global colors and all of this will become clear as to why i'm doing this very shortly i promise so if we come into the settings for the first column we go to background now instead of choosing one of these saved colors we want to click on global down here and this will bring us into a menu for the global colors we want to click on add color we want to choose our first color so in this case we're looking for the primary color which i think we use this dark blue click to copy the value we can then paste the value into here click on the little tick and then to make this a global color there's one last step which is to click on this little plus icon here and click on the tick again and this has now added this dark blue as a global color and we've assigned that dark blue global color to be our primary color in this first swatch here we can now add the rest of the colors and in fact we can add all of them here before we assign them to the different columns so to do that we click on the plus again we then choose another color so we're looking for a secondary color here so i think the secondary color for our site will be this turquoisey color so i'm going to click on copy again back to here i'm going to paste in that value click on the tick and i've added a second color we're now going to add a third color our third color here is going to be our accent color which i think we will use this yellow color for so we will click to copy back to our site paste in the value click on the tick and we've added the third color fourth color we're looking for is the button color so for the button i think we use this dark orange click to copy paste in the value click on the green tick so we've added the orange one more color the hover color and for that i think we'll use this light blue click to copy back to the site paste in the value click on the tick and that's added that now for text i think we'll go with a gray color and we'll choose a point eight for our text and we'll click on that so we've now added a text color as well so that has now defined all the global colors that we want to use throughout our site we can now go back to our column settings and we can start applying them to these other swatches so we'll choose the second column so this is our secondary color and we can just apply the global color that we've defined down here back again third column accent color third color back again fourth color is the button color which is this orange once more the hover color which we've defined as the light blue and then finally the text color for which we're going to use our gray and that's it we've defined all the colors for our site we can now click on ok and we can move on to the next stage which is showing you how to apply these to the elements on our site so in order to demonstrate how these work i've created a section which i'm going to add from the library which is a row of blurb modules and we can now go through and we can start assigning these global colors to elements in the blurb module so if we start with the blurb itself we can go into design image and icon and from the icon colors here we can go into global and we can choose our primary color to be the color for our icon let's say for example now we can go into the title text and maybe we want our secondary color for the title text so again in the design tab title text color choose a global color and this time we'll choose our secondary color next the body text so we can go into whoops we can go into body text and the body text color again choose global and this time we want our text color so we choose this color and then there's just the button left to style which is obviously not part of the blurb so if we go into the button design button design we go down to button background and i've enabled the hover option here so for the button background we're going to click on global colors again and we want to use this nice orange color for our button we can then go up to the hover option and we can then choose the hover color which is this color for the hover state of our button so we've now defined a color the orange color for the button color and a light blue for the hover state now we need to do is to apply these colors to the other two columns so we can close out of this dialog we can go into the first blurb module we can copy the module styles we can then go into the second one and paste module styles and into the third blurb and paste module styles again now we need to do the same with the button so i'm going to copy the module styles for the button i'm going to paste the styles into the second column and paste the styles into the third column so there we are now we've extended our global colors to all three columns now we need to do is save this and we can move on to the next stage and i can show you why we've done all this now after what may seem like quite a lot of work to you to get to this stage what we've actually now done is defined the colors for our entire website and we've applied these dynamically to some modules now for example if someone comes along and says i don't like the button color i want to change it throughout the whole site it's as easy as this to update you simply go into the one button go into the design tab go into button and you'll see that it's a global color that's defined for that button color now if you go into that global color and change it so for example we decide we want our button to be a green color you'll see not only does it change that button but it also changes all other buttons and more importantly it also changes our swatch in our style template and that's the color that has now become our new button color throughout the whole site and if you click on save it will ask you if you're sure and that will now change that color throughout the entire site now we can save that and then we can have a look at one more example so say for example that the primary color we decide the primary color is too dark so we can come into this module we can click on design image and icon we could go with the global color that we've chosen and we can come in here and we can change that global color say we'd like a bright color there and you can see it automatically changes the color of all of our icons as well as the swatch in our primary color bar we can then click on ok to confirm we'll get a confirmation to make sure that we're aware that we're changing our global color throughout we can then click on yes and close the dialog box if we then save all of our changes we can come out of the visual builder and everything's been updated in the next tutorial we're going to look at how we can take that concept further rather than just applying these dynamic colors to some modules on the page here we're going to create some presets and we're going to apply the global colors to the presets and save them that means that then you can introduce these presets anywhere in your site and they will automatically be the right color and all of the other design options like fonts and things can be set up at the same time well i hope you found this tutorial useful if so then obviously i'd appreciate a like and if you're not already subscribed to the channel then please do subscribe thank you very much and i'll see you next time

Channel: Divi Coaching - Build Great Websites with Divi

Views: 478

Keywords: divi theme tutorial, divi 4.0 tutorial, elegant themes, divi theme tutorial 2020, divi theme tutorial 2021, divi theme tutorial for beginners, divi global colors, divi colors, divi theme builder, divi color palette, divi colours, divi tutorial, divi builder 2021, divi builder wordpress, divi tutorials 2021, divi tutorial 2020, divi global colours, divi builder, divi theme tutorial videos, divi tutorial for beginners, divi 4.0, divi builder tutorial

Id: Ze5PXqTX2MY

Length: 11min 47sec (707 seconds)

Published: Wed Apr 21 2021