Overview
The Banner control allows you to define a global page header which usually includes a logo, company name, slogan, page title, and subtitle. With this control, you are able to display any image at the top of a page for customization and personalization purposes. Moreover, it gives users the ability to set custom titles and subtitles that are implemented in all the apps when created.
This article describes the essentials for implementing a Banner control.
Add a Banner
The default behavior of any app is to include the title and subtitle when the app is created. You can access the control's settings by clicking the Banner; a blue box surrounds the control, and the Manage and Settings buttons are shown in the top-right corner of the control.
If this control is removed, it can be found in the Controls tab in the Banner section as follows:
1.From the upper menu, select the Controls option. A drop-down menu will display all the different control types available.
2.Select the option Banner, and then click Add image.
Settings
Manage
In the Manage tab, you are able to configure everything related to the content of the Banner title and subtitle, and image settings.
Banner items
Here you can customize the control title and subtitle. For each one of them, you can:
•Decide whether the title or the subtitle is visible or not.
•Define the content of the title or subtitle.
•When the Set on top checkbox is active, the subtitle is displayed on top of the title. If it is not active, the title is displayed on top of the subtitle.
When configuring the Banner content in a Private or Detail page, new options appear in the Manage tab.
Private pages
In Private pages you can add user information to your texts by clicking the User info button as follows:
Also, you can enable or disable header buttons to show the user's Relevant to me actions. You can change the buttons theme by selecting the principal or secondary options.
Detail pages
In Detail pages you can add user information to your texts by clicking the User info button. Furthermore, you can add Entity information by clicking the Entity info button as follows:
Also, you can enable or disable header buttons to show the user's Actions. You can change the button's theme by selecting the principal or secondary options.
Banner settings
Inside the Banner settings, you are able to configure everything related to Banner and image settings, as in the following image:
Here is the set of elements you can configure:
•Show banner: Set whether or not the Banner image is visible.
•Height: Define the header height in pixels.
•Banner space: Define whether the image is expanded to fit the page width or if it's contained inside the guide lines.
•Image settings: Define the image to use. You can upload an image or use the URL of an image available online. The supported image formats are: .png, .jpg and .jpeg.
•Choose a fit: Define how the image appears in the space assigned to it. You can choose to keep the original size, scale it to fit, or tile the image.
•Image size: Define the image size on your app.
•Image position: These controls help you to move your image up, down, left, right, or diagonally.
•Image opacity (%): Define the transparency of your image.
•Background color & opacity: If the image has transparency, this control helps you define the background color and its opacity.
Click Apply to save your changes and Cancel to discard them.
Design
In the Design tab you can customize the fonts and colors of the title and subtitle.
•Fonts: Define the title, subtitle or buttons font and size. Each font or size is independent of the other. The default subtitle font family is Poppins Regular.
•Colors: Define the colors of the title, subtitle, buttons, background, hover, and border separately.
Last Updated 6/5/2023 7:18:00 PM