Bricks Builder review – een betaalbaar Elementor Pro alternatief

Bricks Builder is alweer een gloednieuwe WordPress page builder, waarvan de eerste versie is gelanceerd op 16 maart 2021. Het was eigenlijk de bedoeling dat Bricks al een jaar eerder werd uitgebracht, maar zoals ze zelf zeggen: excellence takes time. Laten we eens kijken of Bricks Builder excellent genoeg is om de concurrentie met gevestigde page builders als Divi en Elementor aan te kunnen…

Over Elementor gesproken…

Komt de user interface in het screenshot hiernaast jou ook zo bekend voor? 
Als ik niet beter zou weten zou ik denken dat Bricks Builder gewoon een Elementor add-on met een andere skin was, zoals 10Web builder. 

Dat is echter niet het geval – Bricks is niet eens een plugin, maar een thema.
Een enorm snel thema, al helemaal als je kijkt naar alle features die Bricks biedt.
Hun eigen homepage (ook gebouwd met Bricks) scoort 94/100 op mobiel in
Google’s Pagespeed test.

Dat is echt een uitstekende score, zeker aangezien er geen optimalisatie plugins zijn gebruikt om die score te behalen. Dat komt omdat Bricks Builder is gebouwd met Vue, een nieuwe Javascript bibliotheek die de browser het meeste werk laat doen.

Bij de meeste WordPress sites doet de server waarop de website gehost wordt het meeste werk, maar zo’n server moet honderden bezoekers tegelijk bedienen. Jouw computer of telefoon hoeft dat alleen voor jou te doen, waardoor die een stuk sneller klaar is dan een server. 

Elementor was overigens niet de enige inspiratiebron voor de ontwikkelaars van Bricks. Het canvas met gekleurde containers en elementen (modules in Divi en widgets in Elementor) lijkt weer heel erg op Divi, wat ook geldt voor de manier waarop je de rand van elk onderdeel kunt slepen om de gewenste padding in te stellen. 

Het instellingen paneel lijkt juist weer erg op dat van Oxygen. Nu ben ik persoonlijk niet zo’n fan van Oxygen, en net als Oxygen gebruikt ook Bricks Builder vrij veel CSS terminologie,
maar om een of andere reden voelt de interface van Bricks toch meer intuïtief. Ik ga hier zo nog wat dieper op in.

Bricks Builder is dus een thema met een ingebouwde page builder, net als Divi en Avada. Of eigenlijk is het een thema met een ingebouwde theme builder, want je kunt ook je eigen header, footer, archief pagina’s, berichten template enzovoorts maken met Bricks. Maar goed, dat kan met alle andere premium page builders ook… Biedt Bricks Builder ook nog iets wat ik nog niet eerder heb gezien? 

Bricks Builder features – wat maakt het anders dan anderen?

Nou, ten eerste dus de snelheid. Zoals ik eerder al schreef is Bricks Builder extreem snel, zowel voor de bezoeker als tijdens het bouwen zelf. De builder laadt in een paar seconden en alles voelt erg snel en intuitief aan. Er zijn ook enkele instellingen waarmee je overbodige code in WordPress zelf kunt uitschakelen, zoals emojis en embeds.

Thema stijlen

Bricks beschikt ook over een uitgebreid thema stijl systeem, waarmee je een standaard waarde kunt instellen voor dingen als kleuren, typografie, margin en padding voor alle elementen. Nu is dat op zich niet zo bijzonder, er zijn meer thema’s die deze mogelijkheid bieden. Maar in Bricks kun je ook standaard stijlen instellen voor ieder element (widget of module dus). Dat is iets minder uitgebreid dan Divi’s Presets systeem, maar nog steeds erg bruikbaar. Je kunt zelfs meerdere thema stijlen instellen, en die conditioneel gebruiken voor bepaalde pagina’s, berichten enzovoorts. Je kunt deze thema stijlen zelfs exporteren naar een andere Bricks site.

Pagina instellingen

In de pagina instellingen kun je de header en footer uitschakelen, een punt navigatie toevoegen, de permalink, titel en meta description aanpassen, en zelfs instellen welke titel, omschrijving en afbeelding gebruikt worden wanneer de pagina gedeeld wordt op social media.

Templates

Net als iedere theme builder heeft ook Bricks een template bibliotheek waarin je templates voor je header, footer, archiefpagina, blogberichten enzovoorts kunt opslaan.
Je kunt meerdere templates in 1 bundel stoppen zodat je gemakkelijk kunt vinden welke templates bij elkaar horen. Op die manier kun je meerdere headers, footers en andere templates ontwerpen in verschillende stijlen, en alle templates met dezelfde stijl bundelen. 

Maar waarom zou je templates in meerdere stijlen ontwerpen? Nou, omdat je templates kunt delen met andere Bricks gebruikers, bijvoorbeeld met je klanten, waardoor jouw templates ook in hun template bibliotheek verschijnen. Je kunt templates ook gewoon exporteren als json file.

Je kunt niet alleen complete pagina’s, maar ook containers opslaan als template. Individuele elementen kun je opslaan als globaal element. Dat wil zeggen dat als je op 1 plek iets aanpast aan een element, die aanpassingen ook automatisch wordt doorgevoerd op alle andere plekken waar dat globale element gebruikt wordt. 

Bricks wordt geleverd met zo’n 70 standaard templates in 3 verschillende stijlen (bundles). Dat is wat weinig in vergelijking met de concurrentie maar dat aantal zal ongetwijfeld groeien in de toekomst.

Containers en elementen

Ik heb al een paar keer het woord “containers” gebruikt, maar wat zijn containers in Bricks Builder eigenlijk?

Containers zijn te vergelijken met secties in andere page builders, maar waar je bij andere page builders rijen en kolommen toevoegt om de gewenste layout te bouwen voeg je bij Bricks gewoon meer containers toe. Containers zijn eigenlijk gewoon CSS flex elementen (en binnenkort kun je ook kiezen voor CSS grid). Dat zegt je wellicht helemaal niets, dus laat ik het even uitleggen 🙂

Containers kunnen zowel verticaal (onder elkaar) als horizontaal (naast elkaar) worden weergeven. Wil je dus een layout met 3 rijen? Dan voeg je gewoon 3 containers in en stel je in dat deze verticaal moeten worden weergegeven. Wil je juist een layout met drie kolommen? Dan voeg je diezelfde 3 containers in, maar stel je in dat die horizontaal moeten worden weergegeven. 

Je kunt ook containers invoegen in andere containers, waardoor je dus bijvoorbeeld 3 containers onder elkaar kunt hebben (3 rijen dus), waarvan 1 rij 3 kolommen heeft.
Dat heb ik in het screenshot hieronder gedaan: container 1, 2 en 3 zijn verticaal uitgelijnd en staan dus onder elkaar, en container 3 bevat weer drie containers die horizontaal zijn uitgelijnd. Deze drie containers (3a, 3b en 3c) vormen dus 3 kolommen.  

In elke container kun je ook elementen plaatsen. Zo bevat container 1 een heading element en container 2 bevat twee knoppen. Ook hiervoor kun je weer instellen of die elementen naast elkaar (zoals de knoppen) of onder elkaar moeten komen, en of ze links, rechts, boven, onder of in het midden moeten komen.

De Bricks manier is even wennen, zeker als je al ervaring hebt met een andere page builder die met de traditionele rijen en kolommen structuur werkt.
Maar deze manier geeft wel zeer veel flexibiliteit omdat je iedere layout kunt maken die je maar wilt.

Die flexibiliteit vind je ook bij andere dingen; zo kun je bijvoorbeeld een ongelimiteerd aantal verloopkleuren toevoegen aan een overlay, achtergrond of tekst (inderdaad, je kunt (kop)teksten maken die bestaan uit meerdere kleuren 😮 ).

Je kunt ook een onbeperkt aantal shape dividers gebruiken, en voor ieder element – zowel horizontaal als verticaal (nog eens 😮 ).

Bricks Builder bevat zo’n 50 elementen, wat een prima aantal is. Alle basiselementen zijn aanwezig, zoals elementen voor het toevoegen van tekst, afbeelding (ook galerij of carousel), knop, slider, accordeon, referentie, prijstabel, een eenvoudig contactformulier, tabbladen, teller, Google Maps enzovoorts. Een leuke extra is dat je elementen die je vaak gebruikt bovenaan kunt vastzetten zodat je ze niet steeds hoeft te zoeken.

Er zijn ook enkele meer geavanceerde elementen, zoals het post element waarmee je niet alleen berichten kunt weergeven, maar ook pagina’s of custom post types. Hierbij kun je ook bepaalde posts uitsluiten (of juist alleen bepaalde posts weergeven), en je kunt kiezen uit een lijst, raster, masonry of metro (remember Windows 8?) layout. Verder kun je kiezen welke onderdelen je wilt tonen (titel, samenvatting, afbeelding, meta) en in welke volgorde, en je kunt de afbeeldingen in een lijstweergave afwisselend links en rechts tonen. Wederom flink wat flexibiliteit om je layout aan te passen aan je wensen dus.

Voor de single post pagina is er ook een element voor gerelateerde berichten, en een element waarmee je een navigatie naar het vorige en volgende bericht kunt  toevoegen.

Bricks Builder biedt veel mogelijkheden dynamic data te gebruiken, zelfs inline (oké, nog 1 keer… 😮 ) Je kunt dus een tekstblok maken en de post titel, auteur of een ACF veld op elke gewenste plek in die tekst verwerken. Dat is iets wat ik nog niet ben tegengekomen in een andere page builder.

CSS filters, animaties and transform

De meeste page builders bieden wel CSS filters zoals brightness, contrast, blur, sepia enzovoorts. Maar de meeste builders bieden die filters alleen voor afbeeldingen (Elementor),
of de filters worden toegepast op alle onderdelen in een sectie, rij of element (Divi). Dit terwijl die effecten juist heel handig zijn voor achtergrond afbeeldingen, maar de meeste builders bieden geen mogelijkheid om het effect alleen toe te passen voor achtergrondafbeeldingen.

Als ik in Divi bijvoorbeeld de achtergrondafbeelding van een sectie wazig wil maken (met de blur filter) worden ook de tekst en alle andere onderdelen in die sectie wazig.
Bricks Builder past het filter juist wel alleen toe op de (achtergrond) afbeelding, naar mijn mening een veel nuttigere benadering.

Naast filters biedt Bricks Builder ook een flink aantal animaties en transform effecten zoals het schuintrekken, roteren of schalen van ieder element (maar nog niet on scroll helaas).

Unsplash integratie

Over nuttige dingen gesproken, Bricks biedt ook Unsplash integratie 🙂 Overal waar je een (achtergrond) afbeelding kunt toevoegen vind je ook een “browse unsplash” knop. 
Als je daarop klikt opent er een popup venster waarmee je de volledige Unsplash catalogus kunt doorzoeken, die meer dan 1 miljoen rechtenvrije stockfoto’s bevat die je gratis op je website mag gebruiken.

Developer vriendelijk, maar iets minder eindgebruikersvriendelijk

Bricks Builder bevat dus flink wat features voor gebruikers die geen code kunnen schrijven, maar ook voor gebruikers die wel zelf kunnen coderen.

Zo kun je aan elk onderdeel custom CSS, of een CSS class of ID toevoegen. 
Dat is echter iets wat de meeste page builders bieden.

Wat de meest page builders niet bieden is een JS blok om scripts toe te voegen aan de header, body en footer van de website. Je kunt scripts toevoegen voor de hele website (bijvoorbeeld Google Analytics code) maar ook per pagina. Je kunt zelfs je eigen elementen programmeren voor Bricks Builder!

Er is ook een structure paneel aanwezig, waarmee je eenvoudig de structuur van een pagina kunt inzien (zie screenshot containers). Als je over een onderdeel gaat met de muis verschijnt er een rand omheen in de builder, zodat je direct ziet welk onderdeel het betreft.

Zoals ik in het begin al schreef gebruikt Bricks veel CSS termen, zoals display (wat je op “none” moet zetten om bijvoorbeeld een onderdeel te verbergen op mobiel), positioning (relative, fixed of absolute), justify en direction (row of column, met reverse om de volgorde om te keren op mobiel) enzovoorts.

Dat maakt Bricks wat minder gebruiksvriendelijk voor normale gebruikers dan een page builder als Divi, maar dat geldt eigenlijk voor vrijwel iedere page builder.
Dat komt omdat Divi veel visuele elementen gebruikt in plaats van tekst,
zoals Bricks (maar ook Elementor en andere builders).

Om dat te illustreren heb ik hiernaast een screenshot geplaatst van de schaduw instelling in Divi (links) en Bricks (rechts). In Divi kies je eerst 1 van de 8 afbeeldingen bovenaan, waarna de andere opties verschijnen om de schaduw te fine-tunen. 

In Bricks Builder zie je alleen een paar inputs waar je handmatig de waardes voor x, y, blur en spread moet invoeren. Dat geldt ook dingen als shape dividers, animaties, transformatie effecten enzovoorts. Als je bijvoorbeeld een shape divider wil instellen zie je in Divi gewoon een aantal afbeeldingen van de verschillende vormen, terwijl je in Bricks (en Elementor) alleen een lijst ziet met de namen van de verschillende vormen (golven, wolken, druppels enzovoorts). 

Prijzen

Omdat Bricks Builder pas net gelanceerd is hebben ze een zeer verleidelijke lifetime deal voor “early adapters”. Voor slechts $ 59,00 heb je een licentie voor 1 site met levenslange updates en support, en voor $ 149,00 mag je Bricks gebruiken op 1.000 websites.

Conclusie

Als je mij een beetje kent hoef ik je vast niet te vertellen dat ik direct een licentie voor 1.000 websites heb gekocht 😉  Bricks is dan wel wat minder gebruiksvriendelijk dan Divi,
maar ze bieden wel een aantal zeer interessante en soms zelfs unieke features. Om er een paar uit te lichten:

• De snelheid, zowel front-end als in de builder zelf – wat een belangrijke ranking factor in Google is.
• Meerdere standaard stijlen instellen, ook voor elementen.
• Zeer flexibel door het gebruik van containers in plaats van een vaste rij/kolom structuur.
• Een ongelimiteerd aantal verloopkleuren.
• Een ongelimiteerd aantal shape dividers, zowel horizontaal als verticaal, voor ieder onderdeel.
• Lijst, raster, masonry of metro layouts voor berichten, galerijen enzovoorts.
• Dynamic data, zelfs inline.
• CSS filters voor (achtergrond) afbeeldingen.
• Unsplash integratie.

Naar mijn mening is Bricks Builder een prima keuze als je op zoek bent naar een betaalbaar alternatief voor Elementor Pro. Tuurlijk, op dit moment missen er nog wat populaire Elementor Pro features zoals een popup builder, WooCommerce builder (die als het goed is eind april wordt gereleased) en scroll animaties, maar Bricks is pas net uitgebracht and biedt nu al een aantal interessante features die Elementor niet heeft.

Zoals bij alle nieuwe producten is het natuurlijk de vraag of het over 5 jaar nog bestaat en actief ontwikkeld wordt, maar met deze features voor die prijs ben ik zeker bereid die gok te wagen. En jij?

Video overview van Bricks Builder