How to Set Up Homescreen Background & Carousel Images

Last Updated: Jul 18, 2017 09:45AM PDT
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.


Uploading and Selecting Background Images


1. Navigate to Create and select Design from the dropdown. Select your desired Homescreen Layout from the list provided.
  • Here you can also set a background color and upload your company logo using our Branding tool

2. 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 a 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:
  • Here you can choose from preset images we provide. Select the dropdown next to Library to see the available industries. You can use any image for any industry, we just categorize them for your convenience.

3. 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 Save


4. If you wish to download or edit images from the Your Images and Library section, hover over the image and click the appropriate button that appears. 


5. Don't 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. 


6. Once you've finished assigning your Homescreen images, you can view your changes in the app after clicking Save and refreshing the Preview App. 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 full-screen 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. Select your desired Homescreen Layout from the list provided.

2. Next to Carousel Images, select the Edit button. A pop-up window will appear with two pages. 

Your Images:
  • Select Browse to upload a 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 recommended png format and 640x1136px (Phone) and 1536x2048px (Tablet).
Library:
  • Here you can choose from preset images we provide. Select the dropdown next to Library to see the available industries. You can use any image for any industry, we just categorize them for your convenience.
3. 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. 


4. Next, choose the Image Transition effect. See options below. 
 
  • Manual Swipe: User must manually swipe through 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 & 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.

5. Lastly, hit Select in the upper right corner and Save to apply your settings to the app. 


Linked Carousel Images

You can link an 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 (like 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. Eg. To link an carousel image to the Events Feature, you can select you feature from the drop down and make sure to click the green 'Select' button over the image and then the 'Update' button will enable and save. 



3. Once you've 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.


5. Once linked, the carousel image's link icon will say Edit Link. To disable the link, select the Linked Feature drop down and select No Link from the menu, then click Select, Update and Save.


Unassigning Background & 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 an 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.