While Elementor is still becoming the market leader in the page builder segment, many competitors are trying to grab the throne. Breakdance is one of those competitors. In this Elementor vs Breakdance post, we will compare the features offered by the two, with the main purpose is to help you pick the best option for your next projects.
Let’s start with Breakdance introduction first as we are pretty sure you are not too familiar with it yet — unlike Elementor.
Breakdance is a new page builder plugin from Soflyy (the developer of Oxygen). From the editor perspective, there is not much difference between Breakdance and Oxygen (except the default look whereby Breakdance is available in a light mode while Oxygen offers dark mode by default). But the overall editing experience is not much different.
The most notable difference between Breakdance and Oxygen is how you get them. To get Breakdance, you need to make a yearly subscription. While to get Oxygen, you can pay once.
Elementor vs Breakdance: The Target Market
You can easily identify the target market of a WordPress plugin by learning the pricing plans. When you check out the pricing page of Breakdance, you will only see one pricing plan option costing $349 per year (normal price). This plan allows you to use your license on unlimited websites. From here, you can easily make a conclusion that Breakdance is aimed at agencies and freelancer creating websites for clients.
Meanwhile, Elementor is aimed at all WordPress user layers. From bloggers, online business owners, freelancers, to agencies. Elementor offers four pricing plans which you can choose according to your needs. If you are a blogger taking care of one blog, for instance, you can subscribe to the Essential plan costing only $59 per year.
Elementor vs Breakdance: General Features
First thing first. The Elementor version we will compare with Breakdance here is the pro version. If you haven’t used Elementor yet before, you can read the differences between between Elementor Free and Pro in this post.
— Theme Builder
Both Elementor (Elementor Pro more precisely) and Breakdance come with a theme builder feature. With this feature, you can create custom templates for your site parts such as header, footer, single post, archive pages, 404 page, and so on. You can create a custom template in a visual way using the editor of the page builder you use.
The theme builder feature of Elementor allows you to create custom templates for parts like header, footer, and so on. So does, Breakdance.
Be it Elementor or Breakdance also allows you to set a display condition to set where a template to apply (entire site, specific page(s), specific post(s), and so on).
Elementor | Breakdance | |
---|---|---|
Header | ✅ | ✅ |
Footer | ✅ | ✅ |
Single post | ✅ | ✅ |
Single age | ✅ | ✅ |
Archive pages (category, tag, author) | ✅ | ✅ |
Search results page | ✅ | ✅ |
404 page | ✅ | ✅ |
Custom Post Type | ✅ | ✅ |
— WooCommerce Builder
WooCommerce is a popular plugin to add e-commerce functionality to your WordPress site. After installing and activating WooCommerce, you will find the following pages and templates on your WordPress site.
- Shop page
- Cart page
- Checkout page
- My Accounts page
- Single product template
- Product archive template
You can set custom pages to replace the default WooCommerce pages (shop page, cart page, checkout page, and My Accounts page) from the WooCommerce settings page.
Elementor and Breakdance come with useful elements designed for the pages above. For instance, Breakdance offers the Checkout Page element which you can add to your custom checkout page created with Breakdance.
What about the WooCommerce templates?
In addition to creating the custom templates for default site parts, the theme builder feature of Elementor and Breakdance also allows you to create custom template for WooCommerce parts as follows:
- Single product page
- Product archive pages
Elementor | Breakdance | |
---|---|---|
Shop page | ✅ | ✅ |
Cart page | ✅ | ✅ |
Checkout page | ✅ | ✅ |
My Accounts page | ✅ | ✅ |
Single product template | ✅ | ✅ |
Product archive template | ✅ | ✅ |
— Form Builder
Both Elementor and Breakdance come with elements dedicated to creating forms. Elementor has two elements to create forms: the Login widget to create a login form and the Form widget to create a wide range of form types.
Meanwhile, Breakdance has four elements dedicated to creating forms: Forgot Password Form, Form Builder, Login Form, and Register Form.
# Elementor Form Builder
As mentioned above, Elementor offers two elements (widgets) to create form. You can use the Login widget to create a custom login page on your website. To create other form types you can use the Form widget.
The Form widget of Elementor supports the following field types:
- Text
- Text Area
- URL
- Telephone
- Radio
- Select
- Checkbox
- Acceptance
- Number
- Date
- Time
- File Upload
- Password
- HTML
- Hidden
To protect your form from spammers, you can integrate your form with Honeypot or reCAPTCHA. In Elementor, you can also create a multi-step form if you want to.
The Form widget of Elementor supports the following actions:
- Send to email
- Send to MailChimp
- Send to ActiveCampaign
- Send to GetResponse
- Send to ConverKit
- Send to MailerLite
- Send to MailPoet
- Send to weMail
- Send to Slack
- Send to Discord
- Send to Drop
- Open a popup
Furthermore, Elementor also comes with a built-in submission manager in case you want to save your form submissions to your database.
# Breakdance Form Builder
Breakdance comes with more form widgets than Elementor. It has four elements for a specific form type:
- Forgot Password Form: To create a lost forgot password form
- Login Form: To create a login form
- Register Form: To create a registration form
- Form Builder: To other email opt-in form, contact form, and so on.
The Form Builder element of Breakdance supports the following field types:
- Text
- Text Area
- Phone Number
- Radio
- Checkbox
- Select
- Number
- Date
- Time
- Password
- Hidden
- HTML
While for the action, it supports:
- Send to ActiveCampaign
- Send to JavaScript
- Send to Drip
- Send to Discord
- Send to Slack
- Send to email
- Send to GetResponse
- Send to MailChimp
- Send to MalierLite
- Open a popup
Breakdance also comes with a built-in submission manager. Furthermore, it supports conditional logic to allow you to show a field based on a certain parameter. For instance, you can set a field to show up only if the previous field is filled in.
Elementor | Breakdance | |
---|---|---|
Number of supported fields | 16 | 13 |
Third-party integration | ✅ | ✅ |
Built-in submission manager | ✅ | ✅ |
Multi-step | ✅ | ❌ |
Conditional logic | ❌ | ✅ |
Form security | Honeypost, reCAPTCHA | Honeypost, reCAPTCHA |
Login form | ✅ | ✅ |
Registration form | ❌ | ✅ |
Lost password form | ❌ | ✅ |
— Popup Builder
A popup builder has many uses in WordPress. While most WordPress users use a popup builder to create an email opt-in popup, you can also use it to add a certain feature on your website as well. For instance, you can use a popup builder to create a full-screen menu.
Be it Elementor or Breakdance comes with a sophisticated popup builder feature which you can use to create the following things:
- Email opt-in popup
- Full-screen menu
- Notification bar
- Content locker
When creating a popup using Elementor or Breakdance, you have a full control over the design since the process of popup creation is done in their respective editor. So technically, you can add any element you want.
The popup builder of Elementor and Breakdance supports display condition to allow you set where a popup to show up on your website. Whether on the entire website, specific page(s) or post(s). Also, you can set the following trigger types to set how a popup to appear:
Elementor | Breakdance | |
---|---|---|
On page load | ✅ | ✅ |
On page scroll | ✅ | ✅ |
On click | ✅ | ✅ |
After inactivity | ✅ | ✅ |
Exit intent | ✅ | ✅ |
Hide for logged users | ✅ | ✅ |
Show on specific browsers | ✅ | ✅ |
Show on specific devices | ✅ | ✅ |
Coming from search engines | ✅ | ✅ |
— Dynamic Content
Both Elementor and Breakdance comes with a theme builder feature which allows you to create custom templates for your theme parts (header, footer, archive pages, and so on). On your custom templates, you can add dynamic content such as page title, archive title, featured image, and so on.
In addition to the default dynamic content of WordPress (page title, archive title, and so on), Elementor and Breakdance also supports custom dynamic content from plugins like CPT UI and ACF.
Elementor | Breakdance | |
---|---|---|
Post Title | ✅ | ✅ |
Post Excerpt | ✅ | ✅ |
Post Content | ✅ | ✅ |
Post Meta | ✅ | ✅ |
Archive Title | ✅ | ✅ |
Archive Description | ✅ | ✅ |
Featured Image | ✅ | ✅ |
User Avatar | ✅ | ✅ |
User Bio | ✅ | ✅ |
Custom Post Type | ✅ | ✅ |
Custom Fields | ✅ | ✅ |
— Loop Builder
Loop builder is a useful feature to create a complex, dynamic website.
Say you want to create a listing website (e.g., a property listing website). To display the listing items, you plan to create a dedicated listing page. In Elementor, you can use the Posts widget for such a need. While in Breakdance, you can use the Post List element.
However, those elements don’t give you a freedom to add custom metadata to the listing item. You are limited to what’s offered by the elements.
To make it clearer, let’s take an instance. Say you want to add a star rating to your listing items — like the one below:
A loop builder allows you to create a custom template for your listing item and use it anywhere you want. Of course, you can add any element (be it static or dynamic) to your listing item template, including the star rating.
Both Elementor and Breakdance come with a loop builder feature, which will be useful to create a listing website.
— User Access Manager
If you are an agency or freelancer and often create websites for clients, then user access manager is a handy feature for you. With this feature, you can give your clients an access to the pages you have created, but without the ability to change the design settings. Instead, they can only change the content.
In this context, User Access Manager works by disabling the styling tab on the settings panel for certain user role. For instance, if you enable User Access Manager for the Editor role, all users with an Editor role won’t be abe to access the styling tab.
User Access Manager is a handy feature if you often create websites for clients as not all clients have a design skill. They can break your design if you give a full control over the design.
User Access Manager is available on both Elementor and Breakdance.
— Other Features
In addition to the key features above, Elementor and Breakdance also offer some additional features to ease your job. Such as code inserter which you can use to insert a custom code to your website (e.g., Google Analytics tracking code), action links, and coming soon and maintenance mode.
Elementor vs Breakdance: Design Features
— Responsive Editing
Responsive editing is one of crucial feature you need to notice when picking a page builder plugin. With the feature, you can optimize the design of your page (or custom templates) for all device screen sizes.
In general, there are three screen sizes in the context of web design: desktop, tablet, and smartphone. You can tailor your design according to each device screen size. Both Elementor and Breakdance allow you to do so thanks to their responsive editing feature.
To start optimizing your design for a certain device screen size, you can change the editing mode (the default mode is desktop). In Elementor, you can click the device icon on the bottom side of the settings panel to switch between device modes:
There are three device types you can choose from: desktop, tablet, and smartphone. If you want to optimize you design for a specific screen size, you can also set a custom breakpoint (breakpoint is point where the website content responds according to the device width — in pixels).
To set a custom breakpoint, you can click the gear icon on the top bar area, then go to the settings panel.
In Breakdance, you can switch between device modes by clicking the device icon on the top bar within the editor. You already have 5 device screen size options to choose from. You can also set a custom breakpoints if you want to.
To optimize your design for a smaller device screen (smartphone, for instance), you can also disable an element. If necessary, you also reverse the columns on a section.
Elementor | Breakdance | |
---|---|---|
Custom Breakpoints | ✅ | ✅ |
Reverse Columns | ✅ | ✅ |
Show/Hide Elements | ✅ | ✅ |
— Layout
# Page Layout
One of the handy features offered by Elementor is the ability to set the page layout from the editor. Before start editing your page, you can click the gear icon on the bottom side of the settings panel to set the page layout. You have the following page layout options:
- Default: The default page layout you set from Site Settings
- Elementor Canvas: The blank page layout. Without header and footer
- Elementor Full-width: Similar to Elementor Canvas, but with the header and footer
- Theme: The default page template of your theme
In Breakdance, you only have two options of page layout: blank and default. That too, you have to set the page layout from the Gutenberg editor. Breakdance offers no option to set the page layout from the editor.
— Design Layout
In general, the elements on a page builder fall into three types: section, column, and the actual design elements (called widgets in Elementor). Every time you add a new element, you can set its placement. Also, you can set its margin with other elements around it.
One of the design layout features offered by Elementor and Breakdance is flexbox. This feature allows you to align and distribute elements across each column within a section. Be it vertically or horizontally.
Both Elementor and Breakdance already have flexbox options. Elementor even has a new flexbox container feature to offer more design layout flexibility.
In addition to flexbox, you can also use other design layout options such as inline positioning, custom positioning, and Z-Index.
Elementor | Breakdance | |
---|---|---|
Custom Positioning | ✅ | ✅ |
Z-Index | ✅ | ✅ |
Flexbox Alignment | ✅ | ✅ |
Inline Positioning | ✅ | ✅ |
Margin & Padding | ✅ | ✅ |
— Media and Assets
A design without media element will be tasteless. The media element can be image, image, and icon. You can add these media element types effortlessly on your Elementor or Breakdance design.
# Icon
Elementor relies on Font Awesome (free version) to provide icon library to users. If you want to use your own icon, you can upload them via the Elementor settings page.
Meanwhile, Breakdance offers more icon collections as it uses two icon providers: Font Awesome (free version) and IcoMoon (free version). You can also upload your own icon set in case you want to use custom icons.
# Image
All page builders have one thing in common. They allow you to add images to your design. What’s different is the styles you can apply to your images.
In Elementor and Breakdance, you can apply basic settings such as border radius, size, and alignment. In addition to these basic settings, you can also apply more advanced stylings such as image masking and CSS filters.
Be it Elementor or Breakdance also comes with a built-in lazy load setting to maintain or even improve the speed of your site.
# Video
Video is another media element you can add to your design in Elementor and Breakdance. You can add a video from services like YouTube, Vimeo, and DailyMotion. Sure, you can also upload your own video.
Be it Elementor or Breakdance allows you to control the behavior of your videos. For instance, you can enable the loop option to set a video to continuously play. Or you can mute it if you want a video to play without any sound. For the sake of site speed, you can also enable lazy load to a video.
Elementor | Breakdance | |
---|---|---|
Icon Library | Font Awesome | Font Awesome, IconMoon |
Background Videos | ✅ | ✅ |
Background Slideshow | ✅ | ✅ |
Image Masking | ✅ | ✅ |
Lazyload | ✅ | ✅ |
— Color & Effects
Elementor and Breakdance allow you to play around with colors on your design. Also, you can add effects like box shadow and CSS filter.
A Breakdance feature that is not available in Elementor is advanced gradient builder. In Breakdance, you can create a gradient that consists of multiple colors (more than two).
You can apply the gradient to a button, text and section and column background. You can even turn the gradient background into a cool animation whereby you can control the speed and scale.
In Elementor, you can only add maximum of two colors to a gradient. Also, there is no option to turn your gradient into an animation like the one above.
But, Elementor has a dynamic color feature which is useful if you want to add dynamic color to your website (requires integration with ACF). You can use the feature to, for instance, to create a dynamic background on pages. Another example, you use it to create a custom color for blog post titles.
Another color-related feature offered by Elementor and Breakdance is global color. This feature is extremely useful especially if you have a website consisting of multiple pages and elements. With a global color, you can change the color of multiple elements at once with a single click. Be it on the same page or different pages.
Elementor | Breakdance | |
---|---|---|
Global Colors | ✅ | ✅ |
Dynamic Color | ✅ | ❌ |
Gradient | 2 colors max | More than two colors |
Background Overlay | ✅ | ✅ |
CSS Filters | ✅ | ✅ |
Box Shadow | ✅ | ✅ |
— Typography
Elementor and Breakdance come with some elements dedicated to adding text elements to your design. For instance, you can use the Heading element to add a heading element to a page. Of course, you can also customize the text such as setting the color, font family, font size, and so on.
Both Elementor and Breakdance are integrated with Google Fonts to offer a bunch of font families. Adding a custom font is also possible in Elementor and Breakdance. Elementor supports woff, woff2, and ttf formats. While Breakdance supports only woff and woff2.
Be it Elementor or Breakdance allows you to add a global font. Same as global color, global font is also useful if you have a website consisting of multiple pages. You can change the font setting on multiple texts at once, with a single click.
A feature available on Breakdance that is not available on Elementor is the ability to apply gradient to a text.
You need to deal with CSS code to create a gradient text in Elementor.
Elementor | Breakdance | |
---|---|---|
Global Typography | ✅ | ✅ |
Typography Control | ✅ | ✅ |
Custom Fonts | ✅ | ✅ |
Text Stroke Effect | ✅ | ✅ |
Gradient Effect | ❌ | ✅ |
— Motions and Interactions
As we have disclosed above that Breakdance allows you to create a background gradient and turn it into an animated background. It just one of the animation features you can unlock. There are several other animation-related features you can use. Such as hover effect, mouse effect, parallax effect and so on.
Same as Breakdance, Elementor also comes with some built-in features to make your page looks more alive. Here are some animation-related features offered by Elementor and Breakdance.
Elementor | Breakdance | |
---|---|---|
Scrolling Effects | ✅ | ✅ |
Mouse Effects | ✅ | ❌ |
Hover Animation and CSS Transform | ✅ | ✅ |
Entrance Animations | ✅ | ✅ |
Parallax Background | ✅ | ❌ |
Sticky Effects | ✅ | ✅ |
Animated Gradient Background | ❌ | ✅ |
— Custom CSS
If you find no built-in settings on Elementor or Breakdance for a certain need, you can add custom CSS. Both Elementor and Breakdance allow you to add custom CSS to your design.
The method of adding custom CSS is same on Elementor and Breakdance. You can start with a selector to target the element you want apply the CSS code to. However, since there is official page for element selectors provided by Elementor or Breakdance, you need to inspect the element yourself, which is time-consuming enough. We have created the list of Elementor widget selectors to ease your job in adding custom CSS in Elementor.
A nice thing about Elementor when it comes to custom CSS is the autocomplete feature for CSS properties to avoid mistype as well as saving time. Breakdance has no similar feature.
In addition to adding custom CSS to an element via the pre-defined selectors, you can also add custom CSS via Additional CSS block on theme customizer or a dedicated CSS file on your theme. You can simply add the CSS class or CSS ID of a certain declaration to the element you want to apply the declaration to. Both Elementor and Breakdance allows you to add CSS class or ID to an element.
The Verdict: Which One is the Better?
Elementor and Breakdance are great page builder plugins to make it easier for you to create a website in WordPress. The two have a modern, similar editor. The fact is that both Elementor and Breakdance are built with the most popular JavaScript frameworks. Elementor is built with React.js while Breakdance is built with Vue.js.
Both Elementor and Breakdance also offer similar features to users. From theme builder, WooCommerce builder, popup builder, form builder, to loop builder.
From the pricing side, Breakdance clearly doesn’t target all WordPress users. Instead, it focuses on agencies and freelancers who create websites for clients.
Meanwhile, Elementor is aimed at everyone. From a solo blogger, small business owners, agencies, and so on. It has different plans for each user type. But from the feature perspective, Elementor and Breakdance are not too different. Small differences exist, but not too significant.
2 thoughts on “Elementor vs Breakdance: Features Comparison (Unbiased)”
Hi, thanks for that VS, but what I really wonder is which of the two:
-creates faster loading pages
-is easier/quicker to handle
-needs less additional apps
I work with elementor, and it can be a drag. Running a woocommerce shop means I need to worry about speed and accessibility a lot. Also maintaining a website with 60+ apps can easily become a full time job, so I love everything that makes things more intuitive and takes less apps.
use a proper hosting and you don’t need to worry about your site performance ever.