Being released in September 2022, the team behind breakdance page builder aims to be a competitor for Elementor, Divi, Brix, Zion and other visual site builders on the market. The other site builder from Soflyy on the market is oxygen builder that aims for more advanced users.
While logging in to my oxygen builder account, I noticed the notification to be able to activate the 1 year breakdance license for free.
What a great surprise! Everyone who has an active oxygen builder license, log in to your account and claim your 1 year for free to get started with breakdance builder!
After claiming the license, I thought it would be a good idea to extend my review on sitebuilders and do another quick rebuild of my site to check the speed of the builder and share my impressions building a site I built in Elementor, Zion, WordPress core, oxygen (and bricks).
So here we go.
After setting up another subdomain for my test and installing WordPress, I activated the plugin. I directly took a new beta version to see the latest features. My current installation is “breakdance-v1.1-beta.2-1” so version 1.1 is the second beta release.
My basic strategy for testing the page builder
- First impressions after installation and setup
- Build header first and check out if animated SVGs work and how to handle the menu on desktop and mobile
- Quickly do a rough footer, check if a jump to top is available.
- Applying global settings
- Import blog posts and style basic styles. Try to get variable fonts working
- Rebuild Homepage, do a loop, custom style buttons, integrate p5.js
- Optimize details, responsive check up, do performance testings
- Final short summary
The first impressions of breakdance builder
Once you've installed the plugin, you can choose to either stick with a traditional WordPress theme or go with the recommended option of having no theme. If you are familiar with Oxygen Builder – you know the path without a WordPress theme already.
I went for the recommended option and ended up on a very boring Plugin Home screen. Hopefully, the team focuses on more features for now, but a home screen could be way better. At least you find links to support, video tutorials (from YouTube), the community (a Facebook group) and documentation.
I have to admit that it feels like a beta product at first glance. Also, if you click the other options from the left menu options, it will lead you to “empty” spaces.
Choosing to add a template will bring you a dialog to create a default page type or a custom one. Although the dialogues for header and footer seem familiar to more advanced WordPress users, it doesn’t feel like an entry tool.
Finally, on the settings page, I find a lot of things I like. There are known options from oxygen builder to eliminate some bloat from WordPress. There are useful tools to import and export settings or to exchange the URL.
Hitting the global styles button, it’s the first time I encounter the “launch breakdance” button. Sure, if we speak about a page builder, similar to Elementor, zion, bricks, divi and all others, this button will be part of every page or post. Also breakdance follows this path.
Launching the global settings will bring me to this site:
Clicking through all the options on the right brings me more advanced global settings that are nested in more layers. Time to share my first impression.
First impressions:
Running through the available backend options, I was alerted. The typical path to set up new sites starts with setting up single elements, such as header, footer, global styles and so forth. Currently, the builder on the backend site feels unfinished; hopefully, I will discover some other magic.
Without checking out any video we start the way, it would feel “right” for me.
Building the header in breakdance editor
Via the backend editor, i go for the header menu and add a new header. In the settings you could choose were to display the header. The dialogue feels good, and it’s easy to set it up.
After some basic settings, we end up in the editor. Finally, there’s a plus button in the middle of the screen and some add element on the left to work “in” the editor.
As I know there’s a header builder in oxygen, I search for header in the search bar to see what kind of modules are available. Et voilà there is a header builder.
No idea what it’s doing, I go for the straightforward path to use it. For putting in my Logo I first search for a site image or site logo, but there’s no module like that. You might know from other builders or configuring some theme, that there’s a place for the site logo.
I didn’t find it via the editor now; in my case no trouble, but I need to keep it in mind, as the favicon might need to be added manually.
By default, WordPress disables SVG, so an SVG plugin could be used, or some editors allow the option within their settings. For breakdance I didn’t find an option. In my case, I don’t worry, as I embed my animated SVG via the code block directly:
By changing the width to full, the header isn’t limited to the site width anymore.
The basic padding seems fine for me, for now. For the next task I need to search a bit, as there’s no site-title module. But assuming it is nested within a text link and advanced fields, I find the right option for me.
Also, adding the menu is straightforward. From the modules I select a Menu builder and I end up with a prebuilt menu.
Being used to builders, I opened the menu to the right, the structure panel. A structure panel helps to focus and get an idea about the nesting of the elements.
As I want to change the order of the elements, I select the parent element to click through the layout properties. I was looking for some modification to change the default setting “space-between” and the default alignment, but ended up without a finding.
While doing so I noticed, I had some wrong thinking about my logo and text-link placement, as the image wasn’t linked yet. Thus, a link-wrapper is available, i could rearrange the elements via drag and drop on the structure panel on the right.
For the moment, my header is ok. Further styling for global typography and some spacings on the menu to the right could be done later.
Overall impression of building a header:
Great straightforward process. The nested menu seems interesting. Link wrappers are great and inserting dynamic data (such as the link for the website) is good.
For the expected annual price of breakdance builder I guess all these options are a requirement. Working in the editor feels good. I haven't had any issues about orientation or user guidance.
Building the footer in breakdance editor
Adding a footer follows the same logic as the header. We first define our criteria for where to display, and then we start in the empty editor.
Our desired result looks like the site footer:
Reopening the editor will reset your display settings. In my case, I had to reopen the structure panel again to have it present. Regarding the desired outcome, I give columns a try now. but first, I want to integrate the horizontal ruler (black line). As there’s no direct option, I keep it with a custom code block and the entry of <hr> for now. I style it later, or find a better way to do it later.
Then I created the basic structure. In my case, I have 3 rows, some of them nested with columns:
For the link lists I used WordPress Menus for my other sites. For breakdance I try to follow the same path.
Unfortunately, I can’t find a quick way to change the appearance of the menu. Also integrating the date (via custom code for the year), I notice that he won’t render a blank space. I need to use to get an empty space between my text element and the code:
A great benefit from my current beta installation is a "jump to top module". Uploading your own SVGs is possible via the dialogue. It’s also great to create new icon sets on the fly. There’s no need to upload your complete icomoon or other icon set, but you could grow your set step by step.
All additional styling and the pages menu need to wait a little bit (as there are no pages in my instance yet). For now, I am fine.
Overall impression of building a footer:
Smooth, fast-forward. I like the icon uploading and ability to create sets on the fly. I didn’t like visual options around the menus so far. All in all it feels intuitive and not too tricky. Also, custom attributes in terms of accessibility (and now Google web vitals) are possible.
In terms of the code output, I didn’t find a quick option to use the <footer> tag for the footer section. Hopefully I just missed it.
Applying global settings
Opening the global settings color palette starts with a little riddle for me. “Brand”, text, headings, links, and background are the first fields. Honestly, I have never encountered a field “brand” before. What should it be? A brand has more than one color.
Filling the fields with some random values doesn’t help me either, so I stick with fields I could handle better. To set the colors, input your values and enable the hover color option beside the field description. You could also create a color set first, see my picture on the right. I prefer global colors once and then using the values again.
To this point, I had no error in the editor or anything to argue about. The builder is fast and reliable!
For the Typography section I did a quick test on my big headline font and my body font. My target: Test if Google fonts are used without notifying me. (This is an issue in Europe, as they are forbidden in terms of GDPR).
The other interesting settings are the container width and the default spacing of sections. In my point of view the settings are too limited; I didn’t see any settings on the breakpoints, for example, or on other default spacing such as columns.
Looking at the code, I see an alert… Google fonts are used, without having the option to upload them or any other customization:
As I am alerted now, I check the other tool settings within the backend to get an idea, how to assign another font. I also deactivate my used fonts.
Unfortunately, I didn’t find an answer and quickly googled for a solution. Lucky me discovered another issue with the current interface…
Only if you access the builder via a page, post, header, or footer, you get more options under the "..." option. Accessing the global settings via the backend doesn't offer the option.
Note: I didn’t check if it’s a bug related to my beta, but I reported it, and hopefully you won’t get lost like me 🙂
With these options available, I also found the way to change breakpoints. I still wonder why it is placed here and not in the global settings, as well as the options on custom fonts. The upload of fonts is limited and still made for "normal" fonts. For my variable fonts, this can't be a solution.
Overall impression on global settings:
In general, one could say, that the global settings are better configurable by accessing them from a page, post or header/footer.
The UI is not finished yet, and the settings feel a bit limited and nested. I wasn’t too happy about it, but at least a quick fix was possible.
Styling a blog post
For styling a blog post, we first need to assign a blog template. Via the backend I select the template and “single post” as all blog posts need the same template.
In my case, the “post content” module displays the inner contents. For styling the post title, I use the CSS Tool within the global settings… and get disappointed. Unfortunately, the settings get overwritten in the code, by other default CSS settings.
You end up trying the default settings, in my case the h1 via the module options, which gives you instant results. Also, a clamp function is possible via the dialogue, but unfortunately variable font settings, such as “font-variation-settings” are not possible this way.
For now, we leave it and focus on structuring the page. Unfortunately, all the font settings need to be redone via CSS if you want to work with variable fonts.
While generating the content structure, you notice that some elements are not there, such as post categories. Also, the default module for “post excerpt” seems to be strange, as you can’t set the tag of the excerpt (such as h3). Luckily most of the time there are more ways to do something, so in my case I select a headline, tagged as h3 and add a dynamic field with the information of the excerpt.
Overall impression of styling blog posts:
Basic settings for styling blog posts are there. For a paid solution at a similar price range as Elementor, there’s still a big gap in terms of flexibility. Categories are missing, and sometimes it’s tricky to get the desired result out of the available option set. More flexibility in terms of nesting dynamic elements would help a lot.
Rebuilding the homepage with p5.js integration, loops and other tricky elements
So far, this little review, including the documentation, took me some hours. The homepage will get tricky I guess; and fine-tuning could get a big pain in the ass. As seen in my little summaries at the end of each part, I feel that still too many things are missing to work on non-standard websites.
The builder itself is intuitive and fast. Much more comfortable than Oxygen builder. The nesting of many sub dialogues isn’t my preferred way of stacking UI elements. I don’t like many mini-pop ups with dub dialogues.
Ok, homepage, here we go. After structuring some of the content elements, I use the JS code, as I did it in my oxygen build… and yes, it is working instantly. All the necessary options, to use custom IDs, to work with code directly, are there. And… no error logs in the console! That’s great!
Here’s a quick wrap up: I used the global CSS to assign the style attributes to the new IDs. Within the builder there’s an assigned element for the JavaScript output canvas. There’s the code for loading the external script (p5.js) and the internal script for rendering the visual result.
Though the performance of the builder is great, it is not possible to see the code executed in the backend.
Nesting a <span> element in a rich text block is also possible. CSS styles could also be assigned within a module – in my case to create the waving hand animation:
Continuing the path to rebuilding the site, I encountered my typical issues with rebuilding the Link behavior and styles. I couldn't find a way to handle pseudo classes like ::before directly in the builder, and encountered some initial CSS errors in the application.
As I know these buttons are quite tricky, I continue towards the post-list. In the words of breakdance I select the option for post loop builder. Not knowing if it will lead me to my target, I give it a try.
Inserting a post loop element, you see, that a global block is needed. For creating a global block, change back to the backend section of breakdance and create a new block.
Generating the basic layout structure was very easy. Resizing the columns was working great. Maybe you know the issue from Elementor, resizing one column, leads to losing the size of another and so forth. Also, creating nested elements (Post title, combined with the permalink) was easy.
Only tiny details, such as a moving arrow via mouse-over, weren’t possible via the builder. But overall, the creation of the loop was easy. It has great other options available, such as transforming posts to a slider, or to change responsive behavior and many more to be discovered.
Creating the link and hover effect of the text could be easily done with CSS. The preview within the builder comes in handy. It would be helpful if one would be able to make the left UI column wider, so more of a code could be displayed.
As our quick build of the homepage already reached a good level, I already have the time to fix some details. So, first, with some more knowledge about the handling of the editor, I changed the footer again and removed my <hr> to replace it with a boarder.
Switching to edit the footer or header is also possible from the pages. While exploring the footer again, I noticed another great feature. “modified”, a tiny little option at the bottom left, displaying all the things I modified within an element. That’s great!
While checking the footer, I came across the option to assign the footer tag. It would be great if it could be set as a default when creating a footer template.
Finally, I also found a little bug. I already struggled to find the best way to delete assigned color values as it’s not intuitive with a simple “delete” option. Somehow, I managed to delete the border color for my footer section, but it still shows in the frontend rendering of the site and in the code.
I managed to reset the bug by copying the style over the structure panel on the right; I created an empty new section, right-clicked to copy and selected the buggy one and chose the right-click-option, paste design.
A “fallback” option for reset styles would be great; didn’t find it. I also got no idea what the settings icons next to the modify option at the bottom left could be used for.
Overall impression of building a homepage with p5.JS integration and a loop element:
After around 3 hours of playing around with breakdance, I could say that breakdance has some charming elements. The modified option, the option to add Icon sets step by step and the smooth loading and performance. One also discovers new beauties round some corners, such as the conditional options.
Unfortunately, I didn’t find an option like to display menu items as a list. The Menu builder in general is great, but for all options for a header menu.
I like the charm of WordPress Menus being administrated at one point and wanted to display the result at another spot. Guess a list option is a must, even for a menu builder… who says my menu needs to be horizontally?
I also mentioned a bug I encountered and some other small flaws in the UI. But still, it is a Product in development at an early stage. Sometimes one already notices the depth of the development team coming from an oxygen background.
In general, I like the editor in terms of UX much more than the Zion builder. But still, Zion builder had other great things, I missed here, such as working with pseudo-elements in a better way.
It's worth noting that the editor doesn't support certain options, like using position: absolute or z-index. It's often better to code styles instead of using rulers and fields in an editor to achieve an effect.
So far breakdance is an interesting choice. In terms of overall functionality, Zion, bricks and Elementor still feel superior; In terms of the UI I think it is better than Zion and Oxygen. My feeling is, that it could be a great choice for bootstrapped sites, as most follow the same behaviors. For individual sites, oxygen is still the best one as you could modify most stuff.
Performance of breakdance compared to zion builder and oxygen builder
Finally, it is about speed… How fast is breakdance? As mentioned, the editor is great. Faster than Elementor and oxygen. I guess the duel about performance is in all disciplines a matter about Zion builder and breakdance page builder. A more in-depth test on builder speeds can be found in my other article: WordPress Builder review – Elementor, Zion, Oxygen or Core?
In my case, I would say, both compete in a similar league. My measurement isn’t the best, as this time I used another of my servers to place the subdomain; so, some tests gave me bad results, cause of the server. Another aspect is, that the site is not fully built.
Checking the mobile results on https://pagespeed.web.dev/, it seems like we're talking about outstanding performance on par with Zion Builder.
Here you find my test-site: https://breakdance.mannilito.com/
Please use the following user: preview and as password use: ShowMe
As mentioned, this result is an indicator. The reaction time of my server, where my breakdance install is, is slower but also some details are missing on the page.
Without further evaluation I would estimate that Zion and Breakdance will compete for the fastest Builder out there.
Final summary:
Could around 4-5 hours of testing a software be enough for a final review? No. But it's enough to share first impressions and potential.
My downside: The price tag.
Maybe I am too critical of products at an early stage. All new builders, including bricks, zion and breakdance have their own beauty and I hope breakdance will also develop further. The current yearly pricing is too much for what it is actually capable of. Bricks at a price tag for 249 $ for a lifetime license or zion are currently cheaper in the long range.
My outlook: great foundation to build on.
The foundation of breakdance is great, and I strongly hope they will push the product (without forgetting oxygen builder) to be worth a target price of 350 € a year for unlimited sites. The true aim of breakdance is to be used on many sites, maybe even within one brands world, as there are great features to copy styles from A to B.
If I will have a suitable project, I will share more experiences with breakdance, hopefully with a newer product release. For now, I would recommend everyone to give it a try. There's a 60 day money-back guarantee.
Site Builder tests by myself:
WordPress Builder review – Elementor, Zion, Oxygen or Core?