Summary

  • Overview
  • Video Lesson
  • Add Slider
  • Add New Slide
  • Add Elements To Slide
  • Slider Resize
  • Slider Properties
  • Slider Animation
  • Slider in Mobile Views
  • Swipe For Sliders

Overview

Use the Slider Element to present your content as slides in a Block. Unlike the Full-Width Block Slider, the Slider Element is usually smaller and is only a component in a Block, similar to sliding cards, for example, Testimonials.

slider.jpg

Video Lesson

Add Slider

You can add the Slider Element from the Add Elements list in the Top Bar.

adding-slider.png

Add New Slide

You can add a new empty Slide in the Slider Element or duplicate any existing one.

adding-new-slide.png

Add Elements To Slide

You can include any Element in a slide, not only Images or Text. Each Slide can have different combinations of Elements.

adding-element-to-slide.png

Slider Resize

You can modify the Size of the Slider to be unequal to the Block size.

slider-resize.gif

Slide Order

You can change the Slide Order by dragging the Slide Bar at the top of a Slide.

slide-reorder.gif

Slider Properties

For the Slider Element, you can customize properties, including the Animation, Arrows, and Indicators.

slider-properties.png

Slider Indicators

You can choose the Shape for the Slider Indicators. The Indicators can be linear or circular.

circle-slider-indicators.png

Change Slide with Arrows (Editor)

You can click the Slider Arrows to change Slides. When you click the Slider Arrow in the Preview, you will see the Animation while switching Slides.

slider-arrows.gif

Slider Arrows

You can modify the Icon Style for the Slider Arrows. You can adjust the Width and Height of the Arrows.

slider-arrow-width-height.png

You can also place the Slider Arrows outside the Slider. You can also drag the Arrows outside the boundaries of the Slider elements, which allows you to create interesting layouts used in modern web design. You can also move the Slide Indicators freely.

slider-arrows.png

Slider Animation

You can specify the Animation properties for the Full-Width Block Slider.

slider-animation.gif

Element Animation in Slides

You can also animate Elements added to Slides of the Slider Element.

adding-element-animation.gif

You can use the Animation on all Elements.

slide-animation-property.png

Slider in Mobile Views

You can modify each Element in the slide size and position for each Mobile View.

slider-responsive.png

Swipe For Sliders

You can use the swipe for Sliders on mobile devices.

swipe-slider-mobile-devices.gif