Screen identification in the theme template
The Screen: Image/Title/Subtitle/List is designed to present information effectively. It features a square image (often an app icon) in the top left, accompanied by a concise description (app name), a subtitle, and a list showcasing features or step descriptions with images. This is how the screen can be identified in the theme template range:
The default design of the screen with the list consists of the following features:
This screen is purely for visual presentation.
No selection is possible even with the list present.
Its purpose is to inform and guide users visually only.
List of parameters presented in Screen: Image/Title/Subtitle/List
Background
Basic Configuration
Navigation Bar, or Header
Image
Title
Subtitle
List (presented as the Table parameter in settings)
Footer
📢 Please note that all parameters can be customized and switched off or on depending on your app design.
Here, you may see where these parameters are displayed in the screen precisely.
Screen peculiarities and functions
1. Uploading an Image
There are 3 main ways how to upload an image to the screen. All of them are enumerated in the screen directly and mean the following:
You should insert the needed Image URL or choose one from the assets.
You may upload an image or photo from your device by clicking the Camera sign.
You can generate the image with the AI Generator in the settings.
Considering link options for an Image
Image URL: Upload directly from the Internet.
Asset Name: Useful for iOS onboarding, where you add the asset name stored in your app bundle for retrieval from the app's local archive.
Applying the Image AI Generator
Image AI Generator offers 12 images for selection at once. Note that you may re-generate them if none suitable is found.
Just remember to specify as precise description for the needed image as possible.
See how the chosen image can be reflected in the selection field in the preview and adjust with the corresponding setting to fit the app design.
Customizing an Image
Set the size by checking the appropriate boxes and entering dimensions in pixels.
View the visual representation on various iPhone models to ensure the image displays optimally across different devices.
Alter the size of the image and resize the canvas as needed.
Enable the checkbox and select from the dropdown menu to change the default scaling. Check the preview on the left to ensure proper scaling on various devices.
Modify the position by altering the top, bottom, left, and right paddings for precise alignment.
2. Depicting the Title and Subtitle parameters
To save some space on the screen, you may also work with the text lines by removing Title or Subtitle parameters or even both. To remove those parameters, the text itself should be deleted in the corresponding parameter field below:
Please see below the screen design in such cases:
No Title | Title No Subtitle | No Title No Subtitle |
 |  |  |
 |  |  |
Setting the Advanced Text Customization for Title and Subtitle
Composing the text to be reflected in the screen in the corresponding part of the Title or Subtitle parameter
Setting the text size by adjusting its font family, size, weight, and line height
Applying the appropriate text color and the background color where the text is located in the screen
Using the padding boxes for working with the text alignment while giving the needed text positioning in the screen
3. Customizing the List Parameter
Choosing the List Format
The option to modify the design of selection fields is found within the Table parameter settings by installing the needed design format from the drop-down menu:
⚠️Customization is possible only within the formats presented on the drop-down menu. |
Please study how the List design and its table list layout changes in the screen in the preview below:
ImageTitle  | The layout is as follows:
This is how the settings are modified and reflected in the screen afterwards:
|
TitleImage  | The layout is designed vise versa is comparison with the previous design since the Title goes first and then is accompanied by the Image. These are settings below:
|
List Settings for Design Customization
Within the Settings of the List in the Table parameter, you can:
Adjust the whole list positions.
Work with the items size.
Set up image size and scale mode.
Set colors, text fonts, and sizes for title.
Managing Table Items Amount
Adding Table Options: Click on the ADD button to include more options to your List.
Removing Items: To remove an item, click on the Delete icon next to each row.
⚠️ Please note the more List fields are added, the more actions are required for the user to scroll the page down or up! |
Adjusting the Footer parameter
The Footer parameter consists of 2 active buttons that are fully customizable:
Next
Log-in
Here, you can modify the layout with the necessary buttons to improve user navigation and ensure design consistency. More details on dealing with the Footer customization are available in the article Customizing the Screen Footer.