This tutorial will show you the tools within WordPress & the Divi Builder to test your website design for how it responds to mobile, tablet, and desktop browsers.

Text Version of the Divi WordPress Tutorial

________________________________________________________________________________________

Hey, everybody, this is Jimi Blevens.
Today I want to show you how to do some easy testing for your responsive web design.
Divi’s got a couple tools to make this really easy for you.

First, I’m going to show you how to do the back-end WordPress admin, where you’re looking at the Divi Builder like this.

ScreenshotHowToTestResponsiveDesignOnDifferentDevices

Now the best way to test this out is: let’s say I wanted to test this whole section to make sure that it looked okay on a mobile device or tablet, so you click over here on the hamburger.

Then, right here you’ve got this eyeball at the bottom of the “Section Module Settings.” So if you click on that, that’ll help you bring up each of the different ways of viewing the website.

ScreenshotHowToTestResponsiveDesignOnDifferentDevices2

 

Now margins are a little bit messed up, on the regular site I don’t have these black lines.
I’m just showing you guys this to let you know where this tool is. I’m working on a redesign of the Mozaic website and I’ve got these three ways for people to get in depending on what kind of designer they want to be. I want to make sure that it works.

So on a desktop, they’re going to see all four columns, on a tablet though they’re only going to see two by two. Then I check it on the phone, where it’s going to put them all in a single column.

ScreenshotHowToTestResponsiveDesignOnDifferentDevices3

So again just to show you where this tool is located when you’re working on something in the Divi Builder, that way you can test your responsive design.

ScreenshotHowToTestResponsiveDesignOnDifferentDevices4

Now it’s not going to be a 100% accurate, so you are probably going to want to test it out on a couple different phones just to make sure, but while you’re in development it’s a great tool for you to use.

So, I’m going to kick over here into the “Visual Builder” and I’ll show you guys how to get into testing the responsive designs with the “Visual Builder” as well.

ScreenshotHowToTestResponsiveDesignOnDifferentDevices6

Now that I’m in the “Visual Builder,” you can see we’ve got our layout here. In order for me to test this for my responsive design, I’m going to click here on the little purple circle and over here on the left-hand side you can see I’ve got my desktop, and then I can switch the tablet view, and I can switch to the mobile view as well.

ScreenshotHowToTestResponsiveDesignOnDifferentDevices7

That way you can kind of go back and forth if you’re working on a design you can ping back and forth to see how that’s going to work.

ScreenshotHowToTestResponsiveDesignOnDifferentDevices8

 

Okay, so the last way I’m going to show you how to test your responsive designs is here in the WordPress dashboard.

We’re going to go to “Appearance,” and then “Customize.”

ScreenshotHowToTestResponsiveDesignOnDifferentDevices9

This will bring up the WordPress customizer which Divi has actually put a lot of great features into with their theme.

Once the customizers loaded up, you can see down here we’ve got again our three different icons for going back and forth between our different types of displays.

ScreenshotHowToTestResponsiveDesignOnDifferentDevices10

This will give you a really good idea of how things are going to line up on mobile, tablet, or on a desktop. This is great for when you’re designing your site or if you’re putting the colors together, whatever you’re working on.

It’s always a good idea to just take a couple seconds to test your web page and see what it’s going to look like on mobile, desktop and tablets.

So that’s three really simple ways you can get into the WordPress admin and test your website to make sure it’s responsive.

Once again, I’m Jimi Blevens and thank you so much for watching.

Pin It on Pinterest

Share This

Let's Get Started!

Enter your email address below to begin setting up your account.

You've completed the first step!

Connect With Us For More Epic Tutorials And Blog Posts

Connect With Us For More Epic Tutorials And Blog Posts

Accompany us on our journey of creation, design, and inspiration worldwide. 

Connection Successful... Welcome To The Wonderful World Of Mozaic Technology!