If you're a Divi user, you know just how
powerful of a tool it can be to creating beautiful websites But with so many features at your
disposal, it's easy to miss the more advanced ones, which is a pity, because these are the
ones that will save you the most amount of time. As someone who's been using Divi for years,
I know from personal experience that some of these features can be quite hidden, and
you might not not discover them when just starting out. That's why I'm excited to share
with you today eight of my top Divi hacks so you don't have to wait years to unlock
its full potential. Are you ready to take your Divi game to the
next level? Then keep watching. Here we are on my website. The first thing I want to show
you is the color pickers default palette. Let's say I want to change the colors of these
titles here, and I have one specific color in mind, which is a purple color, right? Now, what I could do is just open this, go
to the design tab and change the text color by going to the add color and add my color
code here. But what if I wanted to do this on multiple pages on my website? For example, here, here, and maybe on another
page? I don't want to copy paste my color code every time I want to change it, especially
because there is a much easier way to do this. Let's head over to the theme options. The color picker's default palette will determine
the colors that you see in the palettes of your modules. So what I can do now is add
my purple color here. For example, I would replace this orange with my purple. I'm going to save it, and then I'm going to
go back to my page and open it. You will see that I have my purple color available to me
now pretty much everywhere where there is a color palette. For example, here, as you
can see, I have this purple color here, and now I can just change it. Further down. If I want to change something
here in the text, purple color is here. If I want to change the background, purple color
is here. So now I have basically my brand colors ready for me, and I don't have to copy
paste them every time I want to change the color. If you have a large menu on your website,
it can get cluttered and difficult to navigate using the standard Divi design. As you can
see here, it's just not very user friendly. But there is a secret class called Mega Menu
that allows you to create a clean and user friendly menu. Let me show you how it looks like. As you
can see, this is much better to read than before. And to do that, it's really super
simple. Just head over to your back end and in the appearance tab, go to menus and choose
the menu that you want to edit. I have already opened my menu here, and if
I open the parent tab of the submenus, you will see that I have this field here called
CSS Classes. If you don't see this field, go to the top right corner of your screen
and click on Screen Options. And here you have CSS classes. Activate this
checkbox here. But since mine is already active, I don't need to do that anymore. The only
thing we need to do now is at the class "mega-menu" here, and I'm going to add it to my about tab as
well. "mega-menu" and save. Now, if I reload this
page, my menu will look like before super easy. I don't know about you, but I really
don't like to repeat same things over and over again. That is why I love Divi's Global
Modules feature. Let's say you want to create a nice design
for a button that looks like this and you want to use it all over your site. Of course,
you could just duplicate the button by clicking here on the duplicate module. But this really doesn't solve our problem
because if I now were to change something a week later because, for example, I don't
like the color of the font, then I would have to change it on each button individually. And depending on how many buttons you have,
this can take forever. So instead of duplicating it, what I'm going to do is I'm going to hover
over the settings and do a right click click with my mouse. Then I will save the module to the Divi library
and give it a name. For example, main button. And as you can see, what I can do now is save
this button as global, which is what I'm going to do. So let's save it to the library. And as you can see now, it is green and not
gray anymore. This is good because this means that the module is global now. So let's try
to use the same button on another part of this website. For example, here at the top,
I'm going to add the button and I can just do it by clicking on this. And here, instead of choosing from a module,
I'm going to add a module from the library. And the module that I'm going to add is the
main button that I just created. Okay, now let's say I would want to change the color
of the text, and to do so, I need to go to the design tab and then open the button and
let's say I want to have it yellow. I can do that. And if I save this now, the
button that was edited change the color for all of the other global buttons. So as you
can see here, this is now not purple anymore. It's the same yellow, even though I only changed
it here, which is super handy because this will save you lot of time in case you decide
to change it later on. Another thing that I love about the Divi builder
is that you can optimize your website from different. Screen sizes very, very easily.
So the first thing that you need to do is you open up this purple button and on the
left side you have the ability to change between screen sizes. So right now we are looking at the desktop
size. If I want to look at the tablet view, I can click on the tablet view icon and as
you can see, this will make the screen smaller. You can even move it around a little bit if
you have a certain screen size that you want to check for. And you can also do this for mobile or phone
view. As you can see right now, this looks pretty good. But let's say you wanted to optimize
something for mobile view. So let's say I wanted to change the text size for the mobile
view. To do that you would use your usual module
settings and go to the design tab text. And as you can see here, if you hover over your
text size, you will see this little icon which is a phone. And if you click on it, you now
have the ability to change between the different screen sizes and you can change the text size
for each screen size individually. So for example, in this case I have 16 pixels
for this text size here on desktop for the same text. On the tablet view I have 14 pixels.
But if I wanted to make it bigger, I could do so as well. For example 16. Actually, this looks even better and you can
also do the same for the phone view. If you don't specify something for phone, it will
just take whatever you specified on tablet. And if you didn't specify anything on tablet
either, it will just take the desktop size and you can do exactly the same for. Basically every setting here. So let's say
you want to center align your text for Mobile View. So you again would just click on the
little icon. Here you are in Phone View and now you can just change it and it will be
aligned in the middle. And for desktop it will still be aligned to
the left. So this is super cool. You can do so much with it and you can really, really
go into detail and optimize each view so it looks perfect on every screen. All right, the fifth trick that you are going
to look at today is how you can easily copy styles from one module to the other because
sometimes you just don't want to again, copy and it just takes time to do this. As you can see in this example, I have changed
the style of this header here. I made it purple, I added some letter spacing and I also changed
the font style. So everything is uppercase. Now, imagine if I had to basically recreate
the style on each of these titles. It would just take too much time, right? And
sometimes it can even be more, not just these three changes. So instead of wasting my time
and instead of doing everything manually, what we can do is the following. You can hover over the module that you want
to take the styles from. You do a right click and you can click on Copy Module Styles. Then
we hover over the next one, which is the one that we want to paste the styles to. And we can just click on Paste Module Styles
and everything will look exactly, exactly the same. You will not have to do this manually.
I'm going to go back now so I can show you that if you have multiple headers in this
case that you want to paste the style to, you don't have to do this one by one. You can also hold. The control key and click
on the first module and keep holding the key and click on the second module. And now if
we hover over it and do a right click again we can paste module styles and it will be
pasted to both of them at the same time. This will save you a lot of time. As you can
see, my website is pretty plain and it would be nice to add add a background to some of
the sections to divide them a little bit more so it's just more visually appealing. What you could do of course, is find some
background image. There are a lot of cool websites that you can find royalty free images.
You can also find background patterns. But if you're a bit lazy like me, you can just
use Divi's built in background pattern feature and let me show you how this works. So in my case, I want to highlight this services
section. That's why I'm going to go to the sections settings. And if you go to the background
tab, you can choose the second to last tab, which is the background pattern. Divi will give you a lot of options. One of
them is the polka dot pattern, but there are many more and actually they look really nice.
Let's say I wanted to use, for example, this one. I mean, this will not work with my page,
but just to show you how it would work, what you could do is you could change the color
of the honeycomb for example, if you wanted to have it purple or yellow. You can also transform the pattern by mirroring
it or rotating it. For example, if we take this one, which is the diagonal stripes, if
you mirror it like this, you see that the stripes now change the direction. You could even change it so the yellow is
actually between the lines and not the lines anymore. And as you can see, this will give
you a lot of different options. For a cool background pattern without having to actually
find a pattern that maybe is blurry or just doesn't work with your website. The next tech is super useful. So let me share
with you. Let's say you wanted to have an icon, for example, of a little phone or an
email envelope that just scrolls on this page as you scroll, scroll down. To do that, it's very easy. You can actually
just do it in any section that you want. I'm just going to add it. At the top section,
you will add a new module. And in my case, I just want to add an icon. But you can actually use whatever you want.
And as you can see, it's already here. And I'm going to choose the phone icon. I'm going
to make it a little bit smaller, maybe like 50. And now what I want is my phone to basically
scroll with me as I scroll down the page. The thing that I have to do is go to the advance
tab and within the position I'm going to choose fixed. This will allow me to fix the icon
somewhere on my screen. In this case, I want to have it in the middle of the screen to
the right. Then you can also offset it horizontally,
which means you just don't want it to be so close to the scroll bar. So what you can do
is just move it up a little bit, maybe ten pixels, and you can even if you see that by
scrolling down, I don't have this problem. But maybe you have some other part of your
website that will overlap with this. And if you want to have this at the top all the time,
you need to change the set index to something higher. But I'm just going to leave it like
that because that's all I need. And for example, what I wanted to do with
this is that people can click on it and for example, call me. So you can just add a link
to your icon and the. That would be something like this. And then you add your phone number. As you can see, it will always stay here.
If you want to have this on each page, what you can do as well is you can add this to
your header or your footer. And this way it will always be visible on all of the pages
that use the header and footer. If you haven't watched that video, feel free
to watch how to create a custom header and footer with the date. The page builder. The
last trick that I'm going to share with you today is the visibility conditions. Because sometimes you don't want everybody
to see what you're posting on your website. So if you want to hide certain content, what
you can do is for example, in my case, I just want to hide this whole row here. So I'm going to go to the row settings, and
in the advanced tab, I'm going to choose conditions. Now, these are the conditions that have to
be true in order to display this row. Let's see, you have many, many different possibilities. In my case, since I don't have a lot of content
on my website, I'm just going to show you with the user. And what I want to do is to
hide the section for people that are not locked into my website. For example, if you have
a members page and you just want members to see this section, what you can do is choose
the locked in status. And you're saying that you should only display
this row if the user is locked in. If the user is not logged in, it will not display
the row. We will just save this and you can see that I'm a locked in user. And as a locked in user, I still see this
page here. But now if I open it in a browser where I'm not logged in and I'm reloading
the page, the API integration is gone. There are a lot of different possibilities to use
this. It's very powerful. I have used it in combination
with custom fields. So for example, you just show something if a certain field is available
or not. But in my case, since I don't have any custom fields and I just showed you with
locked in status if you found this video helpful, please give it a quick like. And don't forget. To subscribe
if you want to see more videos like them. Thank you for watching. And see you next time.
