8 Awesome WordPress Divi Hacks for Your Website

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
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. 
Info
Channel: Natalia Ramirez
Views: 6,375
Rating: undefined out of 5
Keywords: divi, divi builder, divi theme tutorial, divi tutorial, divi theme, divi theme builder, divi builder tutorial, divi 4.0, divi 4.0 tutorial, divi tutorial for beginners, divi website, elegant themes, how to make a website with divi, divi page builder, divi header design, divi feature, divi wordpress, how to make a wordpress website with divi theme, webdesign
Id: OP7vczGcnXg
Channel Id: undefined
Length: 15min 55sec (955 seconds)
Published: Mon Jan 23 2023
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.