4.2. Slider

The Slider widget is a tool that allows you to display a series of images, videos, or content in a horizontal or vertical sliding format. This is an effective way to capture users' attention and present a lot of information in a limited space.

9.1. Add Slider to the Landing Page

• In the sidebar, click on Widgets, then select Slider.

• Click and drag the Slider widget into your landing page.

9.2. Slider Editor

9.2.1. Content Editor

• Click on the Slider widget and select Content from the quick setup bar to open the Slider content editor.

• Click on Add to add a Slide.

• Click on the settings of each slide to set the options: duplicate, set as default, rename, change content, delete

9.2.2. Design Editor

• Click on the Slider widget and select Design from the quick setup bar to open the Slider design editor.

• Align: Helps you align the Slideshow within the container. For more information, see Align.

• Sizes: In the design editor, allows you to adjust the size and position of elements on the website. For more information, see Sizes.

• Display on: Allows you to control the display of the Slider on different devices, including Desktop and Mobile.

• Styles: Customize the background color and shadow effects for the entire slider or specific slides within it. For more information, see Styles.

• Border: Allows you to add and customize the border around the Slider, and you can also adjust the border radius. For more information, see Border.

• Slider: Settings related to the functionality of the slider, such as transition effects between slides, transition speed, and autoplay mode.

+ Show navigation button: Display or hide the navigation buttons (arrows) for the slider.

On: Navigation buttons will appear, allowing users to manually navigate between slides.

Off: Hides the navigation buttons, suitable for when you want the slider to autoplay or when you don't want to distract users.

+ Transition Direction: Determines the movement direction of the slides during transitions: left to right, right to left, bottom to top, top to bottom

+ Transition Duration: Adjusts the time for the transition effect between slides.

+ Per view: Determines the number of slides displayed simultaneously in the slider's viewport.

+ Spacing: Adjusts the spacing between slides.

+ Infinite loop: Allows the slider to automatically repeat when it displays the last slide.

+ Autoplay: Automatically runs the slider without user interaction.

+ Time on each item: Sets the display time for each slide before moving to the next slide (only applies when Autoplay is enabled).

+ Gap: Sets the distance between slides in the slider.

• Thumbnails: Displays thumbnail images below or beside the slider, allowing users to preview and select the slides they want to view.

Enable: Turn on or off the feature to display thumbnails in the slider.

When enabled:

+ Per view: Determines the number of thumbnails displayed simultaneously in the thumbnail area.

+ Vertical: Choose the display direction of the thumbnails (vertical or horizontal).

+ Loop: Allows thumbnails to repeat when users scroll or navigate through them.

+ Spacing: Adjusts the spacing between thumbnails.

+ Height: Determines the height of the thumbnails.

• Dots: Displays dots below the slider, representing each slide, making it easy for users to switch between slides.

Enable: Turn on or off the feature to display dots below the slider.

• Regular: Customize the appearance of the dots when they are not selected (normal dots).

Width: Adjust the width of the dots.

Height: Adjust the height of the dots.

Fill: Choose the color or fill style of the dots when they are in their normal state.

Border: Set the border for the dots, including color, thickness, and style of the border.

• Selected: Customize the appearance of the dots when they are selected (current dot).

Fill: Choose the color or fill style of the dots when they are selected. This color is typically more prominent than the normal state to help users easily identify the current slide.

Border: Set the border for the selected dots, including color, thickness, and style of the border. This can help the selected dots stand out more.

• Button: Add and customize navigation buttons (left/right) for the slider or other buttons within the slide.

Previous button / Next button: Navigation button to go back to the previous slide / Navigation button to move to the next slide in the slider.

+ Icon: Choose or upload an icon for the "Previous" button (usually a left arrow). You can select from the available icon library or use a custom icon.

+ Color: Determine the color of the button to match the design of the slider. You can choose a color for the icon or the background of the button.

+ Width: Adjust the width of the button. Enter a value or use the slider to resize the button.

+ Height: Adjust the height of the button. Enter a value or use the slider to resize the button.

+ Top: Enable or disable the vertical position of the button from top to bottom. Adjust the position of the button as a percentage of the slider's height. For example, 10% from the top may place the button near the top of the slider.

+ Right: Enable or disable the horizontal position of the button from right to left. Adjust the position of the button as a percentage of the slider's width. For example, 10% from the right may place the button near the right edge of the slider.

+ Left: Enable or disable the horizontal position of the button from left to right. Adjust the position of the button as a percentage of the slider's width. For example, 10% from the left may place the button near the left edge of the slider.