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!
