Breakdance Page Builder Review - Beta 4

Very impressed with my first look at the Breakdance Page Builder Beta v4, blocks that have good uses for a lot of production websites.

It's very smooth, and fast compared to other page editors that I have used(WP Bakery, Divi, Elementor, Gutenberg, Twenty Twenty Two, Oxygen Builder) in the WordPress ecosystem.

Here is what I built, and it was quick:

Cool Features

Conditions

The first thing I spotted and checked was conditions that impressed me with a user-friendly UI.

The PHP editor is nice in inside conditions, and I think that I would prefer to write the condition sometimes.

Code Editor

There is a lot of custom code in my projects and I use Visual Studio Code where I add code as part of the web design and development in a custom plugin, making the website easier to manage for myself and clients, and having a lot of bespoke options in WordPress!

Breakdance UI might reduce the need of going back and forth between the Breakdance and the Visual Studio Code.

A cool feature to execute JS after it has been written!

...Some strange error occurred in the console.

Some suggestions:

It would be cool to have CSS and JS code suggestions as you type in here as you type, as in the browser inspect tool or in VS Code as seen below.

Also got a feeling that I could move the editor box but then it felt wrong when I could not, it would be a nice feature, especially for bigger screen sizes.

Navigation Menu

The menu template comes with a very clean, and modern style, and has most things that are needed.

Lots of Icons

Lots of icons in the builder, and it fits in with a lot of needs.

Lots of Features & Blocks

There are a lot of blocks in the Breakdance beta v4, and probably a lot more to come, so it's very impressive.

Some than can save time are:

• Visual Form Builder, with a collection point on the website, will reduce the need for other plugins for basic contact forms.
• Advanced Slider
• Menu Builder
• Countdown Timer
• Scrolling Image
• Twitter Timeline
• Set Maintenance or Coming Soon Page
• Lots of API integrations
• And lots lots more!!!

Some Inconvenience

Well, some features can make it more convenient, so here is a short list.

Repeaters

On most website projects that I have worked on, I used ACF repeaters, they are so handy for service-based websites, which I work mostly on, and visually to be able to design one block from the repeater, and let the loop handle rest of design is just such a time saver and so convenient!

I do believe repeaters are a must for service-based websites.

This is what I use repeaters for:

• Display a list of specifications and features that may also require additional information such as the icon for each one
• Display sliders/carousels (Not a fan of them, but a lot of people are so I have to compromise)
• Display testimonials
• Display comprising tables
• Display FAQs
• Display Additional info with Header and Text content to keep a consistent design layout
• Display service list with all the required info (e.g. icon, header, text and cta)
• Display property list (e.g. Title, Location, Price, Status, etc...)
• Display a team list with people's photos, names, descriptions and contact information, that can be clicked and it will go to their profile page
• Show specific posts on specific pages, for example, specific case studies on specific service pages
• Display a list of events

The list can go on, there are a lot of ways that a repeater can speed up the process.

Applying Classes

Cool way to work with the classes, and again the code editor is impressive.

But to add a new class and editing requires 3 clicks, having class options displayed earlier I think is a good idea if you create your utility classes, or use any third-party libraries, as it will save production time.

Hard to notice elements

So I set 50% width to a column by accident, and there was no option to deactivate it, thinking that removing it has not been implemented as yet, then hovering around my mouse and clicking everywhere I could until I hovered over a little dot that displayed an X on the left.

Breakdance Speed Test

Performance Test 1

After creating the basic page, with a menu two images, and some sections putting Breakdance beta v4 to a speed test, let's see what the google lighthouse says:

SiteGround cloud hosting was used, and there are no plugins activated other than Breakdance.

WordPress Theme System was disabled in Breakdance.

Checking out what slowed it down, and it was a lot of generated stylesheets:

File sizes:

Performance Test 2

So I went into the Performance Breakdance, and activated some options, mostly removing bloat from the head.

So I disabled almost everything except Gutenberg Block CSS which is good for posts and a much-preferred way to write blog posts.

Disabled: XML-RPC Pingbacks, WP Emoji, Dashicons, OEmbed, RSD Links, WLW Link, REST API, WP Generator, Remove Shortlink, Relational Links, and RSS Feed.

Installed and activated the SiteGround optimizer plugin, which is made by SiteGround and originally for SiteGround servers only(it comes pre-installed), and done the following: Activated Dynamic Caching, and combined CSS Files. That's all that needs to be done to reduce requests at least for now.

Now there are no opportunities from Breakdance, it's doing its job properly, and some are from my side and mostly images:

Performance Test 3

So now I am going to reduce image sizes in breakdance to medium large and will see what will happen. In a real scenario, I would always compress images in Photoshop before uploading them to the website which will give better results straight away.

Tried to reduce images in post lists, and set them to a smaller size but there was no option for this, I generated posts automatically for testing purposes. So I just disabled the images for now from the posts list.

Compressed images with SiteGround optimizer to 60% and lazy load media, and that's the result which I am happy with, and from Breakdance 100% in Best Practices.

Final File Size of the Page

Accesibility & SEO

You can also see we have poorer results for accessibility, and SEO, but this should be controlled by the web designer/developer.

As seen in the above screenshot, I had the button "Click Here" which the lighthouse picked up on, and could have improved the background, the navigation error is a strange one when checking the output from Breakdance it had followed a good structure, not a concern.

This is the SEO Result below, which is again just a few things that can be easily improved with an SEO plugin, and I haven't included them in the menu links that's why we get a Crawling and Indexing error:

Conclusion

Nice experience from the first try, and did not have to read any documentation or watch any videos to start building, it was obvious from the start what each template did such as templates, headers, footers, global blocks and popups, and how they can be assigned. Possibly due to the experience, I have of using other page builders.

UI is very impressive and fast and has a lot of pre-made blocks/elements that can be used, there is no shortage with the number of features in Beta v4.

For agencies that hand over websites to clients to work on content after it has been complete, I believe repeaters are important in that aspect, making adding more content to the website without breaking the design, and repeaters are great for listing websites such as services, people, car dealerships, property listings, portfolios and more.

Overall it's a cool new product and easy to work with, and do believe it's going to be more stable once it's been fully tested and released!