Toen Bricks Builder in 2021 gelanceerd werd schreef ik hier dat het wel een Elementor kloon met een andere skin leek, waarbij ook wat dingen van Divi geleend waren.
Het instellingen paneel leek juist weer erg op dat van Oxygen, een builder die vooral op professionals is gericht. 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 voelde de interface van Bricks toch meer intuïtief.
The king is dead… long live the new king!
Oxygen was destijds dus de voor de hand liggende keuze voor professionals. Zo gebruikte Oxygen de standaard CSS termen in plaats van zelf verzonnen termen die het makkelijker moeten maken voor gebruikers, en er kon gewerkt worden met CSS classes voor de styling.
Maar ook Oxygen was niet perfect. Gebruikers zeurden al jaren over bepaalde features waaraan maar geen gehoor werd gegeven. En toen was daar opeens Breakdance. Een nieuwe builder door de makers van Oxygen die wel al die features bevatte, maar niet gericht was op professionals. Breakdance was bedoeld voor de Elementor markt; niet-technische gebruikers die vooral een makkelijke ervaring met veel standaard modules en templates willen.
Maar waar men geen rekening mee had gehouden was de stormvloed aan negatieve reacties van Oxygen gebruikers, die opeens alle features waar ze al jaren om vroegen in een andere builder zagen terugkomen. Maar die builder was niet bedoeld voor professionals, dus switchen was niet echt een optie, en daarnaast was Breakdance niet inbegrepen in de lifetime deal die Oxygen klanten hadden (nou ja, ze kregen 1 jaar gratis).
Dit alles zorgde voor zoveel woede, en veroorzaakte een zo grote vertrouwensbreuk, dat heel veel Oxygen gebruikers vluchtten naar een builder die vrij veel leek op Oxygen, features zoals een class systeem had en ook een hele aantrekkelijke lifetime deal bood… Bricks dus.
Bricks Builder is een thema met een ingebouwde page builder
Net als Divi en Avada dus. 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
Class based workflow
Dit is de voornaamste reden dat Bricks tegenwoordig de standaard is voor professionals. Een class based workflow betekent dat de styling voornamelijk gebeurt met CSS classes. Daarmee hoef je de styling van bijvoorbeeld een button of card maar op 1 plek in te stellen. Vervolgens hoef je alleen de betreffende class (naam) te koppelen aan een element om dit dezelfde styling te geven. Bovendien, als je later iets wijzigt in de styling wordt dat automatisch aangepast voor alle elementen die dezelfde class gebruiken.
Snelheid
Verder is Bricks Builder erg snel, zowel voor de bezoeker als tijdens het bouwen zelf. De builder laadt in een paar seconden en alles voelt erg snel en intuïtief 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). 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.
Meer dan 100 elementen
Bricks biedt meer dan 100 verschillende elementen. Alle basiselementen die je mag verwachten zijn aanwezig, zoals headings, tekst, afbeeldingen, buttons, icon lists en tabs. Maar ook geavanceerdere elementen zoals een off canvas element, formulieren, carrousels / sliders, een query loop builder en filters ontbreken niet. Een leuke extra is dat je elementen die je vaak gebruikt bovenaan kunt vastzetten zodat je ze niet steeds hoeft te zoeken.
Verder zijn er layout elementen zoals secties, containers en divs, die je o.a. een flexbox of CSS grid structuur kunt geven. Dat werkt wel wat anders dan traditionele page builders die met een rijen en kolommen structuur werken, waardoor het wel even wennen is. 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 😮 ).
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.
Components
De meeste builders bieden wel een mogelijkheid om elementen op te slaan in een bibliotheek, zodat je deze later eenvoudig kunt hergebruiken op andere pagina’s. Meestal kun je zo’n element ook gesynchroniseerd opslaan, waardoor een wijziging op 1 plek automatisch wordt doorgevoerd op alle plekken.
Dus als je bijvoorbeeld een testimonials sectie hebt kun je die opslaan als gesynchroniseerd element en dit invoegen op al je pagina’s. Als je dan een mooie nieuwe testimonial krijgt kun je die gewoon toevoegen aan het gesynchroniseerde element, waarna deze automatisch op alle pagina’s getoond wordt.
Bricks components gaan echter een stap verder; hierbij kun je ook bepaalde onderdelen NIET synchroniseren. Zo kun je bijvoorbeeld wel op iedere pagina dezelfde testimonials tonen, maar de titel per pagina aanpassen. Bij de gesynchroniseerde testimonial sectie hierboven is dat niet mogelijk, want dan verandert de titel op alle pagina’s. Bij Bricks kun je echter instellen dat je de titel per pagina wilt kunnen aanpassen.
Een ander voorbeeld zijn diensten cards. Al die cards hebben dezelfde structuur; Een afbeelding, de titel van de dienst, een korte omschrijving, de prijs en een button. Maar natuurlijk heeft elke dienst een andere titel, omschrijving en prijs. In de meeste builders kun je die cards niet als gesynchroniseerd element opslaan, want daarvoor moet de inhoud hetzelfde zijn.
Als je later dus iets aan de structuur van je diensten cards wilt wijzigen – je wilt bijvoorbeeld dat de titel boven de afbeelding komt – zul je dat op iedere card apart moeten gaan aanpassen (nou ja, dat kan ook met CSS, maar het gaat even om het voorbeeld ;-)). Met Bricks components kun je simpelweg instellen dat de afbeelding, titel, omschrijving, prijs en button per card aanpasbaar moeten zijn, en toch globale controle over de structuur houden.
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 enkele tientallen standaard templates. Dat is vrij weinig in vergelijking met de concurrentie, al zijn er wel een aantal third party template bibliotheken. Daarvoor moet je meestal wel extra betalen.
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 hieronder 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
Toen Bricks Builder pas net gelanceerd was (en toen ik mijn licentie kocht :-D) hadden ze een zeer verleidelijke lifetime deal voor “early adapters”. Voor slechts $ 59,00 had je een licentie voor 1 site met levenslange updates en support, en voor $ 149,00 mocht je Bricks gebruiken op 1.000 websites.
Die prijzen zijn inmiddels behoorlijk gestegen, maar dat geldt ook voor het aantal features natuurlijk. Op dit moment kost een lifetime licentie $ 599,00 voor een ongelimiteerd aantal websites, maar er zijn ook jaarlijkse abonnementen verkrijgbaar.
Dat is wat hoger dan de meeste andere builders, en als je alleen je eigen website wilt bouwen is zo’n lifetime licentie dan ook vrij prijzig. Maar Bricks is dan ook gericht op professionals die websites voor klanten bouwen, en dan is de investering in zo’n uitgebreide tool als Bricks natuurlijk wel erg interessant.
Leave a Reply