Bob de webbouwer bouwt en verbetert websites 040 848 80 69 bob@bobdewebbouwer.com

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…

bricks review

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 secties, rijen 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 secties, rijen, kolommen en elementen enzovoorts. 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 secties opslaan als template. Rijen en kolommen kun je helaas niet opslaan in de bibliotheek, maar individuele elementen kun je dan weer wel 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.

Secties, rijen, kolommen en elementen

De structuur van een Bricks pagina bestaat uit secties, rijen, kolommen en elementen. Een sectie kan bestaan uit meerdere rijen, een rij uit meerdere kolommen en een kolom kan weer meerdere elementen bevatten.

Er zit geen limiet aan het aantal kolommen dat je in een rij kunt toevoegen, en je kunt elke kolom naar de gewenste breedte slepen.

Je kunt zelfs de breedte van elke kolom apart aanpassen voor tablet en mobiel,
en het breaking point (de resolutie) instellen waarop de kolommen onder elkaar komen in plaats van naast elkaar. Daardoor ben je heel flexibel in het vormgeven van de layout of mobiel en tablet, iets wat bij andere builders vaak een stuk lastiger is.

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 shape dividers and gradient

Bij de meeste page builders kun je alleen shape dividers toevoegen aan secties, en dat is dan gelimiteerd tot slechts 1 shape divider aan de bovenkant en onderkant.

Zoals je in het screenshot hierboven kunt zien geeft Bricks Builder je de mogelijkheid om lekker creatief te zijn in je designs. In de bovenste rij heb ik bijvoorbeeld 2 kolommen gemaakt waarin ik 3 shape dividers over elkaar heb geplaatst, ieder met een andere hoogte en doorzichtigheid (opacity). De onderste rij heeft een achtergrond verloopkleur die bestaat uit 4 verschillende kleuren, waarbij ik een schuine hoek heb ingesteld.

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. 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.
  • Een ongelimiteerd aantal kolommen waarvan je de breedte zelf kunt instellen, aanpasbaar voor mobiel.
  • 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

Hulp nodig met je website?

Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een training over dit onderwerp te verzorgen.

Vraag direct een vrijblijvende offerte aan

Dit artikel bevat affiliate links. Dat wil zeggen dat ik een vergoeding krijg als je Bricks Builder koopt via een link op deze pagina. Dat kost jou verder niets extra’s, maar zorgt er wel voor dat ik jou kan blijven helpen met dit soort gratis artikelen. Dus als je Bricks wilt aanschaffen stel ik het zeer op prijs als je dat via deze link doet 😉

Ga je voor Elementor of een andere gratis oplossing? Dan kun je eventueel ook een
kleine eenmalige donatie doen via de button hiernaast 🙂

 

Bedrag



Gerelateerde artikelen