Do you love working with the default WordPress block editor? Want some additional blocks and features that not only help enhance user experience but also speed up workflow?
If so, this article is for you!
The block editor has been a part of WordPress since version 5.0. It is focused on an entirely new editing experience with the introduction of the block editor.
Using the block editor, you can now create pages and posts using a more modular approach.
Want to insert a paragraph? Add a paragraph block. Want to insert an image gallery? Add an image gallery block.
You get the idea.
There is a block for just about anything you could ever need to add to a web page and you can do it all without having to add shortcodes or custom HTML.
Then there are block patterns. Another way to speed up page building and save time and effort when designing your site.
Block patterns have not only reduced the time taken to develop an engaging website but have also made working with the block editor a whole lot easier.
So what are blocks and block patterns?
Let’s dive in and find out!
- What are WordPress blocks?
- What are block patterns?
- Why are block patterns so powerful?
- The benefits of using blocks and block Patterns
- Why Spectra is the go-to resource
- List of Spectra blocks
- List of Spectra patterns
- How to add a Spectra pattern to a page
- Editing a Spectra pattern
- Building a page with Spectra patterns
- FAQs For Spectra
- Conclusion
What are WordPress blocks?
Before we jump into block patterns, it makes sense to understand what blocks are.
Blocks are independent elements or components used to add content to a web page.
Different page builders use different names to identify the blocks.
For example:
- Elementor call blocks widgets
- Beaver Builder call blocks modules
- Divi named their blocks elements
Similarly, the default WordPress block editor named it blocks.
To add a block, simply search for one from your WordPress page editor.
Select a block to add it to the page or drag and drop it into position. Add or remove blocks as necessary until you have the framework for your page.
Then edit each individual block until it looks how you want it to look. Do this for each block and you’ll soon have a beautiful web page ready to go!
Now that we know what blocks are, let’s jump into block patterns.
What are block patterns?
Block patterns are ready-made templates made up of blocks that can be added to a page.
These patterns can either contain a single block or a group of blocks, arranged to form a specific layout.
For instance, how would you go about creating a contact page using any WordPress drag and drop page builder?
We’re assuming it’s by adding single elements. First, an element for the header text, then one for the address, another one for the form, and so on. Right?
Using block patterns, all you have to do is import a contact form pattern into your page, similar to the one shown below.
All with a single click!
Import, tweak it to your needs, and you are good to go.
What’s great about block patterns is that once created, you can save them and use them across your website.
In the example above, you have a contact form pattern you can use on every page. Customize it to suit your site design, save the pattern and you can then simply add it anywhere on your site as many times as you like!
Doesn’t this speed up the entire process of creating a web page and, in turn, a website?
We definitely think so!
Why are block patterns so powerful?
Block patterns are so powerful because they are a great time saver.
Using our contact page example, you’ve seen how easy it is to create a web page. With just a click, you can easily import a block pattern and that’s it.
You’ve got professionally designed and ready-made block patterns for just about any element you want to add. Be it a contact form, star rating, call to action, post timeline, price list, infobox, or even a faq scheme.
You’ve got it all.
If there isn’t an existing block pattern for it, you can make one in minutes!
Even if you’re not a designer, block patterns help you create stunning websites in no time at all.
The benefits of using blocks and block Patterns
Now we know what blocks and block patterns are, let’s look at some of the additional benefits of using them.
Time saver
This is a significant benefit of using blocks. You get to create stunning websites without knowing how to code or design.
Locate a block, add it to the page or drag it into position, add your content and you’re done.
Customizable
Blocks and block patterns come pre-built but can also be tweaked to suit your needs. Play around with the layout to have it blend with your website look and feel.
Stunning designs
Be it a single section such as a call to action, star rating, adding team members, or building an entire web page from scratch, blocks allow you to create some fantastic designs.
Additionally, you can use one of our readymade Starter Templates that works great with the WordPress block editor.
Inherit theme settings
Want to change your website theme? Worried it might affect your site layout and all the blocks you’ve included?
Here’s the good news. Your layouts will be just fine.
Whether it’s just the blocks or entire block patterns, they all inherit theme settings and stay completely intact. So next time you want to change your theme, you can go ahead and do so confidently.
Reusable block patterns
Once you’ve imported a block pattern and customized it to suit your needs, you can save it as a template.
This way, you can reuse it on other pages as well.
Why Spectra is the go-to resource
The addition of the WordPress block editor has brought in a whole new approach to creating web pages.
Like how drag and drop page builders work, you now get to insert blocks and widgets in exactly the same way using the WordPress block editor.
You can take that convenience much further.
Install Spectra, and you’ve got a powerhouse of blocks, patterns and wireframes to design your website with.
The best part is, it’s completely free!
From info boxes, post grids, content and post timelines, buttons, to Google maps, testimonials, social sharing, and table of contents, there’s a lot more you can play around with using Spectra.
They not only enhance the overall user experience but also help speed up your workflow.
Installing Spectra
Using Spectra is very straightforward. Simply look out for the Spectra Blocks section.
Then search for a block and add it to your page.
To customize a block, click on it and edit the settings on the right-hand side of the editor.
Now you have an idea of how easy it is to use Spectra, let’s take a look at some of the many blocks available.
List of Spectra blocks
Let’s start with the latest entry into this list of Spectra.
1. Star Ratings
You’d probably agree that star ratings help sales. They are a great way to showcase social proof and increase conversions.
Prospective buyers typically look around for reviews and online ratings before going ahead with a purchase. The higher the ratings, the higher are the chances of a sale.
On the flip side, with lower ratings, well…
With Spectra, you can include the Star Rating block to display ratings anywhere on your pages.
Explore the Star Ratings block
2. Container
The Container block allows you to customize columns and create attractive rows on your pages.
Start by selecting the number of columns you want in a row.
You then get to customize it the way you want using shape dividers, background, variable widths, and so on.
If you’ve selected a particular layout, you can always modify it by increasing or decreasing the number of columns.
This way, you have complete control and flexibility over the design.
3. Call To Action
Get your prospects to take action. It can be a call to action to download a free product, subscribe to a free course, or even free membership.
Create attractive lead magnets and offers using the Call To Action block in Spectra.
Explore the Call To Action block
4. Icon List
Allow users to skim through your content with icons or use them decoratively on posts and pages.
List the essential points using the Icon List block. The lists can be customized based on your preferences.
From having a vertical or horizontal layout to customize the icons, the Icon List block offers a range of possibilities.
5. Info Box
Create informative boxes on your website. Include a heading, subheading, and an image using the Info Box block.
Want to have an icon instead of the image? No problem. Choose from a range of icons from the existing library and replace the image.
6. Post Layouts
Do away with the usual way of displaying your posts. Use beautiful layouts such as timeline, carousel, grid, and masonry to list your latest blog posts.
You also get to choose what posts to display based on various taxonomies.
Explore the Post Layouts block
7. Blockquote
Got some essential statements to highlight? Maybe a quote, a pro-tip, or statistic. Use Spectra’s Blockquote block.
You can even enable the ‘click to tweet’ option from within the block settings!
8. Content Timeline
Want to showcase a timeline of events where you display a series of events since you started an online business or designed your product?
Spectra makes this super easy with the use of the Content Timeline block.
Explore the Content Timeline block
9. Google Map
Want to include a Google map on your website? Simply include the Google map block.
Adjust the height or use the zoom effects under the block settings. Easy!
10. Inline Notice
Want to draw a user’s attention to an important message? May be a must-do during an installation process, or a reminder to take a back up before updating to the latest version of WordPress.
The Inline Notice block provides that flexibility by adding a notice just about anywhere on the page.
Explore the Inline Notice block
11. Marketing Button
Create compelling calls to action using the Marketing Button block.
From including a catchy headline to inserting an icon on the button and various background options, you can completely customize this button.
Explore the Marketing Button block
12. Buttons
Want to add multiple buttons on your web page? While the Marketing Button block allows you to insert a single button, the Multi Buttons block allows you to add more.
By default, two buttons get added to your page. To add an extra button, simply click on the plus icon adjacent to the buttons.
13. Post Timeline
The Post Timeline block is similar to the Content Timeline block.
This time it’s to display your blog posts based on the dates they are published.
Filter and display posts based on various taxonomies, display featured images, and carry out more customizations using the Post Time block in Spectra.
Explore the Post Timeline block
14. Sections
Use the Sections block to create beautiful sections for your website.
Use background images, colors, or videos for your background. You could then add additional blocks over the background, such as texts, images, columns, CTA, buttons, and so on, to create beautiful sections.
15. Social Share
Have an awesome website and want to spread the word? Wrote an awesome blog post and need more eyeballs? Get users to share your web page.
Incorporate the Social Share block s to add social share icons on your web pages. Your icons can be lined up vertically or horizontally and customized to suit your needs.
Explore the Social Share block
16. Taxonomy List
Want to display content based on a particular category? You can do so easily using the Taxonomy List block.
Using the block, you can add related content to just about anywhere on your website.
17. Team
Introduce your team to the world.
Get your visitors acquainted with the fantastic team that’s producing great products, content, support, and more.
Use the Team block in Spectra to display the details of your team members. You could also include social links if you choose to.
18. WP – Search
Incorporating a search field allows visitors to find what they are looking for easily. It enhances the user experience in a simple but important way.
Adding a search field to just about any page is pretty straightforward using the WP – Search block. You get to customize the search field too.
Want a search icon instead of the text? No problem!
19. Heading
Headings have to be catchy and attractive to work. While having a great hook goes a long way to entice the visitor, you’ve also got to ensure it stands out.
Create awesome headings along with separators using the Advanced Heading block.
Explore the Advanced Heading block
20. Price List
Whether it’s a restaurant menu or the digital products you sell online, display the rates using the Price List block.
Customize the look by opting for a single-column, two-column, or a three-column layout. Choose from a variety of separators, too, from dotted, dashed, solid, groove, and a whole lot more!
21. Tabs
Tabs work great when you have limited space on your webpage but want to display a lot of content.
It enhances the user experience when you categorize content within tabs.
Spectra’s Tabs block makes it super easy to display content in this way.
22. Testimonial
Testimonials sell!
By including testimonials of your customers with their name, photo, and organization, you can close a sale faster.
Visitors look for customer reviews and testimonials before considering a purchase.
Social proof is a proven sales tactic and testimonials play a part in that.
23. Forms
When it comes to the must-have pages on a website, the contact page is a given. It helps visitors get in touch with you, send queries, feedback and a lot more.
Using Spectra’s Forms block, you can add creative and interactive forms to your pages.
You can personalize the success and error messages, customize the buttons, enable and configure a reCAPTCHA on your form to avoid spam.
24. FAQ Schema
Want to list the most commonly asked questions along with their answers and solutions on your pages?
Not only does this help your users get immediate solutions to their queries, it also eases the load on your support team.
The FAQ Schema block allows you to easily add the most commonly asked questions along with their answers.
25. How-to Schema
Notice how Google lists a how-to article or guide? Those search results where it lists the various steps to go about a query you searched?
Want your ‘how-to’ articles to feature on the search results page? That way, you get a boost to the traffic to your website.
The How-to Schema block makes it super easy by following a template and adding your how-to content.
Explore the How-to Schema block
26. Review Schema
The Review Schema block helps you feature reviews on products and services to help clinch a sale..
By providing genuine and honest reviews on your website, you can drive in more traffic to your site and increase your credibility and authority in the market.
Explore the Review Schema block
27. Table Of Contents
Including a table of contents is excellent for user experience and helps improve your ranking on search engines.
With the table of contents block, users get a sense of what’s in the article. This helps reduce bounce rate and helps your page rank higher.
Using the Table Of Contents block, you choose which headings are displayed in your table of contents by using a toggle on/off button.
Explore the Table Of Contents block
28. Counter
The counter is an essential web design element you often see in a website for sharing stats or data. You can use a counter to showcase years in business, the number of products, investor funds, total downloads and other countable data.
Spectra comes with a free Counter block. It allows you to implement the counter features to your website in a more organized way.
Now you can even add the counter to the coming soon page.
29. Modal
The modal is commonly used in most types of websites. Using the modal, you can create different types of popups. It allows you to add newsletters, forms, images, forms and other actionable content.
You’re able to make your own popups within the WordPress block editor using the Spectra Modal block.
You don’t need to purchase a paid tool to create amazing popups. The Spectra Modal block helps you make your website more functional and boost the conversion rate for free.
30. Slider Block
The latest version of Spectra comes with an amazing Slider block. It allows you to add sliders to your website with ease.
The new Slider block is very customizable. You can add different animation effects, icons and content to the slider.
Let’s create responsive, professional looking sliders with the advanced Spectra Slider block.
31. Image Gallery
Creating beautiful photo galleries is very easy with the new Spectra Image Gallery block. This powerful block provides different gallery designs including carousels, masonry, and other galleries too
Whether you’re running a travel blog, photography, wedding or eCommerce website, adding image galleries to the website is excellent for engagement.
Let’s beautify your website with the Spectra Image Gallery block!
Explore the Image Gallery block
32. Image
The default WordPress Image block comes with the basic feature where you can add images and do minimal customization. But the new Spectra Image block is more powerful and comes with advanced image customization functionalities.
It also allows you to add several masking effects to the image.
For better image design, you can use the styles options where you set the color, border, box shadow, margin and other essential design elements.
33. Post Grid
The default WordPress block editor doesn’t offer any block to display posts in a grid layout.
Luckily Spectra provides a handy block called Post Grid that allows you to showcase your posts in an attractive grid style.
The block comes with full customization options to make the grid layout more appealing.
34. Post Carousel
The new Spectra Post Carousel block helps you to make a carousel slider using posts.
You can now organize your blog posts in different styles to attract your readers. Like the other Spectra blocks, it’s also very handy and comes with full design control.
Apart from the carousel settings, you can also customize the post image, content and read more links in your brand style.
35. Lottie Animation
To make your website more interactive, Spectra comes with a cool block called Lottie Animation. It’s a very simple but effective block that allows you to add animations to web pages.
You can set animation triggers based on your design, like playing continuously or starting when the user clicks/hovers or scrolls to the web page.
You can also manage the speed of the animation and reverse the direction of the animation.
Explore Lottie Animation block
Apart from the blocks, Spectra offers three different extensions: Responsive Conditions, Masonry Gallery and Display Conditions.
We recommend you read the documentation of the mentioned extensions.
List of Spectra patterns
Now that we’ve covered the various individual blocks available in the Spectra, let’s go to the shortcut approach to creating web pages.
By using block patterns!
A block pattern is a ready-made template containing either a single block or a group of blocks. This makes creating sections of a page and even an entire web page simple and easy.
Here’s a list of the various block patterns currently available with Spectra.
To understand this even better, let’s see how Spectra patterns work and how to add one to a page. You can do the same for posts as well.
How to add a Spectra pattern to a page
To begin, let’s head over to Pages > Add New from our WordPress dashboard.
Go ahead and click on Spectra Templates on the top.
You’ll notice several ready-made Starter Templates that you can use. You could import a template that matches your niche and get your website live in a matter of minutes.
To use the patterns, click on the Patterns tab above.
What you will notice is several patterns listed for you to import and use. You could select by categories, such as about, team, testimonials, hero, call to action, and many more.
Hover over the pattern that you want and click on import. And just like that, your pattern has been added to the page.
Editing a Spectra pattern
Whether it’s a pattern for an about section, team, testimonials, call to action, or even an FAQ section, they are all made up of various individual blocks.
Editing your patterns is as simple as editing any other individual block.
Click on the block and use the settings on the right-hand side to edit and customize based on your preferences.
For instance, let’s say we’ve included a pattern for products and services on our web page.
If you want to edit any element, such as the heading, image, or even the line separator, click on it and use the settings on the right-hand side.
Want to remove the entire section?
Select the entire block pattern, click on the three dots, and click on Remove block.
Pretty straightforward, isn’t it?
Building a page with Spectra patterns
In this section, let’s create an entire page using the Spectra block patterns.
Assuming you’ve installed the Astra theme and have your website header and footer in place, what are the other elements you require on a web page?
Let’s start by creating an ‘About Us’ page.
Typically, you’ll have some details about the organization, your team members, client testimonials, a list of clients, projects completed, and probably a call to action as well.
Let’s begin by heading over to Pages > Add New.
We’ll name the page ‘About Us.’
Then click on Spectra Templates and head over to the Patterns tab.
Do you prefer the dark theme or the light ones? You could filter out the patterns based on your preference by clicking on the Dark or Light tabs.
Then click on the About link on the left-hand side.
You’ll be presented with several options for the About section on your page. This is where you talk about yourself or the business, the date of inception, thoughts behind starting one, your mission statements, goals, and so on.
Once you’ve decided on the perfect fit, click on import, which you’ll notice when you hover over the pattern.
This may take a couple of seconds. Once done, you’ll see the about section added to your page.
You can edit and customize this to suit your needs.
We’ll now repeat the same steps and include sections for team, testimonials, call to action, clients, statistics, and quotes.
Once you’re done adding all the required sections, click on publish.
And just like that, in a matter of minutes, your page is ready. All you’ve to do now is add the actual content, images, links, and so on, and you are good to go.
You’ll notice that the page has a sidebar. While this is a personal choice, we’d like to do away with the sidebar.
We’d like to have our content stretched. And achieving that is pretty straightforward.
Under your page settings on the right-hand side, scroll down to the section that says Sidebar. Then select the option No Sidebar.
Want a full stretched layout? No problem.
See the Content Layout section?
Select the Full Width / Stretched option and then update your page.
Looks a whole lot better, doesn’t it? We definitely think so!
FAQs For Spectra
Before we wrap this article up, here are some frequently asked questions regarding our Spectra plugin.
While we may have covered this in some form or another in our article, it’s best we have them answered explicitly.
Is Spectra free?
Yes. Spectra is entirely free. Head over to our Spectra home page or from the WordPress.org website to download the plugin.
How do I use Spectra?
You can use Spectra in the same way you use any plugin. Once you have downloaded Spectra, head to Plugins > Add New from your WordPress dashboard. Then click on the Upload Plugin button.
Select the .zip file you just downloaded and click on Install Now. Activate the plugin, and you are done.
Head over to your Gutenberg page editor, and you’ll notice Spectra Block added to your list of blocks.
Is Elementor better than Gutenberg?
While there isn’t a straightforward answer to this, we think Elementor is not better than Gutenberg. it boils down to your personal preference. Before the introduction of the Gutenberg block editor in 2018, creating attractive-looking pages on WordPress was easier using a page builder such as Elementor.
Today, Gutenberg has made huge strides with the introduction of block editors. When it comes to creating web pages, we feel page builders such as Elementor might still have an edge.
Websites built on Gutenberg are lightweight and faster. Unlike the page builders, Gutenberg doesn’t bring in any extra code. While we aren’t saying that websites built using Elementor are slow, in comparison with Gutenberg-built sites, they are a bit slow.
With page load speed being a significant factor with Google’s recent updates, we feel websites built using Gutenberg may perform better.
Is Gutenberg a plugin?
Gutenberg was a WordPress plugin but is now being rolled out as part of the core WordPress version. Initially, Gutenberg was developed as a separate WordPress plugin and allowed users to get the hang of the new features and test it out. Now it’s an integral part of WordPress.
Do I need Gutenberg if I have Elementor?
No, you don’t need Gutenberg if you have Elementor. If you are comfortable creating pages and posts using the Gutenberg block editor, you do not require Elementor. As mentioned, Elementor is a page builder that helps you create stunning websites. With the addition of block editors in Gutenberg, you can create stunning websites using Gutenberg as well.
Conclusion
The introduction of the Gutenberg block editor has brought in a completely new way of creating websites using the default WordPress page editor. You needn’t install additional page builder plugins such as Elementor, Beaver Builder or Brizy to create stunning websites.
With page load speeds being a critical ranking factor, you are better off creating websites with Gutenberg. While page builders are fast, from our experience, Gutenberg is faster.
Page builders may have a few features up their sleeve that still outdo Gutenberg, but it’s only a matter of time before Gutenberg outdoes all of them.
With our free Spectra WordPress plugin, we’ve enhanced the features and possibilities with the Gutenberg editor to ensure that you can create stunning websites faster.
We’d like to hear from you now. Do you use the Gutenberg block editor or one of the popular page builders? If you do use Gutenberg, which of the blocks in our Spectra did you like the most? Do you make use of the block patterns as well? Let us know in the comments below.
Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!
Recommended Articles
Getting Started with Spectra
How to Translate Content Created with Spectra and WPML?