3.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.

1. Add Slider to the landing page

• Click on Widgets in the sidebar of the editor.

• Select Slider from the Media section.

• Choose the Slider element and drag it onto your landing page.

2. Slider Editor

2.1. Content Editor

To access the Content Editor, click on the Slider widget you wish to modify on the screen and select Content from the quick settings bar.

• Click "+ Add" to add a new slider element.

• Click and drag to move slider elements.

• Click the icon on each slide to access settings: Duplicate, Set as default, Rename, Content, Delete.

2.2. Design Editor

To access the Design Editor, click on the Slider widget you wish to modify on the screen and select Design from the quick settings bar.

• Align: Helps you align the Slideshow within the container, see details here.

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

• 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, see details here.

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

• Slider settings: Allows you to customize settings related to the display and functionality of the slider.

  • 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.

  • Perview: 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 small preview images below or next to the default slider, allowing users to preview and select the slide they want to view.

  • Enable: Displays thumbnails in the slideshow.

  • Perview: Specifies the number of thumbnails displayed simultaneously in the thumbnail area.

  • Vertical: Sets the orientation of thumbnails (vertical or horizontal).

  • Loop: Allows thumbnails to loop as users scroll or navigate through them.

  • Spacing: Adjusts the gap between thumbnails.

  • Width: Adjusts the width of the thumbnails.

• Dots: Help users identify the number of slides and which slide is currently being displayed in the slider.

  • Enable/Disable: Allows you to turn the dot indicators on or off. When disabled, the dots will not be shown.

  • Basic: Customize general settings for the basic, unselected dot indicators.

    • Width: Adjust the width of the dots (unit: px). Increase or decrease the size to fit your design.

    • Height: Adjust the height of the dots (unit: px) to ensure balance with the slider's interface.

    • Background: Select a background color for the dots. You can use a color palette or input a custom color code.

    • Border: Customize the border and corner radius of the dots.

  • Selected: Allows customization of general settings for the selected dot indicator.

    • Background: Select a background color for the dots. You can use a color palette or input a custom color code.

    • Border: Customize the border and corner radius of the dots.

• Button: Enable/disable and customize the navigation buttons (left/right) for the slider.

2.3. Advanced Editor

To access the Advanced Editor, click on the Slider you wish to modify on the screen and select Advanced from the quick settings bar.

• Animation: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively, see details here.

• Desktop/Mobile sync design: Allows you to set synchronization options for the design between desktop and mobile, see details here.

• Position type: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users, see details here.

• Custom advance: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code, see details here.