If you often create a new WordPress website using a page builder plugin, switching to Breakdance could be an interesting option. I have tested Breakdance. It is a feature-rich plugin and super easy to use. In this review post, I will elaborate every Breakdance feature — as well as what the differences between its free and pro version.
Although the creator releases Breakdance as a freemium plugin, you can’t find its free version on WordPress.org like most freemium plugins. The only source to get the plugin file is its official website.
Let’s start this review by getting to know the plugin first.
Shortcuts:
🤔 What is Breakdance?
Of course, we are not talking about a dance type here. Instead, we are talking about a WordPress plugin.
Breakdance is a page builder plugin much like Elementor. Just like other page builder plugins, it is also aimed at making it easy for you to create a website in WordPress. It comes with a visual editor that is pretty easy to use.
Although the plugin primarily use is to create pages, you can also use it to create site parts like header and footer. The page builder offers tons of design elements you can add to your design.
Want to add dynamic data? Breakdance also supports it.
Interestingly, dynamic data is not only available on the pro version like other page builder plugins out there. The free version also supports dynamic data although the data types are basic.
With Breakdance, you can adopt a mobile-first design approach thanks to its advanced responsive editing feature.
# The Creator Confession
Breakdance is developed by Louis Reingold, who has previously developed Oxygen, another page builder plugin. Unlike Oxygen which requires a bit technical knowledge, Breakdance is way easier to use. That’s because it targets the same segment as Elementor.
In fact, Breakdance is designed to be a solution for those looking to switch from Elementor. That’s according to what’s Louis writes on this page.
Here is a screenshot of creator’s statement on the Breakdance website.
Referring to this page, there are more things you can do with Breakdance than Elementor, without installing an add-on.
That’s the goal of Breakdance: To offer more features without relying on third-party add-ons like Elementor.
So, what features available in Breakdance? Read on to learn more.
👨💻 Breakdance Editing Experience
Unlike its sister Oxygen, Breakdance is likely to be more beginner-friendly. It doesn’t take long to learn how to use it.
Breakdance offers a similar editing experience as Elementor. You have a panel on the right side to add design elements. In Breakdance, design elements are grouped into six categories as follows:
I will further cover about the design elements later.
You can place the elements you need to a container of your choice. Breakdance offers four container types — Section, Column, Grid, and Div — which you can find under the Basic element category.
Section is the largest container in Breakdance. Other containers — as well as other design elements — require a Section. In other words, you need to add at least add one Section on your design.
# Layout Options
Layout option is a crucial thing in a page builder. I need to mention this as some page builders have poor layout options. In Divi Builder, for instance. CSS snippet is required only to place two buttons side by side.
Breakdance is great in this area.
Every design element has a wrapper in which you can set the display (CSS display). Whether block
, inline-block
, inline
, flex
, or inline-flex
.
This is great as you have more flexibility to set the layout of your elements, regardless of the container you use. A simple instance, you can place two elements side by side using the inline
CSS display.
You can also effortlessly set the alignment of the content of a container thanks to its great CSS flexbox implementation. For instance, you can make all the content within a Section to be on the center both vertically and horizontally with just a single click.
The layout options will be pretty useful if you are designing a complex website. If you want to set the alignment of specific elements within a Section, you can use the Div container to wrap them.
# Editing History
When editing a page using a page builder plugin like Breakdance, you will likely to make countless changes. Especially if you have no design concept yet. You will make changes here and there to match things.
Breakdance comes with an editing history feature to allow you to instantly restore your previous changes. Also, there is an undo button as well as a redo button, which I think pretty useful in the design process.
# Global Settings
If you always start your design from Figma or the similar tools, then global settings is a crucial feature you need to look in a page builder. With the feature, you can set everything upfront before you start the actual design process. From base colors, button style, form style, typography settings (font family, font size, etc.)
Global settings can be accessed by clicking the three-dot icon on the top bar. There are six components you can set the global settings of.
- Color (text, link, background)
- Button
- Typography
- Form
- Container
- Code
Not only global settings can speed up your design process by implementing the design system you have made earlier, but it can also save you time when you need to make changes to a certain component globally in the future.
— Global Blocks
To work even faster, you can also create global blocks. A global block can consists of multiple design elements. For instance, on a subscribe block, you may find a heading element, text element, and form element.
Creating a global block is pretty helpful in speeding up your design process, especially if your design potentially undergo redesign in the future. You only need to edit a global block once and the changes will be applied to all pages within the site where the global block has been added to.
To create and edit a global block, you can go to Breakdance -> Global Blockson your WordPress dashboard.
Interestingly, you can use a Breakdance global block in Gutenberg via shortcode. You can utilize this ability to add Breakdance elements to a blog post or a Gutenberg-powered page.
# Responsive Editing with Custom Breakpoint
A design that looks great on desktop is not necessarily looks great on the smaller devices (tablet or smartphone). This issue usually happens if you use an absolute unit (px) instead of relative units (%, em, vh, etc). Particularly on spacing settings. Be it margin or padding.
On most page builders, you can apply different settings for different device types. For instance, you can use a different padding values on a section for desktop, tablet, and smartphone.
The ability to apply different settings on different devices is called responsive editing.
Breakdance also comes with a responsive editing feature to make sure the design you create looks great on every device type. You can simply click a device icon on the top bar to switch between device modes.
Or you can also click the device icon on the style option you want to set the value of.
By default, Breakdance uses pixel (px) for the setting unit, but you can change it to another unit if you want it. Breakdance supports all CSS units. From pixel (px), percent (%), viewport hight (vh), viewport width (vw), emphemeral unit (em), root emphemeral unit (rem).
Want to design a page for a specific screen size?
Breakdance allows you to create a new custom breakpoint to accomodate that need. To access this feature, you can click the three-dot icon on the top bar and select Preferences. You will see the BREAKPOINTS menu on the appearing window, from which you can add a new custom breakpoint.
🛠️ Breakdance Features
What I have just above elaborated is the general editing experience with the Breakdance page builder. In this section, I will further cover the features that the page builder offers.
Let’s start from design elements.
# Design Elements
Remember what I said in the intro section?
Breakdance is meant to be a better Elementor replacement by offering more features so that users don’t need to install an extra plugin to add certain features. No wonder if it comes with more design elements.
There are 91 design elements offered by Breakdance. These exclude WooCommerce-specific elements. If you have WooCommerce installed on your website, you will see 21 more design elements on the WooCommerce group.
As I mentioned earlier, design elements are placed in 6 groups (7 if you have WooCommerce installed).
But in this review post, I will group them into three groups as follows:
— Free Design Elements
Heading | Fancy Divider | WP Menu |
Text | Basic Slider | Advanced Accordion |
Rich Text | Simple Counter | Global Block |
Text Link | Scrolling Image | Shortcode |
Button | Simple Testimonial | HTML IMG |
Image | Image Comparison | Post Title |
Video | Notification Bar | Post Excerpt |
Icon | Image With Zoom | Post Content |
Icon Box | Facebook Comments | Post Featured Image |
Image Box | Facebook Like Button | Author |
Basic List | Facebook Page Plugin | Archive Title |
Icon List | Facebook Post | Post List |
Blockquote | Facebook Share Button | Widget |
FAQ | Facebook Video | Forgot Password Form |
Social Icons | Twitter Button | Form Builder |
Star Rating | Twitter Timeline | Login Form |
Tooltip | Social Share Buttons | Register Form |
— Pro Design Elements
Checkmark List | Fancy Testimonial | Wrapper Link |
Pricing Table | Image Hover Card | Code Block |
Stats Grid | Masker | Advanced Tabs |
Business Hours | Table of Contents | Advanced Slider |
Gallery | Scroll Pages | Shortcode Wrapper |
Progress Bar | Back to Top | Comments Form |
Circle Counter | Google Map | Comments List |
Tabs | Twitter Embed Tweet | Post Meta |
Counter Timer | Instagram Post | Adjacent Posts |
Lottie Animation | Header Builder | Post Loop Builder |
Image Accordion | Menu Builder | Repeater Field |
Logo List | Search Form | Breadcrumbs |
Dual Heading | Content Toggle | |
Animated Heading | Fancy Container |
— WooCommerce Elements
Product List | Cart Empty Message |
Product | Checkout Page |
Product Builder | Checkout Builder |
Related Products | Checkout Coupon Form |
Upsell Products | Checkout Login Form |
Shop Page | Account Page |
Cart Page | Order Tracking Page |
Cart Contents | Mini Cart |
Cart Totals | Woo Widget |
Cart Cross Sells | Woo Breabcrumb |
# Theme Builder
Theme builder refers to a feature that you can use to create custom templates for site parts like header, footer, archive pages, to single post.
Breakdance doesn’t specifically mention the feature “theme builder”, but it certainly does have one.
Interestingly, the theme builder feature of Breakdance is accessible on both the free version and pro version.
You read it right.
With the free version of Breakdance, you can create custom header, custom footer, to custom archive pages. What set the free version and pro version apart is the elements you can add to your template (see the above tables).
Also, the pro version supports more advanced display conditions (I will cover display conditions on a dedicated section shortly).
Here are the custom templates you can create with Brekdance theme builder.
Breakdance Free | Breakdance Pro | |
---|---|---|
Header | ✅ | ✅ |
Footer | ✅ | ✅ |
Single Post | ✅ | ✅ |
Single Page | ✅ | ✅ |
Archive Pages (Category, Tag, Author) | ✅ | ✅ |
Search Results Page | ✅ | ✅ |
404 Page | ✅ | ✅ |
Single Product for WooCommerce | ✅ | ✅ |
Product Archive Pages for WooCommerce | ✅ | ✅ |
# Dynamic Content
Theme builder without dynamic content means nothing. In Breakdance, dynamic content is available in both versions.
Of course, the pro version has more options of dynamic content types.
Dynamic content itself falls into three categories: text, image, and link.
— Text
Breakdance Free | Breakdance Pro | |
---|---|---|
Post Content | ✅ | ✅ |
Post Date | ✅ | ✅ |
Custom Field | ✅ | ✅ |
Comments Number | ✅ | ✅ |
Post Terms | ✅ | ✅ |
Post Excerpt | ✅ | ✅ |
Post Time | ✅ | ✅ |
Post Title | ✅ | ✅ |
Archive Title | ❌ | ✅ |
Archive Description | ❌ | ✅ |
Site Title | ❌ | ✅ |
Site Tagline | ❌ | ✅ |
Author Name | ❌ | ✅ |
Author Bio | ❌ | ✅ |
WooCommerce Product Rating | ❌ | ✅ |
WooCommerce Product Stock | ❌ | ✅ |
WooCommerce Product Description | ❌ | ✅ |
WooCommerce Product Title | ❌ | ✅ |
WooCOmmerce Product SKU | ❌ | ✅ |
WooCommerce Product Price | ❌ | ✅ |
WooCommerce Product Terms | ❌ | ✅ |
WooCommerce Product Sale | ❌ | ✅ |
— Image
Breakdance Free | Breakdance Pro | |
---|---|---|
Featured Image | ❌ | ✅ |
Post Image Attachment | ❌ | ✅ |
Custom Field | ❌ | ✅ |
Site Logo | ❌ | ✅ |
Author Avatar | ❌ | ✅ |
WooCommerce Product Image | ❌ | ✅ |
WooCommerce Product Gallery | ❌ | ✅ |
— Link
Breakdance Free | Breakdance Pro | |
---|---|---|
Post Permalink | ✅ | ✅ |
Custom Field | ✅ | ✅ |
Logout URL | ❌ | ✅ |
Site URL | ❌ | ✅ |
Lightbox | ✅ | ✅ |
Send Email | ✅ | ✅ |
Send a Text Message (SMS) | ✅ | ✅ |
Start a WhatsApp Chat | ✅ | ✅ |
Make a Call | ✅ | ✅ |
Open/Close Popup | ✅ | ✅ |
# Form Builder
I am pretty sure that some of you need to add a form when creating a website in WordPress. Whether a simple contact form or an email opt-in form to collect email addresses. Be grateful because you can create a form with Breakdance, regardless of the version you use.
It has four different form elements in which each of them is designed for specific functionality.
- Forgot Password Form: To create a password reset form
- Login Form: To create a login form
- Register Form: To create a registration form
- Form Builder: To create general forms
You can find the above elements on the Forms group on the elements panel. They are accessible by all Breakdance versions.
— More About the Form Builder Element
The Form Builder element is the element you need to create a contact form, email opt-in form, and other form types. In other words, it is the actual form builder element in Breakdance page builder. The element supports form field types like text, email, checkbox, radio, and so on.
Here are the form field types that the Form Builder element of Breakdance supports:
Breakdance Free | Breakdance Pro | |
---|---|---|
Text | ✅ | ✅ |
✅ | ✅ | |
Text area | ✅ | ✅ |
URL | ✅ | ✅ |
Phone number | ✅ | ✅ |
Radio | ✅ | ✅ |
Checkbox | ✅ | ✅ |
Select | ✅ | ✅ |
Number | ✅ | ✅ |
Date | ✅ | ✅ |
Time | ✅ | ✅ |
File upload | ❌ | ✅ |
Password | ✅ | ✅ |
Hidden | ✅ | ✅ |
HTML | ✅ | ✅ |
Step | ❌ | ✅ |
What about form action?
The Form Builder element of Breakdance supports several form actions, including standard actions like send to email and send to form submission manager.
Want to connect your form with an email marketing service? You can also do so. The Form Builder element supports integration with email marketing services like MailChimp, GetResponse, and MailerLite.
However, not all actions are accessible on the free version. Here is the table that compares the form actions accessible on the free version and the pro version.
Breakdance Free | Breakdance Pro | |
---|---|---|
Send to submission manager (on your site) | ✅ | ✅ |
Send to email | ❌ | ✅ |
Send to ActiveCampaign | ❌ | ✅ |
Send to ConvertKit | ❌ | ✅ |
Send to Drip | ❌ | ✅ |
Send to Discord | ❌ | ✅ |
Send to Slack | ❌ | ✅ |
Send to GetResponse | ❌ | ✅ |
Send to MailChimp | ❌ | ✅ |
Send to MailerLite | ❌ | ✅ |
Connect with Webhook | ❌ | ✅ |
Open popup | ❌ | ✅ |
Open Custom JavaScript | ❌ | ✅ |
— Conditional Logic
Another worth mentioning feature of the Breakdance form builder is conditional logic, which you can use to show a field only when a condition is met.
For instance, you can show a field only when the previous field is filled out. To add a conditional logic to a field, you can click the Advanced menu on the form field you want to add the conditional logic to. The condition types you can set are:
- Equal
- Not equal
- Set
- Not set
- One of
- None of
- Contains
- Doesn’t contain
# Display Condition
Display condition is a feature that you can use to show an element by a certain condition or two. You can apply a display condition on all elements on the Breakdance editor.
In addition, you can also apply a display condition on a custom template you create with Breakdance’s theme builder. For instance, you can set a display condition to assign a template to posts with a certain taxonomy (category or tag).
To acess the display condition feature, you can click the gear icon on the elements panel and click the Conditions block.
Here is the list of the available display condition options.
Breakdance Free | Breakdance Pro | |
---|---|---|
Page | ✅ | ✅ |
Page parent | ✅ | ✅ |
Post ID | ✅ | ✅ |
Post status | ✅ | ✅ |
Comment number | ✅ | ✅ |
Author | ✅ | ✅ |
Featured image | ✅ | ✅ |
User login status | ❌ | ✅ |
User role | ❌ | ✅ |
User registration date | ❌ | ✅ |
Dynamic data | ❌ | ✅ |
Custom PHP | ❌ | ✅ |
Browswer | ❌ | ✅ |
Operating system | ❌ | ✅ |
Day of week | ❌ | ✅ |
Current time | ❌ | ✅ |
Current date | ❌ | ✅ |
Post date | ❌ | ✅ |
Post modified date | ❌ | ✅ |
Current month | ❌ | ✅ |
Referrer URL | ❌ | ✅ |
Referred type | ❌ | ✅ |
Page view count | ❌ | ✅ |
Sessont count | ❌ | ✅ |
WooCommerce cart quantity | ❌ | ✅ |
WooCommerce cart value | ❌ | ✅ |
WooCommerce cart weight | ❌ | ✅ |
WooCommerce order count | ❌ | ✅ |
WooCommerce total spend | ❌ | ✅ |
WooCommerce purchased product | ❌ | ✅ |
# Popup Builder
Breakdance also comes with a powerful popup builder which you can use to create nearly all popup types you can find on the internet. From a simple modal popup to notification bar.
Unlike most page builder plugins, the popup builder feature of Breakdance is accessible on both the free version and the pro version. The pro version, however, has access to more trigger types than the free version.
Here are the trigger types that Breakdance popup builder supports:
Breakdance Free | Breakdance Pro | |
---|---|---|
Click | ✅ | ✅ |
Page load | ❌ | ✅ |
Page scroll | ❌ | ✅ |
Inactivity | ❌ | ✅ |
Exit intent | ❌ | ✅ |
The popup builder of Breakdance gives you a full control over the popup content and popup elements like overlay and close button. You also have an option to set the popup position.
Furthermore, you can also set on which pages your popup should show up.
# Custom Assets (Font and Icon)
Breakdance is no different to other page builders in terms of asset. It is also integrated with Google Fonts and Font Awesome by default.
But for the sake of site performance, you may want to use local assets instead. Breakdance allows you to use both custom font and custom SVG icon.
— Custom Font
Custom font is only available on the pro version. To add a new custom font, you can click the three-dot icon on the top bar inside the Breakdance editor and select the Preferences menu. From the appearing dialog window, you can click CUSTOM FONTS tab and upload the font file you want to use.
Although Breakdance allows you to use a custom font on your design, it has no built-in feature to disable Google Fonts. So, you will still see the fonts from Google Fonts on the list when setting the font family.
If you want to remove the Breakdance and Google Fonts integration, you can use the following snippet:
add_filter("breakdance_register_font", function ($font) {
// disable all Google Fonts
$isGoogleFont = !!$font['dependencies']['googleFonts'];
if ($isGoogleFont) {
return false;
}
return $font;
});
— Custom Icon
The icons collection of the Breakdance page builder are supplied by Font Awesome (the free version) and IcoMoon. In case you want to use your own icon, you can do so.
Adding a new icon can be done directly via the Breakdance editor. You can simply click the Upload button on the dialog window that appears after you click the icon picker.
Breakdance supports bulk upload so that you don’t need to upload your icon files one by one. The icon file should be in an SVG format.
# Third-Party Integrations
The Form Builder element of Breakdance — which I already covered — supports integration with popular services like MailChimp and ActiveCampaign. These integrations are meant to marketing purpose whereby you can collect addresses from your visitors.
In addition to marketing, Breakdance also supports integration with Google reCAPTCHA, which is intended to security.
For every third-party service you want to use on Breakdance, you need to provide the API key. Breakdance offers a centralized location to manage API keys. To access it, you can open the API Keys menu on the Breakdance settings page.
I personally love the approach rather than adding the API key via the editor, which often times can interrupt the design process.
Here is the list of the third-party services you can integrate your Breakdace with:
Breakdance Free | Breakdance Pro | |
---|---|---|
ReCAPTCHA | ✅ | ✅ |
✅ | ✅ | |
Google Maps | ✅ | ✅ |
Discord | ❌ | ✅ |
Slack | ❌ | ✅ |
MailChimp | ❌ | ✅ |
ConverKit | ❌ | ✅ |
MailerLite | ❌ | ✅ |
GetResponse | ❌ | ✅ |
Drip | ❌ | ✅ |
ActiveCampaign | ❌ | ✅ |
# Editor Access
This feature is super useful if you are a freelancer, agancy, or whatever you call yourself but your job is to create websites for clients.
With this feature, you can set whether you want your clients to have access to the Breakdance editor or not. You know, they can breakup your design if they have a full control over the design.
If you want it, you can let your clients to edit the content of your design (text and image) without the ability to change the design.
To access this feature, you can go to User Access menu on the Breakdance settings page.
# Coming Soon Mode
Imagine you are building a website for a big brand and the brand annouced on social media that its website is about to come so on. In a case like this, chances are the loyal customers of the brand can’t wait for the website to be ready.
As the one responsible of building the website, you can notify its customers that the website is still under development when they visit the website.
Breakdance has a built-in featute to enable either coming soon or maintenance mode on your website.
You can use the Breakdance editor to create the comin soon or maintenance page you want to display.
You can access the feature from the Maintenance Mode menu on the settings page. The feature itself is available on both free version and pro version.
# Custom Code and CSS
— Code
The custom code feature of Breakdance can be used to add both a JavaScript and HTML code snippets. With this feature, you don’t need to edit the header or footer file of your theme to add a snippet to add a custom feature to your website manually.
A simplest instance of the usage of this feature is to add the Google Analytics tracking code.
To add a code snippet using this feature, you can open the Custom Code menu on the Breakdance settings page. You can add custom code to either header or footer of your website.
— CSS
If you know CSS and want to apply a custom style via CSS code, Breakdance also accomodates it.
Interestingly, the custom CSS feature of Breakdance is available on both versions. Also, you can enlarge the editor for more convenient editing.
Unfortunately, it doesn’t support autocomplete yet.
💰 Breakdance Pricing
The free version of Breakdance is more than enough to create a simple website. You can add many elements. Including a contact form.
But if you want to access its advanced features, you can upgrade to the pro version to unlock them. Breakdance accepts subscription model only. It doesn’t accept a one-time purchase model like Divi.
There are three plans that Breakdance offers for the pro version. There are no differences in terms of features. The only thing setting them apart is the number of websites you can install.
1 Website | 10 Websites | Unlimited Websites | |
---|---|---|---|
Price | $99.99/year | $199.99/year | $299.99/year |
Try it now | Try it now | Try it now |
👍🏻👎🏻 Breakdance Pros and Cons
No product is perfect. Neither Breakdance.
While it has some handy features to make it easy for you to create a website in WordPress, some downsides exist.
# Pros
To be honest. I am not a professional programmer. I only know about programming a little bit. I always use a page builder to build all my WordPress websites, with Elementor being my primary option alongside Divi.
I have been using Elementor for over 5 years. One thing I love about Elementor is its editing experience whereby I can create a whole website without touching a single line of code.
When trying Breakdance, I hardly find any difference. It offers a super intuitive page editing experience like Elementor with a centralized panel on the left. Tons of design elements available to make the design process even more fun.
In Breakdance, you can add more elements to your design without installing an extra plugin.
Its free version is superior. Hardly any page builder plugins out there that offer features like Breakdance does on the free version.
Breakdance Pros:
- Easy to use
- Feature-rich
- Its free version is superior
- Adoptable by everyone
# Cons
The abundance of design elements is something that makes Breakdance superior than other page builder plugins.
But honestly, it is also something that bothers me a bit.
Some elements in Breakdance are basically variations of existing elements. For instance, Text, Rich Text, Wrapper Text, and Heading should all be one element.
I personally prefer the Divi approach in terms of design element whereby it maintain its design element to be as few as possible, but functionally appropriate.
Breakdance is not the best option if you hate subscription model as it doesn’t accept lifetime membership.
Breakdance Cons:
- Unecessary design elements
- No extension support
- No lifetime membership for pro version
Conclusion: Do I Recommend Breakdance?
Overall, yes. But, there is no absolute answer to the above question.
If you are an Elementor user who are looking for an alternative, I can say that there is no better option than Breakdance.
Breakdance is the best Elementor alternative from both feature and functionality perspectives. Nearly all features you can find in Elementor are available in Breakdance. Some features — such as form builder, theme builder, and popup builder — are even available on the free version although with limited capabilities.
Breakdance, however, is not the right option if you are looking for a page builder plugin that accept one-time payment option. You should go to Divi for this.