Wordpress website gehackt? Wij helpen je weer op weg Bel of email ons!

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.