Overview
The CMS platform gives the tools to create a customized app Homescreen design. You can upload your own custom designs or choose one of our templated background images. You can also use our rotating Carousel images that appear atop your Homescreen background image.
This article outlines the options you have to edit your app's Homescreen design by using your own custom designs (or choosing from our library) and even leveraging the Carousel images functionality.
Notes:
- 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.
- You can use the 'Link Carousel Image to a feature to highlight a key feature within the app.
Solution
Uploading and Selecting Background Images
1. Navigate to Create and select Design from the dropdown. Select your desired Homescreen Layout from the list provided.
Note: Here, you can also set background color and upload your company logo using our Branding tool.
2. Next to Homescreen Background, select Add 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:
a. 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.
b. 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 the Library to see the available industries. You can use any image for any industry; it is categorized 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 Edit, Download or Delete images from the Your Images and Library section, hover over the image and click the appropriate button that appears.
5. Once you have finished assigning your Homescreen image, you can view your changes in the app after clicking Save and refreshing the Preview App.
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 Add, or Edit if images are already added.
A pop-up window will appear with two pages:
Your Images:
a. Select Browse to upload an image, or drag the image from your computer or desktop into the designated box on the left.
b. 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 the 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 the different options below.
- Manual Swipe
Users 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 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.
5. Lastly, hit Select in the upper right corner and Save to apply your settings to the app.
Linking Carousel Images to a specific feature
By linking a carousel image to a specific feature within the app, you make the image clickable leading the user to the selected feature or in-tab item.
- Follow the instructions above to upload and select your carousel Images.
- Select the button Link a Feature that populates over the carousel Images.
- A list of active features will display in a drop-down. Select the feature to be linked to the image.
- Once you have made your selection, click the green Select button, then Save at the top right. A confirmation message will appear at the top, and you can then close the window.
- Once linked, the carousel image's link icon will say Edit Link.
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.
- Click Update > Save.
- The carousel image will have the instructions to Drag an image here to assign once more.
- To disable the link from a carousel image linked to a feature, select the Linked Feature drop-down and select No Link from the menu, then click Select and Save.
Testing
You will have managed to create a beautiful and seamless Homescreen, in the way you want it to be, that will be appealing to your users.
Important : Design step changes always take effect immediately as long as your app's source code supports the changes. If your app has not been republished recently, we recommend you do that either way, after making the design changes.
Comments
0 comments
Please sign in to leave a comment.