Using A Mobile-specific Front Page

This particular option can be found by logging into your site's admin area and going to:
"ProPhoto" > "Customize" > "Mobile" > "General"

Sometimes, the front page you setup for desktop visitors does not/cannot show up properly for mobile phones. This is often the case when widgets are used to create a lot of the home page appearance, such as inside the Bio Area. ProPhoto gives you the option to use a different page specifically as your mobile front page.

Use this box in ProPhoto to select a page to use for mobile phones

Use this box in ProPhoto to select a page to use for mobile phones

With a mobile phone-specific homepage, you can either recreate some of the style of your desktop site, or create something that works in replacement of it.

NOTE: this does not impact tablets, (iPad, etc.) since they will see the desktop site layout.

Selecting a mobile-specific front page

You really only need to do three things to have a special page as the front of your site on mobile phones.

That’s it! As long as you haven’t chosen your blog posts page (not supported) that’s all you need to do. You can create content in the editor for that page and it will be shown as the front content to visitors browsing your site on their phones.

Customizing ProPhoto features on your front page

Much like the desktop layout, your front page can show/hide certain items.

Showing/Hiding the Masthead Area

You can alter your masthead for certain page types in the main area of ProPhoto:
“ProPhoto” > “Customize” > “Header Area” > “Masthead Image & Slideshow”
…but you also have a mobile-specific masthead control area.

mobile-masthead-display-options

This area allows you to override the masthead for mobile phone visitors, specifically, found here:
“ProPhoto” > “Customize” > “Mobile” > “Masthead”
Click to learn how to control the mobile masthead area

Showing/Hiding the Comments Area

WordPress gives you control to allow/deny commenting on a per-page basis. You may turn off comment fields for your front page in the WordPress page editor.
Click to learn how to show/hide the commenting fields

Showing Widget Areas

Due to the small size and touch screen nature of phones, widget areas aren’t supported at this time.

  • Bio Area
  • Sidebar
  • Footer Area
  • Sliding Drawer Sidebars
  • Contact Form (form fields are supported, widgets are not)

If your design makes use of widgets to create a special layout of content for your desktop site, you’ll use the content of your mobile-specific front page to create an alternative. Learn more:

Creating content in your mobile front page

You can get as creative as you like in the front page of your site. Embed videos, insert images or galleries, etc. No matter how you customize your mobile front page, consider adding useful text in the page – it’s a good idea for this page to include some text for SEO reasons, so write a helpful sentence or two that describes your business and what you do for the first-time visitor. Here are a few other ideas you might find useful…

Simple logo and slideshow

To have a minimal approach, consider uploading a logo specially created for mobile phones by uploading an image as your mobile-specific logo. Then, try using the Masthead Slideshow or a Slideshow Gallery in your front page.

custom-mobile-homepage-ex1

Remember, just like the desktop masthead area, your images can behave as links when touched. Using the masthead, you could do more than just show images – each masthead image could be an informative panel and could be set to link to a page on your site.

Buttons and Images in your page

While you aren’t yet able to use ProPhoto Buttons in your page content, a WordPress plugin like Widgetize Pages Light makes it possible to add widgets inside pages, which makes it possible to use our Custom Icons widget in your page content.

Using plugins to add widgets to pages is up to you – we won’t be able to provide tech support for tools like this, but they may help you achieve the unique look you’re after.

Footer Menu Links and Appearance

Your mobile phone menu appears at the bottom of every page.

mobile-footer-menu-ex

You must customize it separately from the desktop menu system, just edit the contents in ProPhoto here:
“ProPhoto” > “Customize” > “Mobile” > “Footer Menu”
Read more in our Mobile Footer Menu guide to learn how to change the button color, font, and more.

Blog content on the front page

The only way to show blog posts as your front content is to do this for both your desktop and mobile phone layout in the “Settings” > “Reading” area in WordPress. Use another approach if you want to show off some recent blog posts on your front page for phones.

Using this approach won’t show posts in the same way as the actual blog page of your site, but you can add a Recent Posts Grid in your mobile home page, and you’ll see a group of thumbnails linking to your posts. Try playing around with the cropped grid style by using different thumbnail aspect ratios to create a unique look.

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us