In deze blogpost ga ik het hebben over een nieuwe premium website/page builder voor WordPress die op prestatiegebied erg goed scoort. Omdat ik zelf Elementor gebruikte, vond ik het met name interessant om te kijken of het een waardige vervanger kan zijn voor Elementor. Oordeel zelf op basis van deze blogpost en download de proefversie om het zelf te testen.

Screenshot of Breakdance website
Website van Breakdance

Er is een nieuwe website/page builder waar je echt eens naar moet kijken: Breakdance! Het is eenvoudig in gebruik en helpt je om de website te maken die je graag wilt, out of the box. Je hebt geen programmeerkennis nodig, dus geen kennis van bijvoorbeeld PHP of CSS. Maar als developer zijn er genoeg geavanceerde mogelijkheden beschikbaar, zoals custom CSS per element. Breakdance is gemaakt door de ontwikkelaars van een builder die redelijk bekend is, namelijk Oxygen.

Breakdance biedt onder andere de volgende mogelijkheden:

  • 120+ elementen met een drag-en-drop interface
  • Volledige sitebewerking (full site editing), waarbij geen thema nodig is
  • WooCommerce integratie
  • Megamenu-builder
  • Form-builder
  • ACF en toolset integratie
  • Mogelijkheid om PHP, HTML, CSS, en JavaScript te gebruiken

Design opties

Breakdance geeft je globale controle over styles. Je kunt bijvoorbeeld simpel een standaard tekstkleur of tekstgrootte instellen. Het platform bied je ook mooie out-of-the-box defaults. Als customizen niet jou ding is, zit je dus nog steeds goed.

SEO

Je kunt in breakdance zelf de HTML tag kiezen voor een element, en het is ook compatible met SEO plugins zoals Yoast.

Ingebouwde tools

Een slider plugin of een lightbox plugin heb je niet meer nodig, Breakdance heeft deze en andere veel gebruikte functies al ingebouwd! Een contactformulier-plugin heb je ook niet nodig, want er zit een krachtige formulier-builder bij.

Geen thema nodig

Waar je bij Elementor nog altijd een basisthema nodig hebt, is dit bij Breakdance niet nodig. De WordPress-themafunctionaliteit wordt standaard uitgeschakeld. Soms is het toch nodig om een thema te gebruiken voor bijvoorbeeld functions.php, daarvoor is er het Breakdance Zero theme.

Full site editing

Met de editor van Breakdance kun je eenvoudig je volledige website in elkaar zetten. Maak bijvoorbeeld een header en kies of deze op de hele site zichtbaar moet zijn of bijvoorbeeld alleen op de homepage - en maak een andere header voor de rest van de website.

screenshot of Full site editing in Breakdance
Full site editing in Breakdance

Snelheid

Breakdance is geoptimaliseerd voor snelheid, er zit geen bloat in zoals dat in vaktermen wordt genoemd. Dit komt doordat CSS en javascript gegenereerd wordt op basis van wat je echt nodig hebt, waar andere builders veel extra CSS code inladen die niet eens gebruikt wordt. Mijn eigen website waar ik elementor gebruikte heb ik opnieuw opgebouwd met Breakdance, wat een flinke performance boost heeft opgeleverd!

Design Library

Sinds kort heeft Breakdance een design library waar een aantal vooraf gebouwde websites in beschikbaar zijn. Deze kun je importeren als je de betaalde pro versie van breakdance hebt. Een voorbeeld is: https://breakdancelibrary.com/security/

Kosten

Breakdance heeft momenteel een gratis versie met beperkte mogelijkheden. Wil je echter optimaal profiteren van alles opties en functies van Breakfance? Dan kun je nu nog een licentie kopen voor 149 dollar per jaar voor een onbeperkt aantal websites. Ze zijn van plan deze licentie 200 dollar duurder te maken, maar ze overwegen daarnaast ook om licenties per website mogelijk te maken.

Hoe gebruik je Breakdance?

Installeer Breakdance

Start door het downloaden van de Breakdance plugin vanaf hun website. Breakdance biedt een gratis versie, dus er is geen risico dat je ergens aan vast zit.

Na het downloaden ga je naar plugins in WordPress, en kies dan voor nieuwe plugin, en dan uploaden.

Thema of Geen Thema?

Zodra je de plugin activeert zie je de Setup Wizard. Het geeft je twee keuzes: Disable Theme en Keep Theme.

screenshot of Breakdance website builder menu
Breakdance Setup Wizard

Kies voor disable theme, dan kun je je hele website in Breakdance maken.

Bouw je website

In het linkermenu van je WordPress admin, kun je diverse opties vinden in het Breakdance menu:

Templates

Je kunt templates maken voor bijvoorbeeld WooCommerce producten en archieven, Single Post, Berichten Archief, 404, Zoek resultaten. Maar je kunt ook een eigen template kiezen.

Headers

Hier kan je je header(s) maken. Je kunt eventueel meerdere headers maken die alleen op specifieke pagina's of onderdelen van je website verschijnen.

Footers

Net als headers, kun je footers maken die op de hele website of een deel van de website zichtbaar zijn.

Global Blocks

Je kan globale blokken maken die je overal op je website kunt hergebruiken. Je kunt bijvoorbeeld een eigen look maken voor het tonen van een post/bericht. Met de post loop builder kun je dan het globale block gebruiken voor een lijst of grid met posts.

Popups

Breakdance staat je toe om popups te maken en je helpen om bezoekers om te zetten naar abonnees of klanten.

Form Submissions

Als je een formulier maakt in Breakdance, dan kun je hier alle inzendingen inzien.

Settings

Er zijn diverse instellingen voor Breakdance, die je hier kunt wijzigen. Ook kun je hier de globale stijlen regelen, een van de standaard mogelijkheden van Breakdance. De aangepaste globale stijlen zijn direct zichtbaar in de visuele editor.

Performance

De Performance instellingen zijn een krachtige middel. Het aanpassen van deze instellingen kan het laden van je website flink verbeteren. Je kunt bijvoorbeeld de Gutenberg CSS uitschakelen. Die heb je niet nodig als je alles met Breakdance doet. Maar ook zaken zoals WP emoji uitschakelen voor bezoekers is een aanrader.

screenshot of Breakdance performance menu
Performance instellingen in Breakdance

De eerste stappen

Mijn advies zou zijn om te beginnen met een header, onder de optie headers van het Breakdance menu. Vervolgens is het handig om een homepage te maken en daarna door te gaan met een page en single post template (als je bijvoorbeeld nieuwsberichten wilt tonen).

Een homepage maak je simpelweg door een nieuwe WordPress pagina aan te maken: kies voor "edit with Breakdance" en stel de pagina in als voorpagina.

Vergeet uiteraard ook niet om een footer te maken.

Breakdance: een solide en krachtige websitebuilder

Als je niet tevreden bent met je huidige WordPress-thema en niet van plan bent om een eigen thema te maken, is het gebruik van een page/websitebuilder de juiste keuze. Breakdance is dan zeker een goede optie. Het vereist geen programmeerkennis om je site te bouwen en is intuïtief in gebruik. Als je wel een ontwikkelaar bent, zijn er tal van mogelijkheden om je vaardigheden te gebruiken om de mogelijkheden van een site die is gebouwd op Breakdance uit te breiden.