Hoe werkt de Visual Builder?

De Visual Builder is de bewerkweergave waarmee je je Bloomsite-pagina's opbouwt. Je ziet de pagina precies zoals je bezoeker hem ziet, maar elk onderdeel is aanklikbaar en aanpasbaar. Elke pagina is opgebouwd uit vier niveaus die in elkaar vallen: Sectie → Rij → Kolom → Module.

1. Schakel de Visual Builder in
   Ga naar de pagina die je wilt bewerken en klik in de balk bovenaan op Visual Builder inschakelen. De bewerkweergave opent meteen op de voorkant van je pagina — je hoeft niet meer extra op een knop te klikken om “aan de voorkant te bouwen”.

   

2. Sectie (blauw)
   Een Sectie is de bovenste en breedste laag op je pagina — een horizontale band over de volledige paginabreedte. Klik een sectie aan en zijn instellingen verschijnen rechts in het paneel: hier stel je o.a. de achtergrondkleur, de marge en de boven- en onder-padding in. Een pagina bestaat uit één of meer secties onder elkaar.

   

3. Rij (groen)
   Binnen een sectie staan Rijen. Een sectie kan één of meerdere rijen onder elkaar bevatten; elke rij is een aparte horizontale strook binnen die sectie. Klik op een rij om hem te selecteren — rechts verschijnen de rij-instellingen.

   

4. Kolom (grijs)
   Binnen een rij plaats je Kolommen — verticale stroken naast elkaar. Eén kolom = de inhoud loopt over de volledige rijbreedte; twee kolommen geven je twee stroken naast elkaar (bijvoorbeeld tekst links, foto rechts), tot maximaal zes kolommen per rij. Selecteer een kolom om zijn instellingen rechts te zien.

   

5. Module (donkergrijs)
   Een Module is een inhoudsblok binnen een kolom: een tekst, afbeelding, knop, formulier, video, kaart, en zo verder. Modules zijn waar je je daadwerkelijke inhoud plaatst — alles wat je bezoeker uiteindelijk leest of ziet zit in een module. Klik een module aan om zijn instellingen rechts in het paneel te bewerken.

   

6. De drie tabs in het instellingenpaneel
   Wat je ook selecteert (sectie, rij, kolom of module), rechts in het paneel staan altijd drie tabs: Inhoud1 bevat de eigenlijke content (tekst, afbeelding, link, achtergrond); Ontwerp2 regelt het uiterlijk (kleuren, lettertypes, marges, padding); Geavanceerd3 bevat custom CSS, zichtbaarheid per apparaat en ID's of classes voor ontwikkelaars. Daar zit dus al je informatie en alle aanpasmogelijkheden voor het geselecteerde element.

   

7. Apparaat-weergave: Desktop / Tablet / Mobiel
   In de bovenbalk staan drie apparaat-weergaven: Desktop , Tablet en Mobiel . Klik erop om je pagina te bekijken zoals hij er op dat apparaat uitziet. Handig om te controleren dat je tekst, afbeeldingen en knoppen ook op kleinere schermen netjes vallen — kleine aanpassingen per apparaat regel je op het tabblad Ontwerp.

   

8. Een nieuwe module toevoegen — de modulekiezer
   Klik op een + icoontje op de pagina (er verschijnt er één tussen elk paar bestaande modules en onderaan de pagina). De modulekiezer opent met alle beschikbare moduletypes — Tekst, Afbeelding, Knop, Video, Galerij, Contactformulier, Pictogram, en nog veel meer. Kies een tegel en de module verschijnt op de pagina, met zijn instellingen direct rechts in het paneel.

   

9. Sla je wijzigingen op
   Klaar met aanpassen? Klik op Opslaan rechtsboven in de balk om al je wijzigingen vast te leggen.