You can add the Slider widget to display the details in the slides to the customers in the customer portal. Drag and drop the Slider widget and click on the ‘edit’ icon to configure the settings.
(+) Add Slide
First, you need to add the slides by clicking on the (+) Add Slide. You need to configure the following options for the slider.
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 on the page when the portal users access the customer portal.
By clicking on any template, the template is selected, and you will get the preview.
- Only Content
- Content (left) & Image (right)
- Image (left) & Content (right)
Slider’s Header:
Text: Insert the text label to be displayed as the header of the slider.
Color: Choose the color for the header text. A custom color picker is given to choose the color.
Slider’s Sub header:
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 slider that will display on the customer portal. The image size should not be more than 1MB and allowed file types are JPG, JPEG, GIF, BMP, PNG, SVG.
Alt-Text: You can insert the “alternative text” for an image.
Note:
You will get the “Upload Image” option if you have chosen a slider 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 slider.
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:
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.
– Select Page: You can select the specific portal page to redirect the portal users when they click on the button.
– URL: You can insert the URL to navigate the portal users to that URL when they click on the button.
Background of slider: You can set the background of the slider that will be displayed on the customer portal. There are three options given: Color, Image, or Video.
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 slider. You can either select Solid or Gradient for the slider background.
– Solid: You need to choose the “Color” to display in the background of the slider. 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 slider. A custom color picker is provided to choose the color for both. (right image)
– Degree: You can set the degree (0 to 360) of the gradient color for the slider’s background.
Image for Background: If you select the “Image” to set as a background, you need to upload the image.
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 slider. 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 slider’s background.
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 slider’s background.
Now, by clicking on the Save button, the slide will be added. Similarly, you can add more slides that you want to display in the customer portal.
You can see the newly added slides under the Slides section. You will see three options for the added slider: Settings, Clone, and Delete.
Settings: You can edit the slide to update/change any configuration and the details.
Clone: You can duplicate the slide with the same configuration and details.
Delete: You can delete the unwanted slide from the slider. By clicking on it, you will get the warning message and after confirming the message, the slide will be deleted.
Slider Settings
You need to configure the common settings for the sliders (slider content) to display in the customer portal.
Enable Auto Slide: This option will help to play the added slides automatically as per the timer. By ticking the checkbox, you need to set the timer to play the slides.
Transition: Apply the slider effects. You will have two effects: Slide or Fade.
Navigation
You can display the navigation settings of the slider.
Enable Arrow: Check the box if you want to display the arrow on the slide.
Enable Pagination: Check the box to enable the pagination in the slides. You will have three designs (pagination type) to display the pagination below the slider.
Slider Height (px): Insert the height of the slider that will be displayed on the customer portal.
Note: If you have not set any height or set it to 0, the slider height will be set to auto.
By scrolling down, you will find the Save button to save the slider settings and publish the page to apply the changes.