Hey guys! Its the WPress Doctor here, and
this video is one of the best videos that will help you out with your Divi workflow.
If you're building your website with Divi, than chances are 90% that you didn't know all of
these awesome features that is in this great great great builder. I've been building Divi websites
since 2014, and I see these things always going wrong with my clients. I really know this video is
going to help you out to boost your productivity, to decrease your frustration and to
help you create the best Divi website available. So let's start with number one.
So if you want to add a code to your header, you don't need any plugin to add a code. Just
go to 'Divi' -> 'Theme options'. Then you go to 'Integration'. And on the integration tab, you can
add easily any code you would like. For example: the Google Analytics code. Now it says "Good
for tracking code such as Google Analytics" in the <body>, but no! You need to place it in the
<head>. Because that is what Google says itself: "Copy and paste this code as the first item into
the <HEAD> of every webpage you want to track." So you can place your Google Code and
anything here. Just press 'Enabled', and now the code is working when you save the
changes. Also if you want to add a code to the body. You can add it right here. And in the top
of your posts so only the posts - not the pages, you can place it here and also at the bottom,
before the comments. It's very useful, so now you know you never need a plugin for your header and
footer code. Just place them in - right here.
So as your visitors will grow you will notice in
your Google Analytics that a lot of visitors will be coming with their mobile devices. That's why
it's very important to optimize your pages for mobile. This is very easy to do. You just press on
this menu, and you go on this 'Phone view' button. As you can see the entire page changes right
now, and you can select your phone right here, which you want to use to optimize. You also notice
that there is a fold down there. Below this line, people need to scroll the page to see the
rest of your website. All right. So as we can see now the header is just ugly, but it's
just an example. So when you want to change -for example- this text on mobile, just press
the gear icon, and you can press this one. It has already selected the phone automatically. So
now you can change this text for mobile devices only. And now when we switch back to a iPad, you
will see that the text has just been changed back. And now when we go to our desktop view,
we'll see that the text also has not changed. And you can also do this with a lot of things.
Not only just for the text. Let's go over here. You can also do this for example the colors.
If you switch to mobile I want it to be blue on mobile. I want it to be a little bit bigger
on mobile. So I don't want to make it bigger on our desktop and on tablet. I really want to make
it this size, I can read it all -so let's go to spacing and let's add a little bit of margin right
there on the top, only oh, only of course for tablet. And for desktop I don't want any spacing
right there so I'm going to remove it. On tablet I want 50px and on mobile, I just want 2vw. And
then you save it and now you can see, it is very easy to edit your website to make it beautiful
on mobile and tablet devices, it is so easy.
Sometimes I see people struggle with selecting
the right module. Because they can't select the buttons or they are moved because they are
behind some other module. And I'm going to help you with this quick tip. Just press the
menu down there, and you can switch to the 'Wireframe view'. From here you can select all the
modules sections and rows you have created on your website. Apart from the wireframe you can also
switch to the overview or the 'Zoom out' button as you can see now your whole page appears. And you
see everything there is on your page, it's really useful. Now there are some more tricks, just press
this menu button down there, and you can customize your toolbar by pressing these buttons. And I
will show you what it will do. Also you can check, and change the default view mode of your page, so
when you open a page you edit it, you go straight to the wireframe or the desktop view, tablet or
phone view. That's also the same for the default interaction mode. How does this work? The default
interaction mode can be found right here because we just enabled it. When you press this button,
and only when you click on it you can select the menu items for this section, this row, and
these modules we have just clicked. Let's switch to desktop mode. There's also another button
down here, which is called the grid mode. And when enabling the grid mode, as you can see, the
entire page will be clickable on all menus and all things. It's very useful so you can navigate
easier and quicker throughout your website.
Now I also see people using a plugin to create a
mega menu just in Divi. Well you don't need that at all! I created this mega menu, just with the
standard Divi options. It is very easy to create such a mega menu. Just go to 'Appearance', go
to 'Menus'. So as you can see on my front end, only the products tab is a mega menu. All the
others are just normal menu items. You can see it in the backend also. I have one products tab
which is the upper most, and I have different kinds of texts like 'Webshop', 'Opportunity',
'Contact', and the normal sub items. So how do you go create a mega menu? It's so easy, just go to
the upper one that you want to create a mega menu. Now this CSS class has already been build-in by
the developers of Divi so you only have to type in "mega-menu". Now to get these columns inside of
your menu with these items. This is a image with text below it, and I can show you how I've done
this. So below your products "mega-menu", you create another custom link and the custom link is
to where you want to go. And the navigation label is some HTML for an image. So <img src=...> this
image, and the text would be after the <br> would be "Integrative health". And the CSS class you
have to put in it is "mega-link". This is one. Now below this image you have the normal sub items,
just normal pages with no CSS class whatsoever. You can add all these products pages or otherpages
down there. Then you go to your second column. Which has another image. And also, the text is
"Weignt management". Now, the CSS class is again "mega-link", just like this one. "mega-link" below
that, the mega link below it are just the normal links of your pages. Now for the third column
I just created another one, also with a image placed in the URL. I had to adjust the width
because it was a little bit of big down there. Another <br>, and then the skincare. Of course
again the CSS class "mega-link". Once you have built up your menu, like this, you will get
easily this kind of menu. And of course the menu is completely responsive as you can
see, it works just the way intended.
Another thing I see go wrong, which have a
little bit of more destructive consequences is changing the layout of the text modules inside of
the WordPress area. What I mean by this is people use this visual editor to change something in
this text. Well that is really awesome if you just want to highlight something like this, you
make it bold you make it italic and it's great, it works. Awesome. But what if you change this
entire block of text, and you make it bold, and you make it aligned to the right, and we're
going to add a little bit of color so it's blue. Now, this is a problem. Because now when you
try to edit this text using your own colors for example, nothing happens when I change! Even
when I go italic or not italic, nothing happens. And also the alignment is... I wanted to be in the
middle! I wanted to be left! No, nothing happens anymore, because you have entered your formatting
right here as you can see it. This is the bad boy. Now, I will definitely not recommend styling your
text this way. Just keep the code clean and use Divi for the CSS changes of your texts. No, it
also gets very difficult and destructive when you copy these kind of things out of Word. Sometimes
people copy and paste text inside this builder, and they don't see in the text editor there added
like all this kind of fields. And as you can see, when I edit some things will go wrong on the
front end of the website. So these codes are really destructive for the front end of your
website as sometimes things just are messed up and you don't seem to know where does it go wrong.
Well, this is the source of all your problems. So please use this little button here and change
the text sizes, change the letter spacing, change everything you want, but please,
do it inside of the Divi design tab.
Another thing I don't see people do often is using
the preset styles. So we can create this button, and we can make it a style. 'Add new
preset' and you would say "button greenish" and we press this button right here. And now
you can change the preset of all the buttons that are using this preset. So for example,
let's save this and we go to this button, and we give this button also the preset 'Button
greenish', and we save this one. Save this page. And the beautiful thing right now is when I change
the color of this button, all the buttons that are using this preset will change. So that's really
awesome if you have different pages -for example- if you have 200 pages with this button and you
want to change this button, you can just go into the 'Button greenish' preset. And then I
go to 'Design' and I press 'Use custom styles'. And now I can for example, make them bigger. Not
only this one goes bigger, but this one also. It is like simulataneously they are changing
the same way when I changed this. It is really, really a great feature. If you have a lot
of modules that are exactly the same on a lot of pages. So definitely use the presets for your
modules that are the same in different pages.
Another thing I see people often do wrong
is not naming their sections. For example when I press this button, 'The layers' it is a
very useful little thing, so you can really go, really quickly to a row you want to go to. For
example, this row I want to edit this column, let's add this row. Here we go. The problem is, I
didn't give these sections and these row a name, so I can't see anything about it. Even when
I go to the wireframe, I can't see the names of the sections. You can change these names
by going to this gear icon and go to 'Admin label' and press... Let's make it the
'Header'. It's a full width image, that is clear. Now this section, what should we
call it? Let's call this the introduction section. So we're going to change this row, and this
makes 'The introduction'. And these are, this is the row, that gives the 'Intro text'.
And this image should be a 'Product image'. Using this, you can now easily navigate throughout
all your sections of your website and change it very easily. It is a really great feature and
it really speeds up your process while you're building your website to give all the modules and
rows and sections, the right name from the start. This will be especially handy when you're just
copy and pasting stuff throughout different pages or you are using the templates from Divi
itself, because they already have a name. If you have moved your header somewhere down there,
then things will get a little bit messy.
Another thing I see a lot going wrong is people
not using the theme builder. And when you click on the theme builder, this is what you see. It
is totally empty! So now you have to create your menu, your header and your footer, just by using
the theme customizer. It is right here, or you can use this button. But the Divi Theme builder
gives you great opportunities and possibilities! For example on this website, I have a global
header and I have custom headers for all the pages that are using the children of specific pages. You
can see this template will be used on children of specific pages, the pages with VS. I made a video
with Ferdy about Elementor Pro vs Divi. Now, this template is so useful! You can actually create a
new template, and I could use this template for all posts for example. I press 'Create template'.
What will happen when I change this one? Let's disable the global, and I can press this button.
You can create a header now with the full possibilities and the full freedom of the Divi
Builder. It is mind blowing! You could just add this menu module, right here, and you can change
it just the way you would. You can add an image right here as logo or you can put it there, you
can add social media follow buttons, you can add code... It is unlimited! So, this header actually
does this: when you move up, it goes black, when you move down, it becomes blue and white.
Isn't that funny? And this is impossible to do without using the Divi Theme Builder. If you're
not using the Theme Builder you could only have these options to change your header. It is
such a old school way. It works, but your freedom is very, very limited. Instead of that,
I suppose you go to the Divi Theme Builder.
Another thing I noticed is that people don't tend
to widen their rows. So they get a little small website because the standard size. Go to 'Design'
-> 'Sizing'. You see that the standard size of the max with of the row is 1080px. If you change this
to 1280px, and you press 'Ok', you will see that you have more spacing, so you can do more with
your website. As people tend to use to have a bigger screen that is alright to do so. The
most important thing is that you would save this sizing, the max width of your row and add
it to the standard row settings. So you can just say this, and you add it. You go to 'Design'
-> 'Sizing' and change it to 1280px and save this one. Because when you do this, all the rows
in your entire website will always be the same size. This is very useful in creating
new pages. So you never mess up anything, and it will all be consistent in your
entire website. Really awesome.
Another thing I see definitely going wrong a lot
of times, is that people don't tend to use the default typography. Now you can you do that on two
ways. You can of course use the presets, but you can also go to 'Appearance' and 'Customize'. And
then you go to 'General settings' -> 'Typography'. And you can here choose a header font and a
body font so that all the typography is the same throughout your entire website. So what happens
when I change it right here? You can see that the typography of the text in the entire website
will change. Now a lot of people don't know this, or they just change only one text module. But
you can change it right here, but I prefer to right way to do it with presets. As you have
seen in another tip just before this one.
There's another thing I see a lot of times going
wrong that people will add a Google Map, and they do it this way. They add the map module, and then
they add a new pin, and after all said and done, you get this message: "Google Maps cannot load
correctly, are you the owner of this website? This is for development purposes only". The reason
for that is that Google changed his Google API. But there is another method that you can use, it
is way more easier. So you just go to Google Maps, and then you go to the place where you want to
go. And then you press 'Share', and you just press 'Embed a map'. And then you can also change it,
change what you can see. And then you just press 'COPY HTML'. Then you go back to Divi, and you
delete the map module, you just press the plus button and add a 'Code module'. And there you just
paste your map we just copied... and here you go! It's beautiful! And just remember if you want to
do a map full width, you can change this code to 100%, and then it will use the exact width of your
row. So that is great! You can also make it higher or lower by changing the height. So, this is a
awesome embedded map and it will always work.
Another thing I often see go wrong, is
the color palettes using on the website. If you go to 'Divi' -> 'Theme Options'. Here you
can change your color codes using in your website. Very useful. Use the default palette and we press
'Save Changes'. Now what will happen when we go to edit pages? And we look on this page for example.
When I change this module, you will see that with all colors, we now have the color palette of
the theme options we have just insert. This is very useful and will save you a lot
of time. If you don't see it right here: so you can press these options, you go
to 'Page Settings' -> 'Design' -> 'Color palette'. What you most likely will see
is that this is a different color palette, then you have insered at the Theme Options. Just
press this little button, it says 'Reset', and your color palette will be changed to the one in a
theme options. A huge time saver, right there!
What I sometimes see is that the site language is
English, but then the user is another language. So, what they do, they want to have the
entire Theme Builder for example in Dutch. So what they do is they put their entire website
on another language, like Dutch, so that they can read it on the backend. There is no need to do
that at all. The site language is very important for Google! Because when you look at the source
code of this website, if you search for 'Lang': you will see that the language of the website
is in English US as you can see. If I change language, and also in the front end, the website
will show another language to Google. And that has some serious impact on your SEO, what to do? Well,
just go to your 'Users', and you can change your language, right here for your profile only.
Sometimes it's just better to give your posts a different layout than your pages. You can do
that very easy with Divi. No need to install any other plugins or stuff, use widgets... No no
no, it's not necessary. Just go to 'Divi' go to 'Theme builder'. And here you can see that I have
the global header is the same for all the pages for the default website, the entire website. And
I have created custom footer and a custom body for all posts. What does a custom body looks like?
Itss just a simple field. This is the post title, and this one is a module called a 'Post content
settings'. As you can see in the wireframe right here, the post title and the post content.
This will automatically place everything I put in a post in these two modules. Now you can do of
course very much more with this template. Because now we can make a sidebar. If you would like to
have one, you can just place anything you want on the right side of this sidebar. So, that is very
cool if you want to have another posts that are related to this stuff. Or if you want to place a
button which says, "Get Divi with 20% discount". You can all do this right there. There is no
need to use widgets anymore or other stuff. It is all created in this beautiful Theme
Builder. If you want to go nuts, you can also do both with specific categories will have other
layouts then the other category or the other tags, or the other... It is so amazing. You can
do anything with this Theme Builder from Divi.
Most of the times, I also see that people don't
create a 404 page using the Theme Builder. They just use PHP snippets to get the job done. But
it's not necessary in the Divi Theme Builder. Just add a new template and use it on the
404 page. Press 'Save', and now you can just edit your custom body. And here you can create a
beautiful 404 page. So this is the main 404 page on this website. And on the front end the 404 page
looks like this because we have the normal header, the normal footer, and then the body the 404 body.
It's pretty cool. It's pretty amazing. I would suggest you go and create a creative 404 page.
Some people just didn't get used to Gutenberg. And that's no problem, you can still use
the classic builder from WordPress itself, especially for posts. So what do they do? They
install a plugin called 'Classic editor'. No need for that my friend! Just go to 'Divi' -> 'Theme
options'. Go to 'Builder' go to 'Advanced' and enable the classic editor. Press 'Save Changes'.
And now when you go to 'Posts' -> 'Add new'. You have the classic old editor from WordPress before
Gutenberg. No need to add an extra plugin, just pull that switch, and you're all set to go! As
you know, the less plugins, the better it is.
I also see people adding CSS to their child theme
which is very good I really recommend it. Or add it just inline on their page. I will never
recommend that. If you want to use some CSS, you can go to 'Divi' -> 'Theme Options'. And when
you scroll down, you will notice that there is a custom CSS. Here you can add any CSS you would
like to have anything on your website. There's also another way if you just want to use some
CSS on one certain page. Just edit your page, go to the 'Page options' right here, and you can
here go to 'Advanced' tab. Let me do it like this, you can go to 'Advanced', and you have custom
CSS and here you can also add all CSS you want to have, but only to use it on one certain page.
There is also another way, you can also add your CSS to any section, row or module, using
the 'Advanced' button and go to 'Custom CSS'. This is very, very useful. Here you can add
your CSS to only one module, for example. As you can see I didn't want any animation on
the 'Slide description', so I placed in the slide description Custom CSS "animation-name= none;".
If I remove this one, you will see immediately what happens, it will just keep on moving
and moving and moving with every new slide. I think that wasn't really cool for this website.
So I placed this custom CSS right here and now you can see the title and description just
stays put whenever some slide will change. This is really cool, but I didn't want this CSS
added to the entire page or the entire website, because all my animations would have stopped. Very
useful, so now you know, when you can use it.
Before you skip this tip: you will get
a discount, so hold on. If you don't have a license yet, or you're paying the
yearly access license for Divi, you should really consider going to a lifetime license. Why
is that? let's just do the math. If we pay $89 a year, that when I have it for
three years, I would pay $276. So, when you are planning on using Divi longer than
three years, this is already a awesome deal to do. Now I'm going to make it even better for you,
because if you go to wpressdoctor.com/getdivi/, you will go to this page, and here you go, you
get 20% extra discount from the WPress Doctor. You are very welcome! Of course, this is a
affiliate link so you also support me. Now you see that your price has just dropped 20% to $70
a year or $199 for your lifetime acces. If this isn't a good deal then, I don't know what is.
What I often see is that people don't know or don't use the global modules and they are really
awesome. Let me show you what I mean. So on this page, it is a apartment which is opening soon
you see here two layers above each other. It is because the mobile version tablet version and
desktop version. Alright, but if you scroll down you will see that these services are the same
on every apartment page and they have a lot of different appartments. But this section is always
the same on all those pages. Now as you can see, these sections, these rows and these modules are
all a different color: they are light green. It means that these are global modules. If you
press the gear icon, you will see that these section settings are all green, it means that if
you change anything in this section, it will be changed throughout the entire website. So this is
very useful for example when I just want to change this text on this blurb. I just type in my new
text and when I save this blurb, it will be saved in this module into all the website pages I
have added this module. So how does it work? Well, you can add any section module or row to the
Library. just press this button right here. And we can call it "Amenities", you could make it
a global item, you could even give it a category. And you can save it to the Library. Now it is a
global section. When I now hover my mouse over it, you will see that the color has changed. So when
I want to add the section to this place right here I press 'Add from library', and here you can see
all the global sections that I have saved in my Divi library. So I can just add 'Amenities'
that we just created. Just click on this, and as you can see, it has been inserted right
here. Now if I change anything in this thing, so for example let's remove this entire section,
you will see that it will also be gone in this other section that we just created. Here you
go! So this is a very easy way to use this global modules throughout your entire website
for different pages. If your information is all the same on different pages. This is a
awesome way to manage that information.
What I really like about Divi is its stability. I
have came across less errors with Divi then with the bunch of other themes that I have been seen
with clients before they moved to Divi. Now, if you do run into some problems, you can just go
to 'Divi' and 'Support center'. This is a awesome feature of Divi. You can use the Elegant Themes
support and give them remote access, so they can actually go into your website to change the stuff
that you couldn't do yourself. First you need to chat with support, and then you can give them the
access. This is awesome in your lifetime license, I would really get that because this is worth
gold. But they have also another nice feature. If things go rogue, and your website just breaks
down, instead of going to your plugins and just disabling all plugins and stuff. There is a
safe mode toggle switch right here. And the awesome thing is: it "...will temporarily disable
features and plugins that may be causing problems, but it includes plugins, child themes, custom
code added to your integration area..." but the most fun thing is: "These items are
only disabled for your current user session so your visitors will not be disrupted." This,
my friends, is one of the best features of Divi that the most people don't know about. You can
just press this button, disable, and only for your session, all your plugins and all your things
will be disabled, so you can really check out what's happening. As you can see in the bar up
here, now all my plugins has been disabled. So next time when you're bumping into an error, just
use the Safe Mode and you will know if it's Divi, or just something you have created yourself.
What I also don't see people use a lot are the keyboard shortcuts. Divi has made your live as a
builder on Divi very easy with all these awesome shortcuts. For example you can press the T on
your keyboard and you see the menu down here go Up, out, Open and close. It is very usefull
if just want to use the save button. However, if you want to use the save button, you just
press CTRL + S on your keyboard and you will see that this page is goint to save itself,
as you can see. What I am also using a lot is SHIFT + W. Now you can go the Wireframe. Also when
you are in a module or when you are editing a row, you can just search for options right here. So you
can type in for example 'Padding' and you will get this one. So your keyboard is actually really
usefull within Divi. On the Elegant Themes website you can find all these shortcuts available for
your builder. You can for example copy modules and paste modules. You can disable modules and you
can lock them, add new rows, add new sections... there are a awfull lot of keyboard shortcuts you
could use on your Divi website. What you also can do with your keyboard is press SHIFT + SPACEBAR.
Now you can get the 'Divi Quick Actions'. Its very useful if you want to go for example to a quick
page you have just build. You can just type in your search bar the "Home" and you can go quickly
to your homepage. But there is much more to this quick action module. You can for example insert
any module you would like, by just typing the name of the module right here. Insert text module, and
you can just drop it anywhere you want it to go. And you can do that with any module, just like
this one. But you can also go to the settings. If you want to go for example to the theme
options, just type it in, and you can go straight there. It is really useful if you want to speed
up your workflow. This is a golden tip right here.
So, this last and final one, some people have the
assumption that Divi is very slow in the basis, well this is simply not true. To be crystal clear: this website in the background is
not a Divi website. It's a WP-<BEEP> website, which is awful slow. If you don't know
how to optimize the speed of Divi, just watch this video about speeding up Divi. If you liked
this video hit the like button and don't forget to subscribe if you want to see more about Divi and
WordPress related videos. Have a awesome day!
