Info Box in Spectra is a versatile block for displaying a box of content (media, text, and button) in creative ways.

With this block, you can show……

This block comes with convenient customization options including images and icons with text and hover effects. You can use it to feature just about any content you want.

In our documentation, you will find a complete breakdown of all the available controls and settings for Info Box so you can highlight key features such as products, services, or ideas on your website using the info box block.

What is Info Box Block in Spectra

Spectra Info Box module perfectly highlights key features such as products, services, or ideas on your website.

The visually appealing and engaging feature box comprises pictures, icons, content, and button that clearly present your message and draw people to explore your website.

How To Use The Info Box Module

Now that we understand why you might want to use Spectra Info Box block, let’s look at how you can create one in a few simple steps.

Note that for this tutorial, we’ll assume you already have Spectra installed and activated on your website.

Once you have Spectra installed on your site, you can simply follow the steps below.

1. Add the Spectra Info Box Block

The first step in using the block is to select and place it where you’d like on the page:

To get started, navigate to the page or post where you want to insert the info box. Then, click on the + icon at the top of the screen.

This will launch the Spectra interface. From the blocks on the left, search for and select the Info Box block.

2. Set up your Info Box Content (Media, Text, & Button)

Infobox allows adding a Prefix that displays the above title. Title and Description can be used to make the block more descriptive. With these options, an infobox can be used as a multipurpose box. You can enter the required details and use this block to display pricing plans, features of the product, combos, and much more.

3. Setup Image / Icon Selector and Positioning

You can add images/icons to the infobox. It loads the full Font Awesome library with around 1800+ icons. You can choose icons from the library or can use the image. Block also provides several options for icon/image position. You can place icons/images with respect to the heading and description.

4. Setup Easy Call To Action

You can easily add a Call To Action in the form of text, a button, or a complete box. You can customize your Call to Action in any way you want.

5. Customizable Info Box with Separator

This Block provides a separator line between the title and the description. You can choose a separator style from Solid, Double, Dashed, or Dotted. You can even set the Color, Thickness, and Width of the separator.

6. Styling Your Spectra Info Box Block

Under the ‘Style’ tab, you can see the ‘Title’ and ‘Description’ modules to set the typography and color options.

You can use the styling options to change the appearance of every element of your info box.

7. Save and Publish Your Info Box

When you’re satisfied with the look and contents of your Spectra Info Box, the only thing left to do is to save and publish it.

You can do so by selecting the Publish button at the top right side of the screen.

That’s it!

Then you can preview your Info Box on your website to confirm that it looks as you want it to.

Frequently Asked Questions

We hope this article has been helpful. If you have any questions, please feel free to leave a comment below.