Er is een installatie van WorPress gedaan op het domein
We gaan nu samen de inrichting verzorgen, en er zal gelijk uitleg zijn over de opbouw.

Wat is de Visual Builder?

De Divi Builder komt in twee vormen: de standaard “Back-end Builder” en de front-end “Visual Builder”. Met beide interfaces kunt u exact dezelfde typen websites bouwen met dezelfde inhoudselementen en ontwerpinstellingen. Het enige verschil is de interface. De Back-end Builder bevindt zich in het WordPress-dashboard en is toegankelijk met alle andere standaard WordPress-instellingen. Het zit in de WordPress UI en vervangt de standaard WordPress post-editor. Het is geweldig om snel wijzigingen aan te brengen terwijl u zich in het dashboard bevindt, maar het wordt ook beperkt door het dashboard en wordt weergegeven als een blokgebaseerde weergave van uw website. Deze tutorial richt zich alleen op de visuele builder.

docs afbeelding

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

using-visual-builder-2-2

De Visual Builder inschakelen

Terwijl u bent aangemeld bij uw WordPress-dashboard, kunt u naar elke pagina aan de voorkant van uw website gaan en op de knop “Visual Builder inschakelen” in de WordPress-beheerbalk klikken om de visuele builder te starten.

Als u uw pagina op de back-end bewerkt, kunt u overschakelen naar de visuele builder door te klikken op de knop “Visual Builder inschakelen” bovenaan de Divi Builder-interface van de back-end (let op, u moet eerst de Divi inschakelen Builder voordat de visuele builder-knop verschijnt).

docs afbeelding

De basisprincipes van Visual Builder

De kracht van Divi ligt in de Visual Builder, een paginabouwer met slepen en neerzetten waarmee u vrijwel elk type website kunt bouwen door inhoudselementen te combineren en rangschikken.

De bouwer gebruikt drie hoofdbouwstenen: secties, rijen en modules. Door deze gelijktijdig te gebruiken, kunt u een ontelbare reeks paginalay-outs maken. Secties zijn de grootste bouwstenen en ze bevatten groepen rijen. Rijen zitten in secties en worden gebruikt om modules in onder te brengen. Modules worden binnen 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 met Divi zijn secties. Deze worden gebruikt om grote groepen inhoud te maken en ze zijn het eerste wat u aan uw pagina toevoegt. Er zijn drie soorten secties: Normaal, Specialiteit en Volledige breedte. Reguliere secties bestaan ​​uit rijen met kolommen, terwijl secties over de volledige breedte zijn opgebouwd uit modules met volledige breedte die de volledige breedte van het scherm uitbreiden. Speciale secties zorgen voor meer geavanceerde zijbalkindelingen. Ga voor meer informatie over het gebruik van secties naar onze uitgebreide sectiegids.

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 u een kolomstructuur voor uw rij hebt gedefinieerd, kunt u modules in een gewenste kolom plaatsen. Er is geen limiet aan het aantal modules dat u in een kolom kunt plaatsen. Ga voor meer informatie over het gebruik van rijen naar onze uitgebreide rijenzelfstudie.

Modules

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

Uw eerste pagina bouwen

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

docs afbeelding

Uw eerste sectie toevoegen

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. Als u met uw muisaanwijzer over een gedeelte gaat dat al op de pagina staat, verschijnt er een blauwe (+) knop onder. Wanneer erop wordt geklikt, wordt een nieuwe sectie toegevoegd onder de sectie waarover u momenteel zweeft.

Als u een geheel nieuwe pagina start, wordt uw eerste sectie automatisch toegevoegd.

docs afbeelding

Uw eerste rij toevoegen

Nadat u uw eerste sectie hebt toegevoegd, kunt u rijen met kolommen erin toevoegen. Een sectie kan elk aantal rijen bevatten, en u kunt rijen van verschillende kolomtypen mixen en matchen om een ​​verscheidenheid aan lay-outs te maken.

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 over een huidige rij zweeft 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 ben je klaar om je eerste module toe te voegen.

docs afbeelding

Uw eerste module toevoegen

Modules kunnen binnen rijen worden toegevoegd en elke rij kan een willekeurig aantal modules bevatten. Modules zijn de inhoudselementen van uw pagina en Divi wordt geleverd met meer dan 40 verschillende elementen waarmee u kunt bouwen. U kunt basismodules gebruiken 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 je meer wilt weten over de soorten modules die Divi biedt, ga dan terug naar de hoofddocumentpagina en blader door de sectie “Modules”.

Om een ​​module toe te voegen, klikt u op de grijze (+) knop in een lege kolom of klikt u op de grijze (+) knop die bestaat wanneer u over een module op de pagina zweeft om een ​​nieuwe module eronder toe te voegen. Nadat u op de knop hebt geklikt, wordt u begroet door een lijst met modules. Kies de gewenste module en deze wordt aan uw pagina toegevoegd en het instellingenpaneel voor de module verschijnt. Met dit instellingenpaneel kunt u beginnen met het configureren van uw module.

docs afbeelding

Secties, rijen en module configureren en aanpassen

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

using-visual-builder-8-2

Hiermee wordt het instellingenpaneel voor het opgegeven element gestart. Elk instellingenpaneel is opgedeeld in drie tabbladen: Inhoud, Ontwerp en Geavanceerd. Elk tabblad is ontworpen om snel en gemakkelijk toegang te krijgen tot Divi’s grote verscheidenheid aan instellingen en deze aan te passen. Op het tabblad Inhoud kunt u natuurlijk inhoud toevoegen, zoals afbeeldingen, video, links en beheerderslabels. Op het tabblad Ontwerpen plaatsen we alle ingebouwde ontwerpinstellingen voor elk element. Afhankelijk van wat u bewerkt, kunt u met een klik een breed scala aan ontwerpinstellingen beheren; inclusief: typografie, spatiëring (opvulling / marge), knopstijlen en meer. Bekijk onze tutorial over ontwerpinstellingen voor een diepgaand overzicht van het tabblad Ontwerp. Ten slotte, als je nog meer controle wilt, kun je naar het tabblad Geavanceerd gaan, waar je aangepaste CSS kunt toepassen, de zichtbaarheid kunt aanpassen op basis van het apparaat en (afhankelijk van welk element je bewerkt) nog fijner kunt afstemmen.

Uw pagina opslaan en pagina-instellingen openen

Klik voor toegang tot de algemene pagina-instellingen op het paarse dock-pictogram onderaan uw scherm. Dit zal de instellingenbalk uitbreiden en u verschillende opties bieden. U kunt uw pagina-instellingen openen door op het tandwielpictogram te klikken. Hier kunt u dingen aanpassen zoals de achtergrondkleur van de pagina en de tekstkleur. U vindt ook de knoppen Opslaan en publiceren en responsieve voorbeeldschakelaars.

docs afbeelding

Ga snel van start met uw ontwerp met vooraf gemaakte lay-outs

Een geweldige manier om uw nieuwe pagina snel te starten, is om dingen te beginnen met een vooraf gemaakte lay-out. Divi wordt geleverd met meer dan 20 vooraf gemaakte lay-outs die verschillende veelvoorkomende paginatypen bevatten, zoals ‘Over ons’, ‘Contact’, ‘Blog’, ‘Portfolio’, enz. U kunt deze laden en de demo vervolgens vervangen inhoud voor jezelf. Je nieuwe pagina is klaar voordat je het weet! Bekijk onze uitgebreide handleiding voor vooraf gemaakte lay-outs voor meer informatie over het gebruik van vooraf gemaakte lay -outs .

docs afbeelding

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 een Divi-indeling 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. Bekijk onze Divi Library-tutorial voor een diepgaand overzicht van de Divi Library

Om een ​​item in de bibliotheek op te slaan, klikt u op het bibliotheekpictogram dat bestaat wanneer u over een element zweeft en op de pagina-instellingenbalk. Nadat een item aan de bibliotheek is toegevoegd, verschijnt het op het tabblad “Toevoegen uit bibliotheek” wanneer u nieuwe Divi-lay-outs, secties, rijen en modules toevoegt.

docs afbeelding

Ok, je hebt de basis omlaag. Nu is het tijd om dieper te graven!

Dus je hebt nu je eerste secties, rijen en modules aan je pagina toegevoegd. U hebt hun instellingen aangepast en bent begonnen met het bouwen en aanpassen van uw ontwerp. Je hebt de basis onder de knie, maar er is zoveel meer te leren. We hebben tientallen en tientallen tutorials die elk aspect van Divi behandelen. Ik moedig u aan terug te gaan naar de hoofddocumentatiepagina en deze allemaal door te lezen. Tegen de tijd dat je klaar bent, ben je een Divi-meester!