?Transscript?
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.
#1 Adding code to your header (like Google Analytics)
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.
#2 Optimizing for mobile devices
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.
#3 Different ways of viewing in the builder
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.
#4 Create a Mega Menu without a plugin
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.
#5 Changing layout of text with WP
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.
#6 Using Preset Styles
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.
#7 Naming modules / sections / rows
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.
#8 Using the Theme Builder
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.
#9 Widen the rows
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.
#10 Setting typography
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.
#11 Placing the Google Maps module
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.
#12 Using the Color Palette
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!
#13 Site language
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.
#14 Give posts a different layout than pages
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.
#15 The 404 page
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.
#16 Use the Classic builder without plugin
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.
#17 Where to add CSS
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.
#18 Discount on your lifetime license
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.
#19 Using global modules
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.
#20 Use the Divi Support Center
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.
#21 Keyboard shortcuts
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.
#22 Speed up Divi
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!
