Breakdance Free vs Pro: A Full Review of the Closest Elementor Competitor

Last updated on
Mar 30, 2024

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.

The statement of the Breakdance creator about its Elementor inspiration.

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:

The design element groups inside the Breakdance editor.

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.

List of CSS display options in Breakdance.

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 CSS Flexbox implementation in Breakdance is super cool.

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.

The history feature in Breakdance.

# 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.

The components you can set the global settings of in Breakdance.

— 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.

You can integrate Breakdance with Gutenberg via shortcode.

# 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.

Responsive editing feature in Breakdance.

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.

Adding a new custom breakpoint in Breakdance.

🛠️ 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

HeadingFancy DividerWP Menu
TextBasic SliderAdvanced Accordion
Rich TextSimple CounterGlobal Block
Text LinkScrolling ImageShortcode
ButtonSimple TestimonialHTML IMG
ImageImage ComparisonPost Title
VideoNotification BarPost Excerpt
IconImage With ZoomPost Content
Icon BoxFacebook CommentsPost Featured Image
Image BoxFacebook Like ButtonAuthor
Basic ListFacebook Page PluginArchive Title
Icon ListFacebook PostPost List
BlockquoteFacebook Share ButtonWidget
FAQFacebook VideoForgot Password Form
Social IconsTwitter ButtonForm Builder
Star RatingTwitter TimelineLogin Form
TooltipSocial Share ButtonsRegister Form
The design elements available on the free version of Breakdance.

— Pro Design Elements

Checkmark ListFancy TestimonialWrapper Link
Pricing TableImage Hover CardCode Block
Stats GridMaskerAdvanced Tabs
Business HoursTable of ContentsAdvanced Slider
GalleryScroll PagesShortcode Wrapper
Progress BarBack to TopComments Form
Circle CounterGoogle MapComments List
TabsTwitter Embed TweetPost Meta
Counter TimerInstagram PostAdjacent Posts
Lottie AnimationHeader BuilderPost Loop Builder
Image AccordionMenu BuilderRepeater Field
Logo ListSearch FormBreadcrumbs
Dual HeadingContent Toggle
Animated HeadingFancy Container
The design elements available on the pro version of Breakdance.

— WooCommerce Elements

Product ListCart Empty Message
ProductCheckout Page
Product BuilderCheckout Builder
Related ProductsCheckout Coupon Form
Upsell ProductsCheckout Login Form
Shop PageAccount Page
Cart PageOrder Tracking Page
Cart ContentsMini Cart
Cart TotalsWoo Widget
Cart Cross SellsWoo Breabcrumb
The design elements of Breakdancen designed specifically for WooCommerce.

# 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 FreeBreakdance 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
The custom templates you can create with Breakdance theme builder feature.

# 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 FreeBreakdance 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
The dynamic text you can add to your design in Breakdance.

— Image

Breakdance FreeBreakdance Pro
Featured Image
Post Image Attachment
Custom Field
Site Logo
Author Avatar
WooCommerce Product Image
WooCommerce Product Gallery
The dynamic image you can add to your design in Breakdance.

— Link

Breakdance FreeBreakdance 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
The dynamic link you can add to your design in Breakdance.

# 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 FreeBreakdance Pro
Text
Email
Text area
URL
Phone number
Radio
Checkbox
Select
Number
Date
Time
File upload
Password
Hidden
HTML
Step
The form field types supported the Form Builder element of Breakdance.

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 FreeBreakdance 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
The form actions supported the Form Builder element of Breakdance.
— 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
The condition logic options on the Form Builder element of Breakdance.

# 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).

The Display Condition feature in Breakdance.

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 FreeBreakdance 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 FreeBreakdance Pro
Click
Page load
Page scroll
Inactivity
Exit intent
The trigger types supported by Breakdance popup builder.

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.

Installing new icons in the Breakdance page builder editor.

# 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.

They centralized API key manager in Breakance.

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 FreeBreakdance Pro
ReCAPTCHA
Facebook
Google Maps
Discord
Slack
MailChimp
ConverKit
MailerLite
GetResponse
Drip
ActiveCampaign
List of third-party services supported by Breakdance.

# 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.

The feature to set editor access in Breakdance.

# 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.

Maintenance mode can be found on the settings page of Breakdance.

# 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.

Custom Code feature in Breakdance. You can add both HTML and JavaScript code snippets using this feature.

— 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.

The CSS editor of Breakdance.

💰 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 Website10 WebsitesUnlimited Websites
Price$99.99/year$199.99/year$299.99/year
Try it nowTry it nowTry 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.

This page may contain affiliate links, which help support the project. Read our affiliate disclosure.

Aliko Sunawang

Aliko is a professional blogger and web creator. He has been blogging with WordPress since 2012. In his spare time, he loves going out to take some photos.

Work smarter with the right stack.