In this guide, we’ll explore four more of its main widgets: Icon, Slider, Testimonials, Info Box, and Video. Each section will cover the widget’s purpose, how to add it to a page, and basic customization options. Let’s get started!
1. Icon Widget
Purpose
The Icon widget lets you add small, stylish icons to your pages. It’s great for highlighting features, adding visual cues, or decorating lists—like showing a checkmark for benefits or a phone icon for contact details.
How to Add It
Open the WordPress block editor on the page or post you’re editing.
Click the “+” button to open the block inserter.
Type “Icon” in the search bar.
Select the Spectra Icon block to insert it.
Customization Options
Once the Icon block is added, tweak it using the right-hand sidebar:
Icon Selection: Choose from a library of icons (e.g., Font Awesome or Spectra’s built-in options).
Size: Adjust the icon’s size to fit your design.
Color: Change the icon’s color to match your theme.
Alignment: Position the icon left, center, or right.
Tip: Pair the Icon widget with text blocks to create visually appealing feature lists.
2. Slider Widget
Purpose
The Slider widget allows you to display a carousel of images or content, perfect for showcasing portfolios, product photos, or promotional banners. It adds a dynamic, interactive element to your site.
How to Add It
In the block editor, click the “+” button.
Search for “Slider” in the block inserter.
Select the Spectra Slider block to add it.
Add slides by uploading images or inserting content blocks within the slider.
Customization Options
Customize the Slider block with these settings:
Slides: Add or remove slides and rearrange their order.
Navigation: Enable arrows or dots for users to navigate the slides.
Autoplay: Set the slider to auto-rotate and adjust the speed.
Height and Width: Control the slider’s dimensions.
Tip: Keep slide content simple (e.g., an image with a short caption) for the best user experience.
3. Testimonials Widget
Purpose
The Testimonials widget is designed to display customer reviews or feedback, helping build trust and credibility. It’s ideal for business sites or portfolios.
How to Add It
Click the “+” button in the block editor.
Search for “Testimonials” in the block inserter.
Select the Spectra Testimonials block.
Add a testimonial by entering the text, author name, and optionally an image.
Customization Options
Adjust the Testimonials block using the sidebar:
Layout: Choose a single testimonial or a carousel of multiple reviews.
Content: Edit the testimonial text, author name, and title (e.g., “Happy Customer”).
Image: Add a profile photo or logo for authenticity.
Style: Customize colors, typography, and spacing.
Tip: Use real quotes and photos (with permission) to make testimonials more impactful.
4. Info Box Widget
Purpose
The Info Box widget combines text, icons, and buttons into a single block, making it perfect for highlighting key information—like services, features, or quick facts—in an eye-catching way.
How to Add It
In the block editor, click the “+” button.
Type “Info Box” in the search bar.
Select the Spectra Info Box block to insert it.
Fill in the title, description, and optional button or icon.
Customization Options
Tailor the Info Box block with these options:
Icon or Image: Add an icon or image above the title.
Text: Edit the title and description to suit your needs.
Button: Include a call-to-action button with a link, text, and style.
Background and Border: Set a background color or add a border for emphasis.
Tip: Use Info Boxes in a row (inside a Container block) to create a clean, organized feature section.
5. How to Use the Video Widget
The Video widget allows you to embed videos from platforms like YouTube or Vimeo, or upload self-hosted videos, enhancing your site’s multimedia content.
Steps to Use the Video Widget
Add the Video Widget: Click the + icon, search for Video, and select it.
Choose Video Source:
Embed from URL: Paste a YouTube or Vimeo link.
Upload Video: Select a video file from your computer (for self-hosted videos).
Customize the Video Player:
Autoplay: Enable or disable autoplay in the sidebar.
Controls: Choose whether to show video controls like play/pause.
Aspect Ratio: Adjust the video’s width and height ratio.
Add a Caption (Optional): Add a description below the video.
Save Your Changes: Click Update to save.
Example Use Case
Tutorial Page: Embed a YouTube video to provide step-by-step instructions for your audience.
Tip: For self-hosted videos, ensure the file size is optimized to avoid slow load times. Use external platforms like YouTube for better performance.
Keep Exploring Spectra Builder
These widgets—Icon, Slider, Testimonials, and Info Box—are just a glimpse of what Spectra Builder offers. With dozens of other blocks like forms, galleries, and counters, you can experiment to find the perfect tools for your site. To discover more, browse the block inserter or check out Spectra’s pre-built patterns for inspiration.
Happy designing!