Handleiding voor het Divi thema, oude versie (3.26 tot 4.0)

Uitleg voor de belangrijkste functies

In deze handleiding wordt gebruik gemaakt van de nieuwste versie van de Divi builder, vanaf versie 4.0. Mocht je nog gebruik maken van een oudere Divi builder, dan kun je doormiddel van de link ‘Welkom bij de Divi Builder’  (onderaan je Divi-blok waarin je aan het werk bent) de nieuwe versie van de builder laden.

 

Inhoudsopgave:

Is jouw vraag nog niet beantwoord of heb je Divi support nodig? Kijk dan onderaan de pagina.

Pagina aanmaken en
layout laden

Om een nieuwe pagina aan te maken ga je met je muis over Pagina’s en klik daarna op ‘Nieuwe pagina’.

Hierna opent een venster met bovenin een tekstbalk ‘Titel hier invoeren’. Voer hier de gewenste titel van de pagina in. Klik daarna op de knop ‘De Divi opbouwfunctie gebruiken’. De opbouwfunctie zorgt ervoor dat de pagina in blokken ingedeeld kan worden.

Klik hierna op de knop ‘Clone bestaande pagina’ en kies daarna een aangemaakte pagina. Het voordeel hiervan is dat de layout al vaststaat en alleen de elementen zoals tekst en afbeeldingen aangepast hoeft te worden.

Tekst bewerken

Let op: Tekstbewerkingen hebben consequenties voor de SEO.
Indien je een module wilt aanpassen, om bijvoorbeeld de tekst te veranderen, klik je op het tadwielicoontje van die module.

Er opent dan een venster waarin je de content kan aanpassen.
Bovenin het venster kan de tekst aangepast worden bij het veld ‘Tekst’.

Tekst grootte aanpassen
Als je in het bewerk venster zit kan in het tabje ‘Ontwerp’ bij ‘Tekst Tekst Grootte’ gekozen worden hoeveel pixels groot de tekst moet zijn. Standaard wordt dit alleen voor de platte tekst gedaan. Bovenin kan naast tekst ook nog gekozen worden voor o.a. linkjes en lijsten.

Scroll je een stukje naar onderen dan naar ‘Heading text’ is het ook mogelijk om lettergrootte van de verschillende kopteksten aan te passen.

Verschil enter en shift+enter
Enter wordt gebruikt om een witregel te plaatsen in een tekst. Als er geen witregel geplaatst hoeft te worden maar de tekst moet toch op een nieuwe regel beginnen kan er shift+enter gebruikt worden.

Interlinie aanpassen
Interlinie is de afstand tussen regels tekst. Deze zijn in divi aan te passen door bij het bewerken van de tekst in het tabblad ‘Ontwerp’ de slider bij ‘Tekst lijnhoogte’ te verslepen naar de gewenste positie (hoe verder naar links hoe minder afstand en hoe verder naar rechts hoe meer afstand).

Linkjes maken

Een linkje maken in de tekst doe je door het stukje tekst te selecteren en te klikken op het ‘link invoegen; icoontje: Vervolgens verschijnt er een venstertje waar je een link kan toevoegen of de pagina kan selecteren waar de link naar toe moet gaan (tandwieltje).

Als je de link op hebt geslagen zie je ook dat de link in de tekst blauw is geworden.

Berichten aanmaken

Indien je wil gaan werken met nieuwsberichten kun je nieuwsberichten aanmaken in het menu onder ‘berichten’.
Montix kan eventueel een layout voor een nieuwsbericht opzetten en die voor je in de bibliotheek zetten. Zo kan je makkelijk nieuwsberichten aanmaken. Neem hiervoor contact op via het onderstaande formulier

Als je het nieuwsbericht klaar hebt, is het van belang dat je rechts op de pagina aangeeft in welke categorie en tag het bericht hoort zodat deze op de juiste manier ingedeeld wordt.

Uitgelichte afbeelding instellen
In de rechterkolom vind je de optie ‘Uitgelichte afbeelding’. Hier kan een afbeelding geupload worden en zal dat getoond worden op het overzicht van berichten.

Samenvatting invullen
De samenvatting wordt gebruik als korte tekst om op de overzichtspagina’s van de berichten te tonen. Het is de bedoeling dat hier een korte tekst ingevuld wordt waardoor een bezoeker geprikkeld wordt om het bericht te lezen.

Bericht als concept opslaan
Om een bericht als concept op te slaan klik je niet op de blauwe knop ‘Publiceren’ maar op de knop ‘Concept opslaan’. Het bericht is dan niet zichtbaar voor bezoekers van de website maar je kunt er wel gewoon aan werken. Een concept is te bekijken door de knop ‘Voorbeeld’ te klikken.

Berichten in de toekomst publiceren
WordPress biedt de mogelijkheid om berichten op een latere datum te publiceren. Zo is het dus mogelijk meerdere berichten te schrijven zonder dat deze direct op de website getoond worden. Dit kan gedaan worden door rechts in het blok ‘Publiceren’ naast ‘Onmiddelijk publiceren’ op bewerken te klikken. Hierna kan er een datum en tijd aangegeven worden.

Berichten instellingen Divi aanpassen
Om berichten in Divi over de volledige breedte te tonen moeten er een 2tal aanpassingen gedaan worden.
Deze instellingen zijn bovenaan bij ‘Pagina-instellingen Divi’ aan te passen.

– Pagina layout: Volledige breedte
– Titel bericht: Verbergen

VFB Pro: formulieren integreren

Bij het aanmaken van een tekstblok in DIvi kan door middel van de knop ‘VFB Pro’ boven het tekstveld gekozen worden welk formulier ingevoegd moet worden. Na het klikken op deze knop komt een pop-up met de vraag welk formulier je in zou willen voegen. Er komt dan een code welke lijkt op dit ‘vfb id=xx’ in de tekst te staan.

Tijdelijk verbergen van modules, rijen en secties

Door op de drie streepjes aan de linkerkant van een module, rij of sectie te klikken komt er een pop-up. Klik hier op ‘Geavanceerd’ en scroll naar beneden tot ‘Zichtbaarheid’. Hier staan 3 aanvink vakjes voor telefoon, tablet en desktop. Vink alle 3 deze vakjes aan om de module,rij of sectie in zijn geheel voor de bezoeker te verbergen.


Door te spelen met deze instellingen is het ook mogelijk om separate versies te maken voor mobiel, tablet en desktop.

Werken met kolommen

De Divi builder werkt met kolommen. Zo kun je elke sectie en rij indelen in verschillende layouts. Door op het blauwe rondje met + teken te klikken wordt er een nieuwe sectie toegevoegd. Klik je op het groene rondje met een + teken wordt er een nieuwe rij toegevoegd. Na het klikken op een van deze knoppen komt er een popup tevoorschijn waar de verschillende indelingen gekozen kunnen worden. Op dit moment is er keuze uit 20 verschillende indelingen. Per kolom kunnen er weer een aantal modules ingevoegd worden om de pagina naar wens in te delen.

Speciale sectie
Met een ‘speciale sectie’ kun je een layout maken met een doorlopende zijbalk. In het keuze overzicht wordt de doorlopende balk aangegeven met een oranje kleur.  In de kolom ernaast is het dan mogelijk verschillende rijen met verschillende kolom layouts te maken (volle breedte, 2 koloms of 3 koloms). De zijbalk zal ongeacht de hoeveelheid kolommen door blijven lopen zonder onderbrekingen.

De speciale sectie is in te voegen door op het blauwe rondje te klikken en dan te kiezen voor ‘specialiteit’.

Globale blokken

Globale blokken binnen Divi zijn blokken met een groene kleur. Dit kunnen gehele secties en rijen zijn maar ook losse modules.

Globaal wil zeggen dat je deze blokken op verschillende pagina’s kunt plaatsen en door deze op een pagina te wijzigen worden dit ook doorgevoerd op alle andere pagina’s (en berichten) waar het betreffende blok op staat. Dit is erg handig voor vaak terugkomende elementen.

Aanmaken van globale blokken 

Het aanmaken van een globaal blok een sectie, rij of module op te slaan in de bibliotheek door middel van de knop ‘opslaan in bibliotheek’.

Vul een herkenbare naam in en zet een vinkje bij ‘Van dit een globaal item maken’. Klik daarna op de knop ‘Opslaan in bibliotheek’ om het blok op te slaan. Hierna wordt het popup venster gesloten en het betreffende blok krijgt een groene kleur zodat te zien is dat het gaat om een globaal blok.

Toevoegen van een globaal blok

Bij het toevoegen van een sectie, rij of module kan gekozen worden voor ‘Toevoegen vanuit bibliotheek’. Hier kan het globale blok geselecteerd worden zodat deze toegevoegd wordt aan de pagina.


Video plaatsen

Een video van youtube of een zelf gemaakte video plaatsen kan binnen Divi met de ‘Video’ module. Deze module is toe te voegen door op het grijze rondje  te klikken. Kies hierna voor ‘Video’.

Hierna opent een popup. Hier kan bij ‘Video MP4-bestand of YouTube-URL’ de url van een youtube video geplaatst worden. Het is ook mogelijk zelf een MP4 bestand te uploaden door de knop grijze knop.

Let op: Youtube urls moeten beginnen met https://www.youtube.com/watch?v=

Bij het onderdeel ‘Overlay afbeeldins-URL’ kan een afbeelding geselecteerd worden welke als eerste getoond wordt voordat de bezoeker op afspelen klikt.

Nuttige uitbreidingen en aanpassingen die Montix kan toevoegen

Montix Sitemap

Één van de nuttige aanpassingen die Montix kan toevoegen is het tonen van een sitemap op je website. Deze divi module is gemaakt door Montix en zorgt ervoor dat het mogelijk is via divi een overzicht van alle pagina, berichten, categorieën en tags te tonen zodat een bezoeker in één overzicht alle content van de website kan zien. In deze module is het ook mogelijk om aan te geven of de berichten, categorieën en/of tags wel of juist niet getoond moeten worden.

Meta gegevens van het bericht tonen binnen het Divi thema.

Heb je gekozen voor WordPress met het Divi thema? Dan zou je tegen de volgende situatie kunnen aanlopen: bij je berichten wil je de “extra gegevens” ofwel de meta-gegevens laten zien. Divi is standaard meer uitgerust voor een “cleane” weergave en laat deze “franje” dan ook standaard achterwege.

De berichten in de kennisbank van Montix bevatten een zijbalk aan de rechterkant van het bericht. Deze zijbalk toont de metadata (datum, auteur, categorieën en tags) van het bericht. Aangezien deze website gebruik maakt van het Divi thema en deze dit niet ondersteund, is hiervoor een eigen plugin ontwikkeld. Na installatie van de plugin is deze module op de zelfde manier te plaatsen als bijvoorbeeld een tekstmodule, knop, blog of een herhalend blok.

Na het plaatsen kunnen er verschillende opties ingesteld worden zoals het wel of niet tonen van de diverse meta gegevens, zoals: datum, auteur, categoriëen of tags.

Hiermee lijk je “way back in time”, maar ook juist weer helemaal bij de tijd: randgegevens maken een blog prettiger leesbaar. Het wordt vaak uitgeschakeld omdat het een overdaad aan informatie lijkt, maar in de praktijk blijkt juist dat hiervan veel gebruik wordt gemaakt.

Uitbreiding VFB Pro met Mollie betalingen

Montix heeft het mogelijk gemaakt om via het VFB Pro formulieren systeem een betaling via mollie te doen. Zo is het bijvoorbeeld mogelijk een aantal uren support aan te vragen en deze direct te betalen via mollie. Na het invullen van het formulier wordt de bezoeker naar een betaallink van mollie gestuurd waar deze direct via o.a. iDeal de betaling kan afronden.

Witruimte verminderen

Vaak wordt dit veroorzaakt door een grote marge of buffer op de module, kolom, rij of sectie. Dit is aan te passen door een module, kolom rij of sectie te bewerken en in het tabblad ‘Onderwerp’ naar het kopje ‘Afstand’ gaan. Hier kan de marge en buffer aan de bovenkant, onderkant, links en rechts aangepast worden. Er moet een cijfer ingevuld worden. Dit cijfer staat voor het aantal pixels, de tekst px hoeft niet ingevoerd te worden, dit zal het systeem zelf doen.

Bij marge betekent een leeg veld 0 pixels afstand. Bij buffer betekent een leeg veld 15 pixels afstand.

In het voorbeeld een marge van 192 pixels (px) met daaronder een voorbeeld van de witruimte. In het voorbeeld kan 192px dus weggehaald worden om de witruimte met 192 pixels te verminderen.

Pagina’s, secties, rijen en modules opslaan, exporteren en importeren

Divi biedt de mogelijkheid om gehele pagina’s of afzonderlijke secties / rijen en modules op te slaan in de bibliotheek en daarna te exporteren zodat deze in een andere Divi site te importeren is.

Layout opslaan & inladen

Een layout opslaan of inladen kan erg handig zijn. Soms wil je dat alle pagina’s de zelfde layout hebben. Hiervoor is het natuurlijk handig om een layout te kunnen opslaan en in te laden in een nieuwe pagina. Zo kun je in de zelfde layout werken en de blokken verwijderen die niet nodig zijn.

Layout opslaan in bibliotheek

Opslaan in de bibliotheek kan door het ronde icoontje met een pijltje naar beneden aan te klikken.


Hierna moet een herkenbare naam opgegeven worden en op de knop ‘Opslaan in bibliotheek’ geklikt worden.

De opgeslagen items zijn te bekijken door links op ‘Divi’ > ‘Divi Bibliotheek’ te klikken. Hierna toont een overzicht van de items in de bibliotheek.

Layout opladen vanuit bibliotheek

Voor het inladen van een layout klik je op het plusje bovenaan (opladen van uit bibliotheek) Hierna opent er een scherm en klik je op het tweede tabje bovenaan. Hier staan al je opgeslagen layouts.

Er is ook nog een optie om alles te vervangen op de pagina met een nieuwe layout, dan vink je in het zelfde venster bij alle layouts het blokje “Replace existing content” aan.

Importeren en exporteren layout

Exporteren van een layout

Het exporteren van een layout kan erg handig zijn. Je zou dezelfde layout die je hebt gemaakt in een andere website kunnen gebruiken die het ‘Divi’ thema gebruikt.

  • Voor het exporteren van een layout ga je eerst naar de “Divi bibliotheek”. Selecteer alle items die geëxporteerd moeten worden.
  • Klik daarna op de knop ‘Import & Export’, deze staat boven aan.
  • Hierna opent een popup waar de naam van het exportbestand opgegeven kan worden.
  • Nadat je een naam hebt gegeven vergeet niet om een vinkje bij ‘Only export selected items’ te plaatsen anders worden alle (ook de niet geselecteerde items) geëxporteerd. Klik hierna op de blauwe knop onderaan.
  • Het bestand zal nu gedownload worden.

Importeren van een layout

Voor het importeren van een layout kan het alleen gedaan worden met een “.json” bestand. Dit zijn de export bestanden van Divi. Dit zijn bestanden die je eerder hebt gedownload uit de divi bibliotheek. De geïmporteerde bestanden zullen daarna in de bibliotheek staan en zou het ingeladen kunnen worden in de pagina’s.

  • Voor het importeren ga je naar de “Divi bibliotheek” , hier klik je de knop boven aan “Import & Export”.
  • Hierna opent er een pop-up, bovenaan de pop-up staan er twee tabjes, export en import, voor het importeren klik je op het tabje import.
  • Hierna klik je op “Choose file”, hierna zal er een venster openen met al je bestanden. Zoek naar een “.json” bestand, dit zijn divi export bestanden die je kunt importeren.
  • Als laatste klik je op “Import Divi builder layouts”.

SEO d.m.v. Yoast

Bij het hoofdstuk ‘Tekst bewerken’ staat een waarschuwing dat het aanpassen van teksten consequenties kan hebben op je SEO.
Door middel van de SEO plugin ‘Yoast’ kun je hierop inspelen. Op elke pagina / bericht staat de ‘Yoast SEO’ box. Deze is te vinden boven of onder de Divi Builder.

Yoast SEO laat aan de hand van 2 tabjes (SEO en leesbaarheid) zien hoe de pagina SEOtechnisch scoort. Beide tabjes bevatten een uitklap over SEO-analyse waar beschreven wordt welke problemen en verbeteringen er zijn. Op basis hiervan kan de tekst aangepast worden zodat de pagina op gebied van SEO beter gaat scoren.

Maak je regelmatig gebruik van A/B test-tools zoals VWO(.com)?

WooCommerce met A/B testen ingebouwd t.b.v. usability optimization levert je vanaf de basis de optimale mogelijkheden om je
pagina’s tot in detail aan te passen en te testen. Heb je het optimale resultaat behaald? Dan is je pagina dus ook meteen klaar en kun je de optimale variant overal gaan toepassen!

A/B testen is de manier om varianten te testen en om te zien hoe jouw gebruikers reageren op bijvoorbeeld verschillende soorten tekst, kleuren of beeldmateriaal.
Heb je belangrijke pagina’s waarvan je de conversie wilt optimaliseren dan zet je veelal bijvoorbeeld VWO in. Hiermee kun je veel variabelen aanpassen en diverse verschillende lay-outs uitproberen. Je zult hiervoor echter in deze externe tool aan de slag moeten.
Hoe handig zou het zijn als A/B testen direct in je website met behulp van je thema dat je voor WordPress of WooCommerce gebruikt kunt uitvoeren? Je hebt dan immers alles al direct op de plek en hebt eventueel direct alles klaar als je het gewenste resultaat hebt behaald!

  • Direct in je site werken
  • Na akkoord meteen gereed
  • Geen externe tool nodig

Frontend editen met WordPress en WooCommerce:

Kies het juiste thema voor jouw website en je kunt ook van het gemak van frontend editen genieten!

  • Snel en overzichtelijk bewerken
  • Daar waar je wilt editen kun je ook editen
  • Editen zoals je via de back-end gewend bent

Kan dit voor elke website?
Wij maken gebruik van een buitengewoon flexibel thema voor de opbouw van vele websites, waarbij deze functionaliteit geïntegreerd is. Het kan dus niet met elk thema, maar wij bouwen elk thema na in ons thema zodat je dit wel kunt!

Maak het jezelf makkelijk
Blader door je website en bewerk de artikelen die je tegenkomt direct in hetzelfde scherm.

Deze onderwerpen volgen binnenkort:

  • Houd rekening met je SEO
  • Stylen
  • Verschillende weergaven voor mobiel, tablet en desktop
  • Afbeeldingen: de juiste afmetingen bepalen! Elke weergave/device laat andere uitsnede en grootte zien!
  • Kolommen, tabellen: hoe ga je hiermee om en hoe werkt dat responsive?
  • Nuttige uitbreidingen en aanpassingen die Montix kan toevoegen

Plugins:

  • Yoast

Professionele Divi-support nodig?

Bel met 053 750 30 30 of stel je vraag hieronder:

reCAPTCHA is required.

Meer weten over: