If you’ve been using the Gutenberg editor in WordPress, you may have noticed that it doesn’t come with a built-in slider block. But don’t worry—adding a beautiful, responsive slider to your site is simple when you use the Spectra plugin.
In this guide, I’ll walk you through how to install Spectra, activate only the blocks you need, and create a stunning slider directly inside the Gutenberg block editor.
Install and Activate the Spectra Plugin
1️⃣ Go to your WordPress Dashboard → Plugins → Add New.
2️⃣ Search for Spectra and click Install.
3️⃣ Once installed, click Activate.
💡 Spectra comes with many blocks, but you can disable the ones you don’t need to keep your site lightweight.
Activate Only the Slider Block
1️⃣ Go to Spectra Dashboard → Blocks.
2️⃣ Deactivate all blocks except Slider (and any essential ones like Heading, Image, Button, etc.)
This ensures your website stays fast and clutter-free.
Create a New Page and Add the Slider
1️⃣ Open a new page in Gutenberg.
2️⃣ Click the “+” Add Block button.
3️⃣ earch for Slider and insert it into your page.
By default, the slider comes with three slides. You can add more, duplicate slides, or remove them as needed.
Customize Your Slider
Add Background Images
✅ Select a Child Slide Container → Go to Styles → Background.
✅ Upload an image from your Media Library or use Spectra’s built-in stock image search.
✅ Adjust Minimum Height for proper display.
Add Overlay Colors
✅ Under Styles → Overlay, add a semi-transparent color to make your text more readable.
Style the Text & Buttons
✅ Select the Info Box inside the slide.
✅ Change font size, color, and padding under the Styles tab.
Make Your Slider Full Width
Some WordPress themes (like Twenty Twenty-Five) require layout adjustments:
1️⃣ Switch to Full Width Layout in your page editor.
2️⃣ Remove unnecessary padding from each slide’s container.
3️⃣ Save changes and preview your page.
Adjust Navigation Arrows & Dots
✅ Go to Navigation Settings inside the slider.
✅ Enable/disable Arrows and Dots.
✅ Adjust size, color, border radius, and position.
Optimize for Mobile
✅ Use the Responsive View inside Gutenberg.
✅ Adjust padding, text size, and image scaling for mobile and tablet devices.
Why Use Spectra’s Slider Block?
✅ No extra page builders needed – works directly inside Gutenberg.
✅ Lightweight & fast – activate only the block you need.
✅ Highly customizable – control layout, animations, and design.
✅ Free & beginner-friendly – no coding required.
Additional Resource
✅ Watch the Full Video Tutorial on YouTube
✅ Gutenberg Block Editor Documentation
Final Thoughts
Using the Spectra Slider Block is one of the easiest ways to add a responsive slider to your Gutenberg-powered WordPress website. Whether for portfolios, product showcases, or hero sections, this method is fast, flexible, and works with any theme.
