Divi tips
Tips & tricks voor de doe-het-zelver
Divi scroll effect voorbeelden
In februari 2020 introduceerde Divi de optie 'Scroll effects' waamee je elementen op je scherm kunt laten veranderen tijdens het scrollen naar beneden en naar boven. De veranderende effecten zijn: bewegen van links naar rechts of andersom bewegen van boven naar...
Divi basis: wat is Divi?
In Wordpress geen website zonder thema Elke Wordpress website draait op basis van een thema. Het thema bepaalt hoe een pagina of bericht er uitziet; de stijl en de lay-out. Vaak zijn er binnen een thema nog talloze opties om de stijl en lay-out naar wens aan te...
Afbeelding of tekst aan de onderkant van een kolom plaatsen
Standaard worden plaatjes of tekst aan de bovenkant van een kolom getoond. Maar soms wil je objecten juist allebei aan de onderkant uitlijnen. Bijvoorbeeld als je een staand en een liggend beeld naast elkaar wilt laten zien, met de basis aan de onderkant. In deze Divi Tip laat ik zien hoe je dit met twee simpele handelingen voor elkaar krijgt.
Kolommen gelijke hoogte geven
Heb je blokken naast elkaar staan die niet mooi uitlijnen, die niet even hoog zijn en stoor je je daar aan? Divi heeft een hele simpele oplossing die in de meeste gevallen helpt. Lees mijn Divi Tip als je de oplossing wilt zien.
Website op de schop – hoe pak je dat aan?
Op een gegeven moment denk je: mijn website ziet er ouderwets uit. Je kijkt beter en ziet steeds meer dingen die je wilt veranderen. En als je dan eenmaal begint, blijkt het toch wel veel werk te zijn of is het toch nog steeds niet wat je wilt. Hoe voorkom je dat je verzandt in een mega-verbouwing van je website?
In deze Divi Tip vind je een plan van aanpak voor een grote onderhoudsbeurt op je website.
Afbeelding met tekst erover bij hover
Wat nu als je tekst over een plaatje wilt zetten, maar niet meteen zichtbaar. De tekst moet pas tevoorschijn komen als je er met de muis overheen gaat. Of op mobiel, als je erop klikt.
In deze Divi Tip leg ik uit hoe je dit met slechts 1 Divi module voor elkaar krijgt zonder extra css code.
Hoe voeg je WordPress widgets toe met Divi?
Standaard heeft Wordpress handige widgets, zoals extra menu's, een lijstje met blog categorieën of een lijstje met de laatst gepubliceerde blog titels. Oorspronkelijk werden widgets voornamelijk gebruikt in een klassieke zijbalk of onderin de footer. Met Divi...
Pagina dupliceren met Divi
Vaak wil je een aantal pagina's op je website bouwen die op elkaar lijken qua opmaak en structuur. Bijvoorbeeld dienstenpagina's die allemaal een inleiding, voordelen, werkwijze en contactmogelijkheid hebben. Dan is het fijn om eerst een kopie te maken en die...
Recepten maken in Divi met ‘Custom fields’
Flexibele lay-out Als je recepten wilt delen op een Wordpress blog kom je er al gauw achter dat het handig is om een vast stramien, een vaste lay-out te gebruiken. Een recept bestaat immers uit vaste onderdelen. Denk aan ingrediënten, inleiding, werkwijze,...
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...
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...
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...
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...
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...
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...
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...
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...
Divi basis: de Visual Builder
Met de Divi Visual Builder kun je elk gewenste lay-out op je webpagina bouwen. Bijvoorbeeld: eerst een titel 'contact', daarna links een tekstblok en rechts een foto. Schematisch ziet dit stuk van de pagina er zo uit. Een sectie (= blauwe container), met een rij (=...
Divi basis: pagina templates maken / de Divi bibliotheek
Als je meerdere pagina's of berichten (blogs) met ongeveer dezelfde lay-out en/of opmaakt wilt bouwen, dan is het handig om een template aan te maken. De volgende keer dat je een pagina of blog gaat bouwen, kun je starten met de template en die wijzigen. Divi...
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...
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...
Witruimte met Divi
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...