Cwicly is a Gutenberg that makes it possible to build completely custom website using WordPress's Gutenberg Full Site Editor. In this review, we're going to take a look at the features and functionality of this tool.

Cwicly (pronounced "Quickly") isn't just a plugin. It's a toolkit that makes use of a plugin, theme, and ACF integration that allows creators to build dynamic WordPress website, visually, with Gutenberg and nothing more. Because of that, it's pretty easy to use on the backend, and produces frontend code with zero bloat.

Now, in 2022, it's not just ready for the big leagues - it's actually a pleasure to use, and everything that the full site editing feature of Gutenberg hopes to be.

Cwicly Features

There are many features to run through when it comes to this builder. That's because it's a complete toolkit for website creation with Gutenberg. If you install the theme and the plugin together, you'll be able to create completely custom websites from the ground up, including the header, footer, various templates, and widgets like the WooCommerce mini cart.

This is a Gutenberg based editor. It's designed to extend the native block editor, giving it the features that one would need to create a complete website.

If we go to create content using Gutenberg, a page for example, you'll notice that the layout is a bit different than your traditional WordPress installation.

We have the core features of Gutenberg, such as the block editor, patterns, blocks, and more, but it's now augmented with many additional features. Let's run through each.

First, we can see that Cwicly adds its own blocks to Gutenberg. These include structural components such as sections, columns, and divs, along side images, paragraphs, menus, dynamic data, hooks, fragments, and even repeaters.

These elements can be added to the block editor, and dragged and dropped create page structures, and the data within. The panel to the left allows us to understand the components on the page, and how they are associated with each other. In this demo, I have an overall section, with a columns element inside of it, and they heading in the first column.

This panel allows us to easily understand the contents of a page, but I can also drag and drop elements directly on it into new areas of the page. It works very well, and I can easily move components inside elements if needed.

The blocks, in the center editor, have a menu with additional options when compared to the native Gutenberg editor. The primary option that one will be using is the dynamic data. By using this, we can populate data dynamically into the page from various sources.

This dynamic data allows us to choose to populate elements from virtually any aspect of native WordPress available to PHP developers. However, it gives us an easy to use GUI meaning we don't need to know any code to create completely dynamic WordPress websites directly in Gutenberg.

Furthermore, we can link blocks, copy and paste, duplicate, save, and delete.

You're not forced to just use Cwicly blocks. You can use any block available to you in the editor, but the Cwicly blocks are easier to style. For example, if I wanted to include a dynamic chart in the page, I could use the Gutenberg element that comes with

The right side of the page is much more complex, and this is where Cwicly allows you to visually edit virtually any aspect of a component in Gutenberg.

This section completely replaces the content of the block specific tab in the Gutenberg editor.

There are many options within this panel, and that's what makes this builder so powerful. From the start, we can see that we can add additional classes to elements, change the idea of a block, and even change the tag of a section (to something like <header>, or <main>).

because we have easy access to classes, as well as autofill, we can use complete CSS frameworks with the builder.

Below, we have access to the most common styling options for the specific element. Here, we can easily change the text color, background color, link color, typography, and spacing.

The top three buttons allow me to apply dynamic visibility, link an element, and add interactions.

Here, I can use dynamic data from my WordPress website, along side additional rules like cookies, or ACF fields to show and hide components of a website.

This is the link UI.

Interactions are robust and powerful. It's easy to add berries effects if you click, however, or move to specific elements.

Additionally, for structural components such as sections or divs, I have a ton of options when it comes to layouts. Here, you can see how we can position elements within a section by using flex.

There's also a really well implemented visual CSS grid editor, allowing you to easily position elements like so:

Now, this is just the initial aspect of the right side panel. If we go into the advanced section, we get access to pretty much any property that can be manipulated by custom CSS.

By using the sections, you can customize elements down to the pixel.

You publish, edit, and manage the content just as you would with any other Gutenberg page. Text elements can be clicked directly into and edited, images can be changed and upload it easily, and you can easily copy and paste between pages.

Responsive editing and changes are also easy. Simply change the view for using the controls at the top of the canvas, set your changes, and the only display below the specific break points. Therefore, you can make completely responsive websites, hide elements based on screen size, and make other mobile specific changes.

This builder is a joy to use. And, that's surprising statement given that it's version 1.0, and was launched relatively recently.

Now, let's take a look at Cwicly dashboard. We can access this via the left-hand admin menu.

This dashboard gives us access to the features that allow us to create a completely custom website, Elements can be clipped directly into, images can be changed and upload it easily,including global parts, templates, and various settings. All of the templates use the builder that was introduced above, but allow us to apply designs to dynamic aspects of the website like an index, or single product of a WooCommerce website.

There are 4 tabs. A place for templates, parts, global parts, and settings.

The templates, parts, and global parts pages show in two places, this "dashboard" page, and the editor dashboard. The editor dashboard is loaded whenever any item of content is edited by Cwicly. This dashboard makes use of the native WordPress and Gutenberg styling, integrating directly into your workflow. Here's what it looks like:

To wrap up this section of the Cwicly review, here's a helpful video that walks you through the overall features of the builder, published by the lead developer Lewis.

Cwicly UI / UX

The UI/UX of this builder is industry-leading. It's really easy to use, everything seems to be in the right place, dragging and dropping of sections works well, and it feels like an extension of Gutenberg, instead of a completely new experience.

Additionally, this is a very well documented product that makes it even easier to use and learn.

Components ("Themes") Library

When you purchase this tool you don't just get a well designed builder for Gutenberg. Additionally, you get access to an utterly massive library of components, pages, and complete websites that can be imported in one click.

By clicking on the Cwicly button in the upper left, you can browse through hundreds of pre-built sections that are definitely designed and built by professionals. You can import them in one click, make the changes that you need, and push a great looking website to production in a matter of hours.

All components are there for you to edit in the builder.

ACF Dynamic Data

As we touched on in the previous section, you're able to take virtually whatever data is dynamic in WordPress and populate it into any place in Gutenberg using this builder. You can also utilize this data to do conditionally show elements. However, the tool becomes even more powerful when you implement ACF.

If you've used ACF in the past, you likely understand the power of this custom field plugin. It allows you to make it easy for customers and clients to edit their website information from the back end. Additionally, there are many powerful fields such as a repeater, groups, and more.

Not only does Cwicly offered complete integration with ACF PRO, allowing for you to create completely dynamic websites from the front end to the back end, but it also includes the pro version of the plugin. So, you can experience all the benefits of incorporating ACF into client projects without even need to purchase the pro version.

There's extensive support for all field types, but it plays nicely with the repeater, allow you to create templates of repeating data on the backend. For example, I can build a repeater that collects a headshot, first name, last name, biography, and more. I could then go and use the repeater element to build a completely dynamic "team" page.

The end-user wouldn't need to go and create a new section, upload an image, add styling rules, and more, all they would need to do is add a new section to the repeater, fill out data in a predefined fieldset, and save the page.

Frontend Code - No Bloat

The code that this builder output is as clean as possible. Let's take a look on the front end of a demo website:

That's because the components that Cwicly adds are true, negative, Gutenberg components.

Here's a demo section made with the tool:

And here's the HTML output. You can see that there is absolutely no additional divs or wrappers anywhere, and it's essentially as clean and output as one could get (even hardcoding).

On the backend, the code is human readable (native Gutenberg syntax):

All styling rules are added to the block as we can see above.

Something else that I'm pretty excited about but doesn't yet exist as of the publication of this review is the ability to export all the code outside of WordPress a standalone HTML and CSS.

It's A New(ish) Product

Cwicly is about a year and a half old, being released in February 2021. Because of this, there are some limitations that professionals may encounter when using this tool.

For example, there's no robust ecosystem surrounding this platform. However, because it takes a different approach than many other page builders, playing nice with Gutenberg, we get access to both free and paid Gutenberg blocks.

Additionally, at the time of writing this post, the woo commerce integration is incredibly limited. You probably wouldn't be able to build a production website with us, if you wanted to incorporate that e-commerce solution in a custom manner.

That being said, I feel that in its current state, this product is ready to create production ready brochure websites, corporate website, blogs, membership sites, and more. The dynamic data feature (to populate and also show/hide elements) is robust, and the flexibility that the builder provides allows us to create virtually any layout imaginable.

Cwicly Pricing

Pricing is relatively in line with other WordPress page builders in 2024.

The basic license allows you to install it on three websites, and comes in at €49 per year. The pro license, allows you to install it on 10 websites coming in at €99 per year. And finally, the expert license allows you to install on 1000 websites and will cost you €199 per year. There is no lifetime plan, but I believe that this is a good thing as it inspires continued, sustainable development.

There's a 30 day moneyback guarantee, so you can try without risk.

The public roadmap also looks impressive:

If they can even implement a portion of these requests, the annual fee for continued development is more than worth it in my opinion.

Conclusion

This visual Gutenberg builder is seriously impressive. In fact, it's one of my favorite products to create a WordPress website in 2024, due to the simplicity, ease of use, but also the power that this toolkit packs. You can create completely custom WordPress websites, with the cleanest code output possible, directly in the Gutenberg builder.

There are many features that power users will love such as the massive 300+ item template library, class system, ACF pro integration, promising roadmap, and rapid development schedule. I'm excited to see how this tool continues to mature, and the upcoming form builder, (complete) WooCommerce integration, HTML/CSS export, and quality of life improvements will simply serve to continue making it one of the best builders available on the market today.