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.
Many effects can be adjusted to be visible on hover.
You can even add an overlay with the title and text and use them as links.
Buttons
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.
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.
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.
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
Vinegar Gummies
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.
Or use 1-10 star ratings.
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.
Highly recommended!
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.
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
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.
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.
Daphne Westland
Art DirectorDaphne 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.
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.
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.
Conclusion
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!