Styling Your Custom Divi Modules and using Global Elements

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email
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

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

More To Explore

Are You Looking for Help to Setup Your membership Site?

Our AccessAlly WordPress Framework has been used on over 230 AccessAlly sites. We can help!