Breakdance 2 vs. Divi 4

In this post/review, we’re going to have a look at how Breakdance 2 fares against Divi 4 (and partly 5).

To be fair, at this point in time, Divi is getting very close to launching v5, and they’ve been very good at posting updates and keeping their developer base in the loop with the alpha, and I’ve seen it working much much faster than ever before.

So that’s great.

However, they’ve kept on saying that they’re not changing much of the functionality, and that means the layout methods, the design options, and the module features, won’t change. Additionally, their public demo confirms that.

So that means that even if I’m using v4 (4.25) it won’t be too far off from what v5 will be offering at launch except for the UI and overall speed. (additional note: I do try Divi 5 later in the video)

The rules

All reviews are biased, that’s why I think being clear on what the ground rules are is important.

Here are the rules for using the builder in this challenge.

1. No html layouts: Pretty much all websites are just a combination of html, CSS, and JS. So if we include straight up writing php or html, that wouldn’t help us assess the page builder itself as well.
2. Minimal extra CSS: Again, this is a page builder comparison, so most things should be done in the builder. Maybe some tweaks here and there, but we’ll keep that to a minimum. Some classes and global CSS, maybe some inline css.
3. No third party addons: I rarely use third party addons. I understand how a thriving ecosystem can help some people save time and resources, but in my decades of WordPress work, and helping others, I’ve found that in many cases, they cause more issues than solve, so I’ve very rarely used third party addons. In this case, especially, third party builder addons should not be used or taken into consideration, since it’s a builder comparison.

So like I said, my rules can be different from other people’s rules, and that’s why all reviews should really be clear in their perspectives from the start.

The challenge

I’ve made this video twice already, and haven’t published it because I wasn’t too happy with what I got. I’ve tried two different types of design challenges, one was just impossible for Divi to even start, so I ditched that recording. Then I tried one that was a bit more doable, but it got into a bit too much detail.

So, hoping third time’s the charm, here’s the new challenge.

We’re going to try to do the most commonly attempted method in deploying quick websites, and that is, making one using pre-designed layouts while sticking to the brand.

Please note that this is not the regular fully custom design method. For that, you’ll have to write a lot of css, and possibly some php and JavaScript and I have a separate course on that.

So back to the challenge.

The premise is that we’re building a relatively low cost website, so we’re looking for a quick solution. However, we do have a brand.

For this, I’m going to base this loosely on my own branding for Almost Inevitable Tutorials. I’ll be using Bebas Neue (Bebas Neue – Google Fonts) as the headings because I love condensed caps, and Metropolis (Metropolis Font Family · 1001 Fonts) as the body. It’s a nice geometric sans serif that’s free, has a LOT of weights, has a crossbar on the capital G (unlike Montserrat), and Mozilla uses it, so that’s even better for a Firefox user like me. Also, this is great for our example because we’re using a Google font with a custom font. Sizes will be loosely based on the typography scale. (calculator spreadsheet link)

As for colors, let’s use a simple generated color scheme. (link to scheme)

Content! I think for this video’s purpose, making a simple eCommerce website would be great. Most shops have some sort of branding already, and all we need to realistically do is a good homepage, about us, and contact page to start with, and the rest is all archives and templates.

We’re going to set up a t-shirt shop, load use some pre-built layouts, and modify them to fit the brand. Nothing fancy at the moment.

The Video

Timestamps

• ** Intro **
• 1:10 – The Rules
• 2:57 – The Challenge
• 4:02 – The Sample Brand & Objective
• 6:40 – Warning comment about the Divi section
• ** The Divi Section **
• 8:10 – Using Divi
• 9:10 – Start with Home, loading the layout
• 11:05 – Adding a “global” Google font
• 13:55 – Adding a “global” custom font
• 22:00 – Now to apply it everywhere, including buttons
• 25:20 – Changing styles on more modules
• 28:40 – What to do with the footer? Save to library?
• 31:40 – Let’s try that in Divi 5
• 33:55 – Copy / paste module style
• 34:20 – What happens to the previous layouts? Try another page
• 35:55 – Global fonts are gone now?
• 36:50 – Try to save footer again, got stuck
• 38:50 – Try again, refresh
• 40:10 – Backend builder check
• 42:40 – One last check of global settings on Divi 4
• 44:15 – Divi conclusion
• ** The Breakdance Part **
• 44:23 – Let’s go to Breakdance, start with adding fonts, customize
• 47:50 – Colors
• 50:05 – Loading pre-built layouts
• 50:47 – Editing heading style
• 51:40 – Editing the hero section
• 52:25 – Copy / paste styles
• 53:35 – Custom design preset with buttons
• 56:40 – Editing design presets
• 57:55 – Shop archive page
• 1:00:30 – Breakdance conclusion
• ** Conclusion **
• 1:01:30 Conclusion

Past video recording experience

I have tried making this post and video twice before, and gave up both times. Once I tried to make a single section layout, and it was simply impossible to do with Divi and the recording lasted 10 minutes. The columns and rows just didn’t allow me to make layouts as simple as below.

With Breakdance, I was able to make everything as seen in the screenshot above because it had a really good “layout engine” allowing me to use either/both grid and flex with as many divs as I needed. The only issue I had with using Breakdance was the product selection part, and that would be impossible with any builder on the market anyway, so I decided to try something else.

Next, I tried to recreate a much simpler layout. In this case, the Dropbox landing page.

Luckily, this turned out much better. Even though I had to duplicate the text module multiple times (due to Divi not having a proper global styles method) and then redoing them in the blurb module, it was a bit more doable. Relatively simple layouts worked ok. It took me about an hour to do, and I at least could get some progress.

Doing the same in Breakdance wasn’t hard either. Since I had global settings and design presets, it was easy to build.

However, I wasn’t too happy with how long everything took, and the video was even longer than what I have now. You’d be better off watching an uninspired Netflix exclusive “film” than watching me struggle through the whole thing. It was especially wonky due to using alternate fonts and just building out things in a more generic way. Like “let’s make a 4 column icon-blurb layout” instead of sticking to exactly what Dropbox was doing wasn’t the best example. If I were to make a page from a design (like we would normally do with a client approved proof) it should be more exact, and the video I had put together wasn’t showing that.

So that was out as well.

I decided that I needed to try an easier approach, which was NOT relying on a design proof, but actually just using a simple pre-designed layout, and changing it to match only the brand.

The Experience

Divi 4 & 5

To be perfectly fair, I haven’t used Divi much since my departure with the release of Divi 4. Additionally, to be even more fair, I used Divi 3 as a layout tool and styled everything else with CSS. So I’m not the best at using the builder features.

However, that doesn’t mean it should or would be this painful. Here are some takes from my experience.

• The lack of global styles is a massive pain in the butt. Like MASSIVE.
• Pre-built layouts are built to absolutely not care about global settings, and even setting those were super hard. It feels like just changing words and images is the only way to use those layouts. Plus, they seem to not work too well with Divi 5. So that’s a bummer.
• The builder loading and saving things was too slow, buggy, and just didn’t work in some cases.
• Divi wireframe view is the only way to build on the “backend” as that’s the only non-visual method, but that meant I’d have to write the CSS again like I did with Divi 3, and that’s not very useful.
• The Divi UI is terrible. I can understand how they tried to keep adding more style tabs/accordions inside the module settings due to new features, and I can also understand the wording being more catered to DIY people, but it’s quite cramped and things are hard to find, mainly due to it being band-aided over and over again. The global fonts being hidden in the font selection panel inside the text module is just not very good. (Which is gone on Divi 5. Not sure where that went?) And then having to do everything over again for each module is also a huge time-waster. Copy pasting module settings is a good feature though.
  The verdict: It’s good that I jumped ship from Divi when 4 came out. It’s also good that I never cared much about the module style settings, that was terrible.

Breakdance 2

I’ve been using Breakdance since 1.0 came out, and it’s become the majority of my site builds being a quicker method than using Oxygen builder. (I have my personal UI grievances with the Oxygen builder, but that’s not for this post)

Some takeaways:

• Breakdance layouts load quickly and they take cues from the global settings, so once you’ve set up your global settings, things just fall into place.
• Design presets (new for v2) are great for making things look consistent and change easily. (Like how classes work, and that’s how v2 does design presets, it uses classes.)

Simply put, it’s just a much more intuitive builder.

The Conclusion

I feel bad comparing such a hot mess that Divi 4 is to Breakdance 2, but it was technically supposed to be a comparison between a mature product with a new one. It just ended up feeling like I was comparing an amateur group project duct taped together barely holding it together to a professionally designed, printed, and bound one.

Resources

• https://cloudconvert.com/otf-to-woff
• https://www.1001fonts.com/metropolis-font.html
• https://fonts.google.com/specimen/Bebas+Neue?preview.text=Almost%20Inevitable%20tutorials&query=bebas
• https://coolors.co/050505-004fff-31afd4-902d41-ff007f
• Typography calculator spreadsheet

Also

Get Breakdance

If you’re interested in getting Breakdance for yourself, please consider using my affiliate link: https://breakdance.com/ref/19/
You don’t pay extra, but I do get a bit of commission, and that helps the site/channel. Thanks!