Overview

Our platform makes it easy to create a beautiful and seamless Homescreen design for your app. Upload your own custom designs, or choose from one of our many templated background images. You can also use our rotating Carousel images to create a dynamic experience users will remember!

Note: The iPhone 4/4S section will not appear for newly created apps. The Phone section will apply to the iPhone 4/4S by default.

This article provides the steps on how to upload, select, link, and unassign homescreen background and carousel images.

 

---

 

Process

Background Images

Uploading and Selecting Background Images

1. Navigate to Create and select Design from the dropdown menu.
2. Select your desired Homescreen Layout from the list provided. Here you can also set background color and upload your company logo using our Branding Tool.
3. Next to Homescreen background, select Edit to upload your own custom image, or choose an image from our pre-created library. A pop-up window will appear with two pages:
   • Your Images:
     • Select Browse to upload an image, or drag the image from your computer or desktop into the designated box on the left.
     • Utilize the Blur Effect option to blur the selected image.
     • If you are uploading your own images, we recommended PNG format and 640x1136px (Phone) and 1536x2048px (Tablet).
   • Library:
     • You can choose from the provided preset images.
     • Select the dropdown next to Library to see the available industries.
     • You can use any image for any industry; the images are categorized for your convenience.
4. Click on the image you would like to use for the Homescreen (it should be highlighted by a blue outline) and hit Select in the upper right corner and click Save.
5. If you wish to download or edit images from the Your Images and Library sections, hover over the image and click the appropriate button that appears.
6. Do not forget about the Custom Design section (in the Build section under each feature) where you can personalize the feature’s styling and assign a unique Screen Background for each feature if you choose.
7. Once you have finished assigning your Homescreen images, you can view your changes in the app after clicking Save and refreshing the Preview App.

   Note: Design step changes always take effect immediately as long as your app’s source code supports the changes.

Carousel Images

Carousel images appear atop your homescreen background image. You can select various effects that dictate how they appear to the end-user. Though carousel images are technically fullscreen images, you can get creative by using a transparent background, which allows you to show portions of the Homescreen.

Uploading and Selecting Carousel Images

1. Navigate to Create and select Design from the dropdown menu.
2. Select your desired Homescreen Layout from the list provided.
3. Next to Carousel Images, select the Edit button. A pop-up window appears with the following pages:
   • Your Images:
     • Select Browse to upload an image, or drag the image from your computer or desktop into the designated box on the left.
     • If you are uploading your own images, we recommend using PNG format and 640x1136px (Phone) and 1536x2048px (Tablet).
   • Library:
     • You can choose from the provided preset images.
     • Select the dropdown next to Library to see the available industries.
     • You can use any image for any industry; the images are categorized for your convenience.
4. You can assign up to 5 carousel images to the Homescreen. Assign an image by dragging it to the desired number you would like it to appear within the order.
5. Next, choose the Image Transition effect. See options below.
   • Manual Swipe: User must manually swipe through the carousel images.
   • Sliding: Carousel images will transition by sliding across the screen.
   • Fade: Carousel images will gradually fade into each other.
   • Parallax: An improvement on Sliding, the images will slide across the screen quicker and more seamlessly.
   • Ken Burns: An improvement on Fade, the images will be slowly zoomed-in upon before fading out.

   Carousel Image Sizes

   • iPhone: 640x1136px (750x1334px when optimizing for iPhone 6)
   • Tablet: 1536 x 2048px

   Note:

   • Sizing for Parallax and Ken Burns is largely trial and error.
   • For Ken Burns, we suggest starting with larger dimensions than dictated above to ensure the zoom effect works well on each device size.
   • For Parallax, if you plan to include text or important graphics in the images, be sure that content is restricted to the center 640px (in width) of the image—otherwise, that content will be cut off by the effect.
6. Lastly, hit Select in the upper right corner.
7. Click Save to apply your settings to the app.

 

Linked Carousel Images

You can link a carousel image to a specific feature within the app. This makes the image clickable, leading the user to the selected feature or in-tab item. This is a great way to highlight a key feature within the app.

1. Follow the above instructions to upload and select your carousel images.
2. Select the button Link a Feature that populates over the carousel images. Some features (such as Around Us, Events, Info, etc.) have items, so you can check the box next to the item you wish to link to or leave the boxes unchecked to link to the main feature.

   Note:

   • If you wish to link a feature that has multiple checkbox items, you can leave all boxes unchecked and save.
   • For example, to link a carousel image to the Events Feature, you can select your feature from the dropdown menu and make sure to click the green Select button over the image and then the Update button to enable and save.
3. Once you have made your selection, click the green Select button, then Save. A confirmation message will appear at the top, and you can then close the window.
4. Once linked, the carousel image’s link icon will say Edit Link. To disable the link, select the Linked Feature dropdown and select No Link from the menu, then click Select, Update and Save.

Unassigning Background and Carousel Images

• You can remove image assignments at any point and your change will take effect immediately.
• To unassign a background image, simply choose another image in its place, or click the trash icon to delete the image from your library.
• To unassign a carousel image, hover your cursor over the carousel image and click the red X at the top right to remove the screen carousel image and click Update and Save.
• The carousel image will have the instructions to Drag Image Here to Assign once more.