Phone Homescreen Layout
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. Dragging and dropping your panels allows you to edit the panel settings. Keep scrolling to view panel explanations below. Jump start your home screen with one of our starter templates.
Starter Templates
Starter templates are included to get you started using the Home Screen Designer. Each template is selectable from the CMS. Each template populates your layout with example images. Select one of the templates below to see the image specs for that layout.
Layout 1
Layout 2
Layout 3
Layout 4
Layout 5
Layout 6
Home Screen Panels
Panels are used to display information on the home screen of your app. Different panels perform different functions. All panels have common abilities. Panels can be repositioned by dragging and dropping. Panels can be used multiple times if you wish.
All Panels
Panels are used to display information on the home screen of your app. Different panels perform different functions. All panels have some common abilities. All panels can be repositioned by dragging and dropping. All panels can be used multiple times if you wish.
Universal Panel Settings
Margins: left, right, top and bottom margins are on by default. Margins 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.Activity Feed Panel
The Activity Feed panel allows you to display the most recent Activity Feed posts from the home screen of your app.
Activity Feed Panel Settings
Title: The title of Activity Feed panel will be displayed just above the panel content. Panel Background Color: Panel Background Color can be changed from the default. The default is Main Background Color from Color Theme. Panel Background Color can be changed using hex colors or the color picker. Panel Text Color: Panel Text Color can be changed from the default. The default is Primary Text Color from Color Theme. Panel Text Color can be changed using hex colors or the color picker. Panel Transparency: Panel Transparency can be changed from 0 to 1. 0 is completely transparent. 1 is no transparency.Check In Panel
The Check In panel allows attendees to check in to an agenda sessions with a unique check in code. Check-in can happen directly from the home screen. Check-in can happen without navigating to the Agenda feature.
Check In Panel Settings
Line 1: This field allows you to enter in help text to appear above the check in code field. For example, “Please enter your check in code below”. Panel Background Color: Panel Background Color can be changed from the default. The default is Main Background Color from Color Theme. Panel Background Color can be changed using hex colors or the color picker. Panel Text Color: Panel Text Color can be changed from the default. The default is Primary Text Color from Color Theme. Panel Text Color can be changed using hex colors or the color picker. Panel Transparency: Panel Transparency can be changed from 0 to 1. 0 is completely transparent. 1 is no transparency.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. The button row has a max of 5 per panel. Drag and drop the buttons left and right to re-order. Panel Background Color: Panel Background Color can be changed from the default. The default is Button Background Color from Color Theme. Panel Background Color can be changed using hex colors or the color picker. Panel Text Color: Panel Text Color can be changed from the default. The default is Button Text Color from Color Theme. Panel Text Color can be changed using hex colors or the color picker. Panel Transparency: Panel Transparency can be changed from 0 to 1. 0 is completely transparent. 1 is no transparency.Featured Speakers Panel
The Featured Speakers panel will display your most important Speakers front and center on the home screen of your app. Speakers can be displayed as featured by designating the Speakers as “Featured” from the Speakers feature.
designate the Speakers as "Featured"Featured Speakers Panel Settings
Fade Between Speakers: Unchecking will cause the Speakers panel to “slide” between any Speakers featured in the panel. Rotation Interval: Specify the number of seconds you wish each set of Featured Speakers to appear in your panel before rotating to the next set. Setting the rotation interval to 0 prevents automatic rotation. Users may still swipe between Featured Speakers. Panel Background Color: Panel Background Color can be changed from the default. The default is Main Background Color from Color Theme. Panel Background Color can be changed using hex colors or the color picker. Panel Text Color: Panel Text Color can be changed from the default. The default is Primary Text Color from Color Theme. Panel Text Color can be changed using hex colors or the color picker. Panel Transparency: Panel Transparency can be changed from 0 to 1. 0 is completely transparent. 1 is no transparency.Happening Now Panel
The Happening now panel will display sessions that are currently happening on the home screen of your event.
Happening Now Panel Settings
Fade Between Upcoming Sessions: Unchecking will cause the Happening Now panel to “slide” between any Sessions in the panel. Rotation Interval: Specify the number of seconds you wish each session to appear in your panel before rotating to the next. Setting the rotation interval to 0 prevents automatic rotation. Users may still swipe between sessions. Limit How Many to Display: This number limits the number of Upcoming Sessions that will be rotating in the panel. Display before session begins (minutes): Customize the number of minutes prior to a session's start time that you wish for it to appear in the Happening Now panel. Default is 30 minutes prior to start time. Display after session begins (minutes): Customize the number of minutes after a session's start time that you wish for it to appear in the Happening Now panel. The default is set to continue displaying the session for 15 minutes after the session's start time. Panel Background Color: Panel Background Color can be changed from the default. The default is Main Background Color from Color Theme. Panel Background Color can be changed using hex colors or the color picker. Panel Text Color: Panel Text Color can be changed from the default. The default is Primary Text Color from Color Theme. Panel Text Color can be changed using hex colors or the color picker. Panel Transparency: Panel Transparency can be changed from 0 to 1. 0 is completely transparent. 1 is no transparency.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. Adhere to the recommended size given in the image upload area of the panel settings so images appear at the approximate size of the panel. Fade Between Images: Unchecking will cause the Images panel to “slide” between any images loaded to the panel. Rotation Interval: 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.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 Messages panel to “slide” between any messages in the panel. Rotation Interval: 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. Photos are displayed in a row of three. Paging horizontally is available to see more.
Photos Panel Settings
Fade Between Photos: Unchecking will cause the Photos panel to “slide” between any photos in the panel. Rotation Interval: 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. The three lines are typically Event Name, Event Subheading and Event Dates.
Titles Panel Settings
Image Upload: 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. Line 1 is themed with the Panel Text Color. The default is Primary Text Color from the Color Theme. Line 2: This line of text appears below line 1. Line 2 is themed with the Secondary Text Color from the Color Theme. Line 3: This line of text appears below line 2. Line 3 is themed with the Tertiary Text Color from the Color Theme. Panel Background Color: Titles Panel Background Color can be changed from the default. The default is Main Background Color from Color Theme. Change can be made using hex colors or the color picker. Panel Text Color: Titles Panel Text Color can be changed from the default. The default is Primary Text Color from Color Theme. Change can be made using hex colors or the color picker. Panel Transparency: Titles Panel Transparency can be changed from 0 to 1. 0 is completely transparent. 1 is no transparency.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.