Styling Your Custom Divi Modules and using Global Elements

so in this video I'm going to show you how to use the global elements in TV and how to style the vertical menu so here I have a menu that I want to be able to reuse in a different course so what I'm

going to do is I'm going to edit this page in a new tab and then you can see that this is a global element because it's green okay so I'm going to right click and disable global because that's the menu that you

will get by default when you create a menu okay so the way you start on menu is you click on those three resort online and so once it opens you can see here what many weights linked to but we

want to go to the design tab and this is where you're gonna have the different colors so you're gonna have the active link color so that's the text color the drop-down menu color so you can play

with all these colors but what's important is here the spacing so the margin here is what's going to give you the white space between the different menus so it's in the margin menu item

spacing and here is the padding bottom top and left for the little padding on the so this is the padding inside the menu item okay so a little bit of padding on the top a little bit on the

bottom so here a little bit on the top here on the bottom here and the tenth person is four here and the 4px is four right here okay so you can play with these numbers and see what it does okay

so this is the completed module checkbox when somebody has completed the module so you can choose the background color and the color of the checkbox when it's completed okay

so that's where all nothing is completed here but that's where you'll see a checkbox right here okay so once you have set it up the way you want then you click on save and add

to library and you're going to give it a name so I'm going to call it course 1 menu and you make it a global item okay so that means that you're going to be able to reuse that element and if you

modify it in one of the modules it's going to modify everywhere say you want to change the color okay then what you want to do is if you're going to a different course right and you want to

use the same menu style but then you want to tweak it slightly maybe just change one color or something like that okay so now we're going to come here and we're going to edit this page and we're

going to want to use that same menu and then tweak it so that it it's linked to the right menu but we want to start with the same design right we don't want to do this we do the spacing and stuff like

that so what we're going to do are going to remove that menu so you're going to go insert module you're going to go to add from library and then you're going to click on course 1 menu which is the

one I created you see it's in green and then of course this course 1 menu is is is linked to the other menu so I don't want to modify that right because it's global so now that I've made a copy

I'm going to disable global so now that means I have made a copy okay so now I can open it and I can link it to something else I can even give it coaching menu right or cause to menu right so in that case

here I'm going to just gonna coach coachy menu and and then in the design I can go in and I can change the colors if I want to right so if you want to have different colors for different courses

for example you can but otherwise that's all you have to do so I would if you're gonna have multiple if you're gonna have many you multiple pages so I would save it to the

library as well just so that if you need to modify it and you have 20 modules you only modify it in one place right coaching menu boom okay and your update it should actually look similar to what

we had okay but that's basically how you take something well it looks a bit different how you take something you make it a global so you can you can reuse it but you can also use that to

make a copy and then make it on global and then tweak it further for for this specific course okay so I hope that was helpful and this is how you customize the menu and how you use the global

elements in DV