Screen: Image/Title/Subtitle/Selection

The visual is designed to see how to work with the screen layout where selection of table items is possible

O
Written by Onboarding.Online Support Team
Updated over a week ago

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:

  1. 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.

  2. No Table format is visually present, but the feature/parameter with the Table customization to create a list is retained while working with settings.

  3. The possibility of selecting the table items or statements from the list is present.

  4. Multiple selection is possible.

  5. The presence of checkboxes for selecting items from the list.

  6. 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.

  7. Different List formats can be installed from the available Table Design formats on the drop-down menu in the Table parameter.

  8. 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:

  1. You should insert the needed Image URL or choose one from the assets.

  2. You may upload an image or photo from your device by clicking the Camera sign.

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

  1. Image AI Generator offers 12 images for selection at once. Note that you may re-generate them if none suitable is found.

  2. Just remember to specify as precise description for the needed image as possible.

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

Setting Up Image Scale Mode
  • Modify the position by altering the top, bottom, left, and right paddings for precise alignment.

Positioning the Image

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
Subtitle

Title

No Subtitle

No Title

No Subtitle

Setting the Advanced Text Customization for Title and Subtitle

  1. Composing the text to be reflected in the screen in the corresponding part of the Title or Subtitle parameter

  2. Setting the text size by adjusting its font family, size, weight, and line height

  3. Applying the appropriate text color and the background color where the text is located in the screen

  4. 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:

  1. Checkbox for an item selection

  2. Table item Title, which contains the text for selection in the Table parameter

CheckboxTitleImage

The layout is as follows:

  1. Checkbox for an item selection

  2. Table item Title, which contains the text for selection in the Table parameter

  3. Image - an icon to add for a selection item

CheckboxTitleSubtitle

The layout is as follows:

  1. Checkbox for selecting a table item

  2. Table item Title for composing the main text for selecting

  3. Table item Subtitle for stating additional commentary for a corresponding table item

CheckboxTitleSubtitleImage

The layout is as follows:

  1. Checkbox for selecting an item

  2. Title

  3. Subtitle

  4. Image

ImageTitle

The layout is as follows:

  1. Non-selective Image

  2. Title with the text for a corresponding table item

📢 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:

  1. Image

  2. Title

  3. Checkbox

📢 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:

  1. Image

  2. Title

  3. Subtitle

📢 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:

  1. Non-selective image

  2. Title

  3. Subtitle

  4. Checkbox allowing selection (can be shown in the preview)

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

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!

Did this answer your question?