| Breakdance | Elementor | Gutenberg | |
|---|---|---|---|
| Zero Customization Beautiful Defaults |
not provided
Elementor does not provide defaults for WooCommerce - it just uses whatever styles are provided by WooCommerce itself or the theme.
|
not provided
WooCommerce styles in Gutenberg come from the theme, or from WooCommerce itself.
|
|
| WooCommerce Global Styling Controls | not provided |
not provided
WooCommerce styles in Gutenberg come from the theme, or from WooCommerce itself.
|
|
| Optimized For Conversions By Default |
Elementor does not provide defaults for WooCommerce - it just uses whatever styles are provided by WooCommerce itself or the theme.
|
WooCommerce styles in Gutenberg come from the theme, or from WooCommerce itself.
|
|
| WooCommerce Elements | 26 | 24 |
The official WooCommerce Blocks plugin on WordPress.org is rated 2.5 stars, with more 1 star reviews than 5 star reviews. It is described as "how WooCommerce might work with the block editor" and is not considered stable.
|
| Thank You Page | auto-styled with global settings | dedicated element |
WooCommerce styles in Gutenberg come from the theme, or from WooCommerce itself.
|
| Granular Cart Elements |
not provided
this functionality is available for Elementor in various 3rd party add-on packs
|
not provided
not even provided in the experimental WooCommerce Blocks plugin
|
|
| Granular Checkout Elements |
not provided
this functionality is available for Elementor in various 3rd party add-on packs
|
not provided
not even provided in the experimental WooCommerce Blocks plugin
|
I'm not even a coder and I was able to put together a store that looked amazing - and it converts like crazy. I was able to do all of this in a fraction of the time it would have taken me using other platforms. And it's all thanks to Breakdance's WooCommerce integration. It's literally game-changing.
| Breakdance | Elementor | Gutenberg | |
|---|---|---|---|
| Blank Page Asset Size |
under 40kb
under 20kb compressed
|
~680kb
~160kb compressed. Test done with Elementor Hello theme.
|
reasonable
As long as you use the right 3rd party element packs, Gutenberg's performance is generally good and on par with Breakdance.
|
| JavaScript Files Loaded On Empty Page | 1 |
8
Tested with Elementor Hello theme... Elementor loads jquery.js, jquery-migrate.js, hello-frontend.js, webpack-runtime.js, frontend-modules.js, waypoints.js, and more - on a page that only contains a heading.
|
depends
depends on theme
|
| No jQuery By Default |
not provided
When we tested with Elementor's official Hello theme, jQuery was loaded on a page containining only a heading.
|
depends
depends on theme
|
|
| Bloat Removal Options |
Breakdance provides built-in options to remove default WordPress bloat.
|
not provided
you can always use a 3rd party performance plugin
|
not provided
you can always use a 3rd party performance plugin
|
| Generated Div Tags For One Heading Element | 0 |
2
Elementor has made significant improvements in this regard over the years, and is less "divceptioned" than it used to be.
|
0
choose your addons carefully
|
| RankMath Compatibility |
Breakdance is fully compatible with RankMath, but as of October 2022, RankMath doesn't provide an SEO score for Breakdance-designed content.
|
||
| Yoast SEO Compatibility |
I'm building my website with Breakdance. It's the first time I get 100/100 on Google PageSpeed Insights.
| Breakdance | Elementor | Gutenberg | |
|---|---|---|---|
| Dynamic Data |
Gutenberg has elements for displaying post titles, post featured images, excerpts, and more - but no in-depth dynamic data integration like Breakdance or Elementor.
|
||
| Conditional Element Display |
not provided
3rd party addons are available
|
not provided | |
| Post Loop Builder |
3rd party addons are available, and Elementor has recently released a Loop Builder has an experiment.
|
Gutenberg has a rudimentary query loop builder, but the functionality is nowhere close to what is provided by Breakdance or 3rd party Elementor add-ons.
|
|
| Advanced Custom Fields Integration |
requires code
|
||
| Advanced Custom Fields Repeater Field |
not provided
3rd party addons are available
|
requires code
|
|
| Metabox Integration |
requires code
|
||
| Metabox Repeater Field | not provided |
requires code
|
|
| Toolset Integration |
The Toolset team has paused development. Breakdance advises against using Toolset.
|
The Toolset team has paused development. Breakdance advises against using Toolset.
|
The Toolset team has paused development. Breakdance advises against using Toolset.
|
Before Breakdance, I was using Elementor for dynamic website builds, with some combo of Ele Custom Skin, PowerPack and Dynamic.ooo addons to get the job done. However Breakdance has all this functionality built in, which is a huge game changer. I will be using Breakdance for all new client builds in the future.
| Breakdance | Elementor | Gutenberg | |
|---|---|---|---|
| Custom Form Builder | — | ||
| Global Form Styles |
With Breakdance you can style all the forms on your website from one location for a consistent look, including WooCommerce forms.
|
Elementor provides some rudimentary global form styles but they are far less flexible and in-depth than Breakdance's.
|
— |
| Conditional Fields | not provided | — | |
| Multi-Step Forms | — | ||
| File Uploads |
not provided
planned, but probably not in 1.1
|
— | |
| Marketing Integrations | — | ||
| Webhooks | — | ||
| Contact Form | — | ||
| Register Form | not provided | — | |
| Email Subscribe Form | — | ||
| Lost Password Form | not provided | — | |
| Login Form | — |
With the superb toolset this will be a serious go-to for developers and agencies.
| Breakdance | Elementor | Gutenberg | |
|---|---|---|---|
| Mega Menu Builder |
not provided
a number of 3rd party add-ons are available
|
not provided
a number of 3rd party add-ons are available
|
|
| Build Headers & Footers | in beta | ||
|
Conditions
Control where your headers and footers appear and who they are shown to - i.e. a member portal header, a logged out user header, etc.
|
Elementor's conditions are good enough for most use cases. Breakdance provides better, more in-depth display conditions to give you more granular control over where your headers and footers appear.
|
no
in Gutenberg, the creation of template parts and where they appear is handled in the theme's code
|
|
| Dedicated Header Builder Element |
The dedicated Header Builder element in Breakdance provides header-specific functionality such as sticky on scroll, overlay, etc.
|
not provided
In Elementor, headers are created using the Section element.
|
not provided |
| Sticky Headers |
Can be achieved using Elementor's "sticky" functionality, although needs a bit of custom code to get the same results as you can in Breakdance.
|
not provided
sticky functionality is not built-in to Gutenberg, but might be provided by the theme
|
|
| Overlay Headers |
just check a box to make your header an overlay
|
can be achieved in Elementor using negative bottom margin
|
theme
generally handled by the theme, not Gutenberg
|
I’ve recreated my agency site and built a few concepts to familiarize myself completely. I will likely use Breakdance for 75% of sites. I like the short time needed to build really solid sites, nice page speed, being able to adjust global padding by viewport size, the global settings in general, the wrapper portion to reduce the need for additional divs, great backend tools, nice templating system, really nice pre-built modules, and now the design set library.
| Breakdance | Elementor | Gutenberg | |
|---|---|---|---|
|
Design Preview
Does the design look the same on the frontend of the website?
|
accurate | accurate |
inaccurate
WP admin styles can leak into the design preview.
|
| Responsive Preview |
accurate & scaled
responsive styles are correctly applied based on the preview width, and the entire preview is visible with optional scaling if the preview is bigger than the available viewport
|
accurate
responsive styles are correctly applied based on the preview width, and the design will side-scroll if the preview is bigger than the available viewport
|
questionable
The design could look different on the frontend, because responsive styles are applied based on the browser width, not the editor preview width, unless you choose one of two preset breakpoints. Breakdance and Elementor support previewing the design at any width.
|
|
Scaled Design Preview
If the design is bigger than the area of the screen that is being used to preview the design, the best experience is to scale the design down.
|
not provided
Design looks correct, but scrolls horizontally.
|
Design breaks / goes responsive.
|
|
| Searchable UI Panels |
Search for elements, properties, classes, and just about everything else just by typing.
|
You can search for elements, or use the finder to switch between pages. Properties, global settings, etc. can't be searched.
|
You can search for elements but not much else.
|
|
Styles Present Indicator
See where styles are coming from with an indication in the UI.
|
not provided | not provided | |
| Cross-Page Copy / Paste | |||
| Draggable Spacing | not provided | not provided | |
| Drag & Drop |
Officially, Gutenberg supports drag & drop, but in our opinion, the UX needs a lot of polish.
|
||
| Cross-Domain Copy / Paste |
not provided
3rd party addons are available
|
you can copy the raw HTML to transfer elements between sites
|
|
| Draft Mode |
Mark any section as a draft to hide it on the frontend.
|
Save a page as a draft to keep editing it without affecting the live version.
|
Built-in WordPress draft & revisions functionality.
|
| URL Replacement For Migrations | not provided | ||
| Keyboard Shortcuts | |||
| Right-Click Menu | not provided | ||
| Structure Panel Friendly Names | not provided | ||
| Create Your Own Component Library |
automatic
In Breakdance, open the design library and choose "This Website" to browse through every page on your website as if it was part of the design library.
|
manual
Save sections on your website to the design library for re-use later.
|
block pattern
this is a multi-step process involving code
|
I set up a site to play with Breakdance and had a complete web novice with me, watching, as part of my test of Breakdance. I am so impressed by how easy this is to use, and how powerful. It even made sense to the novice.
| Breakdance | Elementor | Gutenberg | |
|---|---|---|---|
| Element Creation API |
Element Studio
Element Studio is a visual IDE for creating custom elements live inside Breakdance. It's included with Breakdance.
|
PHP API
Elementor has a well-designed PHP API that provides power similar to Element Studio.
|
Complex API
Gutenberg's APIs are very complex. Creating elements generally requires React and running build scripts.
|
| PHP Code Block Element |
write and run PHP code live inside of Breakdance
|
not provided
you can always use a 3rd party code snippets plugin
|
not provided
you can always use a 3rd party code snippets plugin
|
| Element Display Conditions API |
not provided
Elementor doesn't have native element display conditions at all, but you can use a 3rd party plugin.
|
not provided
Gutenberg doesn't have native element display conditions at all, but you can use a 3rd party plugin.
|
|
| Dynamic Data API |
Yes, API docs available at https://developers.elementor.com/docs/dynamic-tags/add-new-dynamic-tag/
|
As of mid 2022, while you can write code to add dynamic tags to Gutenberg and technically it is done with an API, the code needed to achieve the same thing in Breakdance or Elementor is an order of magnitude simpler.
|
|
|
Form Submissions API
Build and run custom handlers on form submission - i.e. custom PHP, or a new handler that appears in the Actions After Submit dropdown.
|
not provided
Gutenberg doesn't have built-in forms functionality.
|
||
| Hooks / Actions & Filters | |||
| Custom WP_Query w/ PHP Array |
inside Breakdance
customize any WP_Query in Breakdance with PHP
|
filter
Use a filter to change the query.
|
filter
Use a filter to change the query.
|
