Documentions

Using Super block slider

Editor block list

Add super block slider to the editor.

Slider toolbar

Super block slider toolbar

Visible when Slider block is selected.

  • Alignment, this option is only visible if your theme supports alignments.
    • Align left, align slide left.
    • align center, align slide center.
    • align right, align slide right.
    • Wide width, wide slider.
    • Fill width, full width slider.
  • Add new slider, create a new single slide.

Slider settings

Sider panel settings

Visible when Slider block is selected.

  • Initial selected slide, first slide to show when the slider load.
  • Transition animation speed, transition animation speed. In seconds or milliseconds. e.g. 1.5s, 1500ms.
  • Transition animation, speed curve of the transition.
  • Autoplay, auto rotate to next slide.
  • Autoplay timing, interval between slides. In seconds or milliseconds. e.g. 1.5s, 1500ms.
  • Loop slides, infinite loop slides.
  • Pause mouse over, pause when mouse cursor is over slider.
  • Show arrows, visibility of previous and next arrows.
  • Slider indicator, type of indicator.
    • None, don’t show indicator.
    • Dots, dots indicator.
    • Titles, title indicator.
  • Navigation color, color of arrows, dots, and titles.
  • Height of slider, control the slider height.
  • Width of slider, control the slider width.

Single slide settings

Single slide, side panel settings

Visible when Single slide is selected.

  • Edit slider settings button, quick access to Slider settings.
  • Set focus, sets background center point.
  • Background size, controls how the background image is sized.
    • Auto:
    • Contain: constrained within slide.
    • Cover: stretched to cover the slide.
    • Fill: stretched + constrained
  • Enable lazyload, start loading background image when visible on screen. (Recommend keeping this disabled)
  • Content vertical alignment
    • Default: inherit from theme vertical alignment.
    • Center: vertical align center.
    • Bottom: vertical align bottom.
  • Background overlay
    • Solid background color, overlay the slide with solid color.
    • Gradient background color, overlay the slide with gradient color.
      • Linear, apply a linear gradient.
      • Radial, apply a radial gradient.
    • Overlay opacity, control the opacity of overlay.