Wat is Divi’s visuele bouwer?

De Divi Builder is er in twee vormen: De standaard “Back-end Builder” en de front-end “Visual Builder”. Beide interfaces stellen u in staat om exact dezelfde soorten websites te bouwen met dezelfde inhoudelijke elementen en instellingen. Het enige verschil is de interface. De Back-end Builder is in het WordPress Dashboard te vinden en kan samen met alle andere standaard WordPress-instellingen worden benaderd. Deze zit in de WordPress UI en vervangt de standaard WordPress post editor. Het is geweldig om snelle wijzigingen door te voeren, terwijl u zich in het dashboard bevindt, maar het is ook beperkt door het dashboard en wordt weergegeven als een blok-gebaseerde representatie van uw website. Onze ervsring is dat eigenlijk niemand hier mee werkt. Deze blog zal alleen gericht zijn op de visuele bouwer.

Divi stelt u in staat om uw pagina’s te bouwen aan de voorkant van uw website! Het is een geweldige ervaring en zorgt voor een veel sneller ontwerp. Wanneer u inhoud toevoegt of ontwerpinstellingen aanpast binnen de visuele bouwer, verschijnen uw wijzigingen onmiddellijk in beeld. U kunt op de pagina klikken en gewoon beginnen typen. U kunt tekst markeren en het lettertype en de stijl ervan aanpassen. U kunt nieuwe inhoud toevoegen, uw pagina bouwen en alles voor uw ogen zien gebeuren.

De visuele bouwer inschakelen

Terwijl u ingelogd bent op uw WordPress dashboard, kunt u naar elke pagina aan de voorkant van uw website navigeren en op de “Enable Visual Builder” knop in de WordPress admin bar klikken om de visual builder te starten.

Als u uw pagina op de back-end aan het bewerken bent, kunt u overschakelen naar de visuele bouwer door te klikken op de “Enable Visual Builder” knop die boven aan de Divi Builder interface zit (let op, u moet eerst de Divi Builder inschakelen voordat de visuele bouwer knop zal verschijnen).

De basisprincipes van de visuele bouwer

Divi’s kracht ligt in de Visual Builder, een drag en drop pagina bouwer die u in staat stelt om vrijwel elk type website te bouwen door het combineren en rangschikken van modules en elementen.

Divi gebruikt drie hoofdbouwstenen: Secties, rijen en modules. Door deze te combineren kunt u een ontelbaar aantal paginalay-outs maken. Secties zijn de grootste bouwstenen en bevatten groepen rijen. Rijen zitten binnenin de secties en worden gebruikt om modules te huisvesten. Modules worden binnen de rijen geplaatst. Dit is de structuur van elke Divi website.

Secties

De meest elementaire en grootste bouwstenen die gebruikt worden bij het ontwerpen van lay-outs met Divi zijn secties. Deze worden gebruikt om grote groepen inhoud te creëren en zijn het eerste wat je toevoegt aan je pagina. Er zijn drie soorten secties: Gewoon, Specialiteit en Volledige breedte. Reguliere secties bestaan uit rijen kolommen, terwijl volledige breedte secties bestaan uit modules over de volle breedte die de volledige breedte van het scherm vergroten. Gespecialiseerde secties maken een meer geavanceerde zijbalkindeling mogelijk. Voor meer informatie over het gebruik van secties,kijk hier:

Rijen

Rijen zitten binnen de secties en u kunt een willekeurig aantal rijen binnen een sectie plaatsen. Er zijn veel verschillende kolomtypes om uit te kiezen. Zodra u een kolomstructuur voor uw rij heeft gedefinieerd, kunt u modules in een gewenste kolom plaatsen. Er is geen limiet aan het aantal modules dat u in een kolom kunt plaatsen. Voor meer informatie over het gebruik van rijen, kijk hier:

Modules

Modules zijn de inhoudelijke elementen van uw website. Elke module die Divi heeft kan in elke kolombreedte passen en ze zijn allemaal volledig responsive.

Bouw uw eerste pagina

De drie basisbouwstenen (secties, rijen en modules) worden gebruikt om uw pagina op te bouwen.

Het toevoegen van uw eerste sectie

Voordat u iets aan uw pagina kunt toevoegen, moet u eerst een sectie toevoegen. Secties kunnen worden toegevoegd door op de blauwe (+) knop te klikken. Wanneer u met de muis over een sectie zweeft die al op de pagina staat, verschijnt er een blauwe (+) knop onder de pagina. Wanneer u erop klikt, zal een nieuwe sectie worden toegevoegd onder de sectie waar u momenteel met uw muis overheen hangt.
Als u een gloednieuwe pagina start, dan wordt uw eerste sectie automatisch toegevoegd.

Uw eerste rij toevoegen

Nadat u uw eerste sectie hebt toegevoegd, kunt u beginnen met het toevoegen van rijen kolommen binnenin de sectie. Een sectie kan een willekeurig aantal rijen bevatten, en u kunt rijen van verschillende kolomtypes mixen en matchen om een verscheidenheid aan lay-outs te creëren.

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

Uw eerste module toevoegen

Modules kunnen binnen de rijen worden toegevoegd en elke rij kan een willekeurig aantal modules bevatten. Modules zijn de inhoudelijke elementen van uw pagina, en Divi wordt geleverd met meer dan 40 verschillende elementen die u kunt gebruiken om mee te bouwen. U kunt gebruik maken van basismodules zoals tekst, afbeeldingen en knoppen, of meer geavanceerde modules zoals Sliders, Portfolio Galleries en eCommerce Shops. We hebben individuele tutorials voor elke Divi-module, dus als u meer wilt weten over de soorten modules die Divi biedt, ga dan zeker terug naar de hoofddocumentpagina en blader door de “Modules” sectie.

Om een module toe te voegen, klikt u op de grijze (+) knop die zich in een lege kolom bevindt of klikt u op de grijze (+) knop die bestaat wanneer u met de muis over een module op de pagina beweegt om een nieuwe module toe te voegen. Zodra u op de knop hebt geklikt, wordt u begroet door een lijst met modules. Kies de gewenste module en deze zal worden toegevoegd aan uw pagina en het instellingenpaneel voor de module zal verschijnen. Met behulp van dit instellingenpaneel kunt u beginnen met het configureren van uw module.

Secties, rijen en module configureren en aanpassen van secties, rijen en modules

Elke sectie, rij en module kan op verschillende manieren worden aangepast. U kunt toegang krijgen tot het instellingenpaneel van een element door te klikken op het tandwielpictogram dat bestaat wanneer u met uw muis over een element op de pagina zweeft.

Dit zal het instellingenpaneel voor het gespecificeerde element openen. Elk instellingspaneel is opgedeeld in drie tabbladen: Inhoud, ontwerp en geavanceerd. Elk tabblad is ontworpen om de toegang tot en aanpassing van Divi’s grote verscheidenheid aan instellingen snel en eenvoudig te maken. Op het tabblad Inhoud kunt u natuurlijk inhoud toevoegen, zoals afbeeldingen, video, links en adminlabels. In het tabblad Ontwerp hebben we alle ingebouwde ontwerpinstellingen voor elk element geplaatst. Afhankelijk van wat u aan het bewerken bent, kunt u met één muisklik een grote verscheidenheid aan ontwerpinstellingen beheren, waaronder: typografie, afstand (vulling/marge), knopstijlen en meer. Voor een diepgaande blik op het tabblad Design kunt u de tutorial met ontwerpinstellingen bekijken. Tot slot, als u nog meer controle wilt, kunt u naar het tabblad Geavanceerd gaan, waar u aangepaste CSS kunt toepassen, de zichtbaarheid kunt aanpassen op basis van het apparaat en (afhankelijk van het element dat u bewerkt) nog meer fijnafstemming kunt uitvoeren.

Uw pagina opslaan en de pagina-instellingen openen

Om toegang te krijgen tot de algemene pagina-instellingen, klikt u op het paarse dokpictogram onderaan uw scherm. Hierdoor wordt de instellingenbalk uitgebreid en krijgt u verschillende opties. U kunt uw pagina-instellingen openen door op het tandwielpictogram te klikken. Hier kunt u zaken aanpassen zoals de achtergrondkleur van de pagina en de tekstkleur. U vindt ook de knoppen Opslaan en Publiceren en de snelkoppelingen voor de preview.

Een snelle start van uw ontwerp met vooraf gemaakte lay-outs

Een geweldige manier om je nieuwe pagina te starten is om te beginnen met een vooraf gemaakte lay-out. Divi wordt geleverd met meer dan 20 voorgemaakte lay-outs die een verscheidenheid aan veel voorkomende paginatypen dekken, zoals “Over ons”, “Contact”, “Blog”, “Portfolio”, enz. U kunt deze laden en vervolgens de demo-inhoud voor uw eigen inhoud omwisselen. Uw nieuwe pagina zal klaar zijn voor u het weet! Om meer te weten te komen over het gebruik van vooraf gemaakte lay-outs, bekijk dan zeker de uitgebreide, vooraf gemaakte lay-outs tutorial.

Uw eigen lay-outs opslaan in de bibliotheek

Naast het gebruik van de vooraf gemaakte lay-outs die bij Divi worden geleverd, kunt u ook uw eigen creaties opslaan in de Divi Library. Wanneer een ontwerp wordt opgeslagen als Divi Lay-out in de Divi-bibliotheek, kan het op nieuwe pagina’s worden geladen. Hoe meer u uw bibliotheek opbouwt met uw favoriete ontwerpen, hoe sneller u nieuwe websites kunt maken. Voor een diepgaande blik op de Divi Bibliotheek, kijk dan zeker eens in de speciale Divi Library tutorial:

Om een item in de bibliotheek op te slaan, klikt u op het bibliotheekpictogram dat bestaat wanneer u met de muis over een element beweegt en binnen de balk met pagina-instellingen. Zodra een item aan de bibliotheek is toegevoegd, verschijnt het in het tabblad “Add From Library” bij het toevoegen van nieuwe Divi lay-outs, secties, rijen en modules.

Oké, dit is de basis. Nu is het tijd om dieper te graven!

Dus inmiddels heb je je eerste secties, rijen en modules aan je pagina toegevoegd. Je hebt hun instellingen aangepast en bent begonnen met het bouwen en aanpassen van je ontwerp. Je hebt de basiskennis onder de knie, maar er is nog veel meer te leren. We hebben tientallen en tientallen tutorials die elk aspect van Divi behandelen. Ik moedig je aan om terug te gaan naar de hoofddocumentatiepagina en ze allemaal door te lezen. Tegen de tijd dat je klaar bent, zul je een Divi meester zijn!