Screen identification in the theme template
Visually, the screen in question is composed of the image of the middle size centered on the upper part of the screen, supplied with the Title and Subtitle parameters placed below the image as well as with the selection list positioned in the lower part of the screen. The screen obtains the corresponding title "Image/Title/Subtitle/Selection" to be differentiated accordingly among other screens in the theme template.
The default design of the screen with the image and the selection list consists of the following features:
No Navigation Bar is depicted in the screen by default; however, the parameter can be installed by switching on the active buttons in the Header.
No Table format is visually present, but the feature/parameter with the Table customization to create a list is retained while working with settings.
The possibility of selecting the table items or statements from the list is present.
Multiple selection is possible.
The presence of checkboxes for selecting items from the list.
Only the presence of checkboxes allows the table item selection, otherwise, the screen comprises the enumeration of table items without a possibility to select fields.
Different List formats can be installed from the available Table Design formats on the drop-down menu in the Table parameter.
An unlimited number of table items can be added to the list in the screen.
List of parameters presented in Screen: Image/Title/Subtitle/Selection
Background
Basic Configuration
Navigation Bar, or Header
Image
Title
Subtitle
1 column Table
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:
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 Table items selection list:
Choosing the Selection List Design
The selection list for table items can be customized differently by installing the needed design format from the drop-down menu:
โ ๏ธ The option to change the selection list design is located in the Table parameter. Customization is possible only within the formats presented on the drop-down menu. |
Please study how the selection list design and its table list layout changes in the screen in the preview below:
CheckboxTitle | The layout is as follows:
|
CheckboxTitleImage | The layout is as follows:
|
CheckboxTitleSubtitle | The layout is as follows:
|
CheckboxTitleSubtitleImage | The layout is as follows:
|
ImageTitle | The layout is as follows:
๐ข No selection of table items is possible here since its function is not embedded in such a layout. The main focus is made on the enumeration of table items containing the required text in each field. |
ImageTitleCheckbox | The layout is as follows:
๐ข The presence of the checkbox allows the selection of a corresponding table item, implying the user's choice in the screen.
|
ImageTitleSubtitle | The layout is as follows:
๐ข No selection of table items is possible here due to the checkbox absence. |
ImageTitleSubtitleCheckbox | The screen comprises of the following layout of the table items:
|
Title | Non-selective Title is to be customized in the screen only.
|
TitleCheckbox | In this layout, the Title becomes selective due to the presence of the checkbox placed at the end of each table item field. |
TableImage |
๐ขNo selection is possible here. |
TableSubtitle |
๐ขNo selection is possible here. |
TableSubtitleCheckbox | The Table items become automatically selective due to the presence of the checkbox in the layout. |
TableSubtitleImage | The selection options disappeared with the absence of the checkboxes.
|
Table Settings for Design Customization
Within the Settings of the Table parameter, you can:
Work with the selection bar size and specify the selected field appearance.
Set colors, text fonts, and sizes for title and/or subtitle.
Managing Table Items Amount
Adding Table Options: Click on the ADD button to include more options to your table.
Removing Items: To remove an item, click on the Delete icon next to each row.
โ ๏ธ Please note the more selection fields are added, the more actions are required for the user to scroll the page down or up! |