Screen identification in the theme template
There are 2 screens in the theme template range containing the picker tool:
Screen: Title/Subtitle/Picker
Screen: Image/Title/Subtitle/Picker
As it is evident, the only visual difference between these 2 screens is the presence of the image. This is how we can identify these screen types in your onboarding:
The default design of the screens with the picker consists of the following features:
The presence of the picker parameter designed for users to select from predefined options.
Picker types: String or Integer (Int): the selection is entirely dependable on your onboarding needs and purposes. This choice impacts the kind of symbols users will see in the picker.
In order to set conditions for user segmentation, these inputs need to be the "Int" type only.
The "String" format allows you to enter any text, numbers, special symbols, or emojis.
The "Int" format allows you to enter only whole numbers without any fractional parts.
List of parameters presented in Screen: (Image)/Title/Subtitle/Picker
Background
Basic Configuration
Navigation Bar, or Header
Image (in the Screen: Image/Title/Subtitle/Picker only)
Title
Subtitle
Picker
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 in the Screen: Image/Title/Subtitle/Picker:
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:
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 Picker parameter:
Adjusting the Picker settings:
The 'Vertical alignment' option allows to customize the position of the title, subtitle, and picker on the screen:
Top: Aligns to the top of the screen or header.
Bottom: Aligns to the bottom of the screen or footer.
Center: Centers the title, subtitle, and picker on the screen.
The picker color allows you to customize the text color in the picker. To change it, you should select the needed color from a palette.
Selecting String Picker Type
For String pickers, you may add wheels (the rows displayed in the picker) by clicking "+ADD."
To delete wheels, you should use the Trash button.
You may add options to be displayed on each wheel. Thus, you should enter text for each option that users can select. Example: For a gender picker, enter "Male" in Option 1, "Female" in Option 2, and "Other" in Option 3.
Selecting Int Picker Type
You may choose between a list or range for the Int picker type:
Range: Set start and end values (e.g., birth year range from 1960 to 2012).
List: Add custom integer values for non-sequential options.
Please also study the article relating to Segment Users Based on Their Selection on Pickers to look deep into the way the picker operates.
To learn more details about the way the Screens work and what functionality they obtain, please study the following article Onboarding Screens Base Elements Customization, or ask our team if there are any additional questions.