mobile layout, theme customizer, website testing, wordpress theme customizer

How to view mobile version of WordPress sites from desktop

Would you like to see the versatile form of your WordPress site? Reviewing the portable design encourages you perceive how your site looks on cell phones.

While you can unquestionably investigate your live site on your telephone, it doesn’t resist during the improvement stage.

When your site is live, it is often easier to view the mobile version on a desktop computer, so you can quickly make changes and see their impact.

Right now, will give both of you straightforward approaches to effectively review the portable design of your WordPress site without changing to various gadgets to different devices.

Preview your website’s

Why you should preview your mobile layout

Over 50% of your website visitors will use their mobile phones to reach your website. About 3% of tablets will be used.

This means that it is necessary to have a site that looks great on mobile.

In fact, mobile is so important that Google is now using a “mobile-first” index for its website ranking algorithm.

Even if you are using a responsive WordPress theme, you need to check how your site looks on mobile. You also want to create different versions of key landing pages that are adapted to the needs of mobile users (more on this later).

Right now, are going to cover two distinct strategies for testing how your site looks on portable utilizing work area programs.

It is essential to take note of that most portable sneak peaks won’t be totally precise as the versatile screen size and program are various. Your last test ought to consistently be to see your site on a genuine cell phone.

If you don’t like the video or you need more instructions, then continue reading.

1. Using WordPress

You can utilize the WordPress topic customizer to review the versatile form of your WordPress site.

Just login to your WordPress dashboard and go to the Appearance ┬╗Customize screen.

WordPress Dashboard showing where to look - Customize

This will open the . Depending on what theme you are using, you may see a slightly different option in the left-hand menu:

WordPress Theme Customizer (Desktop View)

At the bottom of the screen, click on the mobile icon. You will then see a preview of how your site looks on mobile devices.

Switch to mobile view in theme customizer

Note: Blue altering images are just present in the previewer. You haven’t seen these on your live site.

This method of previewing the mobile version is especially useful when you have not yet finished creating your blog, or when it is in maintenance mode.

You can make changes and see how they look before you make them live.

2. Using Google Chrome’s DevTools Device Mode

The Google Chrome program has a lot of engineer instruments that let you run different keeps an eye on any site, to perceive how your site looks on a cell phone.

Just open the Google Chrome browser on your desktop and go to the page you want to check.

This can be a preview of a page on your site, or it can also be your competitor’s website.

Next, you have to right-click on the page and choose ‘Inspect’.

Select the Inspect option in Chrome

A new panel will open on the right, such as:

Default desktop view while inspecting your site in Chrome

In the developer view, you will be able to see the HTML source code of your site.

Next, click the gle toggle device toolbar button to change to mobile view.

Monitoring your site's mobile view in Chrome

You will notice that the preview of your website will shrink to the mobile screen size.

You will also see the transformation of your website in mobile view. In the example above, the menu has collapsed and the search icon has moved to the left instead of the right side of the menu.

At the point when you move your mouse cursor over the portable perspective on your site, it will end up being a hover, for example,

Spherical mouse cursor in Chrome's view view

This circle can be moved with your mouse to mimic the touchscreen on a mobile device.

You can hold down the ‘Shift’ key, then click and move your mouse to pinch the mobile screen to zoom in or out.

Above the mobile view of your site, you will see some additional options.

Additional mobile options to monitor your site in Chrome

They allow you to do many additional things. You can check how your site will look on different types of smart phones. You can also simulate the performance of your site over a fast or slow 3G connection. Even you can rotate the mobile screen using the rotate icon.

How to Create Mobile Specific Content in WordPress

It is significant that your site has a responsive structure with the goal that your versatile guests can visit your site no problem at all.

But simply being a responsive site cannot go very far. Clients on cell phones regularly search for unexpected things in comparison to work area clients.

Numerous superior subjects and modules make you distinctive presentation components on work area versus portable. You can utilize a page developer module like Beaver Builder to alter your greeting pages in versatile view.

You should definitely create mobile-specific content for your lead generation form. On mobile devices, these should ask for minimal information, ideally just one email address. They should also look good and close easily.

A great way to create mobile specific popups and lead-generation forms is OptinMonster. It is the most remarkable WordPress popup module and lead age device in the market.

They have explicit gadget focusing in plain view decides that show you various crusades to portable clients versus work area clients. You can likewise consolidate it with OptinMonster’s geo-focusing on highlight and other propelled personalization highlights to get the best transformation.

We trust that this article helped you figure out how to review the versatile design of your site. You need to examine our article on the best modules to change over a WordPress site to a versatile application.

Bonus: Check out our choice of the best business phone services so you can click the call button for mobile users.