The Customizer, Revisited: Mobile Previews and More

The Customizer is full of great features to discover, from simulating how your content appears on smartphones and tablets to previewing different background images. Let’s take a look at three free features that you’ll enjoy tinkering with.

We recently talked about some of the neat features you can find in your Customizer, and how you can use them to preview and generate new looks for your site. Today, let’s continue exploring the Customizer, including a new feature that allows you to see how your content looks on mobile devices.

Experiment with mobile previews

If you’re using one of our 159 responsive themes, you might wonder how your readers experience your posts when they view them from their smartphones or tablets. Well, now you no longer need to guess. When you enter the Customizer (just hover over your site’s name in the top-left corner of the screen, and click on Customize), you’ll see these three symbols near the bottom of the page:

Screen shot 2014-03-19 at 9.32.28 PM

From left to right, these represent desktop view, tablet view, and smartphone view. Clicking between them will emulate the look of your content on different screens:

This slideshow requires JavaScript.

You can still play around with your settings in the different views. This allows you to try out new custom looks before implementing them, and to make sure your new header image, font, or site title (or any other elements you’ve tweaked) look great on screens of all sizes.

Let the best custom menu win

Virtually all our themes feature custom menus. These navigation tools make it easy for your visitors to find their way around your site with minimal clicks, so finding the right composition for your custom menu is crucial.

When you head to the Menus panel in the Customizer, you can try out the different ones you’ve already created to see which one works best, both visually and functionally. This is even more important if you’re testing your site’s appearance across devices, since menus are presented differently depending on the screen size. In the example below, we tested two different menus in the tablet view:

Depending on your priorities, you can decide which of your menus does the best job leading readers to the content they’re looking for.

Experiment with a new custom background

Adding a custom background image is one of the easiest ways to make your site your own (whether you’re looking for tips or for inspiration, we’ve got you covered).

When you go to the BG Image panel in the Customizer, you can upload and preview as many backgrounds as you wish, from a bold photo to a muted monochrome. Then, compare the different backgrounds to see which one complements your content the most. Here, for example, we’re testing the smartphone view of a sample page, using three different background images taken from Subtle Patterns, a free service:

bg image 1 bg image 2 bg image 3

Trying out different colors and patterns will help you find a background image that keeps your content readable and helps you achieve the look you wanted for your site.

Are you interested in learning more about theme customization? You will find plenty of examples to inspire you in both our Customizing and Early Theme Adopters series. 


Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications - please check your spam folder if you don't receive this.

Join 17,882,216 other followers

Ben Huberman

4 Comments

Comments are closed.

  1. Widdershins

    Being able to see how my blog looks on different devices was great!!!

    Like

  2. Peter F

    That’s awesome. It was not clear to me how to get to this feature. If anyone else is in the dark, before Ben wrote “When you enter the Customizer (just hover over your site’s name in the top-left corner of the screen, and click on Customize),” I would add “Log in to WordPress, click My Blogs and go the Dashboard of your blog.”

    Like

  3. Jotpreet Singh

    Oh, so the feature has been implemented.
    I thought that only my theme was implementing it.

    Anyways, great feature !

    Like

  4. Dzulfiqar Fathurrahman

    Looking forward for another upgrade on this site, especially for the mobile view

    Like

Follow

Get every new post delivered to your Inbox.

Join 17,882,216 other followers

%d bloggers like this: