Uitleg Visual Builder

Om te begrijpen hoe je met je website werkt, is het super belangrijk om te begrijpen hoe alles is opgebouwd. Elke pagina heeft namelijk dezelfde structuur en op het moment dat je dat begrijpt, zal het veel duidelijker worden hoe je aanpassingen kunt doen in je website.

De pagina's kun je aanpassen door middel van de 'Visuele Opbouw functie'.    Op het moment dat je bent ingelogd en je zit aan de voorkant van een pagina kun je deze inschakelen door bovenin, in de zwarte balk, te klikken op 'Visual Builder inschakelen'. 

Zodra je deze ingeschakeld hebt, zie je een aantal opties verschijnen op je pagina.

De pagina's zijn opgebouwd uit verschillende secties. In de secties zitten rijen, die uit kolommen bestaan en in deze kolommen zitten modules. 

Met de modules ga je daadwerkelijk je pagina's vullen. Dit zijn dus onder andere tekstmodules, afbeeldingen, etc. Secties, rijen en modules hebben een aantal dezelfde opties en mogelijkheden. 

Elke pagina binnen je website is opgebouwd uit verschillende secties. Binnen deze secties staan rijen met verschillende kolomindelingen en in deze kolommen zitten modules. De modules gebruik je om je website te vullen met teksten, afbeeldingen en bijvoorbeeld opsommingen.

Secties:
Secties kun je herkennen aan de blauwe omlijning en het blauwe menu wat linksboven in de hoek staat.

Rijen:
Rijen staan in de secties en kun je herkennen aan de groene omlijning en het groene menu wat in de linkerbovenhoek staat. Rijen zijn opgebouwd uit kolommen. Het voorbeeld hieronder is een rij met 2 kolommen.    

        De rijen kun je indelen in:    

• 1 kolom
• 2 kolommen
• 3 kolommen
• 4 kolommen
• En variaties hierop

  
  

  

  
  

  Modules:
  In elke kolom plaats je modules om je content toe te voegen. Modules kun je herkennen aan het grijze menu wat verschijnt op het moment dat je met je muis ergens overheen gaat. In het voorbeeld hieronder zie je een tekstmodule.
  
   

Opties:
Zoals je ziet hebben de secties, rijen en modules hetzelfde soort menutje. Omdat deze voor alle 3 vrijwel hetzelfde zijn, leg ik alleen even het menu uit voor de sectie. De principes zijn voor de rijen en modules hetzelfde. Het enige verschil is dat er een extra icoon is bij de rijen, waar ik zo meer over ga vertellen. 

Het verplaats icoon:
Het eerste icoon dat je ziet is het verplaats icoon. Hiermee kun je de secties, rijen en modules verplaatsen. Klik simpelweg op het verplaats icoon en sleep deze naar de gewenste plek. 

Instellingen icoon:
Naast het verplaats icoon zit het instellingen icoon (tandwiel icoon). Via dit icoon kom je bij de sectie-instellingen, de rij-instellingen of de module instellingen. 

Op het moment dat je daar op klikt dan worden de instellingen geopend. Hier kun je verschillende dingen instellen. Ook deze zijn altijd op dezelfde manier opgebouwd. Je hebt het kopje "Content" en je hebt het kopje "Ontwerp". In beide 'tabbladen' kun je dingen instellen of inzetten. Hier ga ik in dit artikel niet te diep op in, maar dit zal in verschillende artikelen voorbij komen.
    

Dupliceer icoon:
Naast het instellingen icoon zit het dupliceer icoon. Hiermee kun je gehele secties, rijen of modules dupliceren. Hij kopieert dan de sectie, de rij of module en plaatst deze er direct onder.    

Opslaan in bibliotheek icoon:
Hiermee kun je de gehele sectie, rij of module toevoegen aan de bibliotheek.    

Op het moment dat je dit doet, kun je deze bijvoorbeeld ergens anders op de pagina of op een totaal andere pagina toevoegen. Zo hoef je bijvoorbeeld niet elke keer opnieuw de stijl aan te passen, of iets opnieuw op te bouwen.    

Prullenbak icoon:
Met het prullenbak icoon kun je een gehele sectie, rij of een losse module verwijderen. Dit is het meest rechter icoon.    

Rij iconen:
Deze zelfde iconen zitten in het menu van de rij. Je kunt dus een rij verplaatsen, de instellingen van de rij openen, de rij dupliceren, de rij opslaan in de bibliotheek en de rij verwijderen.    

Buiten de bovenstaande iconen heeft de rij nog 1 extra icoon, namelijk; kolomstructuur wijzigen. Hiermee kun je de kolomindeling binnen de rij aanpassen. Zo kun je bijvoorbeeld van 1 kolom de rij aanpassen naar 2 kolommen.    

Op het moment dat je daar op klikt, opent er een menu waarmee je de lay-out van de rij kunt aanpassen. Je kunt dan voor een andere kolomindeling kiezen. Met 1 klik op de knop kun je de hele indeling aanpassen. De content die je er al in hebt staan, zal dan verplaatsen. 

Module iconen:
Dezelfde iconen vind je terug in het grijze menutje van de module. Hier kun je dus ook de module verplaatsen, de instellingen openen, de module dupliceren, de module opslaan en deze verwijderen.    

Secties, rijen of modules toevoegen:
Je kunt dingen toevoegen aan je website door op het plusje te klikken. Er zijn 3 verschillende plusjes; een grijs plusje, een groen plusje en een blauw plusje.    

Met het grijze plusje kun je modules toevoegen, met de groene voeg je een rij toe en met de blauwe voeg je een sectie toe. Op het moment dat je een sectie toevoegt, dan wordt er direct gevraagd wat voor kolomindeling je wilt. Zodra je deze hebt gekozen, wordt er gevraagd wat voor module je wilt toevoegen. Er zijn ontzettend veel verschillende modules waar je uit kunt kiezen.  

Als je een module toegevoegd hebt, dan worden automatisch de module-instellingen geopend.    

Dit zijn de belangrijkste dingen die je moet weten over de structuur van de visuele opbouwfunctie. Op het moment dat je de structuur van de website en de visuele opbouwfunctie begrijpt, zal het werken in je website makkelijker zijn.