Customizing Mobile Home Screen Buttons Follow

The main screen that your attendees will see when they open your app is called the "App Home". The widget that displays the buttons you see is called the "Mobile Home Screen Buttons" widget.

The widget is arranged in rows, each of which is represented as a group. You may have one, two or three buttons per row. By default, each button will display as an icon with a label beneath it (default icon set example below). 

You may also customize your home screen by:

• Using your own icons in place of Pathable's default set 
• Uploading a background image that covers the entire button area
• Uploading a background image that covers the entire screen behind the buttons 

Default Icon Set	Custom Icon Set	Buttons with Individual backgrounds	Full-screen background behind buttons

Choosing icons from Pathable's default set

1. Open the Home Screen Buttons widget
2. Click "Add Link" to create a new button
3. Click into the left-most dropdown menu. You will see a short list of commonly used icons to choose from. You can browse the complete set of available icons on the Font Awesome Library. Once you have made your selection, simply type its name into this same dropdown menu to select it.

Uploading your own icon

1. Open the Home Screen Buttons widget
2. Click "Add Link" to create a new button
3. Click the "ADD IMAGE ICON" button, select and upload your image. We recommend 150px x 150px, but other sizes / aspect ratios will work, as well. The image will be resized to fit the button space. 

Set a background image for an individual button

1. Open the Home Screen Buttons widget
2. Click "Add Link" to create a new button
3. Click the "ADD BACKGROUND IMAGE" button, select and upload your image. The best size will depend on how many buttons you have in your row, as this effects the aspect ratio of the area to cover. We recommend 495px x 105px if there are two items in a row and 330px x 105px if there are three items in a row.

Important note: The buttons will vary in size depending on the device they are being viewed on (i.e., some phones and tablets will have wider aspect ratios than others). Because of this, the background image will be cropped on a mobile phone whereas the entire image is visible on a tablet. Therefore, it is important that you choose an image that will work even if it is not entirely visible. 

Set a background image behind all buttons

1. Open the Home Screen Buttons widget
2. Click the "Styles Mobile" tab
3. Click "Browse" next to the Background Image
4. Select and upload your image. Your image will be resized to fit the screen, but we recommend that your image be 2560px wide by 1700px tall, to ensure it can be displayed without distortion on the full range of devices, including tablets.