Heel eenvoudig je website beheren. Dat wil toch iedereen? Even snel een plaatje of tekst vervangen of een nieuwsbericht toevoegen. Dat moet geen technische opgave zijn, maar eenvoudig om te doen. Met het DIVI thema van Elegant Themes voor WordPress heb je precies dat wat je nodig hebt. En ook nog eens responsive: voor mobiel, tablet en dekstop.
Je kunt pagina’s en berichten aan de ‘voorkant’ van de site bewerken. Wat je ziet is wat je krijgt in deze Visual Builder. Alternatieven voor DIVI zijn bijvoorbeeld Visual Composer of Elementor. Burnio heeft voor DIVI gekozen, omdat dit na vele testen het meest gebruiksvriendelijk is voor onze opdrachtgevers. Daarnaast is zijn er wereldwijd veel gratis en betaalde uitbreidingen beschikbaar, wordt het thema regelmatig uitgebreid. Het is een thema wat technisch goed up to date blijft en qua snelheid en SEO goed presteert.
Probeer DIVI zelf in de live demo >
Documentatie / helpdesk
Er is een enorme hoeveelheid aan achtergrondinformatie beschikbaar voor DIVI: DIVI Theme Documentation >
DIVI Builder gebruiken
De Divi Builder heeft twee smaken: de standaard “Back-end Builder” en de front-end “Visual Builder”. Met beide interfaces kun 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 en is toegankelijk samen met alle andere standaard WordPress-instellingen. Het zit in de WordPress-gebruikersinterface en vervangt de standaard WordPress-berichteditor. Het is geweldig om snel wijzigingen aan te brengen terwijl je in het dashboard bent, maar het wordt ook beperkt door het dashboard en wordt weergegeven als een blokgebaseerde weergave van je website. Deze tutorial richt zich alleen op de visuele bouwer.
Met de geheel nieuwe Visual Builder kun je daarentegen 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, verschijnen de wijzigingen onmiddellijk. 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, jouw pagina bouwen en alles voor je ogen zien gebeuren.
De Divi Visual Builder inschakelen
Terwijl je bent ingelogd op jouw WordPress-dashboard, kun je naar elke pagina aan de voorkant van de website navigeren en op de knop “Visual Builder inschakelen” in de WordPress-beheerbalk bovenaan klikken om de visuele builder te starten.
Als je jouw pagina in de back-end bewerkt, kun je overschakelen naar de visual builder door op de knop “Visual Builder inschakelen” te klikken die zich onder de titel van de pagina of het bericht bevindt.
Divi Visual Builder basiskennis
De kracht van Divi ligt in de Visual Builder, een paginabuilder met slepen en neerzetten waarmee je vrijwel elk type website kunt bouwen door inhoudselementen te combineren en te ordenen.
De bouwer gebruikt drie hoofdbouwstenen: secties, rijen en modules. Door deze samen te gebruiken, kun je een ontelbare reeks paginalay-outs maken. Secties zijn de grootste bouwstenen en ze bevatten groepen met 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 dat je aan de pagina toevoegt. Er zijn drie soorten secties: Normaal, Speciaal en Volledige breedte. Normale secties bestaan uit rijen en kolommen, terwijl secties over de volledige breedte bestaan uit modules met volledige breedte die de volledige breedte van het scherm gebruiken. Speciale secties zorgen voor geavanceerdere zijbalklay-outs.
Rijen
Rijen zitten in secties en je kunt een onbeperkt aantal rijen in een sectie plaatsen. Er zijn veel verschillende kolomtypes om uit te kiezen. Nadat je een kolomstructuur voor de rij hebt gedefinieerd, kun 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 reageren allemaal op de breedte van het scherm van de bezoeker (responsive).
Bouw je eerste DIVI pagina
Je eerste sectie toevoegen
Voordat je iets aan de pagina kunt toevoegen, moet je eerst een sectie toevoegen. Secties kunnen worden toegevoegd door op de blauwe (+) knop te klikken. Wanneer je de muisaanwijzer op een sectie plaatst die al op de pagina bestaat, verschijnt er een blauwe (+) knop onder. Wanneer erop wordt geklikt, wordt er een nieuwe sectie toegevoegd onder de sectie waarover je momenteel zweeft.
Als je een geheel nieuwe pagina start, wordt de eerste sectie automatisch toegevoegd of er wordt gevraagd of je met een lege pagina wilt beginnen, een lay-out wil kiezen uit de bibliotheek of een bestaande pagina wilt gebruiken als basis.
Je eerste rij toevoegen
Nadat je de eerste sectie hebt toegevoegd, kun je beginnen met het toevoegen van rijen kolommen erin. Een sectie kan een onbeperkt aantal rijen bevatten en je kunt rijen van verschillende kolomtypen combineren om verschillende 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 met de muis over een huidige rij beweegt om een nieuwe rij eronder toe te voegen. Zodra je op de groene (+) knop hebt geklikt, wordt je begroet met een lijst met kolomtypen. Kies de gewenste kolom en dan ben je klaar om je eerste module toe te voegen.
Je eerste module toevoegen
Modules kunnen binnen rijen worden toegevoegd en elke rij kan een onbeperkt aantal modules bevatten. Modules zijn de inhoudselementen van de pagina en Divi wordt 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 schuifregelaars, portfoliogalerijen en e-commerce modules. We hebben individuele tutorials voor elke afzonderlijke Divi-module, dus als je meer wilt weten over de soorten modules die Divi biedt, ga dan de module tutorials.
Om een module toe te voegen, klik je op de grijze (+) knop die in een lege kolom staat of klik je op de grijze (+) knop die er is wanneer je over een module op de pagina beweegt om een nieuwe module eronder toe te voegen. Nadat je op de knop hebt geklikt, word je begroet door een lijst met modules. Kies de gewenste module en deze wordt aan de pagina toegevoegd en het instellingenpaneel voor de module verschijnt. Met dit instellingenpaneel kun je beginnen met het configureren van de module.
Configureren en aanpassen van secties, rijen en modules
Elke sectie, rij en module kan op verschillende manieren worden aangepast. Je kunt het instellingenpaneel van een element openen door op het tandwielpictogram te klikken dat verschijnt wanneer je met de muis over een element op de pagina beweegt.
Hierdoor wordt het instellingenpaneel voor het opgegeven element geopend. Elk instellingenpaneel is onderverdeeld in drie tabbladen: inhoud, ontwerp en geavanceerd. Elk tabblad is ontworpen om de grote verscheidenheid aan instellingen van Divi snel en gemakkelijk te openen en aan te passen.
Het tabblad Inhoud is natuurlijk waar je inhoud kunt toevoegen, zoals afbeeldingen, video, links en beheerderslabels.
Op het tabblad Ontwerpen hebben we voor elk element alle ingebouwde ontwerpinstellingen geplaatst. Afhankelijk van wat je aan het bewerken bent, kun je met een klik een groot aantal ontwerpinstellingen regelen; waaronder: typografie, spatiëring (opvulling / marge), knopstijlen en meer.
Als je tenslotte 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 meer fijnafstemming kunt doen.
De pagina opslaan en pagina-instellingen openen
Om toegang te krijgen tot de algemene pagina-instellingen, klik je op het paarse dock-pictogram onder aan uw scherm. Dit breidt de instellingenbalk uit en biedt je verschillende opties. Je kunt de pagina-instellingen openen door op het tandwielpictogram te klikken. Hier kun je zaken als de achtergrondkleur van de pagina en de tekstkleur aanpassen. Je zult ook de knoppen Opslaan en Publiceren vinden, evenals responsieve voorbeeldschakelaars.
Geef je ontwerp een vliegende start met vooraf gemaakte lay-outs
Een geweldige manier om je nieuwe pagina een vliegende start te geven, is om te beginnen met een vooraf gemaakte lay-out. Divi wordt geleverd met meer dan 20 vooraf gemaakte lay-outs die een verscheidenheid aan veelvoorkomende paginatypen dekken, zoals “Over ons”, “Contact”, “Blog”, “Portfolio”, enz. Je kunt deze laden en vervolgens de demo verwisselen inhoud voor je eigen inhoud. Je nieuwe pagina is af voordat je het weet! Bekijk voor meer informatie over het gebruik van vooraf gemaakte lay-outs onze uitgebreide, vooraf gemaakte lay-outhandleiding.
Jouw eigen lay-outs opslaan in de bibliotheek
Naast het gebruik van de vooraf gemaakte lay-outs die bij Divi worden geleverd, kun je ook je eigen creaties opslaan in de Divi-bibliotheek. Wanneer een ontwerp wordt opgeslagen als een Divi-lay-out in de Divi-bibliotheek, kan het op nieuwe pagina’s worden geladen. Hoe meer je jouw bibliotheek opbouwt met favoriete ontwerpen, hoe sneller je nieuwe websites kunt maken. Bekijk onze speciale Divi Library-tutorial.
Om een item in de bibliotheek op te slaan, klik je op het bibliotheekpictogram dat verschijnt wanneer je met de muis over een element en binnen de pagina-instellingenbalk beweegt. Zodra een item aan de bibliotheek is toegevoegd, verschijnt het op het tabblad “Toevoegen uit bibliotheek” wanneer je nieuwe Divi-indelingen, secties, rijen en modules toevoegt.
Ga naar het totale overzicht van alle tutorials (Engelstalig) of bel Burnio (0318) 74 34 26 voor hulp bij jouw DIVI website. Ook voor het volledig uitbesteden van je website bouw en website beheer!
