A good customer portal banner should represent the business or organization accurately. Admin users can create the page banner as per their organization’s theme to display on the customer portal using the Banner widget.
Now, drag and drop the ‘Banner’ widget to the page layout section and configure the details of the banner widget. [1]
Now, by clicking on the ‘Edit’ icon, you can configure the details of the banner widget. [2]
You need to configure the following settings as per the selection of “Template”:
Select Template: There are three different templates provided:
- Only Content 2. Content (left) & Image (right) 3. Image (left) & Content (right). You can choose the template to display on the customer portal. It will be displayed as the home page when the portal users access the customer portal.
By clicking on any template, the template is selected, and you will get the preview. [3][4][5]
- Only Content
- Content (left) & Image (right)
- Image (left) & Content (right)
Banner’s Header: [6]
– Text: Insert the text label to be displayed as header.
– Color: Choose the color for the header text. A custom color picker is given to choose the color.
Banner’s Sub header: [7]
– Text: Insert the text label to be displayed as a sub header.
– Color: Choose the color for the sub header text. A custom color picker is given to choose the color.
Upload Image: You will get this option if you have chosen the template that contains the “Image” (Template-2 & 3). Choose the image file to be displayed on the banner that will display on the customer portal. The image size should not be more than 1MB and allowed file types: JPG, JPEG, GIF, BMP, PNG, SVG. [8]
Alt-Text: You can insert the “alternative text” for an image.
Note:
You will get the “Upload Image” option if you have chosen a banner with an image.
If you have uploaded the image and inserted the details for the “Alt Text” attribute, it will be placed as the Alt and Title attribute. But, if you have not uploaded the image, then the file name will be added to only the Alt attribute. This is only for the images inside the banner.
Enable Button: By ticking the checkbox of the “Enable Button”, you can display the button on the banner for the CTA (Call To Action). If you have enabled the button, you need to configure the following details for the button: [9]
– Label: You can insert the text label for the button.
– Label Color: Choose the color for the button text. The custom color picker is given to choose the color.
– Background Color: Choose the background color for the button.
– Border Color: Choose the border color for the button.
– Border Radius: You can design the button appearance by setting the radius. You will get the slider to set the border’s radius (0-50) of the button.
Redirect to: You need to set the redirection on the button’s click event. There are two options provided: Select Page or URL. [10]
– Select Page: You can select the specific portal page to redirect the portal users when they click on the button. [11]
– URL: You can insert the URL to navigate the portal users to that URL when they click on the button.
Background of Banner: You can set the background of the banner that will be displayed on the customer portal. There are three options given: Color, Image, or Video. [12]
– Color for Background: If you select the “Color” to set as a background, you will get two more options to set the background color of the banner. You can either select Solid or Gradient for the banner background.
– Solid: You need to choose the “Color” to display in the background of the banner. A custom color picker is provided to choose the color. (left image)
– Gradient: You need to choose “Primary Color” and “Secondary Color” to display in the background of the banner. A custom color picker is provided to choose the color for both. (right image) [13]
– Degree: You can set the degree (0 to 360) of the gradient color for the banner’s background.
Image for Background: If you select the “Image” to set as a background, you need to upload the image. [14]
Video for Background: If you select the “Video” to set as a background, you will get two more options to set the background of the banner. You can either Upload a File or insert an External Link.
Upload (local video): You can select and upload the local video file from your system to set the banner’s background. (left image) [15]
Note: You can upload the local video maximum of 2MB size. The video’s size must not be more than 2 MB. The supported video files are MP4, M4V, MPG, WMV, MOV.
External Link: You need to insert the video’s URL in the “Video URL” box to set the banner’s background.
(right image) [16]
Note: We can support Youtube & Vimeo platforms as external video links.
Banner Height (px): Insert the height of the banner that will be displayed on the customer portal.
After configuring the “Banner” widget, click on the Save button to save the configuration and publish the page to apply the changes. [17]