Slider

Slider іs a dynamic visual element that showcase multiple images or content in a rotating format. It's a perfect solution for highlighting key features, products, or testimonials on your website.

Adding Slider

Option 1

  • Hover over the desired section, and click the Add Element:
  • Choose the Slider element from the modal that appears:

  • After you choose the element from the list, drag it to the desired section.

Option 2

  • Hover over the left sidebar of the Site Editor and click Build (+) button:

  • Choose the element:

  • After you choose the element from the list, drag it to the desired section.

Moving and Resizing the Slider

Please refer to the Elements Management article to learn more about moving and resizing elements.

Customizing a Slider

Hover over a Slider to access its management options: change the slider's background, adjust the number of slides, and click the Edit button in the top-right corner to modify its Settings and Design.

Slider Background

  • Click the Background button to set up the background of your Slider.
  • Select Add Photo, Video, or Map:

  • Adjust the Opacity and change the Background Color.

Number of Slides

  • Click + in the top-left corner to add a new slide.
  • Click - to delete the selected slide.

Please Note: The number of dots at the Slider's top or bottom corresponds to the number of slides.

Settings Tab

  • Loop Slides: Select to loop the slides for the autoplay. The slideshow will keep replaying until the visitor stops it.
  • Autoplay: Drag the Autoplay timing control to set the transition time between slides (in seconds). The autoplay stops whenever a visitor hovers over a Slider. When the cursor is removed, the autoplay resumes.
  • Align Vertically: Select the Align Vertically control to place the elements into the center of the Slider.
  • Slider Effect: Choose between Smooth, Bouncy, Overshoot:

Navigation Tab

  • Theme: Select a dark or light theme for displaying slider arrows and bullets.
  • Show Dots: Display or hide the slide indicators.
  • Show Arrows: Select the arrows position: Default, Left, or Right. Deselect the control to hide arrows from the Slider.

Using a Slider as a Background

You can also set a slider as the background of any Section:

  • Hover over the desired Section, and click the Background option on the top-right corner: and select Slider:

Related Articles