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

In deze handleiding legt Bob de webbouwer uit hoe de Brizy page builder werkt.

De Brizy interface

Brizy handleiding - de Brizy interface

Als je Brizy geïnstalleerd hebt en een nieuwe pagina aanmaakt zie je bovenin een roze knop “Edit with Brizy”. Als je daarop klikt opent de interface hiernaast (de sidebar met elementen is standaard verborgen).

De structuur van Brizy is opgebouwd uit blokken (in andere page builders heet dit meestal secties), en je moet eerst een blok toevoegen voordat je elementen (dat zijn de modules / widgets van Brizy) kunt toevoegen. Dat doe je door op de grote blauwe plus button (1) in het midden te klikken.

Er opent dan een popup met een aantal standaard designs. Deze kun je aan de linkerkant onder “categories” filteren op bijvoorbeeld “Hero”, “Contact”, “Team”, “Pricing”, “Header” en “Footer”. Bij een aantal designs zie je een roze “pro” label, deze zijn alleen beschikbaar als je Brizy Pro hebt, maar er is ook een flink aantal gratis designs beschikbaar. 

Alle designs zijn in zowel een lichte als donkere variant beschikbaar; onder het kopje “styles” links bovenin kun je selecteren welke je wilt zien. Verder vind je onder het kopje “blocks” een dropdown menu waarin je kunt switchen naar “Kit #1”, waarmee je toegang krijgt tot honderden extra designs.

Het eerste blok dat je ziet is echter een wit blok met de tekst “create your own”. Als je dat selecteer krijg je een blanco canvas waaraan je zelf elementen kunt toevoegen. 

Om elementen toe te voegen klik je op de plus knop links bovenin (2). Er opent dan een sidebar met alle beschikbare elementen. Je kunt het element van je keuze gewoon naar de gewenste plek in een blok slepen.

Onder het kopje “grid” vind je ook een “rij” en “kolom” element, daarmee kun je een blok verdelen in meerdere rijen en kolommen. Als je een rij invoegt bestaat deze standaard uit
2 kolommen, maar als je meer kolommen wilt kun je op de rechter muisknop klikken en vervolgens op “nieuwe toevoegen”. Met het kolom element kun je ook geneste kolommen toevoegen, waarmee bijvoorbeeld de linker kolom kunt verdelen in 2 kolommen van 25% terwijl de rechter kolom gewoon 50% breed blijft. Je kunt kolommen overigens ook gewoon naar de gewenste breedte slepen.

De overige onderdelen van de interface zijn als volgt: 

  • (3) Als je op het map icoontje klikt krijg je een overzicht van alle blokken, waarvan Brizy automatisch een screenshot maakt. Dit geeft je niet alleen een duidelijk overzicht van hoe je pagina is opgebouwd, maar je kunt hier ook de blokken in een andere volgorde slepen. Erg handig!
  • (4) Door op het kwastje te klikken kun je de standaard styling aanpassen. In het dropdown menu kun je kiezen uit een aantal standaard stijlen, maar je kunt de kleuren en lettertypen ook handmatig aanpassen. Brizy werkt met “gelinkte kleuren”. Als je ergens in je design een kleur uit het standaard kleurenpalet gebruikt (bijvoorbeeld als koptekst, in een overlay, als achtergrondkleur, voor een button) en je wilt deze kleur overal aanpassen doe je dat hier. Klik op de kleur die je wilt aanpassen en kies de nieuwe kleur, en deze zal overal waar je de betreffende kleur gebruikt hebt automatisch worden aangepast.
  • (5) Klik op het desktop icoontje om te switchen naar tablet of mobiele weergave. Alle aanpassingen die je in de tablet of mobiele weergave doet zijn alleen van toepassing op de betreffende device.
  • (6) Door op het blaadje te klikken kun je kiezen welke template je wilt gebruiken. Je kunt hier ook de featured image voor de betreffende pagina of bericht aanpassen.
  • (7) Onder het hamburger icoontje links onderin vind je nog wat handige links, o.a. naar de documentatie en een overzicht welke shortcuts je kunt gebruiken. Ook vind je hier een optie “back to dashboard” waarmee je de Brizy Builder kunt verlaten.
  • (8) Rechts onderin vind je nog een toolbar met een aantal icoontjes. Het eerste icoontje is een oogje. Je kunt namelijk blokken verbergen op bepaalde devices (hierover later meer).
    Met deze optie kun je kiezen of je deze verborgen blokken toch wilt weergeven in de builder als je in een modus zit waarin het betreffende blok eigenlijk verborgen is. Dus als je de pagina aan het bewerken bent in desktop modus, en er is een blok op die pagina dat alleen op mobiel zichtbaar is, kun je hiermee kiezen of je dat blok in desktop modus wilt zien of niet.
  • (9) en (10) zijn de bekende undo en redo buttons, waarmee je de laatste wijziging ongedaan kunt maken of opnieuw kunt uitvoeren.
  • (11) Als je op dit icoontje klikt opent een preview van je pagina in een nieuw tabblad.
  • (12) Met deze blauwe knop kun je je wijzigingen opslaan. Als je op het pijltje aan de rechterkant van die knop klikt krijg je een paar extra opties; zo kun je de pagina opslaan als draft (dan zijn je wijzigingen nog niet zichtbaar voor bezoekers), de pagina publiceren (publish, waarmee de wijzingen wel zichtbaar zijn voor bezoekers), alles op de pagina wissen (clear layout) of de hele layout opslaan in de bibliotheek (save layout). Heb je per ongeluk op “clear layout” geklikt? Geen nood, met de undo button (9) kun je ook dit ongedaan maken.

(Styling) opties voor elementen

Brizy styling opties

Als je met je muis over een element beweegt verschijnt er een stippellijn omheen. Als je op het element dat je wilt bewerken klikt verschijnt een toolbar boven (of soms onder) het betreffende element.

Het eerste icoontje (1) verschilt per element en geeft toegang tot de basisinstellingen voor het betreffende element. Bij het tekst element kun je hier de typografie instellen
(de tekst zelf pas je in Brizy altijd aan door gewoon op de tekst te klikken en te typen),
bij een afbeelding element selecteer je hier de afbeelding, bij een knop element stel je hier dingen als de gewenste grootte, rand en icoon in enzovoorts.

Als het element tekst bevat – bijvoorbeeld de tekst op een knop –  is het tweede icoontje (2) meestal een T. Daarmee stel je de typografie de tekst in (lettertype, grootte, font weight, regelhoogte). 

Het volgende icoontje (3) is de kleurenkiezer, aangeduid met een (gekleurd) vierkantje. 

 

Zoals je in bovenstaand screenshot kunt zien bevat de kleurenkiezer vaak meerdere tabs (de linkjes bovenin (10) ). Bg staat voor background, dat is de achtergrondkleur voor het betreffende element. Tekst, rand en shadow spreken voor zich, maar die laatste heeft wel wat toelichting nodig. Als je een schaduw instelt verschijnen rechts onderin 4 cijfertjes.
Het eerste cijfer bepaalt de spreiding van de schaduw, het tweede cijfer de breedte, het derde cijfer de horizontale positie en het vierde cijfer de verticale positie, alles in pixels.
Het is altijd even proberen wat er mooi uit ziet, maar  15  0  5  5  geeft meestal wel een mooie subtiele schaduw.

Je kunt het beste een kleur kiezen uit het standaard kleurenpalet (weet je nog, de gelinkte kleuren), maar je kunt ook handmatig een andere kleur instellen.
Met de rechter scrollbar (11) kun je de transparantie van de betreffende kleur instellen. Dit werkt ook met de gelinkte kleuren. Je kunt gelinkte kleuren ook
vanuit dit venster aanpassen door op het tandwiel icoontje rechts naast het kleurenpalet te klikken.

Verder zie je bij veel elementen aan de linkerkant nog 2 tabs (9). Als je op het lichtgrijze icoontje klikt kun je de hover kleur instellen. Sommige elementen, zoals het menu element, bevatten nog een derde tab voor de actieve status.

Het volgende icoontje is een hyperlink icoon (4). Je kunt achter ieder element een link plaatsen, en instellen of deze in hetzelfde of een nieuw tabblad dient te openen.
Daarnaast kun je via de tabs bovenaan ook linken naar een ander blok op dezelfde pagina. Tot slot kun je ook linken naar een popup, maar daarvoor heb je Brizy Pro nodig.

De elementen die tekst bevatten hebben ook een icoontje om de uitlijning in te stellen (5). Je past de uitlijning aan door simpelweg op het icoontje te klikken.
Als de tekst standaard links is uitgelijnd zal deze na 1 keer klikken gecentreerd zijn, na 2 keer klikken rechts zijn uitgelijnd en na 3 keer klikken weer links zijn uitgelijnd.
Het tekst element bevat daarnaast ook een soortgelijk icoontje maar dan met 3 lijnen in plaats van 4, daarmee kun je de weergave aanpassen naar een (genummerde) lijst.

Het volgende icoontje is meestal een tandwiel (6). Daarmee open je de rechter sidebar met een aantal opties voor wat meer geavanceerde gebruikers. Hier stel je o.a.
de padding en margin in, en onder het kopje “positie” kun je een element absolute of fixed maken. Als je bovenin de sidebar op “geavanceerd” klikt kun je oa een
CSS ID en class toevoegen, een animatie instellen, de z-index aanpassen en het betreffende element verbergen voor desktop. 

Met het een na laatste icoontje (7) kun je het betreffende element dupliceren, en met het prullenbak icoontje (8) verwijder je het element uiteraard. Dupliceren en verwijderen kan overigens ook door met je rechter muisknop op een element te klikken. Hiermee kun je ook alleen de styling instellingen kopiëren en plakken.

Welke icoontjes en instellingen je precies tot je beschikking hebt verschilt per element, maar bovenstaande zul je het vaakst tegenkomen.

Opties voor blokken

Als je met de muis over een blok beweegt verschijnt rechts bovenin een zwart rond icoontje.
Als je daarop klikt opent de toolbar hiernaast.

Als je op het eerste icoontje in de toolbar klikt (de zeshoek) opent zie je 2 schakelaars.
Met de eerste schakelaar, “maak globaal”, kun je het betreffende blok instellen als een globaal blok.

Je kunt blokken opslaan in je bibliotheek (door op het hart icoontje te klikken), waarna je het eenvoudig kunt gebruiken op andere pagina’s. Als je een blok globaal maakt worden wijzigingen die je op de ene pagina maakt automatisch ook doorgevoerd op alle andere pagina’s waar je het betreffende blok gebruikt.

Als je voor de eerste keer op het hart icoontje klikt kun je ook inloggen op je Brizy account. Als je dat doet worden alle opgeslagen blokken gesynchroneerd met je eigen online bibliotheek, waarna je ze kunt gebruiken op al je Brizy websites onder dat account.

brizy block options

Met de tweede schakelaar kun je elk blok omtoveren tot een slider. Brizy maakt dan automatisch een kopie van het huidige blok (de tweede slide) en voegt ook navigatiepijlen en stippen toe. Daarmee kun je tussen de verschillende blokken navigeren. Je kunt vervolgens de slide naar wens aanpassen door simpelweg elementen naar de gewenste plek te slepen of te verwijderen, of de opties ervan aan te passen.

Als je nu weer op het zeshoek icoontje klikt zie je een nieuwe tab “slider”, waaronder je o.a. kunt instellen of de slider automatisch moet afspelen, en hoe de navigatie stippen en pijlen eruit moeten zien (je kunt deze ook verbergen). Als je meer slides wilt toevoegen klik je simpelweg op het dupliceer icoontje om het huidige blok te kopiëren naar een nieuwe slide.

Het tweede (zwart/wit) icoontje en het derde (vierkant) icoontje zijn voor het instellen van de achtergrond. Onder het tweede icoontje kun je een afbeelding, video of Google Maps kaart als achtergrond instellen, en onder het derde icoontje kun je een achtergrondkleur instellen. Door te spelen met de transparantie van je achtergrondkleur kun je mooie overlay effecten bereiken. Deze opties zijn ook voor rijen beschikbaar, en als je een slider hebt ingesteld kun je hier ook de kleur van de navigatiepijlen en stippen instellen.

De overige icoontjes zijn uiteraard hetzelfde als die van de elementen.

Hulp nodig met je Brizy 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 Brizy Pro 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 Brizy Pro wilt aanschaffen stel ik het zeer op prijs als je dat via deze link doet 😉

Hou je het bij de gratis versie van Brizy, maar wil je me toch bedanken voor dit artikel? Dan kun je eventueel ook een kleine eenmalige donatie doen via de button hiernaast 🙂

 

Bedrag €*