Als je kijkt naar de anatomie van een website, zie je dat witruimte daar een grote rol in speelt. Witruimte is net zo belangrijk als inhoud. Zonder gebalanceerde witruimte wordt je pagina een onoverzichtelijke brei van plaatjes en tekst. Witruimte geeft ‘lucht’, en ritme. Het helpt je informatie te kunnen structureren en het helpt de bezoeker de informatie te vinden. Met witruimte kun je je webpagina in balans brengen, en desgewenst symmetrisch maken.
Soms moet je (wit)ruimte creëren tussen bepaalde onderdelen. Dat doe je met buffers (padding) en marges (margin). Buffer is de ruimte tussen de inhoud en de buitenrand van een onderdeel. Marge is de ruimte buiten het onderdeel om. Je kunt buffers en marges aangeven in pixels of procenten, aan de linkerkant, bovenkant, rechterkant en onderkant.
Bij secties, rijen en modules ziet het aanpassen van marges en buffer er altijd zo uit –>
Tip! Witruimte creëert rust op een pagina. Het zorgt ervoor dat een lezer de structuur beter begrijpt.
Tip! Bij onderdelen met een achergrondkleur is een buffer nodig, omdat anders de tekst tegen de rand aan geplakt staat.
Recente Divi tips
Kleurovergangen of gradients
Een achtergrond met kleurovergang (gradient) maak je vrij eenvoudig met de Divi Builder (opbouwfunctie). Het vaakst zie je gradients als achtergrond van de webpagina. Vertaald naar Divi kom je dan terecht bij secties (blauwe units). Maar je kunt ook rijen (groene...
Achtergronden met Divi
Je kunt elke sectie, rij, kolom en de meeste modules een achtergrond geven. Een achtergrond kan zijn: een kleur twee kleuren die in elkaar overvloeien (gradient) een afbeelding (foto/illustratie) een filmpje Bij elk onderdeel ziet de achtergrond instelling er zo uit...
Schaduwranden met Divi
Foto's of andere onderdelen kun je een schaduwrand meegeven zonder te hoeven coderen in css. In de Divi builder zit schaduw tegenwoordig standaard in het onderdeel 'Ontwerp' van elke module (paarse unit). Ook rijen en kolommen kun je een schaduwrand geven. Zie...
Formulier met Divi
Contactformulier In de Divi opbouwfunctie, oftewel de Divi Page Builder, zit een module "contactformulier". Tot voor kort was het ook min of meer alleen geschikt als contactformulier. Maar met de nieuwe veldtypes die Divi heeft geïntroduceerd, kun je nu ook complexere...
Call-to-action module verticaal uitlijnen
Een veel gehoorde irritatie bij klanten is dat ze het vervelend vinden dat blokje call-to-action (oproep tot actie) niet automatisch goed uitlijnen. Zelf ben ik het er niet mee eens, ik vind het juist fijn dat de knoppen in onderstaand voorbeeld direct onder de tekst...
Dividers met Divi
Om verschillende onderwerpen op een website visueel te scheiden wordt vaak gewerkt met verschillende achtergrondkleuren. Het is voor de bezoeker heel fijn om gestructureerde brokjes informatie te krijgen. Ik zelf gebruik op deze website vaak een tekeningetje als...
Mobielvriendelijk met Divi
In mijn artikel Hoe maak je je website mobielvriendelijk? schrijf ik over de problemen die je met mobiele schermen kunt tegenkomen. In dit artikel bied ik oplossingen speciaal voor Divi gebruikers.Element uitzetten voor mobiel Soms wil je bepaalde zaken niet op de...
Divi Themabouwer
In oktober 2019 heeft Divi de Theme Builder / Themabouwer gelanceerd. GEWELDIG! In het kort betekent het dat je nu zelf de lay-out kunt bepalen van menu header, footer, categorie- en andere archiefpagina's, berichten, zoekresultatenpagina en je 404 pagina. Het is zo...
Divi lettertype aanpassen
Stel, je wilt de lettergrootte van je webteksten groter maken of het lettertype veranderen. Dan hoef je gelukkig niet al je pagina's aan te passen. Via de 'Systeemaanpasser van het thema' of 'Theme customizer' (Engels) kun je typografie instellingen in één keer voor...
Divi kolom opties
Nieuwe kolom opties in de Divi builder Sinds update 3.25.12 worden kolommen in de Visual Builder beschouwd als onderdelen / kinderen van een rij. Kolommen kon je altijd al apart opmaken, maar nu is dat beter zichtbaar in de instellingen van een rij. Je kunt de rijen...