In deze handleiding legt Bob de webbouwer uit hoe de Divi page builder werkt. De Divi page builder is het belangrijkste onderdeel van het populaire Divi WordPress thema van Elegant themes maar je kunt ‘m ook installeren als losse plugin op elke andere WordPress site. In deze handleiding lees je:
De Divi structuur : secties, rijen en kolommen
Als je de Divi page builder geïnstalleerd hebt zie je op elke pagina een grote paarse knop. Klik daarop om de Divi page builder te activeren. Je krijgt dan een popup met 3 opties: build from scratch, layout kiezen en clone bestaande pagina.
Als je met een blanco canvas wilt starten kies je de eerste optie, maar als je op “layout kiezen” klikt kun je ook kiezen uit honderden professionele designs die standaard in Divi zitten. Zeker als je nog geen ervaring hebt met Divi is dit een fijne optie, omdat je dan al een goede basis hebt die je alleen nog maar hoeft aan te passen aan je wensen.
De derde optie is ideaal als je al een Divi website hebt met een aantal pagina’s. Je kunt dan een bestaande pagina kopiëren en dat design als basis gebruiken voor je nieuwe pagina.
Als je een keuze hebt gemaakt opent de layout in eerste instantie in de backend builder (aan de achterkant dus). Die layout bestaat uit blauwe, groene en grijze blokken; blauwe blokken zijn secties, groene blokken zijn rijen en grijze blokken zijn modules. Je ziet ook blauwe, groene en grijze plus icoontjes, daarmee kun je een nieuwe sectie, rij of module toevoegen.
Sinds kort moet je eerst de classic builder activeren om de weergave hierboven te krijgen. Ga daarvoor in het admin menu naar Divi > Thema Opties > Builder > Gevanceerd en zet de schakelaar bij “Klassieke editor inschakelen” aan. Overigens kun je deze weergave ook aan de voorkant activeren door te klikken op raster weergave in de Visual Builder instellingen.
Divi Visual Builder : bouw aan de voorkant van je website
Hoewel deze zogenaamde wireframe view heel handig is om snel de structuur van je pagina op te zetten zul je voornamelijk in de Visual Builder werken. Dat is de front end page builder van Divi, waarmee je dus aan de voorkant van je website werkt. Daardoor zie je direct het effect van je aanpassingen zoals je bezoekers het ook zien.
In de afbeelding hiernaast zie je de opbouw van mijn homepage. Een blok met een blauwe rand is een sectie, een blok met een groene rand is een rij en blokken met een donkergrijze rand zijn kolommen.
Het eerste onderdeel onder mijn header is een sectie met daarin 1 rij. Die rij is onderverdeeld in 2 kolommen (website laten bouwen en website laten verbeteren).
Daarna volgt nog een sectie, maar deze keer bestaat de sectie uit meerdere rijen. De koptekst “zo mooi kan jouw nieuwe website ook worden” heeft een eigen rij die bestaat uit 1 kolom over de gehele breedte.
Daaronder volgt een tweede rij, waarin 3 websites uit mijn portfolio staan. Elke website staat in een eigen kolom, dus deze rij bestaat uit 3 kolommen. De volgende 3 websites staan weer op een nieuwe rij, die wederom bestaat uit 3 kolommen.
Secties gebruik je dus om content die bij elkaar hoort te groeperen. In mijn geval gebruik ik de eerste sectie voor mijn diensten, de tweede sectie voor mijn portfolio, en ik heb ook nog secties voor mijn USP’s (waarom kiezen voor Bob), de referenties en de blogartikelen.
Een sectie kun je voorzien van een achtergrond over de gehele breedte van het scherm, en een sectie is het enige element waarbij je shape dividers kunt gebruiken.
Je kunt zoveel secties gebruiken als je wilt, en elke sectie kan bestaan uit een onbeperkt aantal rijen.
Die rijen kun je verdelen in maximaal 6 kolommen, en elke kolom kan weer een onbeperkt aantal modules bevatten (zie hieronder).
De Divi content : modules
De structuur van een Divi pagina wordt dus opgebouwd uit secties, rijen en kolommen. Aan die kolommen kun je vervolgens content toevoegen door middel van modules. Divi wordt standaard geleverd met 36 modules. De meest gebruikte module is de tekst module, waarmee je gewoon tekst kunt toevoegen zoals je dat ook in de standaard WordPress editor zou doen. Net als in de standaard WordPress editor kun je ook bij Divi’s tekst module afbeeldingen en andere media toevoegen, links invoegen, tekst dik of schuin drukken enzovoorts. Naast de tekst module wordt Divi geleverd met de volgende modules:
- Aanbevelingen : Hiermee kun je referenties op je site plaatsen, met o.a. een foto en de naam van degene die de referentie geeft. Voor de referenties op mijn homepage heb ik deze module gebruikt.
- Accordeon : Deze module is ideaal voor FAQ en dergelijke, want hiermee kun je alleen de vraag tonen en het antwoord pas weergeven als er op de vraag geklikt wordt. Dat maakt zo’n pagina veel overzichtelijker.
- Afbeelding : Hiermee kun je uiteraard een afbeelding invoegen.
- Afteltimer : Deze module is ideaal voor coming soon pages, of om bijvoorbeeld af te tellen naar een opening, evenement of de lancering van een nieuwe dienst. Je kunt hier een datum en tijd ingeven en vervolgens wordt er een timer weergegeven die laat zien hoeveel dagen, uren, minuten en seconden het nog duurt tot deze bereikt is.
- Audio : Hiermee kun je een audiofragment toevoegen, waarna een basis audiospeler getoond wordt met o.a. een volumeregelaar. Je kunt het audiofragment o.a. voorzien van titel, artiest en album, inclusief de albumcover.
- Berichtengalerij : Een slider met je berichten, waarbij je weer een aantal dingen kunt instellen.
- Berichtennavigatie : Hiermee kun je links invoegen naar het vorige en volgende bericht op je blog, indien gewenst alleen uit dezelfde categorie als het huidige bericht. Door deze module onderaan elk blogbericht te plaatsen houd je bezoekers wellicht langer op je website.
- Blog : Hiermee kun je berichten tonen op elke pagina, in plaats van alleen op de berichtenpagina. Je kunt dit o.a. beperken tot bepaalde categorieen en je kunt instellen of je elementen als de auteur, datum, categorieen en een lees meer button wilt tonen. Daarnaast kun je kiezen tussen een lijstweergave of een grid weergave. Omdat je met de blogmodule veel meer controle over de styling hebt gebruik ik deze module altijd om de berichten weer te geven, o.a. op mijn homepage maar ook op mijn blogpagina.
- Blurb : Dit is eigenlijk gewoon een tekstmodule. maar nu kun je er een icoontje aan toevoegen en wordt de tekst standaard gecentreerd weergegeven. Handig voor kleine stukjes tekst die wat meer moeten opvallen.
- Cirkelteller : Hiermee krijg je een cirkel waarin een percentage getoond wordt. Als de cirkelteller in beeld komt loopt deze op van 0 naar het ingestelde percentage. Deze module wordt bijvoorbeeld vaak gebruikt om aan te geven hoe ver een project gevorderd is, of om een vaardigheidsnivau aan te duiden.
- Code : Met de code module kun je HTML, CSS en javascript code toevoegen. Ook handig voor shortcodes van andere plugins.
- Contactformulier : Uiteraard voor het invoegen van een contactformulier. Dit is een krachtige module waarbij je zoveel velden kan toevoegen als je wilt. Je kunt kiezen uit tekstvelden, checkboxes, keuzerondjes en dropdown selecties. Je kunt per veld instellen of het veld verplicht is en je kunt zelfs conditionele logica gebruiken. Daarmee kun je bijvoorbeeld instellen dat een veld alleen zichtbaar wordt als er bij de vorige vraag “ja” is geselecteerd.
- E-mail opt-in : Toont een venster waarmee mensen zich kunnen inschrijven op je nieuwsbrief. Er is echter geen nieuwsbrief systeem in Divi ingebouwd, dus daar heb je een andere plugin zoals MailPoet of MailChimp voor nodig.
- Filterbaar portfolio : Divi heeft een extra post type naast pagina’s en berichten, namelijk “projecten”. Je vindt dit onderdeel in het WordPress admin menu links. Dit zijn eigenlijk gewoon berichten die met deze module getoond kunnen worden. Net als gewone berichten kun je ook projecten verdelen in categorieen, en met deze module kun je die categorieen boven de berichten tonen. Als een bezoeker op een categorie klikt worden alleen projecten uit die categorie getoond.
- Galerij : Hiermee kun je een fotogalerij invoegen, als raster of als slider. Deze module maakt gebruik van de standaard WordPress galerij.
- Kaart : Hiermee kun je een Google Maps kaart invoegen, bijvoorbeeld om je locatie te tonen op je contactpagina. Je moet eerst een API key aanmaken bij Google Maps voordat dit werkt.
- Knop : Hiermee kun je een knop toevoegen, waarvan je zelf kunt instellen welke tekst erop moet komen en waarheen deze moet linken.
- Log in : Heb je een ledensite, webshop of een ander soort site waar bezoekers kunnen inloggen? Met deze module geef je een inlogvenster weer.
- Nummerteller : Hetzelfde als de eerder besproken cirkelteller, maar dan zonder cirkel eromheen.
- Oproep tot actie : Hetzelfde als de knop module, maar nu met een achtergrond. Bedoeld voor een opvallende call to action button.
- Persoon : Deze module wordt vaak gebruikt om teamleden weer te geven. Je kunt o.a. een naam, functie, foto en social media profielen toevoegen.
- Portfolio : Zie filterbaar portfolio hierboven, maar dan zonder de mogelijkheid om te filteren op categorieen.
- Reacties : Standaard wordt de reactiemogelijkheid alleen onderaan een bericht getoond, maar met deze module kun je ze ook op een andere plek tonen.
- Schakelen : Hetzelfde als de accordeon module, maar bij de accordeon module kun je meerdere vragen en antwoorden invullen en bij deze module maar 1. Bij de accordeon module sluit het antwoord echter automatisch als je een andere vraag aanklikt, terwijl de gebruiker bij de schakelen module elke vraag zelf kan openen en sluiten. Je zet hierbij dus iedere vraag met bijbehorend antwoord in een eigen module.
- Shop : Met deze module kun je WooCommerce producten toevoegen op elke pagina. Je kunt bijvoorbeeld de meest recente producten, de meest verkochte producten of alleen producten uit een of meerdere categorieen tonen, instellen hoeveel kolommen er getoond moeten worden en de standaard sortering instellen. Ook qua styling biedt deze module veel mogelijkheden. Ik gebruik meestal deze module in plaats van de standaard shop pagina.
- Slider : Hiermee kun je een eenvoudige foto of videoslider toevoegen. Je kunt voor iedere slide een knop en een link toevoegen.
- Social Media volgen : Voegt knoppen toe waarmee mensen je kunnen volgen op social media. Je kunt zelf de achtergrondkleur van de button kiezen, dus in plaats van een blauwe Facebook button zou ik ook een gele Facebook button kunnen maken.
- Tabbladen : Hiermee kun je content verdelen onder meerdere tabbladen, net zoals de tabbladen bij een WooCommerce product.
- Tabellen prijsstelling : Met deze module kun je een vergelijkingstabel maken, waarin je bijvoorbeeld 3 dienstenpakket aanbiedt. Je ziet dit bijvoorbeeld vaak bij hostingbedrijven, die dan een goedkoop pakket, een iets duurder pakket en een veel duurder pakket aanbieden. Je kunt 1 of meerdere opties uitlichten waardoor deze optie een extra opvallend uiterlijk krijgt.
- Titel bericht : Hiermee kun je de titel van het huidige bericht weergeven, en kiezen welke elementen daarbij getoond worden zoals de uitgelichte afbeelding, auteur, datum en categorie.
- Verdeler : Hiermee kun je een scheidingslijn toevoegen, waarvan je o.a. de kleur, hoogte en stijl kunt instellen.
- Video: Hiermee kun je een videofragment uploaden en insluiten op je pagina, met een bedieningspaneeltje eronder. Je kunt ook video’s van externe bronnen als YouTube, Vimeo of Facebook toevoegen.
- Videoslider : Een slider voor videos.
- Voortgangsbalk : Hetzelfde als de eerder besproken cirkelteller, maar dan met een balk in plaats van een cirkel.
- Zijbalk : Hiermee kun je een bepaalde widgetarea toevoegen op elke gewenste plek. Je kunt in Divi ook zelf widgetareas aanmaken, dus je kunt bijvoorbeeld een widgetarea aanmaken waarin je alleen de widget van een bepaalde plugin plaatst, die je vervolgens met deze module op een pagina kunt invoegen. Dit is helaas een beetje omslachtig, het zou makkelijker zijn als je elke widget gewoon rechtstreeks kan invoegen op een pagina maar dat is helaas (nog) niet mogelijk in Divi.
- Zoeken : Voegt een zoekvenster toe waarmee een bezoeker je site kan doorzoeken.
Divi sectie, rij, kolom en module instellingen : content, achtergronden, effecten enzovoorts
Als je met de muis over een sectie, rij of module beweegt verschijnen er boven het betreffende blok enkele icoontjes:
- Kruisje (1) : Als je met de muis hierop klikt kun je het betreffende onderdeel verslepen naar een andere plek op de pagina.
- Tandwiel (2) : Hiermee kun je instellingen of inhoud van dit onderdeel aanpassen.
- Venstertjes (3) : Klik hierop om het huidige onderdeel te kopiëren, inclusief alle instellingen en inhoud.
- Kolommen (4) : Klik hierop om de kolomindeling aan te passen (alleen bij rijen beschikbaar).
- Rondje met pijltje (5) : Klik hierop om het huidige onderdeel op te slaan in de bibliotheek
- Prullenbak (6) : Klik hierop om het onderdeel te verwijderen.
- 3 puntjes : hier vind je nog wat extra mogelijkheden (die je ook met de rechter muisknop kunt bereiken)
Als je met de muis onderaan een sectie, rij of module staat verschijnt er ook een plus teken. Als je hierop klikt wordt er een nieuwe sectie, rij of module ingevoegd.
Als je een onderdeel wilt bewerken klik je dus op het tandwieltje (al kun je teksten ook direct bewerken door te klikken en te typen 🙂 ). Er opent zich nu een popup venster met de opties voor dat onderdeel. Welke opties je hebt verschilt per onderdeel. Je hebt in elk geval altijd 3 tabbladen: content, ontwerp en geavanceerd.
Content tabblad
Onder het content tabblad vind je bij secties standaard 3 instellingen, namelijk link, achtergrond en admin label.
Met de link optie kun je een hele sectie (of rij, kolom of module) laten linken naar een andere pagina. Je kunt daarbij kiezen of je de link in hetzelfde venster wilt laten openen, of in een nieuw tabblad. Het is aan te raden een pagina op je eigen website in hetzelfde venster te openen, en een pagina op een externe website in een nieuw venster.
Als je op achtergrond klikt zie je 4 buttons, met daaronder een vak met een plusje erin. Als je op dat plusje klikt kun je een effen achtergrondkleur selecteren. Met de rechter schuifbalk kun je deze eventueel gedeeltelijk doorzichtig maken, waardoor je een achtergrondafbeelding nog een beetje zichtbaar kunt houden.
Als je op de tweede button klikt, het zwart/wit icoontje, kun je een verloopkleur instellen. Bij de derde button kun je een achtergrondafbeelding kiezen, en bij de vierde button kun je zelfs een achtergrondvideo instellen. Net als bij veel andere onderdelen in Divi kun je ook een verloopkleur en de achtergrondafbeelding verregaand aanpassen met diverse instellingen, speel daar gerust mee om de vele mogelijkheden te ontdekken.
Ben je toch niet tevreden over de ingestelde achtergrond? Ga dan met de muis naar de rechter bovenhoek van het vak waar je de achtergrond hebt ingesteld. Er komt dan een tandwieltje en prullenbakje tevoorschijn waarmee je de achtergrond kunt aanpassen of verwijderen.
Als je op admin label klikt kun je het betreffende onderdeel een duidelijkere naam geven, wat met name in de backend builder zorgt voor veel duidelijkheid.
Bij de rij instellingen is het eerste item niet link, maar column structure. Hier kun je de kolomstructuur aanpassen en de volgorde van de kolommen wijzigen door deze simpelweg in de gewenste volgorde te slepen. Als je bij een kolom op het tandwiel icoontje klikt kun je per kolom een link, achtergrond, schaduw, rand en diverse effecten instellen.
Bij de modules vind je onder het content tabblad ook alle basis instellingen. Zo vind je hier bij de tekst module de tekst editor, bij de afbeelding module een upload veld, bij de tellers het in te stellen percentage enzovoorts. Bij sommige modules waar je meerdere elementen kunt toevoegen, zoals de accordeon module en de tabblad module, zie je alleen een plus teken. Klik daarop om je eerste element toe te voegen, daarna kun je het tweede, derde enzovoorts toevoegen.
Ontwerp tabblad
Onder het ontwerp tabblad vind je alle design opties (behalve de achtergrond dus). Welke opties je hebt verschilt ook hier per onderdeel, maar meestal zie je in elk geval de volgende instellingen:
- Formaat wijzigen : Stel de breedte van dit onderdeel in.
- Afstand : Hiermee kun je de padding en marge instellen, waarmee je de afstand tussen 2 elementen bepaalt. Bij secties en rijen kun je ook gewoon met de muis net boven of onder het kader gaan staan waarna je de gewenste padding gewoon middels drag & drop kunt instellen.
- Rand : Hiermee kun je een border en/of afgeronde hoeken instellen.
- Box Shadow : Hiermee kun je een schaduw effect instellen.
- Filters : Een aantal kleurenfilters waarmee je gave effecten kunt bereiken.
- Transformeren : Iets groter of kleiner maken, roteren, schuintrekken of zelfs een hele andere positie op het scherm geven. Zie dit artikel voor meer informatie daarover.
- Animatie : Laat een onderdeel geanimeerd (bewegend) verschijnen.
Bij secties heb je daarnaast nog dividers, waarmee je hele gave overgangen tussen secties kunt maken, en bij rijen kun je nog instellen of je deze links, rechts of gecentreerd wilt uitlijnen. Welke extra opties je bij de modules hebt verschilt per module, maar meestal kun je naast bovenstaande dingen in elk geval tekstkleuren en lettertypes instellen.
Bij vrijwel alle onderdelen zie je ook een smartphone icoontje. Als je daarop klikt kun je apart instellingen maken voor desktop, tablet en smartphone.
Mobiele en hover opties
Als je met de muis over de titel van een onderdeel gaat (in bovenstaande afbeelding het woordje “marge” verschijnen er 4 icoontjes naast.
- Als je op het vraagteken icoontje klikt verschijnt een korte uitleg over het betreffende onderdeel.
- Als je op het smartphone icoontje klikt kun je aparte instellingen maken voor tablet en mobiel.
- Als je op het pijltje klikt kun je een hover effect instellen, dus wat er gebeurt als je er met de muis overheen gaat.
- Als je op de drie puntjes klikt verschijnt een aantal extra opties, waarmee je bijvoorbeeld de stijlen van dat onderdeel kunt kopiëren en plakken.
Geavanceerd tabblad
Het laatste tabblad is geavanceerd. Onder dit tabblad kun je een CSS class of ID toewijzen aan een onderdeel en aangepaste CSS toevoegen. Verder kun je onder het kopje zichtbaarheid het betreffende onderdeel verbergen op desktop, tablet of smartphone. Zo kun je nog een stapje verder gaan met je responsive design! Ten slotte vind je hier nog een kopje animatie, daarmee kun je de snelheid van de hover effecten bepalen.
Werkbalk onderin
Onderin zie je steeds een werkbalk met 4 buttons:
- Rood kruis : Sluit het popup venster zonder je wijzigingen op te slaan.
- Paarse pijl : Maak de laatste wijziging ongedaan.
- Blauwe pijl : Herstel de laatste wijziging die je ongedaan hebt gemaakt.
- Groen vinkje : Sla alle wijzigingen op en sluit het popup venster.
Visual Builder instellingen
Helemaal onderaan de pagina zie je een paarse cirkel met 3 puntjes erin. Als je daarop klikt worden de instellingen voor de Divi Visual Builder geopend.
De verschillende onderdelen van zijn:
- Builder settings : hiermee kun je de Divi Visual builder interface aanpassen aan je wensen. Zo kun je bijvoorbeeld instellen dat de blauwe / groene / grijze vakken
en de instellingen pas verschijnen als je op een onderdeel klikt in plaats van als je er met de muis overheen gaat.
- Raster weergave : hiermee kun je een soortgelijke weergave krijgen als de backend editor zonder de Visual Builder te verlaten.
- Uitzoomen : hiermee zoom je uit zodat je beter ziet hoe het hele pagina ontwerp eruit ziet.
- Desktopweergave : Bekijk hoe je ontwerp eruit ziet op een groot scherm.
- Tabletweergave : Bekijk hoe je ontwerp eruit ziet op een tablet.
- Telefoonweergave : Bekijk hoe je ontwerp eruit ziet op een telefoon.
- Laad een bestaande layout : Divi wordt standaard geleverd met tientallen standaard layouts, die je via deze knop kunt laden. Ook layouts die zijn opgeslagen in de Divi bibliotheek (zie hieronder) kun je via deze knop laden.
- Opslaan in bibliotheek : Hiermee kun je de huidige layout opslaan in de Divi bibliotheek.
- Lay-out wissen : Wis de huidige layout en begin opnieuw.
- Sluit de visual builder instellingen.
- Pagina instellingen : Hiermee kun je een aantal dingen instellen voor de huidige pagina of bericht, zoals de titel, uitgelichte afbeelding, categorieën en achtergrond.
- Wijzigingsgeschiedenis : hiermee kun je terug naar een vorige status als je per ongeluk iets gewijzigd hebt wat niet de bedoeling was.
- Importeren en exporteren : Naast het opslaan van layouts in de bibliotheek voor gebruik elders op de website kun je deze ook exporteren of importeren voor gebruik op een andere Divi website.
- Concept opslaan : Als je de pagina nog niet publiekelijk zichtbaar wilt maken kun je kiezen voor concept opslaan.
- Publiceren : Als de pagina klaar is voor publiek klik je op publiceren.
Sinds kort vind je hier ook een vergrootglas icoontje, waarmee je Divi’s “quick actions” opent. Dit is een zoekbalk waarmee je van alles kunt doen, zoals snel naar een pagina of instelling gaan, of zelfs een rij of module toevoegen door simpelweg een commando te typen. Zeker als je veel met Divi werkt kan dit een flinke tijdsbesparing opleveren.
Tot slot vind je hier een vraagteken icoontje, waarmee je Divi’s ingebouwde help functie activeert.
De Divi bibliotheek
Deze term heb je al enkele keren voorbij zien komen, maar wat is die Divi bibliotheek nu eigenlijk? Dit is eigenlijk hetzelfde als de mediabibliotheek waar je afbeeldingen en andere bestanden in opslaat, maar dan voor Divi onderdelen. Je kunt vrijwel ieder onderdeel in Divi opslaan, van een knop tot een complete sectie en van een tekstmodule tot een complete pagina. Alle inhoud en styling wordt eveneens opgeslagen.
Vervolgens kun je dit onderdeel overal in je site hergebruiken. Dat doe ik bijvoorbeeld ook met het blok hieronder, waarin ik mijn diensten aanbied als je er zelf niet uitkomt.
Dit complete blok is opgeslagen in de Divi bibliotheek en kan ik met 1 klik laden, inclusief de foto, tekst en offerte aanvraag knop. Dat scheelt een hoop tijd!
Als je een nieuw onderdeel toevoegt (via het plusje) zie je ook een optie “toevoegen vanuit bibliotheek”. Als je daarop klikt zie je alle opgeslagen onderdelen van dezelfde soort, dus als je een sectie wilt toevoegen zie je hier alle opgeslagen secties, als je een rij wilt toevoegen zie je hier alle opgeslagen rijen en als een nieuwe module toevoegt zie je hier alle opgeslagen modules.
Opslaan als globaal
Hoewel ik het blok onderaan dus altijd uit de bibliotheek haal doe ik vaak wel kleine aanpassingen aan de tekst, of gebruik ik een andere afbeelding die beter past bij het betreffende artikel. Als ik iets aanpas op deze pagina heeft dat geen invloed op de andere pagina’s waar ik dit blok gebruik.
Je kunt een onderdeel echter ook opslaan als globaal item. Als je daarvoor kiest wordt een wijziging op de ene pagina wel doorgevoerd op alle andere pagina’s waar het betreffende onderdeel gebruikt wordt. Ideaal voor bijvoorbeeld “neem contact op” knoppen; als je besluit dat die een ander kleurtje moeten krijgen hoef je dat maar op 1 plek aan te passen.
Divi Theme Builder
Sinds Divi 4.0 kun je ook je header en footer met Divi bouwen, evenals templates voor berichten, pagina’s, je 404 pagina, je blogarchief, je WooCommerce productpagina enzovoorts. Je kunt zelfs per categorie of pagina een andere template gebruiken.
Om de Divi theme builder te gebruiken ga je naar Divi –> themabouwer. Daar zie je in eerste instantie een blok met 3 lege vakken, met daarin “globale kop toevoegen”, “globale body toevoegen” en “algemene voettekst toevoegen”.
Klik op “globale kop toevoegen” om je eigen header te ontwerpen. Dit werkt hetzelfde als het opbouwen van een pagina, dus met secties, rijen, kolommen en modules.
Je kunt alle bovenstaande modules gebruiken in je templates, maar er zijn ook enkele modules bijgekomen. De belangrijkste voor de header is de “menu” module, waarmee je je logo en het navigatiemenu kunt toevoegen. Je kunt diverse dingen instellen, zoals het uiterlijk van het (mobiele) menu.
Nadat je de template hebt opgeslagen ga je terug naar de backend, waar je ook nog even op de groene knop “wijzigingen opslaan” moet klikken.
Vervolgens kun je verder met de volgende template, in dit geval de body template. Dat is de template voor de content van de pagina of bericht; de teksten en afbeeldingen voor die specifieke pagina dus. De belangrijkste voor die pagina is de “inhoud plaatsen” module. Een template zorgt er namelijk voor dat iedere pagina of ieder bericht er hetzelfde uit ziet qua layout en styling, maar de content (de teksten en afbeeldingen dus) verschillen natuurlijk wel per pagina of bericht. De “inhoud plaatsen” module zorgt ervoor dat op de plek waar je die module hebt geplaatst de content van de betreffende pagina verschijnt.
Het ophalen van content van een bepaalde pagina of bericht uit de database noemt men “dynamic content”. Dat kan niet alleen met de “inhoud plaatsen” module, maar bij steeds meer modules vind je rechtsboven in het vak waar je de tekst invoert of afbeelding kiest een database icoontje. Als je daarop klikt kun je een dynamic content veld gebruiken. Zo kun je bijvoorbeeld een afbeelding invoegen, maar in plaats van een specifieke afbeelding te kiezen kun je daar ook kiezen voor de uitgelichte afbeelding van dat specifieke bericht.
En in een tekstvak kun je bijvoorbeeld automatisch de pagina titel of samenvatting automatisch laden.
Tenslotte kun je ook nog een standaard footer layout instellen op dezelfde manier als de header en body.
Als je de header, body en footer hebt ingesteld is de standaard template voor je website af. Maar zoals ik al eerder schreef kun je – of eigenlijk moet je – meerdere templates bouwen.
Je hebt in elk geval een aparte template nodig voor je archief pagina’s (gebruik daar de “blog” module, en vergeet niet “berichten voor huidige pagina” aan te vinken), en wellicht wil je ook een aparte template voor je blog, WooCommerce pagina’s enzovoorts.
Om een nieuwe template toe te voegen klik je op “nieuwe sjabloon toevoegen”. Je krijgt dan een popup venster waarin je kunt aanvinken waar die template gebruikt moet worden. Dit kun je zeer specifiek instellen; je kunt bijvoorbeeld een template maken voor alle pagina’s of blogberichten, maar ook voor een specifieke pagina (bijvoorbeeld de homepage, 404 pagina of elke andere pagina) of berichten in een specifieke categorie.
Wanneer je een nieuwe template maakt wordt in eerste instantie een kopie gemaakt van de standaard header, content en footer template. Om een (of alle) onderdelen aan te passen voor die specifieke template moet je die standaard template eerst verwijderen door op het prullenbak icoontje te klikken. Let op, niet op het potlood icoontje, want daarmee pas je de standaard template aan.
Als je dus een template wilt maken met een aangepaste body template, maar wel met de standaard header en footer, klik je (alleen) bij de body template op het prullenbak icoontje. Vervolgens klik je op het lege vlak om een aangepaste body template te bouwen. Vergeet na het bouwen van de aangepaste template niet om op “wijzigingen opslaan” te klikken.
Nederlandse vertaling van Divi uitschakelen
Zoals je waarschijnlijk gemerkt hebt is de Nederlandse vertaling van Divi erbarmelijk slecht. Dit komt omdat deze automatisch vertaald wordt met Google Translate.
Google Translate wordt weliswaar steeds beter, maar vooral voor het vertalen van complete stukken tekst.
Bij korte woorden en zinnen zoals Divi die gebruikt krijg je vaak tenenkrommende vertalingen, zoals “wereldwijd lichaam” voor “global body”, “tekst zwak licht” voor “text font weight” en maar liefst 4 keer alleen het woordje “animatie” voor de verschillende termen die in het animatie tabblad worden gebruikt…
Gelukkig weten de makers van Divi ook dat de vertalingen Divi soms vrijwel onbruikbaar maken, en daarom hebben ze een mogelijkheid ingebouwd om deze uit te schakelen 😉
Ga daarvoor in je dashboard naar Divi –> Thema Opties en dan de schakelaar bij “vertalingen uitschakelen” naar “inschakelen” verzetten (om het makkelijk te maken).
Dit heeft wel als nadeel dat Divi vertalingen voor bezoekers ook uitgeschakeld worden. Daar merk je niet heel veel van, maar dingen als “zoeken” en “lees meer” zullen nu wel in het Engels worden weergegeven. Om dat te voorkomen kun je ook de voorkeurstaal voor je eigen profiel aanpassen naar Engels (via gebruikers –> je profiel). Daarmee is Divi (en de rest van de admin ook) alleen voor jou in het Engels, terwijl de rest nog gewoon in het Nederlands is.
Het uitschakelen van de vertalingen heeft als bijkomend voordeel dat de documentatie van Divi zelf ook een stuk beter te volgen is 😉
Help, alles is blauw en mijn aanpassingen zijn foetsie!
Het komt af en toe voor dat na een aanpassing opeens je header, knoppen en andere onderdelen lichtblauw zijn (de standaard Divi kleur) terwijl je een andere kleur had ingesteld.
Ook andere instellingen zoals marge en padding, lettertypes enzovoorts zijn dan “gereset” naar de standaard instellingen.
Dat probleem is gelukkig eenvoudig te verhelpen: ga naar Divi –> Thema opties –> Builder –> Geavanceerd en klik naast de optie “Generering statisch CSS-bestand” op de grijze knop met “duidelijk” erop (weer zo’n belabberde vertaling van het standaard “clear”). Nu is alles weer zoals het hoort 🙂
Als je een andere caching plugin gebruikt kun je de statische CSS optie sowieso beter uitschakelen om conflicten te voorkomen.
Hulp nodig met je Divi website?
Als het goed is heb je de basis van de Divi builder nu aardig onder de knie. Heb je toch nog vragen?
Stel ze gerust in de reacties hieronder!
Je kunt mij natuurlijk ook inhuren om een Divi website voor je te bouwen, of om een Divi training te volgen.
Vraag direct een vrijblijvende offerte aan
Dit artikel bevat affiliate links. Dat wil zeggen dat ik een vergoeding krijg als je Divi koopt via een link op deze pagina. Dat kost jou verder niets extra’s (sterker nog, via deze link krijg je zelfs 10% korting) maar zorgt er wel voor dat ik jou kan blijven helpen met dit soort gratis artikelen. Dus als je zelf Divi wilt aanschaffen stel ik het zeer op prijs als je dat via deze pagina doet 😉
Heb je Divi al of ga je voor een andere oplossing, maar wil je me wel graag bedanken? Dan kun je eventueel ook een kleine eenmalige donatie doen via de button hiernaast 🙂
