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

Met de Divi Builder kun je echt alles zelf aanpassen;

Sinds het uitbrengen van Divi 4 kun je met de Divi Builder ook je header, footer en allerlei templates (blog, winkelpagina, winkel product, tag pagina enz) aanpassen. Op deze manier kun je helemaal zelf bepalen hoe je berichten template, archieven, WooCommerce product pagina, 404 pagina enzovoorts eruit komen te zien. Dat maakt van Divi een zeer complete theme builder in plaats van alleen een page builder.
Maar het meest belangrijke onderdeel van elke template builder is dynamische content.
Dit betekent dat je data niet per pagina handmatig invoert, maar dat die zelf data automatisch uit de database haalt.

Ben je bijvoorbeeld je blog template aan het bouwen dan kun je ook een extra afbeelding module invoegen, en automatisch de uitgelichte afbeelding van een bericht daar invoegen. Daarnaast kun je een tekst module plaatsen waarin je automatisch de bericht titel laadt, en datzelfde geldt voor de auteur, publicatiedatum, categorieën etc.

En als je een WooCommerce product pagina maakt kun je bijvoorbeeld de prijs, product info, reviews, gerelateerde producten, reviews enzovoorts plaatsen waar je maar wilt.

Je kunt zoveel templates maken als je maar wilt, dus je kunt bijvoorbeeld een aparte template maken voor je homepage met een andere header dan de rest van de site, een ander uiterlijk voor je blog berichten of zelfs een compleet eigen layout voor een bepaalde pagina, bijvoorbeeld een landingspagina of je contactpagina.

Het bouwen van een template werkt precies hetzelfde als het bouwen van een normale pagina, dus je kunt alle Divi modules en hun styling opties gebruiken
(ook in de header en footer). Dat geeft je dus heel veel design vrijheid!

Bijna 40 Divi modules

Divi heeft standaard bijna 40 modules. Dit zijn content elementen; zo typ ik deze tekst in een tekst module, de afbeelding hiernaast staat in een afbeelding module etc.

Er is onder andere een video module, een galerij module, een Google Maps module, een contactformulier module, een e-mail opt-in module om meer inschrijvingen op je nieuwsbrief te krijgen, een countdown timer module, een geanimeerde nummer module, een afbeeldings-, berichten en video slider, een accordeon module, een referenties module, prijstabellen enzovoorts.

Als je een webshop met WooCommerce hebt krijg je daar nog eens 16 modules bij.

Er is een zoekfunctie aanwezig waarmee je de gewenste module snel kunt vinden, en hoewel de modules er standaard al prima uit zien zijn er een hele hoop styling opties beschikbaar om ze exact zo vorm te geven als je wilt.

Styling opties

Divi biedt waarschijnlijk de meeste styling opties van alle page builders die ik geprobeerd heb. Enkele dingen die je kunt aanpassen in de styling opties zijn:

  • Kleuren (waarbij je standaard kleuren en globale kleuren kunt instellen)
  • Achtergronden (ook verloopkleuren, afbeelding of een video achtergrond)
  • Lettertypes en grootte
  • Box en tekst schaduw
  • Uitlijning
  • Minimale en maximale breedte en hoogte
  • Randen (inclusief shape dividers)
  • Kleurenfilters
  • Transformatie opties, waarmee je elementen kunt schuin trekken, roteren en meer
  • Animaties (zowel entry animaties als scroll animaties)
  • Enzovoorts 

 
Bovendien zijn die styling opties veel visueler weergegeven dan bij andere builders, wat Divi erg gebruiksvriendelijk maakt. Als je in Divi bijvoorbeeld een schaduw wilt instellen kun je eerst kiezen uit een aantal presets, die je daarna kunt fine-tunen. Andere builders zoals Elementor bieden geen presets, daar moet je de schaduw zelf naar wens zien te krijgen (zie het screenshot hierboven). Daarin zie je ook het verschil bij het toevoegen van shape dividers; waar je in Elementor en andere builders alleen de naam van de vorm ziet (bergen, golven, wolken) zie je in Divi gewoon een afbeelding van de betreffende shape divider zodat je direct ziet hoe het eruit ziet.

Responsive content

Deze styling opties zijn beschikbaar voor vrijwel elk element in Divi: je vindt ze bij elke module, maar ook bij kolommen, rijen, secties…
en je kunt zelfs aparte stijlen instellen voor verschillende apparaten. In het eerste screenshot op deze pagina zie je hoe dat werkt: bij heel veel elementen zie je een telefoon icoontje als je er met de muis overheen gaat. Als je op dat icoontje klikt zie je 3 tabbladen: desktop, tablet en telefoon.

Als je bijvoorbeeld bij de font grootte op dat icoontje klikt kun je een H2 kop 26px groot maken op desktop, 22px op tablet en 18px op een smartphone. Zo kun je ook de uitlijning, (achtergrond)kleur, rand, animaties, transformaties enzovoorts aanpassen. Natuurlijk kun je er ook voor kiezen om een module, kolom, rij of sectie helemaal te verbergen op mobiel, tablet of desktop.

Maar wat Divi echt uniek maakt is wat ze responsive content noemen: zo kun je niet alleen de font grootte en kleur van een tekst aanpassen op mobiel, je kunt zelfs een hele andere tekst (of afbeelding, video enzovoorts) voor mobiel invoeren! Dus als je koptekst te lang is voor op een smartphone kun je deze gewoon aanpassen naar een kortere tekst voor mobiel, terwijl de desktop versie blijft zoals die was. Wow!

Overigens kun je al deze dingen ook instellen voor hover, dus als je er met de muis overheen gaat.

Divi heeft ook een ingebouwde simulator zodat je snel kan zien hoe je pagina eruit ziet op een tablet of smartphone.