How To Adjust DIVI Mobile Styles In The Theme Customizer

VIDEO TRANSCRIPT

In this tutorial, I’m going to be showing you how to use the Divi Theme customizer to customize the appearance of your website for specific mobile devices. The Divi Theme customizer allows you to adjust text sizes, header sizes and spacing for individual mobile device types.

So you can have a different sized body font on smart phones if you think that maybe the text needs to be a little bit bigger, be easier to read and then maybe you want a little bit less big on a tablet and maybe a little bit even smaller on desktops.

You can adjust all those accordingly as well as different padding and [00:38] values on your site. So to get started, we’re going to enter the theme customizer by going to the WordPress dashboard.

Look for the Divi tab here and then click the theme customizer link. This will launch the theme customizer with all the hundreds of settings that we have here. In this tutorial, I’m going to be focusing just on the mobile styles panel which has all the mobile styling options.

If you want to learn about all this other stuff, you have separate tutorials for general settings, header navigation buttons and so on as well as just a general overview tutorial of the theme customizer. So be sure to check those out if you want to learn more.

And in this case, I’m going to meet with you on the mobile styles panel to launch the mobile styles customizer. And as you see, it gives you a nice preview here depending on what type of style, editing.

So if you want to edit phone styles, it’s going to shrink down and give you a phone sized preview, if you want to edit tablet styles, it’s going to expand back to tablet style size. And so we have various settings here that we can adjust. We can increase the body font size, increase or decrease the header size as well.

And then in addition, you can adjust the spacing between sections and rows. So if you want to decrease this or increase it, maybe you think that there is too much waste of space here for your taste, you can bring down the section height, and also the row heights as well. So you can adjust the distance between individual rows as you can see there, all the way down to nothing if you like and as well as sections.

And if at any time you don’t like what you’ve done, you want to go back to the default styles, just click these reset buttons and it will revert all the changes you made.

Next is you can go into the phone and also adjust these independently from the tablet style. So all these will work on their own and overwrite each other as you reduce your screen size down to each of these breakpoints.

And again, you can do the same stuff, you can increase and decrease the body and header font size as well as the section padding and row padding. Finally, we’re at the mobile menu. When your site breaks down to mobile device size, the menu changes and it gives you the standard hamburger icon and the menu slides down altogether unlike how you see in desktop where all the links are in a row here and they each have their own drop-down menus, but you can customize all this as well.

So you can change the background color if you like and to change the text color like that and you can hide the logo image as well which I might want to do at this point because my logo image doesn’t go so good with this background color. I’d probably want to upload a white image in this case if I was going for a dark blue background.

Yeah, that’s a basic overview of the mobile styles customization in the theme customizer. And you can see here how you can create different mobile experiences for different devices using the customizer settings.