Aan de slag met de Visual Builder

Datum: 16 november 2021

Wat is de Visual Builder?

De Divi Builder is er in twee vormen: de standaard “Back-end Builder” en de front-end “Visual Builder”. Met beide interfaces kan je exact dezelfde soorten websites bouwen met dezelfde inhoudselementen en ontwerpinstellingen. Het enige verschil is de interface. De Back-end Builder bevindt zich in het WordPress-dashboard in een soort van blokkenstructuur, waardoor je eigenlijk niet precies kan zien hoe jouw meesterwerk eruit ziet na een toevoeging of aanpassing.

Met de geheel nieuwe Visual Builder daarentegen kunt je jouw pagina’s aan de voorkant van de website bouwen! Het is een geweldige ervaring en zorgt voor een veel sneller ontwerp. Wanneer je inhoud toevoegt of ontwerpinstellingen aanpast in de visuele bouwer, worden de wijzigingen onmiddellijk weergegeven. Je kunt op de pagina klikken en gewoon beginnen met typen. Je kunt tekst markeren en het lettertype en de stijl aanpassen. Je kunt nieuwe inhoud toevoegen, uw pagina bouwen en alles voor jouw ogen zien gebeuren.

Visual Builder inschakelen

Terwijl je bent ingelogd op jouw WordPress-dashboard, kan je naar elke pagina aan de voorkant van jouw website navigeren en op de knop “Visual Builder inschakelen” in de WordPress-beheerbalk klikken om de visuele bouwer te starten.

Als je jouw pagina aan de back-end aan het bewerken bent, kan je overschakelen naar de visuele builder door op de knop “Visual Builder inschakelen” bovenaan de back-end Divi Builder-interface te klikken (let op, je moet eerst de Divi Builder inschakelen voordat de visuele builder-knop verschijnt).

De basis van Visual Builder

De builder gebruikt drie hoofdbouwstenen: Secties, Rijen en Modules. Door deze samen te gebruiken, kan je een ontelbare reeks paginalay-outs maken. Secties zijn de grootste bouwstenen en bevatten groepen rijen. Rijen zitten in secties en worden gebruikt om modules te huisvesten. Modules worden in rijen geplaatst. Dit is de structuur van elke Divi-website.

Secties

De meest elementaire en grootste bouwstenen die worden gebruikt bij het ontwerpen van lay-outs zijn secties. Deze worden gebruikt om grote groepen inhoud te maken en ze zijn het eerste dat je aan de pagina toevoegt. Er zijn drie soorten secties: Standaard, Speciaal en Volledige breedte. Standaard secties bestaan ​​uit rijen kolommen, terwijl secties op volledige breedte bestaan ​​uit modules over de volledige breedte die de volledige breedte van het scherm uitstrekken. Speciale secties zorgen voor meer geavanceerde zijbalklay-outs.

rijen

Rijen zitten in secties en je kunt een willekeurig aantal rijen in een sectie plaatsen. Er zijn veel verschillende kolomtypen om uit te kiezen. Nadat je een kolomstructuur voor een rij hebt ingesteld, kunt je modules in een gewenste kolom plaatsen. Er is geen limiet aan het aantal modules dat je in een kolom kunt plaatsen.

Modules

Modules zijn de inhoudselementen waaruit de website bestaat. Elke module die Divi heeft, past in elke kolombreedte en ze zijn allemaal volledig responsive.

Je eerste pagina bouwen

Eerste sectie toevoegen

Voordat je iets aan je pagina kunt toevoegen, moet je eerst een sectie toevoegen. Secties kunnen worden toegevoegd door op de blauwe (+) knop te klikken. Wanneer je met de muis over een sectie beweegt die al op de pagina bestaat, verschijnt er een blauwe (+) knop onder. Wanneer erop wordt geklikt, wordt een nieuwe sectie toegevoegd onder de sectie waar je momenteel over zweeft.

Als je een geheel nieuwe pagina begint, wordt je eerste sectie automatisch toegevoegd.

Een rij toevoegen

Nadat je de eerste sectie hebt toegevoegd, kan je er rijen kolommen aan toevoegen. Een sectie kan een willekeurig aantal rijen bevatten en je kan rijen van verschillende kolomtypen mixen en matchen om een verscheidenheid aan lay-outs te creëren.

Om een rij toe te voegen, klik je op de groene (+) knop in een lege sectie, of klik je op de groene (+) knop die verschijnt wanneer je de muisaanwijzer over een huidige rij beweegt om een nieuwe rij eronder toe te voegen. Nadat je op de groene (+) knop hebt geklikt, wordt je begroet met een lijst met kolomtypen. Kies je gewenste kolom en dan ben je klaar om je eerste module toe te voegen.

Een module toevoegen

Modules kunnen binnen rijen worden toegevoegd en elke rij kan een willekeurig aantal modules bevatten. Modules zijn de inhoudselementen van jouw pagina en geleverd met meer dan 40 verschillende elementen waarmee je kunt bouwen. je kunt basismodules gebruiken zoals Tekst, Afbeeldingen en Knoppen, of meer geavanceerde modules zoals Sliders, Portfolio Galleries en eCommerce Shops.

Om een ​​module toe te voegen, klikt je op de grijze (+) knop die zich in een lege kolom bevindt of klikt je op de grijze (+) knop die bestaat wanneer je de muisaanwijzer over een module op de pagina beweegt om een ​​nieuwe module eronder toe te voegen. Nadat je op de knop hebt geklikt, zie je een lijst met modules. Kies de gewenste module en deze wordt aan je pagina toegevoegd en het instellingenpaneel voor de module verschijnt. Met behulp van dit instellingenpaneel kan beginnen met het configureren van de module.

Secties, rijen en modules configureren en aanpassen

Elke sectie, rij en module kan op verschillende manieren worden aangepast. Je kan het instellingenpaneel van een element openen door op het tandwielpictogram te klikken dat aanwezig is wanneer je de muisaanwijzer op een element op de pagina plaatst.

Hiermee wordt het instellingenpaneel voor het opgegeven element gestart. Elk instellingenpaneel is onderverdeeld in drie tabbladen: Inhoud, Ontwerp en Geavanceerd. Elk tabblad is ontworpen om het openen en aanpassen van de grote verscheidenheid aan instellingen snel en eenvoudig te maken.

Pagina opslaan en instellingen

Om toegang te krijgen tot de algemene pagina-instellingen, klik je op het paarse dockpictogram onder aan het scherm. Hierdoor wordt de instellingenbalk uitgevouwen en krijg je verschillende opties. Je kunt de pagina-instellingen openen door op het tandwielpictogram te klikken. Hier kan je zaken als pagina-achtergrondkleur en tekstkleur aanpassen. Je vind er ook de knoppen Opslaan en Publiceren, evenals schakelaars voor responsieve voorvertoningen (smartphone, tabelt, desktop view).

Vliegende start met voor-ontworpen layouts

Een geweldige manier om jouw nieuwe pagina een vliegende start te geven, is door te beginnen met een vooraf gemaakte lay-out. Je kan deze laden en vervolgens de demo-content verwisselen met inhoud van jezelf. Je nieuwe pagina is klaar voordat je het weet!