In this video I’m gonna show you 26 top Divi Features that or not so well known. These tips will speed up your workflow and building website skills. I hope you enjoy!
👇🏻👇🏻👇🏻 Start here 👇🏻👇🏻👇🏻
Do you want to support my channel? Leave a like or buy Divi with 10% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
✅ Divi with 10% discount ⇒ https://wp.discount/divi-discount/
✅ Hosting & Domain provider ⇒ https://wp.discount/hosting/
✅ Best caching plugin ⇒ https://wp.discount/wp-rocket-discount/
I want you to succeed with your website, so lets get started.
⏱️Timestamps⏱️
0:00 Intro
0:18 Adding Code
1:03 Using Presets
1:58 Responsiveness
4:49 Wireframe
5:23 Mega Menu
6:41 HTML in text
7:59 Header Layout
9:06 Align modules vertically
10:10 Admin Labels
11:04 Default Fonts
11:50 Google Maps
13:37 Global Colors
15:10 Divi Language
16:22 Posts Layout
18:28 Style Headers
19:40 Disable Divi
20:42 Disable Gutenberg
21:21 Waste Money
22:27 404 page
23:09 Search Results
23:41 Custom CSS
25:11 Debug Divi
25:58 Speed it up!
26:30 Use Keyboard
27:28 Divi Library
28:42 Global Items
Thank you for watching! 😀
✅For tips and tricks on getting the most out of WordPress, don’t forget to subscribe: https://wpressdoctor.com/sub
📖Transscript📖
In this video I’m gonna teach you how to work with Divi in a more efficient, better, and smarter way. So watch this video till the end because all these tips are gonna help you out big time. Let’s dive in, right now!
So a lot of people use plugins to enter code to your Divi website. It’s totally not necessary. Just go over here to Divi and you go to Theme Options in here. And then you go to the tab called ‘Integration’. In here you can just add in a code to the head of your blog or to the body. What it says in Divi: is to add the code to the <body> because it’s good for tracking codes such as Google Analytics. That’s not true! In Google Analytics it literally says: “Immediately after the <head> element so we’re gonna copy this code, we’re gonna paste it in over here. Here we go. Make sure this one is enabled and just press save changes. No need for another plugin. If you for example create a new row and you go to ‘Settings’, you might notice in ‘Design’ and ‘Sizing’ that the max width of the row is standard 1080px. This might be a bit too small for your websites. Nut if you want to change your row settings every single time, it’s gonna take a lot of time. What you do is you change this for example to 1280px, and we go over here to ‘Presets’. We’re going to change the default preset over here with this button; ‘Update preset with current style’. If you do this, you get a warning. Because this will affect all rows using the row default preset across your entire website. If you now press on yes, all the rows in your website will become a bigger size, but also every new row you’re creating will have these styles. Really powerful feature make sure to use it when you start building your website.
We all know mobile devices are very important. But do you know how important? Check on your Analytics and you can see that on this website, 75% of all visitors is coming through their mobile device. How to optimize for mobile? Its really easy. If you now go to this menu item over here click on it. And here you can switch between different devices. Let’s go to the phone view. And now for example you see that these buttons are not completely lined out the right way. So how do you change this only for mobile? You go to your settings, you go to ‘Design’ ‘Alignment’ ‘Button alignment’ is to the right side, but if you only want to change it on mobile devices, click on this icon over there. And then for phone we go to ‘center’ this one. And you might also check the tablet to see how it works. And then you see its also centered at the right side, not that nice. Click on the center button. Let’s change the second button, go to ‘Design’ go to ‘Alignment’. Hover over your button, then go to your mobile phone, and place it on the center again. Also with tablet, go in there and also align it to the center. Well done. For example this text is a little bit too big on mobile devices. So we click on the module settings, we go to ‘Design’. I just press the brush icon over there. Text size: I can also change it for mobile like this! And put it on 20px. Whoa, put it on 24px. Way better and it works with every module within Divi. This button looks very nice on desktop but on mobile phones I don’t want it to be over there. How do we do that? Well you just go into this module you go to ‘Advanced’ you go to ‘Visibility’ and you can choose to disable this specific module on phones and tablets for example. Well I only want to disable this on phones. So press save, here you go. When you just want to replace the image for a mobile a different kind, you can press on these settings. You go to ‘Image’ and when you hover over here you’ll see this icon again. Click on it. And now you can select a completely different image just for your mobile phone! For example I want this image on mobile. This image on tablet, and this image on desktop. Actually every single thing that is changeable within Divi can be changed for different devices. For example the text you can even add more text. “Text for mobile” and here we go “Text for tablet” and this is the text
for desktops. It works amazing. Also the sizing options, the max width, the module alignments, all these things can be done within Divi. It’s really easy to fine tune your new website for mobile devices.
Sometimes you just can’t select the right module. When you’re changing z-indexes for example, or you just – like this – was playing with the spacing. Now I can’t add a new module in over here, because of the row! Very easy to fix, just go over here and select the ‘Wireframe Modus’. Now you can see your entire page how it’s been built up in modules, rows and sections. Just add in a new module over there, and while you have added it, you can even switch back to your desktop view. Now it’s very easy to add anything that you want. People want to create a mega menu like this, and they’re always using a plugin to do this. Well it’s not actually necessary. It’s very easy to do within Divi itself. You just go to ‘Appearance’ go to ‘Menus’
and the first thing in here is we go to ‘Screen options’. We’re going to enable the ‘CSS classes’
right there. And then you go to the menu and as you can see, I have a products menu, and in here I have an image, custom link, with all these sub items. If you go to product you will see that the CSS class of the highest level is a “mega-menu”. Just like this just mega-menu. And then when you scroll down you can see this one’s a “mega-link”. So the second level is “mega-link” and all the sub items don’t have a CSS class. This was the “mega-link” and these are with no other CSS classes. “mega-link” “mega-link” no CSS classes. As you can see that’s just the way how it works, its really easy and it works like a charm. So this custom link is also a “mega-link” and I just put in a image over there. Really easy this is just the image, change the width a bit, and then you just have a beautiful image on top of your mega menu.
Another thing I see going wrong a lot is actually using the layout system of WordPress itself. What do I mean with that? Well if I’m trying to change this module settings of this blurb. Some people actually change this entire text – select it – and make it bold. And also for example change the text to blue. Well you can do this this way, but when I now go to this brush icon, and I want to change the body font weight for example Ultra bolt, or light… it’s not possible anymore. The text in here contains now HTML, which has more priority than the Divi CSS layout. What I strongly suggest: if you want to make this bold and you want to change the color of the entire thing, press on the brush icon over there, and then go over here and make it for example bold and change the color if you want to do this. If you’re doing it like this, then if you go to content and text you can also change for example, this little word to make it for example white again. You can use some HTML inside of your module, just for small adjustments. For overall adjustments please use the Divi module itself. In 2023 I still see people using the default header in Div. I mean look at this, it’s just hideous. A logo with just this one, and you have to tune it and tweak it using the theme customizer. Why? What you need to do my friend – to harness the power of Divi – go to your dashboard, you go to Divi, and you go to the ‘Theme Builder’. You could just add in a new template over here. You can build it, and you can choose is it for a specific page? But maybe you just only want this for a test page for example. And we’re going to create a template. And then you can add in a global header and a global footer. If you try to edit these things, you will have the full power of the Divi builder inside of your global header. And this is just really simple. Just a section, a row, a menu, and a button. But you can be as creative if you want.
So please stop using this standard header in your Divi websites. Thank you very much. Another thing is that people don’t know how to align vertical modules inside of your row. In here I have a row with three columns I have text and icon and nothing. But I want them to be vertically aligned. So that they’re in the center of the row. Really easy to do if you know how. First we need to go into the row settings, click on it. And we go to ‘Design’ ‘Sizing’ we’re going to ‘Equalize column heights’. Turn this on. Then we go to ‘Content’ and click on the column you want to align vertically. I want the first one. I go to ‘Advanced’ ‘Customs CSS’ and the ‘Main element’. You type in here “align-self: center;”
Just like this. Save this one. You go to the second column
, go to ‘Advanced’ ‘Customs CSS’ and the ‘Main element’
and again “align-self: center;” . Press save it. And save it. And there it is. So stop using padding
and margin, because this is the way to actually do it safe on all devices and it works like a charm. Also a thing that’s very useful, is to name your sections and rows. If I now go to my wireframe modus,
you will see that all these things in this page is all just normal section, row, section, row,
section, row…. I don’t know what’s in there! If you’re using the wireframe a lot, it can be very useful just to change some names. This section is about “The steps to success”. So I go into the section settings, go in the ‘Admin label’, and here I say: “Steps to success” and save it. And this section is going to be called “Quote”. This section is going to be called… And when I now go into wireframe mode, you will see that hey this is really logical! Here are my pricing plans, over here is my quote, and then I go to my steps to success. Really useful if you’re creating big pages and you’re using the wireframe view. What I see people do is go into the module settings hit the brush icon and change the text font to; whatever they’re using. But they have to do it every single time. Now you can do this of course with the presets – like I already shown you –
but you can also go to the ‘Theme Customizer’ over there. And in here you can go to ‘General settings’ go to ‘Typography’ and here when you scroll down, you can actually change the font of your titles and your body, and the colors to change the standard font. And of course you will have all the Google Fonts available on your website. Now this is very useful and will save you a lot of time creating your website. Now on my contact page I want to have a Google Maps view of my location. And I want this section to be full width. So we’re gonna add a new section, I’m thinking going full width. I’m gonna add a full width map. And then… “For development purposes only” I’m going to add a new pin. Title? I don’t know? My office? I don’t know, what should I add in here? Map Google Page could not find it? Right, wait a second. Map pin address? Washington DC, Find it. Request denied? What am I supposed to do here? There is a far more easier way. Just go over here add a new section, just a normal section like this, with a normal row. And a module will be a code module. Go to Google Maps, go to the place you want to show. Make sure to zoom out the way you actually want to shown the map on your website. And press ‘Share’. ‘Embed a map’ over there, and press ‘Copy HTML’. Then you go to your code module, and we paste it in right there. And we only have to change one thing. You go to your width, and then we change the 600px to 100%. You can also change the height to whatever you want. Press save. And now we go into the row
settings of this module. Click on ‘Design’ ‘Sizing’ change the width to 100 percent, and also the max width to 100 percent. Then we go to ‘Spacing’ padding: 0 bottom: 0. Save it. Also go to your section go to ‘Design’ go to ‘Spacing’ padding 0 bottom 0. Just like this, and press save. Building your website you will notice that you use a lot of the same colors. The right way to build your website with the colors is actually not the way you might think. If you go to your text modules over here for example. What you will see is this normal color palette over there. I actually never use this color palette. What I always do is use ‘Global Colors’. Over there. Why do I use Global Colors?Well this is the power of Divi. If I now change the heading text color to this dark blue color, then this heading will change that’s no problem. But when I press now on this Global Color over here, and I’m going to change this for example to a red color. And then I’m gonna save this. Watch what happens. “Are you sure? You have made changes to the global color this will affect all instances across your entire website, do you want to proceed?” If I click yes now – let’s just do it – and we press save, you will see that every time when I use this global color, it now turned into this hideous red. But the power of this is that I can change all my colors in just one go throughout my entire website. And I want to save it again my website is just on the normal colors again. Phew! If you want to add more global colors, just press on this plus icon over there, select the color you want to add in. Press the save button and there it is. And if you want to change it or disable it, just right click on it, here you can replace it, delete it, and edit it. Really easy and it works like a charm. If you are creating your Divi website in your native language, then you know that some modules the translation is just not that right. What’s a Buffer? Its margin and padding, it’s not a buffer in Dutch! I mean this is, this is just not supposed to be like this. It is actually because when I go to ‘Settings’ and I go to ‘General’ you will see that the site language is in my native language. And that is very important for your visitors in Google because now Google’s search engine knows which language this website has been written in. But if I want to build my website in English,but show my website in Dutch, there is a trick for that. You go to ‘Users’ and you go to your own profile over there. Make sure that the language is set to English or whatever language you want. Press save. And now all the menus are in English, and the entire Divi interface is also in English again. Which works way better in my opinion. But the site language is still in Dutch. And this is really great if your visitors speak another language then you want to build your website in. If you’re creating your Divi website and you’re working with posts or projects, then you might see this hideous layout. You always have this, the titles the buttons are just ugly, and then this sidebar which is just building with widgets. I mean this is… it gives me the 1987 creeps! How do we change that? Really easy. You go to ‘Divi’ over here, and you go to the ‘Theme Builder’. In the Theme Builder we can actually create a new template, click on it; ‘Build new template’ we’re going to use it on all posts over there. Create template. Now here comes the really important stuff. Add a custom body over there. Press ‘Build custom body’. Now you will have the full power of Divi. So what we need is we need a new row of course, add it in. And the first module we’re gonna add is a ‘Post Content’ like this. Hey now this looks pretty amazing. If I now save this and I save my Theme Builder. Now when I refresh my post this is what I see. Just “Welcome to WordPress” it’s just like this. And when I press edit post, and I can actually use the Gutenberg editor just to create something like this. When I now press on preview, I will just see this entire layout created in the Divi Theme Builder. But there’s more. If I go back to my Theme Builder and change my Custom Body, if I want to add my title in top of it, I just scroll down, press this icon, and I press post title. Like this. Save it. I’m gonna drag and drop it over there. Then you can just change the elements if you want you have the title, the meta, the author the date, like anything. Just style it! And now when I refresh my post you will see this. If you’re wondering about this entire beautiful website how to create it in Divi, just follow this tutorial and I’ll show you step by step. And if you just want to use the templates, it’s also included in the zip file. Just because I love you guys!
I also see people struggle to get in a new header on different pages. For example on this page I’ve created a blue header over there, but if I now go to Services, you will see that this entire header is white. We have a different menu color – it’s turning white – and we have a different background and a different logo. How to do that? The Theme Builder strikes again! It’s really easy to do. Just create a new template over there. Select the page you want to use for them, or the categories or well maybe a contact page. Create template. The first thing you need to do is go over there and disable Global, like this. If you do that, all the changes inside of this header will stay on that page and not across your entire website. Then we go into the custom header. And we can style it just the way we want to have it. So for example let’s change the background to this global blue. We’re going to change the logo to a white one. And you go to the background, gonna make it transparent. We’re gonna make the menu text color white. Its that easy, the power of the Theme Builder should not be underestimated. Now when handing over a website to a client for example, I see a lot of things going wrong when I use the Theme Builder to create posts. On the post they can actually click on edit with Divi Builder. But I did create the post in Gutenberg. Because it is just easier for people they don’t have to work with styling, they don’t have to design things, it just works like this. The problem is this really nice button over here! It just feels so attractive, people want to click on it. But when they do this page actually goes to a Gutenberg page. How to change that? You go to ‘Divi’ you go to ‘Theme Options’ we go to ‘Builder’. And here you can disable the Divi Builder on posts, like this. Press save changes. Now when I go to my posts, there is no “Edit with Divi” button. And when I press edit, you will see there is no way to start the Divi Builder. This works actually really great to force your users to just use Gutenberg. Some people just resist change and don’t want to use Gutenberg on their posts. Well I got you covered. Just go to ‘Divi’ go to ‘Theme options’ over there. Then you can go to ‘Builder’ and you press on ‘Advanced’ and here you can actually use the classic editor. Press save changes. Now when I go to ‘Posts’ ‘All posts’ and I’m going to edit my posts. And now you can still edit your post without using Gutenberg. This just takes me back years ago! It’s actually nice! Totally depends on what you’re used to, but this just feels so…. easy. Was Gutenberg such a good idea?
Now this one thing actually bothers me the most. Because you are just throwing away literally money. If you go to wpressdoctor.com/getdivi over there, and you press enter. You have a limited discount of 10% on your next Divi purchase. And what I mean with throwing away money is this: if you’re still having a yearly access paid plan, you really need to switch to the Lifetime plan right now! Because the lifetime access is only 225 dollars. And you’ll be set up for life! Now with coming up Divi 5 over here, I’ve already had a sneak peek and a test drive. They might be changing the pricing! So hurry up, get your lifetime license while it’s still available. Now if you don’t see the 10% discount, I got a trick for you. Open up this link in a new private window. You go over here: ‘New private window’ or just go over here and open up a ‘New incognito screen’ it will give you
the discount again! What I think is a real shame is when people not style their 404 page. I mean look at this! This is just when you click something wrong you go over here, what is this? it’s totally not as beautiful as my entire website! How do we change that? The answer is of course the Divi Theme Builder. Add a new template – build it. And go to your 404 page right this, and press ‘Create template’. In here you can add a custom body. And when you create it you can create anything you want, like this. And now when I go to a link that does not work, or I mistype my URL, I will see this “Woops, page not found!” And you can of course style it the way you want it. If I know search for something like “Website”. I have created this amazing search result page. And it just works really easy. Just make sure to create a new Global Template for your search result. And change your Custom Body. However there’s one trick you need to understand. If you have your post title you will need to add a Blog Module. And you have to check this box: “Posts for current page” put it on yes and then everything works like a charm. When adding some custom CSS, there are multiple places to do this within Divi. Of course you can have a Child Theme. You can also go to ‘Divi’ ‘Theme options’ and when you scroll down you have also a place for your custom CSS. It’s over here, and it will also show up in the customizer. Which is also great.
But if you want to use CSS only on one page or one post, there’s an easier way. Just go into here the Divi Options. And press on this, the gear icon. Here you can go to ‘Advanced’ and you can add some custom CSS, which only will apply on this page. Sometimes really useful! If you only want to add in a script on one page, just go in and add a new module anywhere you want, and add in the code module, like this. Then make sure your code starts with <script> and also ends with </script> and in here you can place in any script you want. And a good practice is then also to go inside of your wireframe view, right click on it or just press on the menu item over there, and press on ‘Lock’
like this. And now changing this will be a kind of challenge, because you have to right click on it and press ‘Unlock’. So there’s an extra layer. If I go to the visual builder, I cannot even change it over here, because I get this hover thing that its locked. Which is really great so other people won’t mess up your codes inside of your pages. If you try to debug your website because you’ve added way too much plugins, and they’re all interfering with Divi and other kind of things, before panicking you can easily find out where the problem comes from. Just go to ‘Divi’ over there and we go to ‘Support center’. In the support center you can scroll down and enable ‘Safe mode’ now the safe mode will only apply for you. It will temporarily disable plugins, child themes, and custom code it added to your integration areas. And if you now open up your website and you see that everything’s working fine, the problem is inside of your plugins or your custom code, and not with Divi. And with that knowledge you can delete plugins and find an alternative for example. In the Divi Theme options you go to this ‘performance’ tab over there. If you scroll down everything needs to be enabled. Also the improved Google Fonts loading, and Defer additional third-party scripts. Then you press save changes. And this will make some difference, but the real big change is when you follow this tutorial about speeding up your Divi website. I’m using a paid plugin to do this for us. And it’s really amazing and I use it on all my client websites. Make sure to check that out. This tip will actually change your progress of building websites in a really extreme way. Divi has built in a lot of shortcuts. For example if I want to copy this module, I can press this one, press copy module, go over somewhere else, and press paste module. But those are a lot of things you need to do. You can also just hover your mouse over it – press Ctrl+C on your keyword and press Ctrl+V any place you want to have this module. And this makes it really easy to just copy and paste things around in your WordPress website. But there are way more shortcuts. If you go over there and you click on this question mark, you will see ‘Keyboard shortcuts’ over here. You will see all these things that will really speed up your workflow within Divi. Make sure to look at them, because it will save you a ton of time. If you’re building your website you’ll notice that you’ll be reusing a lot of modules you’ve already created. And you can of course copy and paste them all but there is another way which is way better and way more easier. If you have for example this beautiful button I have two buttons over here that I’m gonna use regularly on my website. What do I do? I press on this icon over here ‘Save this module to my library’. Click on it and give it a useful name like orange button. And press save to library. Also with this one, I’m going to save it to the library and I’m gonna press save to library. If you’re building a lot of websites and you’re reusing these kind of buttons in different kind of websites, you can save it to the cloud so you can import them across different websites. Also really useful!
And if I now want to add in my button over here, I just press on this plus icon and I press ‘Add from library’ and now I can just add in all the things I’ve been saving from my website. Like the transparent button, but also titles, H1, H2 upper text Gray, paragraph, orange buttons…. it will save you a lot of time. But you can also use Global items. If you save this to the library for example you can choose ‘Save as global’. Orange button and then we’re gonna add “Global” to it. Press save to library. And now it turns to light green. That means, when you change the layout of this button, it will change throughout all the global buttons inside of your entire website. Add it in. Add from library. And you can see this orange button but then it is this this global icon over there. Click on it, use it. Now another powerful feature about global modules is that you can actually disable syncing for example the text. So global but not synced with text. But then when I go to ‘Design’ I go to for example my alignment, which is a global option and it has been enabled. If I change it to the left side and I change it, the other button also goes to the left side. That’s the power of global modules. So presets, global modules, and saving them in a library are useful tools that will save you a lot of time developing your Divi websites. If you have any questions or you just want to add in your tip drop them down in the comments, I’ll always reply. Subscribe to my channel if you want to see more WordPress related videos, and the next tip is to check out this video! Because it also contains a lot of golden nuggets…
Golden nuggets!
