Design Your App Home Page

In App Setup, Branding, Content, Images, Social Media by Elizabeth Kestler

App Setup displays the setup tools to get your home page designed.

TSL Mobile App Manager

Content

Tiny Screen Labs uses an app page bar element which displays the icon, icon title, content move and expand/close elements. Move app page bars to change the placement of your icons.

App Page Designer

An App Page Bar Expanded

Add App Page Bar

Add up to 12 pages to your home page. To add a page, click the plus icon.

Add an App page

Delete App Page Bar 

Expand the app page bar and click delete button to remove it from the home page.

Delete

 

Link App Pages Using WordPress Content Types and Content Source 

Expand the app page bar and select the content for your mobile app. Each icon links your content and displays it in the mobile app. Content edits that you update in WordPress will automatically be updated on the mobile app.

Select Content Type

Mobile app content

Content types include Geodirectory, Business directory categories, WordPress pages, Web URL, Map, Deals or Favorites features.

GeoDirectory or Business Directory categories, sub categories

GeoDirectory

WordPress pages – a list of published pages will appear in the content source dropdown.

example list of pages

Web URL – enter the https:// web address to open in a browser.

example web address

Map – adds a map displaying pins of the locations.

Deals – For websites using GeoDirectory and GeoDeals plugin. A feature that displays active deals and a detail page for each item.

Favorites – for all websites. A feature that displays all items that a user saved as a favorite.

Change Icons

Click the icon image to go to the TSL Image library that contains icons you can use in your mobile app. Or upload your own image.

TSL Icons

Select from a library of icons or upload your own

Edit Button title

Each app page bar includes an icon title field that is editable. Use the global icon settings to change the font, font size and color.

Arrange Icons

Each app page bar can be moved up or down. Changes will appear on the home page layout screen.

Design Preview

Note: Features, Deals and Map will appear in the footer menu with social sharing if they are not added to the home page design.

Global Icon Settings

Change the top status bar color to coordinate with your background image. Change the font style, size and color or use icons without text.

Global Icon Settings

Social Media

Enter the ID of your social media page. Note: you do not need to enter the social media web address.

Includes Facebook, Google +, Instagram, Pinterest, Twitter, Website and YouTube.

Images

Replace placeholder image

The default placeholder image appears in place of a missing image in your mobile app. Replace the image with one that is 2:1 aspect ratio, minimum size 100 x 50 pixels.

Add Logo

Place a logo on the home page to appear above the icons. Upload a logo that is formatted 1:1 aspect ratio, minimum size 200 x 200 pixels.

Change home page background 

The default home page background is white. Click the background to access the TSL image library and select another background image. To upload your background, you need 2 sizes: 1334 x 750 pixels and 960 x 630 pixels.