However, in that article I also state that there are more and more plugins that add functionality to Gutenberg, and Qubely is one of those plugins.
Qubely is a plugin that adds al lot of advanced blocks to Gutenberg, and it’s made by the team behind WP Page Builder. That’s a really nice builder, so I’m curious to dive into Qubely… let’s go!
Update 13 November 2022 – Qubely alternatives
Unfortunately, Qubely isn’t that actively developed anymore lately. Therefor, I wouldn’t recommend it anymore at this time.
There are better alternatives now, of which Greenshift is one of the most promising ones at the moment.
Qubely blocks
At the time of writing, Qubely comes with almost 30 extra Gutenberg blocks in the free version, and Pro users get another 10 blocks to play with:
- Row
- Advanced text
- Button
- Icon
- Google Map
- Divider
- Info Box
- Image
- Testimonial
- Accordion
- Heading
- Video Popup
- Table of contents
- Gallery
- Progress Bar
- Counter
- Tabs
- Social Icons
- Contact Form
- Button Group
- Advanced List
- Block Wrapper
- Team
- Pricing
- Timeline
- Animated Headline
- Pie Progress
Pro Blocks
- Form Builder
- Advanced Gallery
- Image Carousel
- Post Carousel
- Post Grid
- Price List
- Team Carousel
- Testimonial Carousel
- Media Card
- Vertical Tab
That’s a lot of blocks – by any standard. Qubely gives you most of the modules you would expect in any premium page builder like Elementor or Divi so that’s a quite impressive start.
So what about the options for each module?
Row block
Let’s start with a row block. When you select the row block, it prompts you to choose a column layout. Gutenberg offers a column block by default, but Qubely’s row block is much more advanced.
For starters, it allows you to delete or add columns right there in the block (you see the plus and trashcan icons in the screenshot). It also allows you to change a column’s width by dragging the handle next to it, just like you can in Elementor. That’s cool.
In the right sidebar panel, you’ll find quite a few settings for your row. You can set the gutter size, padding and margin, add a background (solid, gradient, image or video), set a border and box shadow, and you can even add a shape divider and animation. You can even set the position to relative, fixed or absolute.
A lot of settings can be adjusted separately for mobile and tablet, and you can even reverse the columns on mobile, or choose to hide the row complete on a certain device. For more advanced developers, you can change the z-index and add your own CSS – there’s a custom CSS block on every element, but you can also set a CSS ID or class.
Advanced Text block
With the default Gutenberg paragraph block, you can choose a font size, font color and a background color – that’s about it. With Qubely, you can also:
- Choose a custom font family (from Google Fonts) and font weight for that specific block
- Set a line height, letter spacing and text transform
- Use different typography for heading H1 – H6
- Add an alpha value to the text color to make it semi-transparent
- Add a seperator
- Add an enterance animation – and in pro, also scroll animations and mouse interaction (!)
- And just like with rows, you can adjust a lot of settings specific for mobile and tablet, hide the block on tablet or phone, use custom positioning, z-index and custom CSS.
The Animated Headline block is a nice extra little feature. You can use it to change out a specific word in a sentence with an animation, like a colored typing effect, fade effect etc.
Contact Form & Form Builder
A contact form is also something almost every website needs, but for some reason there still no default contact form in WordPress. Of course, there are a lot of (free and paid) contact form plugins, but it’s always a good idea too keep the amount of plugins to a minimum.
Luckely, Qubely included a simple contact form in their free version, but it’s a REALLY simple contact form… at the moment, you can’t even add of remove a field. You can rename the fields though so you could change “subject” to “phone number” for example, but that’s about it.
Other than that, the contact form block does give you all the option you’d expect. You can change the font, the (background) color of the input fields (and change it on hover or focus), the button styling, customize error and succes messages, customize the e-mail template (using shortcodes for the fields) etcetera.
It even offers recaptcha anti spam integration.
Qubely Pro users get an extra block, called Form Builder. As the name suggests, with this block, you can build your form exactly the way you want it. You can use select boxes, radio buttons, checkboxes and even date and time fields – the only field that’s really missing is a file upload field.
Buttons
To get people to fill in your form, you have to get them to your contact page first. Buttons are the best way to do that, so Qubely has a button block as well. Two block actually: in addition to a single button block, there’s also a button group block that let’s you put multiple blocks next to each other.
Like everything in Qubely, you can tweak the styling of your buttons just the way you want them.
Change the colors (also for hover), add a border (you can choose the style, use rounded corners etc) or shadow, change the typography, add a icon…
Speaking about icons, Qubely has a block for those as well 🙂
Tabs, Testimonials, Team, Social Icons…
In addition to the basic things every website needs, we’ve come to expect some more pre-defined modules from page builders, and Qubely doesn’t disappoint here either.
The Tabs Block lets you insert multiple tabs. Again, it offers a number of setting like the style of the tabs, the color of the (active) tab etcetera. More importantly, you can add any block under a tab.
In the screenshot on the right I added a Testimonial Block, which looks quite good by default. You can choose between a few layouts, upload an image for the avatar, change the color of the stars etcetera.
The Team Block is more of the same, but lets you set social icons for each team member instead of stars.
Talking about Social Icons, there’s also a block to create nice looking links to your social media accounts.
You can choose to display just the icons or the name of the network as well, set a border radius so you can use circle icons or (rounded) square icons, use custom labels and colors etc. Quite a versatile little block!
Most of the blocks are quite versatile actually, offering a good amount of (styling) options in the sidebar.
You can style every part separately, so e.g. if a block has a name and a designation element (like testimonials), you can use a different color and typography for each element.
Only the Counter and Progress Bar blocks are a bit disappointing: the progress bar isn’t animated and the counter is animated, but it’s just an animated number without a background or other styling, although you could use the Block Wrapper element to set a nice background for any block (or group of blocks).
Post grid (pro)
You’ve probably heard the statement “content is king”. Long, high quality content is more important then ever to rank in Google – that’s how you found me too right 😉 However, sales pages are not the right place for a that, so your blog plays an important part on your website.
And because it is such an important part of your website, you want it to look just the way to want it!
Some themes let you choose between a few layouts and let you show or hide elements like the author, date and comment count, but the options are often quite limited. You might also show off your latest or best articles on your home page.
Luckily, Qubely offers a Post Grid block that let’s pro users customize their block layout just the way they want it! You can choose between five different layouts and multiple styles for the featured image and category, set the number of columns you want, adjust colors and hover effects, show and style a read more button etcetera.
You can also limit the output to certain categories or tags.
Carousels (pro)
If you like carousels, Qubely has you covered as well. They have more carousels than the yearly fair 🙂
First, we have the Post Carousel. It offers about the same options as the Post Grid block above, but now your posts are displayed in a nice carousel layout. You can adjust everything you might expect, like the number of slides displayed at the same time, the color and position of the arrows and dot navigation (or hide them completely), the autoplay speed (or switch that off) etcetera.
Next to the Post Carousel, you also have a Testimonials Carousel, a Team Carousel and an Image Carousel. They all offer about the same options and let you choose between a few different layouts, and as with blocks you can style each element separately.
Premade layouts
Another thing we’ve come to expect from page builders is a good collection of pre-made layouts, so you don’t have to start each project from scratch.
Qubely offers a nice collection of pre-made sections; free users get about 60 sections to choose from, while pro users get a collection of about 150.
A section consist of 1 or multiple block(s); a call to action section for example is a combination of a row block with a background, an advanced text block and a button block, and a contact section may use a Google Maps block, a contact form and an advanced text block. All sections are clearly categorized and searchable, so you can easily find what you’re looking for.
Pro users don’t just get a lot more pre-designed sections, they also get 20 starter packs. A starter pack is a complete website with multiple page layout; each starter pack has a homepage layout, a contact page layout, a projects layout etcetera.
Pricing
Most of Qubely’s features are in the free version, but if you want the post grid, carousels, form builder, and some advanced features like motion effects you’ll need the pro version.
Next to that, the pro version also offers way more pre-made designs and there are some cool upcoming pro blocks like a Twitter and Instagram Feed, an advanced slider, a countdown timer, a newsletter subscription block and various WooCommerce blocks.
The yearly fees are quite reasonable, ranging from $39 for a single site licence to $99 for an unlimited sites licence.
They also offer a lifetime licence, but those are priced so high that I almost think they don’t really want to sell those… $299 for a single site lifetime licence that costs $39 per year…
that’s way too much in my opinion. Most lifetime licences are about 2,5 – 3 times the yearly fee, not 8 times that.
Conclusion
I actually quite like Qubely. It really converts Gutenberg into a page builder that can almost measure itself with an established page builder like Elementor or Divi.
Almost all the options you would expect from a high quality page builder are there; rows with a solid, gradient, image or video background and shape dividers, multi column layouts, a good collection of pre-designed blocks, sections and starter packs, and a lot of (styling) options for each element.
However, given the choice between Qubely and a real front-end builder like Elementor or Divi, I would absolutely choose one of the latter. Qubely offers the best Gutenberg experience I’ve seen up to now, but it’s still Gutenberg: a backend builder that just doesn’t give a faithful representation of how your visitors will see your website on the front-end, without the possibility to change your header and footer, no dynamic content and no template possibilities.
Gutenberg IS the future of WordPress though, so it’s probably a matter of time before Gutenberg becomes a real front-end builder with all the possibilities that Elementor and Divi offer today. But the WordPress core team prefers stability over features – rightly so – so development goes slow and it will probably take a few more years before Gutenberg is truly front end. Meanwhile, the established page builders are not standing still either and will keep pushing out features regularly as well.
So for now, it’s not for me – but if you like Gutenberg, you’ll absolutely love Qubely!
Need help with your website?
This article is written by Bob the web builder, an allround website expert who blogs regularly
about all kinds of subjects to help you build your website. Do you need help?
Hire Bob to build your website or improve your existing website.
