Phone Homescreen

The Designer

The home screen designer allows you to put your creativity to work. Use the panel widgets to build a home screen that is completely unique. It's as simple as dragging and dropping your panels and editing the panel settings. Keep scrolling to view panel explanations below or jump start your home screen with one of our starter templates.

Starter Templates

To get you started using the Home Screen Designer we've included several pre-made templates for you to choose from. Each of these templates are selectable from the CMS and will populate your layout with example images. Select one of the templates below to see the image specs for that layout.

Home Screen Panels

All Panels

Panels are used to display information on the home screen of your app. Different panels perform different functions, but all panels have some common abilities. All panels can be repositioned by dragging and dropping and all panels can be used multiple times if you wish.

Universal Panel Settings:

Margins: left, right, top and bottom margins are on by default but can be removed when you want the panel flush against another panel or the screen edge.
Pin to Bottom of Screen: locks the panel to the bottom of the screen (other panels will scroll beneath).

Image Panel

The image panel allows you to upload a single image or multiple images. Useful for branding, displaying sponsors, or anything graphical.

Image Panel Settings:

Resizable: The Images Panel is resizable. Click and drag the edge of the panel to adjust the size. Clicking the edit button will give you the recommended pixel dimension for images uploaded to the panel. The actual size of the panel is determined by the largest image uploaded. In order for images to appear at the approximate size of the panel please adhere to the recommended size given in the image upload area of the panel settings.
Fade Between Images: Unchecking will cause the Images panel to "slide" between any images loaded to the panel
Rotation Interval: You can specify the number of seconds you wish each of the images in your images panel to appear. Setting the rotation interval to 0 prevents automatic rotation (users may still swipe between images).

Buttons Panel

The Buttons Panel allows you to add buttons linking to features you’d like prominently displayed on the home screen of the app. The button panel displays as a single row of buttons.

Buttons Panel Settings:

Resizable: The Buttons Panel is resizable. Click and drag the edge of the panel to adjust the size.
Add Buttons: Select the check mark next to your Available Buttons to add them to your button row (max of 5 per panel). Drag and drop the buttons left and right to re-order.
Panel Background Color: Button Panel Background Color can be changed from the default (Button Background Color from Color Theme) using hex colors or the color picker.
Panel Text Color: Button Panel Text Color can be changed from the default (Button Text Color from Color Theme) using hex colors or the color picker.
Panel Transparency: Button Panel Transparency can be changed from 0 (completely transparent) to 1 (no transparency).

Messages Panel

The messages panel displays any messages sent from the event planner or other users.

Messages Panel Settings:

Fade Between Messages: Unchecking will cause the Images panel to "slide" between any messages in the panel
Rotation Interval: You can specify the number of seconds you wish each of the messages in your messages panel to appear. Setting the rotation interval to 0 prevents automatic rotation (users may still swipe between messages).
Limit How Many to Display: This value sets how many of the most recent messages get displayed in the messages panel.

Photos Panel

The Photos Panel displays photos from the photo feature. The photos are displayed in a row of three, with the ability to page horizontally to see more.

Photos Panel Settings:

Fade Between Photos: Unchecking will cause the Images panel to "slide" between any messages in the panel
Rotation Interval: You can specify the number of seconds you wish each row of photos in your photos panel to appear. Setting the rotation interval to 0 prevents automatic rotation (users may still swipe between photos).
Limit How Many to Display: This value sets how many of the most recent photos get displayed in the photos panel.

Titles Panel

The Titles Panel is useful for Event Branding. The panel displays an image on the left along with three lines on the right, typically Event Name, Event Subheading and Event Dates.

Titles Panel Settings:

Image Upload: You can upload a square image (130px x 130px png or jpg) to be displayed to the left of three lines of text.
Line 1: This line of text appears first, themed with the Panel Text Color (default is Primary Text Color from the Color Theme).
Line 2: This line of text appears below line 1, themed with the Secondary Text Color from the Color Theme.
Line 3: This line of text appears below line 2, themed with the Tertiary Text Color from the Color Theme.
Panel Background Color: Titles Panel Background Color can be changed from the default (Main Background Color from Color Theme) using hex colors or the color picker.
Panel Text Color: Titles Panel Text Color can be changed from the default (Primary Text Color from Color Theme) using hex colors or the color picker.
Panel Transparency: Titles Panel Transparency can be changed from 0 (completely transparent) to 1 (no transparency).

Twitter Panel

The Twitter Panel is used to display tweets from designated twitter users and hashtags.

Twitter Panel Settings:

Fade Between Tweets: Unchecking will cause the Twitter Panel to "slide" between any Tweets in the panel
Rotation Interval: You can specify the number of seconds you wish each Tweet in your Twitter panel to appear. Setting the rotation interval to 0 prevents automatic rotation (users may still swipe between Tweets).
Limit How Many to Display: This value sets how many of the most recent Tweets get displayed in the Twitter panel.

Spacer Panel

The Spacer Panel is used to add empty space between two other panels containing content. For example you may wish to add space between two rows of buttons.

Spacer Panel Settings:

Resizable: The Spacer Panel is resizable. Click and drag the edge of the panel to adjust the size.