No results found. Try again with different words?

Search must be at least 3 characters.

Slider Block

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 E-Commerce 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, Navigation, and Content modules.

Slider:

Here, you can see a toggle button to enable autoplay. This setting will only apply when you are viewing the live page, not while you are editing. You can adjust the autoplay speed, and you can also choose to pause the slideshow when it is paused or hovered over. You can adjust the height of the slide, the number of slides per show, and the gap between slides. Finally, you can set the transition effect and transition speed. (To illustrate how the height of the slide changes, we have added a background image to the slides in the reference video.)

Navigation:

Under the navigation, you have toggle buttons for arrows and dots. Also, there is a toggle button that allows you to enable hash navigation. This feature allows you to directly navigate to a slide from the URL by using the slide navigation slug. The slide slug can be set by clicking on the child slide blocks.

Content:

The vertical alignment options allow you to control how the content in the content module is aligned vertically within the slider. You can choose from top, middle, bottom.

Style Options

The slider module style options allow you to customize the appearance of your slider. You can choose the background type, add a border, apply a box shadow, and set the spacing. You can also customize the appearance of the arrows and dots.

Background

You can choose the background type for your slider. You can choose a solid color, a gradient, or an image. If you choose a solid color, you can also choose the opacity.

Border

You can add a border to your slides. You can choose the width, radius, and color of the border. You can also choose different border colors for when the slide is normal and when it is hovered.

Box shadow

You can add a box shadow to your slides. You can choose the color, opacity, spread, blur, and inset of the box shadow.

Spacing

You can set the padding and margins for your slides. This will control the amount of space between the slides and the edges of the slider.

Arrows and dots

You can customize the appearance of the arrows and dots that are used to navigate the slider. You can choose the color, background color, and padding of the arrows and dots.

Was this article helpful?


Did not find a solution? We are here to help you succeed.

Slider Block

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 E-Commerce 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, Navigation, and Content modules.

Slider:

Here, you can see a toggle button to enable autoplay. This setting will only apply when you are viewing the live page, not while you are editing. You can adjust the autoplay speed, and you can also choose to pause the slideshow when it is paused or hovered over. You can adjust the height of the slide, the number of slides per show, and the gap between slides. Finally, you can set the transition effect and transition speed. (To illustrate how the height of the slide changes, we have added a background image to the slides in the reference video.)

Navigation:

Under the navigation, you have toggle buttons for arrows and dots. Also, there is a toggle button that allows you to enable hash navigation. This feature allows you to directly navigate to a slide from the URL by using the slide navigation slug. The slide slug can be set by clicking on the child slide blocks.

Content:

The vertical alignment options allow you to control how the content in the content module is aligned vertically within the slider. You can choose from top, middle, bottom.

Style Options

The slider module style options allow you to customize the appearance of your slider. You can choose the background type, add a border, apply a box shadow, and set the spacing. You can also customize the appearance of the arrows and dots.

Background

You can choose the background type for your slider. You can choose a solid color, a gradient, or an image. If you choose a solid color, you can also choose the opacity.

Border

You can add a border to your slides. You can choose the width, radius, and color of the border. You can also choose different border colors for when the slide is normal and when it is hovered.

Box shadow

You can add a box shadow to your slides. You can choose the color, opacity, spread, blur, and inset of the box shadow.

Spacing

You can set the padding and margins for your slides. This will control the amount of space between the slides and the edges of the slider.

Arrows and dots

You can customize the appearance of the arrows and dots that are used to navigate the slider. You can choose the color, background color, and padding of the arrows and dots.

Leave a Reply

Your email address will not be published. Required fields are marked *

Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Grab this rare opportunity to save up to 50%

Wait!

You're Missing the Biggest Deal of the Year

00
Months
00
Days
00
Hours
00
Minutes
00
Seconds

100% Risk-Free Money Back Guarantee!

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.