Top 26 Divi Hidden Features | Divi Tips and Tricks

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:

⇒ Top video's I recommend:

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! 😀

📖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....

#WordPress #Divi

[landos]

I have been using Divi for a few years and eventhough some things mentioned in this video I knew about but you have taught me so much more. Thank you!!

[hussamahmed]

The "Website language tip" has really made my day, thank you sir, I really appreciate it

[millicentmurray-roberts]

Fantastic video high time something more relevant and new appeared which is understandable.

[ondcoast]

Hi Matt really enjoyed your Video presentation, light, easy to listen to and presented in a fun way with great tips. Although I have been Divi as lifetime member for a few years ... I have not used all the beneficial tips that you put forward ... Really appreciate those extra tips will make working with Divi even more easier ...thanks again great presentation.

[jorgevargas-dsxm]

Your information is very helpful for those of us who want to start designing with Divi, thank you very much.

[TwinzEdiTz]

Continuously love the work you do and the wealth of free information you give out!! Thank you for all of your hard work and information you give back to the community, Matt! I am impatiently waiting for Divi 5.0 to be released!

[AndreasHeck]

Very useful information, thank you, Matt! Although I am working with Divi for years, I could learn something today 🙌🏽 Keep on going, you're doing an awesome job here! 😉

[professorheisenberg]

Hello matt - thank you for this many and extremely interesting help about our divi theme. Your channel is subscribed and I look forward to the next contributions from you.

[imertron]

Thank you for this video! I learned several VERY useful tips.

[AndreaDragotta]

Thanks for the tips, for sure I'll need to learn the keyboard shortcuts! Regarding the wire frame and admin labels, I find way nicer to use the layer window (button on the left of the "save" button). There you can see a tree-like structure of your elements, that get highlighted when you hover on the names, and renaming them becomes way simpler 🙂
This also allows you to see both the structure and the appearance, so you won't get lost on big pages

[nisanka]

Supper and entertaining! You've just earned a new subscriber 👍👍

[Phirebase]

Nice tutorial, thanks a lot! Big Like. 👍🙏

[luminaissant]

Hey Matt!
Thank you for another great video!
Learning great tips while having fun watching a video!
Some of those tricks are going to be very useful!
Big fan of your videos here.
Merci à toi 😀

[DMVPracticeTest-vien]

Keep it up bro,
It was really usefull

[juurstudio]

Hey! Great tips! Knew the most but also picked up a few new ones like mega menu and align-self. Thanks! Also waiting for the Divi 5 release. 4 is still very sluggish and capricious even on my new M1 Macbook Pro, especially when optimizing for mobile and constantly switching between layout modes.

[crystalfunky]

Please use a de-esser plugin. Makes it sound more pleasant.

[neilhunter]

So helpful, thank you. Love your vids. A question about the Google maps. I embed the copy code the same as you did on this demonstration - is it legal to do that? Why do Google have the registration thing for adding maps, if we can just copy the code and insert it - what's the difference? As said, I do what you do in this demonstration but it worries me a little :) Thanks.

[alvarocarrilho]

Hey Matt, amazing palette of tips.
Super thks from Lisbon Portugal

[izidiotravel]

Hey Doc, Thanks for the Medicine, I hope The Bills do not come to Hight next time?👍👍

[zaidmackay]

Thanks for the useful video. For the text sizing (and line height, etc etc) it's way more efficient to use css clamp...simply create it once and add it to your divi child theme before building your website.