[ad_1]
Het maken van een WordPress site hoeft niet moeilijk te zijn, zelfs niet als je een beginner bent. Met de juiste hulpmiddelen en begeleiding kun je snel een strakke, volledig functionele website maken.
Deze gids laat je zien hoe je een WordPress site kunt bouwen met Bricks Builder, een krachtige themabouwer die uitgebreide aanpassingsmogelijkheden biedt zonder ook maar één regel code te hoeven schrijven.
Overzicht van Bricks Builder
Bricks Builder is een visuele site builder waarmee gebruikers aangepaste, responsieve websites kunnen maken direct binnen de WordPress omgeving. Het is ontworpen om de gebruikerservaring te verbeteren omdat het naadloos integreert met WordPress, waardoor beginners en ervaren ontwikkelaars websites visueel kunnen bouwen via een drag-and-drop interface.
In tegenstelling tot Elementor en andere sitebouwers is Bricks een thema, geen plugin. Het bevat bijna alle features, terwijl andere sitebuilders extra plugins zouden gebruiken.
Het heeft een live bewerkingservaring aan de voorkant, wat betekent dat je je wijzigingen in realtime kunt zien terwijl je ontwerpelementen en layouts aanpast.
De plugin biedt een uitgebreide toolkit met vooraf ontworpen templates, een groot aantal ontwerpelementen en geavanceerde aanpassingsopties voor meer gedetailleerde webontwikkeling.
Bovendien ondersteunt Bricks Builder dynamische data, waardoor gebruikers eenvoudig datagestuurde websites kunnen bouwen en content dynamisch kunnen integreren in hun templates.
Voordelen van het gebruik van Bricks voor WordPress
Bricks Builder onderscheidt zich door zijn prestaties en flexibiliteit. Het is een nieuwer maar robuust alternatief voor andere bouwers en biedt:
- Snelheid – Bricks is ongelooflijk snel en lichtgewicht.
- Gebruiksgemak – De interface is intuïtief, waardoor het gemakkelijk is voor beginners en professionals.
- Aanpasbaarheid – Bricks biedt uitgebreide aanpasbaarheid door middel van aangepaste CSS en JavaScript en is compatibel met een groot aantal WordPress plugins.
Aan de slag met Bricks
Bricks is een premium thema waarvoor een betaald abonnement nodig is. Om het te kunnen gebruiken, moet je een van hun pakketten aanschaffen. Zodra je hebt betaald, kun je op je dashboard een zip-bestand downloaden dat je kunt uploaden naar je WordPress site, samen met een licentiesleutel die Bricks activeert binnen je WordPress installatie.
Na het installeren van het Bricks thema verschijnt er een nieuw Bricks menu-item in je WordPress dashboard.
Om je licentie te activeren, ga je naar het dashboard, klik je op Activate license, voer je je licentiesleutel van je Bricks account in en klik je op Activate. Hiermee wordt de volledige functionaliteit van het Bricks thema ingeschakeld.
Als je Bricks wilt uitproberen voordat je tot aankoop overgaat, kun je een proefaccount aanmaken op try.bricksbuilder.io. Dit platform biedt toegang tot een vooraf geconfigureerde WordPress site waarop Bricks is geïnstalleerd, zodat je de features en mogelijkheden zonder initiële kosten kunt verkennen.
Met de Bricks paginabouwer beginnen
Om een nieuwe pagina te ontwerpen met de Bricks paginabouwer, navigeer je naar Pages > Add new of klik je op een bestaande pagina. Je kunt de Bricks editor starten door te klikken op Edit with Bricks.
Je kunt nu elementen uit het Elements paneel slepen om je pagina te ontwerpen.
De Bricks interface begrijpen
De Bricks interface biedt een naadloze integratie met de WordPress omgeving.
Hier volgt een overzicht van de kerninterface:
- Builder workspace – Het belangrijkste gebied van Bricks is de builder workspace, die een visuele weergave van je website is. Hier kun je direct met je pagina’s werken, door elementen op hun plaats te slepen, de grootte aan te passen en onderdelen te herschikken.
- Werkbalk – Bovenaan de werkruimte biedt de werkbalk snelle toegang tot essentiële functies zoals het opslaan van je werk, een voorbeeld van je site bekijken en toegang tot het instellingenmenu en responsieve besturingselementen.
- Elementenpaneel – Aan de linkerkant van de interface is het elementenpaneel je gereedschapskist. Het bevat alle bouwstenen die je op je site kunt gebruiken, zoals tekstvakken, afbeeldingen, knoppen en meer. Je kunt deze elementen vanuit het paneel rechtstreeks naar je pagina slepen.
- Structuurweergave – De structuurweergave bevindt zich vaak naast of als schakeloptie in het elementenpaneel en geeft een hiërarchisch overzicht van je pagina. Deze weergave is vooral handig om de layout en diepte van je pagina-elementen te begrijpen, zodat je geneste elementen gemakkelijk kunt selecteren en bewerken.
Aangepaste lettertypen gebruiken in Bricks
Bricks biedt de interessante mogelijkheid om aangepaste lettertypen te uploaden naar je WordPress site. Om dit te doen, ga je naar Bricks > Custom Fonts.
In dit gedeelte kun je je lettertypebestanden uploaden in verschillende formats, waaronder WOFF2, WOFF of TTF. Je kunt ook verschillende lettertypevariaties uploaden, zoals dun, halfvet, normaal en vet.
Om een aangepast lettertype toe te voegen, klik je op Add new. Voer vervolgens een naam in voor het lettertype in het veld Add title. Selecteer vervolgens de lettertypevariant die je wilt uploaden, kies de lettertypestijl en klik op Edit.
Er verschijnt een dropdown met velden om het lettertypebestand te uploaden. Selecteer je lettertypebestand en upload het. Je kunt dit proces herhalen door op Add a font variant te klikken voor zoveel mogelijk varianten. Klik ten slotte op Publish.
Volg deze stappen om je nieuw geüploade aangepaste lettertype toe te passen op tekst op je WordPress site:
- Ga naar de pagina waar je het nieuwe lettertype wilt gebruiken en klik op Bewerken met Bricks.
- Klik op de tekst die je wilt veranderen.
- Informatie over de geselecteerde tekst wordt weergegeven in het linkerpaneel. Klik op STYLE.
- Vouw de keuzelijst TYPOGRAPHY uit om meer opties weer te geven.
- Blader in het veld Font family door de beschikbare lettertypen, waaronder Google lettertypen en je eigen uploads.
- Selecteer je aangepaste lettertype uit de lijst om je tekst meteen bij te werken.
Nu wordt je tekst weergegeven met je aangepaste lettertype, waardoor je pagina een persoonlijk tintje krijgt.
Templates gebruiken in Bricks
Templates zijn een fundamentele functie in Bricks en zijn er in verschillende soorten, waaronder headers, footers en blogpost lay-outs. Deze templates kunnen variëren van een enkele sectie, zoals een websiteheader of een heldensectie, tot volledige pagina-inhoud, zoals blogpostlay-outs, archiefpagina’s, zoekresultaten en foutpagina’s.
Een template maken
Om een template te maken:
- Navigeer naar Bricks > Templates in je dashboard.
- Kies ervoor om een nieuw template toe te voegen of een bestaand template te importeren.
- Klik op Add new, selecteer het type template en kies vervolgens Edit with Bricks.
Een nieuwe template maken voor je Bricks Builder.
Templates toepassen
Om een template op een pagina toe te passen:
- Navigeer naar de pagina waar je de template wilt gebruiken.
- Klik op het pictogram Templates (map) in de werkbalk van de bouwer om de sectie templates te openen.
templates toepassen op Bricks pagina’s. - Hier heb je toegang tot zowel de templates die je hebt gemaakt als de templates van de community.
- Selecteer de gewenste template en bekijk een voorbeeld.
Bricks templatewinkel – bevat community, lokale en externe templates. - Je kunt uiteindelijk op Insert klikken om het toe te passen.
Kies en gebruik een geselecteerd communitytemplate.
Externe templates
De templates van Bricks bieden unieke mogelijkheden die je niet bij andere sitebouwers vindt. Externe templates zijn templates die zijn gemaakt en worden gebruikt in andere sites die u wilt gebruiken in uw site.
Om andere sites toe te staan jouw Bricks templates te gebruiken, ga je naar Bricks > Settings > Templates in je WordPress dashboard en schakel je het selectievakje My Templates Access in.
Gebruik Whitelist URL’s en Password Protection om de toegang tot templates te beperken tot mensen die het juiste wachtwoord kennen.
Om templates van andere sites te gebruiken, ga naar Bricks > Settings > Templates, scroll naar de sectie Remote templates en plak de URL van de Bricks site waarvan je templates wilt ophalen in het veld Remote template URL.
Als je een wachtwoord instelt, moet je ervoor zorgen dat je dit schrijft onder het Password template op afstand. Klik vervolgens op Save settings.
Om deze templates te gebruiken, navigeer je naar de paginabouwer en klik je zoals voorheen op Templates; er verschijnt een nieuwe sectie Remote templates met alle templates van de externe site.
Dynamische data gebruiken in Bricks
Met Bricks kun je dynamische data opnemen in je templates en pagina’s, waardoor het een veelzijdige tool is voor het bouwen van dynamische websites.
Je kunt verschillende dynamische elementen opnemen, zoals uitgelichte afbeeldingen, berichttitels, publicatiedata, auteursnamen, categorieën, tags, sitetitels en al je custom velden.
Dynamische gegevens zijn vooral handig bij het maken van specifieke templates in Bricks, zoals je template voor blogposts of templates voor aangepaste posttypes, zoals een advertentie voor een enkele woning.
Om dynamische data toe te voegen, begin je met het typen van { op het canvas of klik je op het “bout” pictogram naast de meeste velden in het instellingenpaneel.
Zo maak je een template voor een enkele post met dynamische gegevens met Bricks:
- Navigeer naar Bricks > Template om een nieuw template te maken. Geef je template een titel, stel het type in op Single en publiceer het of sla het op als concept.
- Klik op Edit met Bricks om te beginnen met het configureren van je template om dynamische gegevens te gebruiken.
- Geef de pagina de gewenste stijl. Normaal gesproken wil je elementen als de titel van het bericht, de uitgelichte afbeelding, de publicatiedatum, de naam van de auteur en de inhoud van het bericht dynamisch weergeven.
- Op een leeg canvas voeg je een titel en inhoud toe door
{post_title}in te voegen in een Heading element en{post_content}in een Basic text element.
Dynamische gegevens gebruiken in Bricks.
Om deze template als standaard in te stellen voor alle berichten:
- Klik op het instellingenpictogram in de werkbalk, ga naar Template settings > CONDITIONS en klik vervolgens op de knop + ADD CONDITION.
- Selecteer Post type en specificeer Posts.
Stel de template in als standaard voor alle berichten. - Zorg ervoor dat je de templatepagina opslaat en bijwerkt in WordPress. Navigeer vervolgens naar de pagina Posts om te zien hoe elke post is opgemaakt met de nieuwe template zonder extra styling.
De template wordt gebruikt voor alle berichten.
Om de opmaak van deze template te vereenvoudigen, kun je een standaardpost toevoegen die je kunt gebruiken als referentie voor de dynamische elementen:
- Klik op het instellingenpictogram in de werkbalk en ga naar Template Settings > POPULATE CONTENT.
- Kies Single post/page als inhoudstype en selecteer een specifiek bericht als templateinhoud. Als er geen verschijnt, zoek er dan een op en klik vervolgens op APPLY PREVIEW.
Voeg een standaard bericht toe om te gebruiken als referentie voor de dynamische elementen. - Je kunt nu eenvoudig elementen zoals de titel en inhoud van het bericht weergeven met behulp van het geselecteerde templatebericht.
Geselecteerde standaard bericht wordt weergegeven bij het aanpassen van de pagina met dynamische gegevens.
Bovendien ondersteunt Bricks het gebruik van inhoud van Advanced Custom Fields (ACF), waardoor je beter in staat bent om gedetailleerde pagina’s op maat te maken.
Formulierinzendingen verwerken met Bricks
De formulierinzendfunctie is geïntroduceerd in Bricks 1.9.2 om formulierinzendingen vast te leggen. Hiermee kun je een custom tabel met de naam bricks_form_submissions maken in je database (plus het voorvoegsel van je WP database).
Je kunt de nieuwe instelling Save form submissions in database inschakelen onder Bricks > Settings > General > Miscellaneous.
Klik vervolgens op Save settings. Er verschijnt een tabblad Formulierinzendingen (Bricks > Form submissions) met de verschillende tabellen voor formulierinzendingen.
Inzendingen verzamelen
Voor het verzamelen van formulierinzendingen in Bricks heb je geen extra plugin nodig. Je hoeft alleen maar het Form element te gebruiken om een formulier te maken en de velden correct in te stellen.
Klik in het instellingenpaneel op ACTIONS en selecteer dan de actie Save submission.
Klik vervolgens op Save submission settings om het formulier een beschrijvende naam te geven. Deze naam wordt gebruikt om gegevens van het formulier te openen.
Als je nu de pagina opslaat en opent. Je kunt het formulier invullen en dan teruggaan naar Bricks > Form Submissions om de formuliergegevens te bekijken.
Je kunt ook een CSV bestand downloaden van de verschillende formulierinzendingen. In het gedeelte Bricks > Settings > General > Miscellaneous waar je deze functie hebt geconfigureerd, kun je de databasetabel resetten of verwijderen.
WooCommerce gebruiken met Bricks
WooCommerce is een gratis plugin die je WordPress site uitbreidt met e-commerce mogelijkheden. Het wordt wereldwijd erkend als een toonaangevende open-source oplossing voor het opzetten en beheren van een online winkel.
Bricks integreert naadloos met WooCommerce en biedt een robuuste in-theme bouwer voor het maken van je hele winkel, van de hoofdwinkelpagina tot individuele productpagina’s, productarchieven, winkelwagentjes, kassa’s en accountpagina’s.
Bricks biedt gespecialiseerde elementen en templates speciaal voor WooCommerce, waarmee je de layout van je winkel kunt ontwerpen.
Om te beginnen met het gebruik van de WooCommerce Builder in Bricks, moet je de WooCommerce plugin installeren en activeren. Eenmaal geactiveerd kun je Bricks gebruiken om verschillende WooCommerce templates visueel te ontwerpen en aan te passen, vergelijkbaar met hoe je layouts voor afzonderlijke berichten zou beheren.
Om een eenvoudige Shop pagina te maken:
- Navigeer naar Pages en selecteer de Shop pagina.
- Klik op Edit with Bricks. Het paneel Elements bevat verschillende productelementen. Hiermee kun je producten, titels, beschrijvingen, prijzen en meer weergeven, zodat je gemakkelijker dynamische templates kunt maken.
WooCommerce gebruiken met Bricks Builder. Met behulp van deze elementen kun je je pagina naar wens indelen en stylen.
Net zoals je een template voor een enkel bericht kunt maken, kun je een template voor een enkel product maken en de voorwaarden zo instellen dat het met alle producten werkt.
Query loops in Bricks
Met de Query Loop bouwer kun je query’s uitvoeren in je database volgens je queryparameters en de queryresultaten die je wilt weergeven in de loop weergeven. Het kan worden gebruikt in layoutelementen zoals container, Accordion en Slider.
Je kunt query’s uitvoeren op berichttypen, taxonomietermen en gebruikers. Je kunt bijvoorbeeld een lijst met blogauteurs, communityleden en teamleden opvragen.
Om de Query Loop te gebruiken, voeg je een Container element toe aan het canvas. Schakel de instelling Use Query Loop in om van je container een loop-item te maken.
Zodra je de instelling Use Query Loop hebt ingeschakeld, zie je een Query-element (oneindigheidspictogram). Klik op het pictogram om de querybesturing te openen en de queryparameters in te stellen voor het ophalen van de inhoud uit je database.
De container dient nu als je herhalingselement. Alle elementen in deze container worden zo vaak herhaald als er queryresultaten zijn. Deze academy guide legt uit hoe het werkt.
Prijzen Bricks
Bricks heeft geen gratis pakket. Ze maken alleen een account aan om je hun thema te laten proberen, maar je kunt het niet gebruiken voor je site tenzij je betaalt.
Bricks biedt basispakketten en een levenslang pakket. Het levenslange abonnement biedt onbeperkte privileges, maar jij bepaalt wat je wilt.
Ze bieden het gemak van bijna alles wat je nodig hebt binnen het platform, wat bijdraagt aan een naadloze en efficiënte workflow en het een waardevolle investering maakt voor wie op zoek is naar een robuuste en veelzijdige oplossing voor webdesign.
Beoordeling Bricks: Is het het proberen waard?
Een potentieel nadeel is dat Bricks geen gratis versie biedt, in tegenstelling tot Elementor. Bricks Builder heeft echter de aandacht getrokken in de industrie met zijn mix van eenvoud en krachtige features.
Uit een onderzoek van 2024 onder 1.144 WordPress professionals, uitgevoerd door The Admin Bar, blijkt dat “Bricks de enige paginabouwer was die zijn aantal ten opzichte van vorig jaar zag stijgen, met 32% van het totaal”:
Dit laat zien hoeveel WordPress professionals het omarmen, ook al is het nog steeds een relatief nieuwe speler.
Bricks werkt als een compleet thema. Dit betekent dat je functies van andere thema’s niet kunt combineren met de paginabouwer. Ook wat snelheid betreft, staat Bricks Builder bekend als een nieuwere paginabouwer die is ontworpen voor krachtige websites en sneller is dan Elementor Pro.
Het gebruik van een paginabouwer die alleen is ontworpen voor snelheid kan niet de beste prestaties garanderen. Ongeacht het type website dat je bouwt, je hostingprovider speelt een cruciale rol in de prestaties.
Bij Kinsta staan we bekend om het leveren van eersteklas WordPress Hosting met tientallen topfeatures. En daar zijn we trots op!
We werken op een volledig gecontaineriseerde architectuur die uitsluitend wordt aangedreven door het Google Cloud Platform op het Premium Tier netwerk van Google. Hierdoor kunnen we je voorzien van een grote selectie van de snelste dataservers, ongelooflijke prestaties, caching op serverniveau, speciale bronnen en verbeterde beveiliging.
Kijk wat onze klanten zeggen of neem contact met ons op voor meer informatie over onze managed hosting oplossing en hoe deze uitblinkt.
Samenvatting
In dit artikel hebben we de Bricks Builder, de werking, een aantal features en het gebruik ervan besproken. We hebben gekeken naar de uitgebreide thematische aanpak, de aanpassingsmogelijkheden en de prestatievoordelen.
Hoewel Bricks geen gratis versie heeft zoals Elementor, kunnen het geïntegreerde ontwerp en de frequente updates een superieure efficiëntie bieden voor het optimaliseren van de prestaties van hun website.
Heb je vragen over het gebruik van de WordPress Bricks themabouwer? Laat het ons weten in de comments hieronder!
Kinsta
Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it’s frameworks.
