Do you remember the 80’s? The arrival of the new wave, the advent of mullet haircuts, the success of Cyndi Lauper, Michael Jackson, Madonna, Prince, Whitney Houston, Duran Duran and so on. In the 80’s, it’s also the explosion of the video game, and the release of a game on which we are numerous to have been close to the snap of the thumb: Tetris.
This game, with its simple principle, consisted in stacking blocks of different shapes while optimizing the available space.
The concept can be summed up in one line: “Tetris perfectly fits the definition of the best game: one minute to learn it, a lifetime to master it”, as journalist Bill Kunkel (aka The Game Doctor) said.
A statement that could be applied to many programs, like WordPress.
Speaking of WordPress, if I mention Tetris, it’s because the plugin I’m going to dissect today is called Stackable. And for good reason, this plugin adds new Gutenberg blocks to be nested in your WordPress site.
Ready for this new test? On your mark, get set, go!
The free version of Stackable tested is 2.17.1, the premium version of Stackable tested is 2.17.1.
Your best WordPress projects need the best host!
WPMarmite recommends Bluehost: great performance, great support. All you need for a great start.
What is Stackable?
“Powering the next generation of web design”. This is the mission of Stackable on its official website, where the plugin defines itself as a “new page building experience for Gutenberg”. No less!
It must be said that on the WordPress directory, the block plugin has more than 40,000 active installations and a nice rating of 4.9 out of 5 stars, accompanied by a string of rave reviews.
We talked about them in our article about addons to increase Gutenberg’s powers. Their mission is simple: to diversify the range of Gutenberg blocks available in the content editor.
Stackable is also a plugin designed for Gutenberg, to which it brings a myriad of blocks, from the great classics (header, gallery, call to action) to the more exotic ones (quotes, price tables, timer, testimonials, etc.).
These blocks are ready to use and customizable.
So, you might think, what is the point of installing Stackable? They are just blocks among other blocks. Well, Gutenberg provides many useful blocks, but with Stackable, the possibilities are multiplied.
Moreover, you have access to more advanced customization features than those offered natively with Gutenberg, such as: adjusting the layout of the elements inside the blocks, spacing, changing the background, adding hover effects, etc.
There are two versions of Stackable:
- A free version is available on the WordPress directory.
- A paid version is available from the official website of the plugin, starting at $49 for use on one site.
As you can imagine, the second one gives access to more blocks and allows to customize them more finely.
For this test, we focused on the Premium version.
To start configuring Stackable, install and activate the plugin. Then go to Settings > Stackable.
On its interface, you will have access to the following settings:
- Font Awesome icons Pro (premium): to integrate a Font Awesome Pro kit to Stackable.
- Role manager (premium): to give or block access to the block editor to some user roles and let them only edit the content. Note: this management works on all blocks, not just those included with Stackable.
- Global settings: two features are available to overcome possible incompatibilities with the theme in place on your site. You can enter the selector of the content area of your theme, and force the use of Stackable’s fonts so that they take over those of your theme.
Like Elementor, Stackable has global settings: the colors and typography that apply to pages created with Elementor. But with Stackable, you have the possibility to define these settings for all the blocks that make up your site.
- Enable & Disables Block: if you don’t need some blocks, you can disable them so that they don’t appear in the list of available blocks.
Still on the settings page, you will be invited to download the Stackable theme by subscribing to the newsletter. To download the theme without signing up, head to the WordPress directory (don’t thank me, it’s normal 😉 ):
How to use Stackable ?
Kits and blocks
Stackable is used directly from the WordPress editor. To do so, create or open a page or a post, then select Design Library at the top of your post.
The Design Library contains UI Kits and Block Designs. What is it?
In fact, these two sections contain the same elements, but categorized differently. The UI Kits gather the blocks available by the style guide and the Block Designs group them by type of block: header, testimonial, call to action, etc., which can be found in all available style guides.
Block Designs and UI Kits are two different ways to find the right block for you.
Each block comes with a ready to use and customizable design. We will see how to customize them in the next part.
To find the block you need, you can also use the search bar at your disposal. The four icons at the top right of the window allow you to refresh the search results and change the size of the thumbnails to get a more accurate or larger view of the different blocks.
How to integrate a Stackable block in a post
You can also simply click on the “+” icon as you would to add any block, and you’ll easily recognize the Stackable plugin blocks, as they are adorned with a purple-orange gradient.
By clicking on the “Browse All” button, you can access all the Gutenberg blocks at your disposal. The Stackable blocks are present in the “Text” and “Appearance” sections, and are all grouped in the eponymous “Stackable” section, which also gives access to the Design Library.
All of these paths lead
to Rome to the Stackable blocks, yes, but it’s primarily the Design Library path that gives access to the pre-built designs.
Take this Testimonial block, for example, which has minimal formatting, filler text, and no example image:
And see another Testimonial block, added from the Design Library (the Prime Testimonial 2 block):
Once you’ve found the perfect fit, click on the desired item to embed it directly into your post. You can then rearrange the element on the page, like any Gutenberg block, and customize it.
To customize a Stackable block, go to the “block” section on the right side of your post, where you’ll find a bunch of options, classified in three categories: Layout, Style and Advanced.
Finding the one you’re interested in can be tedious because there’s so much to choose from, but you can also find it by simply double-clicking on the block element you want to change. You will then be taken to the settings for that block in one click.
The different customization options are grouped into three tabs:
- Layout: this is where you can customize the layout of the different elements that make up your block, and also view the other designs proposed in the Design Library for this type of block.
- Style: allows you to change the spacing, the alignment of the text, the fonts, the colors, the buttons and the separators. It is more unexpected, but you can also add a title and a description to your block.
- Advanced: here you have access to advanced features such as the HTML tag associated to the block and the management of the responsive (possibility to hide the block on computer, tablet or mobile). You can also adjust the margins of the block, and the alignment of the content.
The icing on the cake for CSS aficionados is the ability to modify the CSS of the block directly in this interface, next to the block, and with a preview of the changes in real time.
Join the WPMarmite subscribers
Get the last WPMarmite posts (and also exclusive resources).
If you are not completely satisfied with the design of a block, you have the possibility to modify many parameters to adjust it to your liking.
For example, I liked the fact that you can easily add effects to the hover of the elements, or change the margins of each element of the block. Even better: you can choose different margins on mobile and tablet! So you can easily change the responsive aspect of your site.
To do this, first click on the desktop icon (computer) to display the icons of other devices.
Another nice option is to add separators at the top or bottom of an element, like with Elementor. You can of course adjust the look of these separators, and even add one or two lighter layers in the Premium version.
This is what it looks like at the bottom of this appetizing burger:
Some settings are followed by a question mark. If you don’t know what they are, hover over them to see an animation that will help you understand how it works. Quite useful to find your way through all these options.
What adaptation to themes and plugins?
Adaptation to themes
According to the official documentation, “Stackable should work with any theme”, as long as the theme you have on your site is optimized for Gutenberg.
Speaking of themes, I mentioned it at the beginning of this post: there is an in-house theme, designed to work with the Gutenberg editor and the Stackable plugin. It is free and available on the official WordPress directory. With it, compatibility is guaranteed, in short.
It’s in the colors of the plugin of the same name, so I hope you don’t mind the candy pink.
Adaptation to plugins
It’s actually the same way as for Gutenberg blocks, you can’t use them in the Elementor editor, you have to make a choice: build your page with Elementor or with the WordPress editor.
The official Stackable website also claims that its blocks are compatible with any plugin, so you can use them with other block libraries without any problem.
Build your website with Elementor
Documentation and support
In case you have any difficulties while using Stackable, you can refer to the official documentation at any time.
You will find there:
- A section dedicated to getting started with the plugin.
- A troubleshooting section.
- Pricing and licenses details.
- Targeted guides.
- A FAQ.
- And other resources.
You can also find this documentation in Settings > Stackable, Documentation tab.
In case of technical glitches, the team in charge of the plugin provides users with a list of frequently encountered problems, as well as solutions to fix them.
Regarding support, the Stackable team can help you if you send them your request via the contact form in the Contact Us tab in Settings > Stackable, or to the email address firstname.lastname@example.org.
What is the value for money?
The free version of Stackable includes 89 block designs, compared to 264 in the premium version. There are also more customization options in the Premium version.
For the Feature block, for example, there are 2 layout options in the free version (Basic and Plain), compared to 13 in the Premium version.
In the Premium version, there are also more or less interesting parameters, depending on your use of Stackable, such as the integration with Font Awesome Pro and the Role Manager as well as the possibility to modify any block in CSS.
To use this last feature, go to the Advanced section, then Custom CSS. Convenient: your changes are displayed in real time.
The Premium version also gives access to one year of support and updates.
Do you have a preference between the free and premium versions? Before paying, you can view a demo of the premium version to make the most informed choice possible.
Using Stackable or a page builder: that’s the question
That’s it, we’ve gone over the features and settings of Stackable together. Now you have a clearer idea of what the block plugin has in store.
If you’re a fan of page builders, or have already taken a close look at them, you might be wondering: why use Stackable instead of a page builder?
Because the options offered by Stackable and the free version of Elementor for example are comparable. And for good reason, Stackable approaches a design experience with a page builder, as claimed on its official website: “Have the confidence to easily build the fastest websites using a new page building experience for Gutenberg”.
And with the arrival of Full Site Editing, which will allow to act on all the elements of the site’s interface (and not only the content of the posts), Stackable might come even closer. That said, Stackable has the advantage of being used directly in the WordPress content editor, which simplifies the design experience compared to current page builders.
On the other hand, the pro version of Elementor offers much more advanced widgets and features. Since both plugins cost the same for a single-site use ($49), we suggest you turn to the behemoth of page builders instead.
Looking for new #Gutenberg blocks? Find out how to spice up your #WordPress site with the #Stackable plugin!
Our final opinion on Stackable
All in all, we can say that Stackable is a rather intuitive plugin that offers modern and aesthetic designs.
Stackable is for any site creator who wants to have more advanced blocks to customize the design of their site, without needing to touch any line of code (but having the possibility, if they master the CSS, to put the blocks to their liking).
However, should you use it or go directly to a more advanced page builder like Elementor?
Indeed, with Stackable we are approaching a design experience of a page builder directly in the WordPress editor. One could say that this is the beginning of the final goal of Project Gutenberg, which is to become a real “site builder”.
However, we are not there yet. For now, Stackable will help you create posts in the same way as the free version of Elementor, without any template management (Stackable allows you to load pre-made designs, but not to save your own).
If you like working with the WordPress editor and the blocks provided by Stackable are sufficient for your project, go for it! Using Elementor will not be necessary.
However, if you need more advanced features or need to design a site from scratch (by which I mean customize all the page templates), Elementor (aff link) or one of its competitors will be indispensable.
And if you’re one of the users who’s already been seduced by Elementor, Stackable might not be a big hit. After all, you’ve got your own habits, so there’s no real reason to change them.
If you’re interested in the Pro version of Stackable, don’t hesitate to view the available demo and browse the free version, to make sure that the blocks and options are to your liking.
Download the Stackable plugin:
And you, have you already used it? Did this article make you want to use it? Share your thoughts in the comments.
Receive the next posts for free and access exclusive resources. More than 40,000 people have done it, why not you?