Summary

  • Overview
    • Slider vs. Full-Width Slider
  • Adding Slider
  • Adding Items and Elements
    • Adding New Slide
    • Adding Elements to Slides
  • Slider
    • Resizing
    • Properties
    • Slide Order
    • Animation
    • Indicators
    • Slide Change with Arrows (in Editor)
    • Arrow Styles
    • Arrows out of Slider
  • Slider in Mobile Views

Slider Overview

Use the Slider Element to present content in a Block as Slides. The Slider can have any size, for example, not the same size as Block.

slider.jpg

Slider and Full-Width Slider

The Slider Element is boxed, and it can have different widths. There is also the Full-Width Slider, which only can be Block-wide.

slider-vs-full-width-slider.png

Adding Slider

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

adding-slider.png

Adding Items and Elements

Adding New Slide

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

adding-new-slide.png

Adding Elements in Slides

In a Slide, you can put any Elements, not only Images or Text. Each Slide can have different combinations of Elements.

adding-element-to-slide.png

Slider

Resizing

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

slider-resize.gif

Properties

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

slider-properties.png

Slide Order

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

slide-reorder.gif

Slider Animation

You can specify the Animation properties for the Full-Width 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 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. Clicking the Slider Arrow in the Preview, you will see the Animation while switching Slides.

slider-arrows.gif

Arrow Styles

You can modify the Icon Style for the Slider Arrows.

icon-styles-for-slider-arrows.png

Arrow Positioning

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 in Mobile Views

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

slider-responsive.png

## Summary - Overview - Slider vs. Full-Width Slider - Adding Slider - Adding Items and Elements - Adding New Slide - Adding Elements to Slides - Slider - Resizing - Properties - Slide Order - Animation - Indicators - Slide Change with Arrows (in Editor) - Arrow Styles - Arrows out of Slider - Slider in Mobile Views ## Slider Overview Use the Slider Element to present content in a Block as Slides. The Slider can have any size, for example, not the same size as Block. !slider.jpg! ### Slider and Full-Width Slider The Slider Element is boxed, and it can have different widths. There is also the Full-Width Slider, which only can be Block-wide. !slider-vs-full-width-slider.png! ## Adding Slider You can add the Slider Element from the Add Elements list in the Top Bar. !adding-slider.png! ## Adding Items and Elements ### Adding New Slide You can add a new empty Slide in the Slider Element or duplicate any existing one. !adding-new-slide.png! ### Adding Elements in Slides In a Slide, you can put any Elements, not only Images or Text. Each Slide can have different combinations of Elements. !adding-element-to-slide.png! ## Slider ### Resizing You can modify the Size of the Slider to be unequal to the Block size. !slider-resize.gif! ### Properties For the Slider Element, you can customize properties, including the Animation, Arrows, and Indicators. !slider-properties.png! ### Slide Order You can change the Slide Order by dragging the Slide Bar at the top of a Slide. !slide-reorder.gif! ### Slider Animation You can specify the Animation properties for the Full-Width 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 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. Clicking the Slider Arrow in the Preview, you will see the Animation while switching Slides. !slider-arrows.gif! ### Arrow Styles You can modify the Icon Style for the Slider Arrows. !icon-styles-for-slider-arrows.png! ### Arrow Positioning 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 in Mobile Views You can modify the size and position of each Element in Slides for each Mobile View. !slider-responsive.png! ##