The Designer
The Designer is the home screen 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 is as simple as dragging and dropping your panels and editing the panel settings.
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.
Layout 1
Layout 2
Layout 3
Layout 4
Layout 5
Layout 6
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).
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 (Main Background Color from Color Theme) using hex colors or the color picker.
- Panel Text Color: Panel Text Color can be changed from the default (Primary Text Color from Color Theme) using hex colors or the color picker.
- Panel Transparency: Panel Transparency can be changed from 0 (completely transparent) to 1 (no transparency).
Check In Panel
The Check In panel allows attendees to check in to an agenda sessions with a unique check in code, directly from the home screen, without having to navigate 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, " your check in code below".
- Panel Background Color: 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: Panel Text Color can be changed from the default (Primary Text Color from Color Theme) using hex colors or the color picker.
- Panel Transparency: Panel Transparency can be changed from 0 (completely transparent) to 1 (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 (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 (Button Background Color from Color Theme) using hex colors or the color picker.
- Panel Text Color: Panel Text Color can be changed from the default (Button Text Color from Color Theme) using hex colors or the color picker.
- Panel Transparency: Panel Transparency can be changed from 0 (completely transparent) to 1 (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. Simply designate the Speakers as "Featured" from the Speakers feature.
Featured Speakers Panel Settings:
- Fade Between Speakers: Unchecking will cause the Speakers panel to "slide" between any Speakers featured in the panel
- Rotation Interval: You can 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 (Main Background Color from Color Theme) using hex colors or the color picker.
- Panel Text Color: Panel Text Color can be changed from the default (Primary Text Color from Color Theme) using hex colors or the color picker.
- Panel Transparency: Panel Transparency can be changed from 0 (completely transparent) to 1 (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: You can 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 value sets how many of the most recent sessions get displayed in the Happening Now panel
- Display before session begins (minutes): You can 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): You can 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 (Main Background Color from Color Theme) using hex colors or the color picker.
- Panel Text Color: Panel Text Color can be changed from the default (Primary Text Color from Color Theme) using hex colors or the color picker.
- Panel Transparency: Panel Transparency can be changed from 0 (completely transparent) to 1 (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. 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).
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: 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 Photos panel to "slide" between any photos 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).
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.