Spectra WordPress Blocks: A New Era of Design


Designing a website has never been easier with the introduction of Spectra WordPress blocks.

Spectra blocks take website design to a whole new level, offering users a range of high-quality, customizable design elements that can make a website stand out from the crowd.

These blocks are designed to be visually stunning and are optimized for performance, ensuring that your website is fast and responsive.

The blocks are also highly customizable, allowing users to tweak them to fit their brand’s specific needs.

Users can choose from a range of colors, fonts, and layouts to create a unique design that reflects their brand’s personality.

Table Of Contents

If you have a longer page or post you can use a Table of contents block for better visibility, as I do here.

In Table of Contents settings, you can adjust many parameters and define which headings will appear in it H1, H2, H3…

Advanced Heading

With an advanced heading block, you can get stylized titles with a color gradient, different colors of words in the title, subtitle, and separator between them.

Your Attractive Heading1

Sub Heading

Your Attractive Heading 2

Image block

Image block brings new possibilities for styling images and photos.

You can add many types of masks, define borders or add shadows.

A picture with border and a different color on hover
A picture with a blob mask
Picture with shadow

Many effects can be adjusted to be visible on hover.

Picture slide on hover
A picture with zoom-in on hover


Picture with overlay

You can even add an overlay with the title and text and use them as links.


Button’s block extends Gutenber’s classic capabilities with gradient colors, borders, shadows, and icons.

If that is not enough for you, you can also use a special Marketing button block.

Info box

The Info Box can be adjusted with many preset options depending on your needs.

In this block, you can use icons or pictures.

An icon can be stacked or framed with a round or square shape.

Info Box

Here is an Info Box example.

On all elements, colors can be changed on hover. The info box doesn’t have its background color.

For different background colors just put the info box into the container.

Counter block

A counter block is a pretty new block in the Spectra collection.

The first block presents a text counter with an icon.

The second block is the circle counter and the third is the bar counter.

Spectra is at-
Spectra is at:

In Counter block settings you need to add starting number, ending number, total number, decimal places (if any), number prefix and suffix, and animation duration.

Count down

If you want to mark the time until when the sale will last or until when members can sign up for the course, you can do it using the Countdown block.


Almost all parameters of this block can be edited if it would fit anywhere on the web page.

Icon list

The Icon list block can be useful if you are listing multiple items. Each item can also be defined as a link and have its own different icon.

Item 1
Item 2
Item 3

Icon block

In addition to the Icon list block, you can also find the Icon block. You will have hundreds of icons at your disposal that you can style in an extremely large number of ways.

Soon it will be possible to add your own icons in SVG format!

Price list

A price list is a block intended for defining product prices.

By default, it comes as a quadruple element, but by deleting three child elements you can turn it into a single element.

pure nature 3 bottles

Pure Nature

On sale!
vinegar gumies cuted

Vinegar Gummies

On sale!

Star ratings

Some elements come with his star ratings.

But if you need to place ratings on some particular place you can do that with the Star rating block.

What do you think about Spectra blocks?

Or use 1-10 star ratings.

What rating do you want to give them?

Modal block

The modal block is used for simple popup messages, for example, sign up for news.

Just press on the button and you will see how the popup window will look with the contact form in it.

You can edit the size of the popup window and the way it is activated (using a button, icon, text, or image).

Testemonials carusel block

Yes, and that block exists in Spectra.

If you use pictures on the carousel you will have to pay a little attention to the mobile settings to make everything look as good as possible.

Lottie animation

Lottie animation block accepts simple, web-optimized animations.

You can find many simple animations, like this on their website.

If you want some special animations, additionally compressed, you will have to pay for this service.

Schema blocks

Spectra also has blocks in it, which when filled out correctly, Google displays as rich results.

Those blocks are the FAQ block, How to block, and Review block.

Here I presented only the FAQ block, while the other blocks will be explained in more detail in one of the following posts.

Slider block

Spectra Slider block is more universal than the one described above.

You can use buttons, icons, images, and borders as done in this example.

You can see that this block is optimized for all types of devices.


Slide 1

Here is a slider with the picture, separator, and transparent button.

Slide 2

Here is a slider with an icon with a rounded button.

Slide 3

web tools

Slider with image only and picture as link.

Tabs block

In places with a lot of text Tabs block will be helpful.

You can arrange tabs horizontally or vertically and choose from many offered presets.

Tab1 text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit 3

Gallery block

The gallery block is one of the blocks that will reduce the need for additional plugins.

In the gallery settings, we can define almost everything, and it is also possible for images to be displayed in the form of sliders.

One of the options just implemented is Lightbox.

Images can be displayed in sequence, and clicking on them will open them in full size.

One big plus for Spectra!

Or do you want to use images as sliders? No problem.


Blockquote block to display your blockquotes in a new, more stylized way.

You can also include a Twitter button so others can share the wise sayings.

I don’t regret that others stole my ideas. I regret that they don’t have their own. (About inventions and patents)

Team block

There is also an indispensable team block to introduce your collaborators.

As I already mentioned, if one of the blocks does not have a background color, you can insert it inside the container block.

There you will then be able to set a color, image, gradient, or animation as the background.

You will also be able to define the edge as well as the effect shadows and some hover effects.

women with flower

Daphne Westland

Art Director

Daphne Westland trained as a graphic designer and for the last 15 years has been working as a freelance editorial art director. 

Spectra templates

Spectra comes with a whole set of predefined templates.

There we have everything from complete pages to ready-made blocks or even wireframes.

Spectra templates

If you want to convert a classic Gutenberg block into a Spectra block and adjust the settings for the tablet, you can read how to do it in my previous post:

How to convert Gutenberg blocks to Spectra?

Spectra blocks speed

As you can see there are many different blocks here.

You probably also know that some blocks can slow down a website.

But not Spectra blocks. Here is a test I did on Google Site Speed for this post.

Spectra blocks speed

I think 99% speed on mobile is great.

It might be a bit smaller in remote parts of the world since I’m still not using a CDN.


Spectra can significantly improve the appearance of your website without losing load speed.

The authors have promised a Pro version with even more options, as well as a complete theme builder.

As you can see here I focused more on the external appearance of the blocks and the different styles we can get with them.

If you want more technical information, you can do so on the website of Brainstormforce, which are the authors of the blocks.

In addition, you can read about specific settings of Spectra blocks here:

Spectra: #1 Website Builder For Gutenberg Blocks Plugins For WordPress

You will be informed about all the news that appears.

Stay present!

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Share your love

Leave a Reply

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