Breakdance Review: A Complete Solution to Create a Website in WordPress

Breakdance is a newcomer in the page builder segment of WordPress plugin. Its initial stable version (Breakdance 1.0) has just been released in September 2022. Even so, the people behind Breakdance are not really new in the page builder world.

The plugin is developed by Soflyy, the developer company that also develops Oxygen, another page builder plugin for WordPress.

Same as its older brother, Breakdance also specifically targets agencies or freelancers building websites for clients. It offers a single pricing option whereby you can use your subscription license on unlimited WordPress websites.

If you want to learn more about Breakdance, read on.

Note: This article will not compare Breakdance and Oxygen. Instead, it will focus on covering the Breakdance features.

A Brief Intro About Breakdance

Like it or not. Elementor is still the first name to come in mind in terms of page builder plugin for WordPress. However, popular doesn’t mean the best. Especially for agencies wanting to create unlimited websites. Elementor has no plan that allows you to use your license on unlimited websites.

Breakdance, on the other hand, is aimed specifically at agencies or anyone that wants to create unlimited websites. You can use your subscription license on as many WordPress websites as you want just like Divi. That being said, Breakdance is a great Elementor alternative if you want to build unlimited WordPress sites with a page builder plugin.

On the technical aspects, Breakdance is not much different than other existing page builders. It comes with a visual editor offering a responsive editing feature to allow you to optimize your design on all screen sizes (desktop, tablet, smartphone). The Breakdance editor is built with Vue.js. You can monitor the Breakdance development plans on its roadmap page.

There is a unique thing you need to know about Breakdance. It has a setting option to disable your WordPress theme. When you use this setting option, the active theme on your website will not be loaded and has no impact on your site’s performance or appearance. You can replace your theme parts such as header, footer, and archive pages using the theme builder feature of Breakdance (will be covered later). With this setting option, you can control every single part of your WordPress website with Breakdance.

Breakdance Editing Experience

As you can see on the screenshot above, Breakdance has a clean enough editor — which is available in a light mode by default. You can enable the dark mode if you are more convenient with it. On the initial state, your Breakdance editor consists of three parts:

• The element panel on the right side. This panel will turn into a settings panel as you click on an element on the canvas area
• The canvas area on the center side which you can use to place the design elements
• Top bar area which you can use to access some menus such as full-site editing, navigator, etc.

An additional panel will open up on the right side as you access a menu on the top bar.

Unlike, for instance Elementor, Breakdance doesn’t offer a setting option to set the page layout. When editing a new page with Breakdance, you will always have a blank canvas (without sidebar).

The editor or Breakdance comes with the following features:

— Navigation

Most page builders have a navigation feature to make it easier for the users to learn your design structure. This feature is especially useful when editing a long page consisting of lot of elements. In Breakdance, the feature is called Structure. You can access it by clicking the stacking icon on the right side of the top bar.

There are several things you can do in Structure other than investigating your design elements and structure. You can also use it to rearrange the order of design elements, duplicate a design element, and delete a design element.

— Responsive Editing

In today’s age, creating a stunning page is not enough. You also need to make sure that the page you are creating looks good on all device screen sizes (desktop, tablet, and smartphone). Responsive editing is a common feature available on all page builder plugins for WordPress. Breakdance is no exception.

When editing a page in Breakdance, you can switch to another device type by clicking the device icon on the center area of the top bar. There are five breakpoint options you can choose from:

• Desktop
• Tablet (landscape mode)
• Tablet (portrait mode)
• Phone (landscape mode)
• Phone (portrait mode)

To optimize your design on all screen sizes, you can use a different value on certain setting. For instance, you can set a different padding value on desktop, tablet, and smartphone. You can hover your cursor over a setting label and click the device icon to show device options.

— Version History

Version history is another crucial feature that nearly all page builder plugins have. With this feature, you can effortlessly learn the changes you have made to your design from the beginning you edited it. The feature is also pretty much useful if you accidentally made a change that you didn’t mean to. You can simply check the previous version and restore it.

In Breakdance, you can access the version history feature by clicking the three-dot icon on the top bar and select History.

— Full-site Editing

Full-site editing is a new approach in WordPress which allows you to edit multiple parts on your website without leaving the editor. In most page builder plugins — including Divi Builder and Elementor — full-site editing supports only three parts: current page, header template, and footer template.

In Breakdance, you can edit all site parts and pages without leaving the editor. If a page or part was previously edited with Breakdance, it will be available on the full-site editing list. You can simply click it to edit it

— Previewing and Publishing Your Work

Overall, the editing experience offered by Breakdance is great. It has a clean, intuitive editor. However, when it is time to preview and publish a page or custom template, the process is not that smooth. You need to back and forth between the frontend and backend.

Breakdance offers no button on the editor area to directly preview or publish your page like Elementor and Brizy. To preview your work on a live page, you need to exit from the editor and re-enter to edit it again. While to publish the page, you need to exit from the editor and go to the backend (Gutenberg) to publish it.

Breakdance Design Elements

The availability of design elements determines what you can do with a page builder. Breakdance comes with plenty of design elements. From basic elements like button and image to advanced elements Loop Builder and Advanced Tabs.

Before adding a certain element, you can add a container to place and arrange the layout of elements. You have two container options: section and column.

The design elements of Breakdance are grouped in 7 categories.

• Basic
• Blocks
• Site
• Advanced
• Dynamic
• Forms
• WooCommerce

— Basic Category

Section

Columns

Div

Heading

Text

Rich Text

Text Link

Button

Image

Video

Icon

— Blocks Category

Icon Box	Basic Bar	Notification Bar
Image Box	Basic Slider	Image Hover Card
Basic List	Circle Counter	Image with Zoom
Checkmark List	Simple Counter	Masker
Icon List	Tabs	Google Map
Pricing Table	Countdown Timer	Facebook Comments
Blockquote	Lottie Animation	Facebook Like Button
Stats Grid	Scrolling Image	Facebook Page Plugin
Business Hours	Image Accordion	Facebook Post
FAQ	Logo List	Facebook Share Button
Gallery	Dual Heading	Facebook Videos
Social Icons	Animated Heading	Twitter Button
Star Rating	Simple Testimonial	Twitter Embed Tweet
Fancy Divider	Fancy Testimonial	Twitter Timeline
Progress Bar	Image Comparison	Social Share Buttons

— Site Category

Header Builder

WP Menu

Menu Builder

Search Form

— Advanced Category

Wrapper Link

Code Block

Advanced Tabs

Global Block

Shortcode

Shortcode Wrapper

HTML IMG

— Dynamic Category

Comment Form

Comments List

Post Meta

Template Content Area

Post Title

Post Excerpt

Post Content

Post Featured Image

Author

Adjacent Posts

Archive Title

Post List

Post Loop Builder

Widget

— Forms Category

Forgot Password Form

Form Builder

Login Form

Register Form

Product List

Product

Product Builder

Related Products

Upsell Products

Shop Page

Cart Page

Checkout Page

Account Page

Order Tracking Page

Mini Cart

Shop Filters

Woo Widget

Woo Breadcrumb

Breakdance General Features

— Theme Builder

Theme builder allows you to go further from just creating pages. You can use it to create custom templates for your site parts such as header, footer, archive pages, single post template, and so on.

In Breakdance, you can use the theme builder to create the following site parts:

• Header
• Footer
• Archive pages (tags, categories, author, date)
• Single post
• Single page
• 404 page
• Search results
• Custom post type template

If you use WooCommerce, you can also use the theme builder feature of Breakdance to create custom templates for the following parts:

• Single product page
• Product archive page
• Shop page

In Breakdance, you can set where and how a custom template to apply. For instance, you can set a custom header template to apply to blog posts for logged-in users only as below.

In the intro section, we mentioned that Breakdance offers a setting option to disable the active WordPress theme on your website. Using this setting option allows you to build a WordPress website completely with Breakdance. The best part is that you will still be able to add custom function via Theme File Editor as Breakdance will create a new functions.php file when you disable your theme.

You can also do things you usually on theme customizer such as setting site icon, adding custom CSS, setting the homepage, and so on.

Furthermore, Breakdance also allows you to create an advanced menu on your header using the Menu Builder element.

— Form Builder

On the elements panel of the Breakdance editor, you will find a category called Forms. There are four form elements you can find on this category as follows:

• Forgot Password
• Form Builder
• Login Form
• Register Form

While other form elements have a specific use according to their names, the Form Builder element can be used to create several form types. It is the element you need to create an email subscription form, contact form, to a survey form.

The Form Builder widget supports the following field types:

• Text
• Email
• Text area
• URL
• Phone number
• Radio
• Checkbox
• Select
• Number
• Date
• Time
• Password
• HTML
• Hidden

While for the form action, you can choose the following actions:

• Send to ActiveCampaign
• Run a JavaScript Code
• Send to ConverKit
• Send to Drip
• Send to Discord
• Send to Slack
• Send to Email
• Send to GetResponse
• Send to MailChimp
• Send to MailerLite
• Open a Popup
• Send to Breakdance’s built-in form submission manager

Interestingly, you can apply a display condition to a field. Meaning that a field will only show up when the condition is met. For instance, you can set a certain field to show up only when the previous field is filled in.

To add a security to your form, Breakdance offers integration with reCAPTCHA. Or you can also enable Honeypot.

— Popup Builder

If you often create popups on your website, then you don’t need to install an additional plugin with Breakdance as it comes with a built-in popup builder.

With the popup builder feature of Breakdance, you can create an eye-catching popup with your own design. The popup creation process is done via the Breakdance. Meaning that you can add any element you need, including the Form Builder element — which you can make use of to create a less annoying email subscription popup. You can simply disable the overlay to create a less annoying subscription popup.

The Breakdance popup builder supports display condition just like theme builder. In other words, you can set a location or two where a popup to show up. Also, the display condition allows you to set the popup to show up based on certain parameters, such as:

• Post type
• Web browser
• Operating system
• Breakpoint
• Login status
• User role
• Date

About the trigger, you can set your popup to show up based on the following parameters:

• On page load
• On page scroll
• On Page scroll up
• User inactivity
• Exit intent
• On click

Furthermore, you can also set how often a popup to show up based on page load number and session.

— Dynamic Content

We have mentioned above that Breakdance comes with a theme builder feature which you can use to create custom templates for your site parts. Of course, you can add dynamic content to your custom templates such as post title, post meta, featured image, and so on.

Here is the list of dynamic content supported by Breakdance:

Text	Image	URL
Post Content	Post featured image	Post permalink
Post Title	Post image attachment	Featured image URL
Post Excerpt	Site logo	Site URL
Post Terms	Author image (avatar)
Post Time	WooCommerce product page
Post Date	WooCommerce product gallery
Comments Number
Featured image texts (alt text, caption, title)
Archive title
Archive description
Site title
Site tagline
Author name
Author bio
WooCommerce product title
WooCommerce product description
WooCommerce product terms
WooCommerce product rating
WooCommerce product price
WooCommerce product SKU
WooCommerce product stock
WooCommerce product sale

In addition, you can also add dynamic content via custom fields plugin (e.g., ACF).

— Loop Builder

Breakdance is designed to be a multi-purpose page builder plugin. You can use it to create any type of website. Loop Builder is useful if you want to use Breakdance to create complex, dynamic website such as a listing site.

Loop Builder allows you to create a listing item template and use it to a listing page or archive page. You can add dynamic content to the listing item template. From the default dynamic content of WordPress (featured image, post title, post meta, etc.) to dynamic content you create with ACF or other custom fields plugin.

— Access Manager

Giving your clients an access to the page design is a bit risky as they can break the design you created tirelessly. But what if the clients want to change the content on the design themselves?

Breakdance comes with a useful feature to make your work with your clients more seamless. You can give your clients an access to the Breakdance editor, but only to change the content — without being able to change the design. Take a look at the following screencast.

As you can see, there are no design tab and settings tab on the settings panel of Breakdance. Also, there is no Add button to add a new element.

Normally, the settings panel should look like this:

To set your clients to be able to change the content only, you can go to Breakdance settings page (Breakdance -> Settings). From here, you can set the access based on user role. There are three access type you can set:

• Full access
• Edit content
• No access

— Coming Soon and Maintenance Mode

While your website is still under the development process, you might want to enable the coming soon mode. Breakdance comes with a built-in feature to enable either the coming soon mode or maintenance mode so that you don’t need to install an additional plugin.

You can create the coming soon page using the Breakdance editor and simply select it. While your website is in a coming soon mode, you can set who can access it based on the user role and login status.

— Built-in Optimization Options

On the settings page of Breakdance, you can also access some settings related to site performance. Some settings you can set are:

• Remove Gutenberg blocks CSS
• Disable WordPress emoji
• Disable WordPress OEmbed
• Disable WordPress generator meta tag

In addition to the settings above, Breakdance also supports lazy load on image and video elements.

— Code Inserter

Another handy feature offered by Breakdance is code inserter. You can use this feature to insert a code (e.g., Google Analytics tracking code) to the header and footer area of your website.

— Conditional Logic

Some page builder plugins such as Brizy and Divi Builder have a built-in feature to set a conditional logic (also referred as display condition). Conditional logic is a state where an element is displayed only when it meets a certain condition.

As mentioned above, you can set a display condition (conditional logic) on theme builder and popup builder. In addition, you can also set a display condition to an element on a regular page.

Conditional logic is useful to create a membership website whereby you can display content for logged in users only. Or vice versa, you can hide content (e.g., ads) from logged in users.

The conditional logic feature of Breakdance supports the following parameters:

• Page
• Post ID
• Post status
• Comments number
• Author
• Feature image
• User login status
• User role
• User registration date
• Dynamic data
• Custom PHP
• Web browser
• Operating system
• Date and time
• Coming from search engine
• Page view count
• Session count

— Action Links

Breakdance also plays very well as a landing page builder plugin. First, it comes with a Form Builder element as we have covered above. Second, you can create a call-to-action button using the Button element and directly open WhatsApp chat, send an email, make a call, and send a text message.

Breakdance Design Features

— Layout

# Flexbox Alignment

Flexbox is a CSS feature that allows you to align and distribute elements within a container. Whether vertically or horizontally. Today, most page builders already have this feature to make it easier for users to arrange the layout of elements. In the context of page builder, container can be a section, column, or element wrapper.

In Breakdance, you can easily set a flexbox alignment without dealing with CSS code. You can apply a flexbox alignment to a section, column, or element (button, image, etc.).

# Inline Positioning

Inline positioning is useful if you often place two elements or more side by side on your design. Here is an example:

In Breakdance, you can also set an inline positioning to an element without dealing with CSS code, which is great to streamline your workflow. You can go to the advanced tab on the settings panel and open the Wrapper menu. You will see a setting option to set an inline positioning here.

# Custom Positioning

With custom positioning, you can place an element anywhere withing your design. You can achieve a unique layout with this feature like the one below:

Custom positioning can also be accessed via the Wrapper menu on the Advanced of the settings panel.

# Margin & Padding

Margin and padding are essential settings in page builder. You can use them to add the tab between an element and other elements around it. Breakdance allows you to effortlessly set the margin and padding of an element. There are 8 unit types you can use for your margin and padding: pixel (px), percent, emphemeral (em), root em (rem), viewport height (vh), viewport width (vw), auto, and custom.

# Z-Index

Z-index is a CSS property that specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Breakdance allows you to set a value of Z-index property to a certain element without dealing with CSS code. Z-index is useful if you want to make a certain element to always on top.

— Media and Assets

# Icon Library

Icon is one of the elements widely found on a web page other than image and text. Breakdance itself has some elements to add icons to your design. Such Icon, Icon Box, to Icon List. Also, an icon can be added to a button.

To make it easy for you to add an icon, Breakdance is integrated with FontAwesome and IconMoom (both are free versions). There are over 2,000 icons you can choose from. If you need more, you can upload your own icon sets. Breakdance supports custom icons in an SVG format.

# Media

Breakdance allows you to add media files to your design and play around with it. For instance, you can add a background video to a section. Or you can add an image to your design and apply some stylings such as image masking, CSS filters, and so on.

Here are features you can find on Breakdance related to media:

• Background Videos (supports external sources — YouTube and Vimeo)
• Background Slideshow
• Shape Divider
• Image Masking

— Color and Visual Effects

Breakdance comes with features that allow you to play around with colors and visual effects. One of which is advanced gradient builder. Also, you can effortlessly add a CSS filter to an image without adding a custom CSS code yourself.

# Advanced Gradient Builder

If you love to add a gradient to your design, then this feature is something you will love so much. In Breakdance, you can add a gradient consisting of multiple colors (more than two). Breakdance supports two gradient types: linear and radial.

In Breakdance, you can add gradient to a section background, column background, overlay, and button.

# Visual Effects

In addition to advanced gradient builder above, Breakdance also offers the following features to decorate your elements:

• CSS Filters
• Blend Modes
• Box Shadow
• Background Overlay

— Motions and Interactions

Want to add some animation effects to your design to make it more alive?

Breakdance offers some animation effects that you can apply to your design. From a simple animation effect like entrance animation to animation effect that involves user interaction like scrolling effects to sticky effect.

Here are the animation effects offered by Breakdance:

• Scrolling effects
• Entrance animation
• Sticky effect
• Hover Effect

You can access the animation effects above from the Advanced tab on the settings panel of Breakdance.

— Global Settings and Elements

Global settings is a common feature offered by most page builder plugins. A global setting allows you to work more efficiently. A simple instance. You can use a global setting for the icon color. By using a global color on the icons, you only need to make the change once if you want to change the color on the icons that use the global color.

The same case also applies on typography.

In addition to color and typography, Breakdance also allows you to set a global element. You can access the global settings and global elements by clicking the three-dot icon on the top bar menu and select Global Settings.

To add a new global color, you can click the pencil icon on the Palette option under the Colors settings block.

While to add a new global typography, you can click the pencil icon on the Presets option under the Typography settings block.

— Custom CSS

Breakdance already offers plenty of styling options you can apply to a creative page. In case you can’t find a certain styling option you want, you can achieve it via custom CSS.

Adding custom CSS in Breakdance it really straightforward. You can simply add the element selector followed by the CSS declaration — much like in Elementor. Each Breakdance element comes with a unique class selector. You can find the selector of an element by inspecting it on a live page.

To add a custom CSS to an element, you can go to the Advanced tab on the settings panel. You can write your CSS code on the Custom CSS field.

You can use the method above to add custom CSS to an individual element.

Alternatively, you can also add custom CSS via theme customizer or even your theme’s style.css file. To apply the custom CSS, you can add the CSS ID or CSS class to an element you want to add the custom CSS to.

Conclusion — Breakdance Review

Breakdance is a page builder plugin aimed at agencies or freelancers wanting to create unlimited websites in WordPress. It is built by the same company as the one that develops Oxygen, yet easier to use.

Breakdance allows you to create the whole parts of your website with it by disabling the active theme on your WordPress site then create the custom templates for the header, footer, single post, and so on using its theme builder feature. Breakdance also comes with a built-in loop builder feature which is very useful to create a complex dynamic website, especially a listing website. Its form builder feature — combined with popup builder — allows you to create a powerful email subscription popup to collect leads.

The editor of Breakdance — which is built with Vue.js — is extremely easy to use. It supports responsive editing and has a simple interface that is convenient to work with.

Key features of Breakdance:

• Responsive editing
• Extensive design element collections
• Theme builder
• Form builder
• Popup builder
• Loop builder
• Access manager
• Conditional logic
• Built-in optimization options
• Plenty of layout options (supports flex)
• Global settings
• Animation effects
• Custom CSS