Spectra Slider Block is an intuitive tool for Spectra Page Builder. Make use of the Slider block to create professional-looking, responsive sliders with ease. If you have an ECommerce website, you can create visually stunning product sliders to showcase your products on your website.
Use of Slider block in Spectra
This slider is a great slider module that you can use to showcase images, display some text, and also you can put a CTA on it. For this reason, it can be a quick way to create a hero slider. You also have customization options, like setting the typography, colors or the style of your text. The slider has the option to set a slider background image, where you can adjust the size of the image.
How to use Slider block?
First, make sure you have installed and activated the Spectra plugin.
To insert the Slider block, click the Toggle block inserter + icon and look for the Slider block.
General Settings
Under General Settings, you can see Slider and Content modules.
Slider:
- You have the option to enable the Autoplay option for the slider. This setting will only take effect once you are on the live page, and not while you’re editing.
- You can set the Autoplay Speed in the ms dimension.
- You can set the Pause On from the available options i.e., Hover, Interaction, and None.
- Infinite Loop: Have the slides rotate in an infinite loop without stopping.
- For the Navigation purpose, you can enable or disable the toggle buttons for Arrows and Dots
- Transition: Set the transition of the slides as slide, fade, or Flip.
- Transition Speed: Set the time it takes for the slides to rotate.
Content
Vertical Alignment: Set the position of the content as top, middle, or bottom.
Style Options
Under the Style tab, you can see Background, Border, Box Shadow, Spacing, Arrows and Dots modules.
Background
- Color: Set the background color for the slide
- Gradient: Set the Gradient color for the slide
- Image: Choose an image from the media library
Border
You can select the border style from the various available options from the dropdown here.
Box Shadow
You can set the box shadow for the slides when it is normal and hovered. You can also set the box shadow position and color here.
Spacing
You can set the inner spacing between the edge of the content and the edge of the slide.
Arrows and Dots
You can set the Color, Size, and Padding for the Arrows and Dots here. Also, you can see the options for Arrow Distance from Edges, Top Margin for Dots.
