Les 3: Divi modules

Een goede website bestaat uit een combinatie van teksten afgewisseld met plaatjes, video’s en CTA (Call To Action). Divi heeft een grote diversiteit aan “kant-en-klare” modules beschikbaar die je eenvoudig aan je pagina kan toevoegen. (Bijvoorbeeld: Sliders, Afbeeldingen, Blogs, Knoppen etc.)

In deze les laten wij een aantal van deze modules zien. Om te begrijpen en ontdekken wat er allemaal mogelijk is, kan je het beste zelf proberen en experimenteren door modules toe te voegen aan je test pagina.

Modules voeg je toe door op de grijze + te klikken in een rij.

Tekst Module

De tekst module is misschien wel de meest gebruikte module van Divi. Deze wordt gebruikt voor alle teksten op een website. Het is ook mogelijk om in de tekstmodule afbeeldingen en video’s naast de tekst in te voegen, je hoeft hiervoor niet perse een aparte module te gebruiken.
De slimme editor van Divi maakt het je hiermee wel heel gemakkelijk om jouw website te maken.

Iedere module heeft een submenu vaak bestaand uit 3 pagina’s:

1.  Content: Hier stel je in wat de module toont. In dit geval is het tekst maar bijvoorbeeld bij de afbeelding module is dit een afbeelding.
2. Ontwerp: Hier kan je alle ontwerp instellingen instellen (zoals: Lettertype, Schaduw, Afstanden enz.) Let op! Deze instellingen gelden alleen voor de module die je geselecteerd hebt en overschrijven dus jouw standaard instellingen!
3. Geavanceerd: Dit is voor geavanceerde gebruikers die wat meer weten over CSS. Hier kan je jouw eigen CSS-code (custom style sheet) toevoegen. Doe dit alleen als je weet wat je aan het doen bent. En dan nog: als je instellingen aan het CSS wijzigt kan je dit beter in het algemene gedeelte doen en niet apart in de module.

Afbeelding Module

Afbeeldingen kan je zoals eerder gezegt ook toevoegen in tekst maar wanneer je afbeeldingen wilt toevoegen ergens waar geen tekst is of je wilt meer opties toevoegen aan het ontwerp van de afbeelding. (Zoals: Kaders, Animaties, Schaduwen) Dan is het handig om gebruik te maken van de afbeelding module.

Laad de module in op de pagina net zoals we hierboven voor de tekst module gedaan hebben. In de module instellingen onder content kan je je gewenste afbeelding inladen.

Afbeeldingen selecteren en/of uploaden

Wanneer je zoals hierboven een afbeelding wilt inladen komt het volgende scherm in het zicht. Hier kan je een afbeelding selecteren vanuit de WordPress media bibliotheek (eerder ge-uploade afbeeldingen)

Wanneer de door jou gewenste afbeelding er niet tussen staat kan je kiezen om een nieuwe afbeelding te uploaden. Dit kan je doen door in het menu “afbeelding uploaden” te selecteren of door een nieuw bestand naar het venster te verslepen. Vergeet niet de afbeelding de juiste naam te geven en de ALT en TITLE tag in te vullen in de media bibliotheek.

Volle breedte slider

Veel websites zijn voorzien van grote banners met (mooie) afbeeldingen die direct opvallen voor de bezoeker. Dit kan in Divi door gebruik te maken van een ander soort sectie.

Modules voor volle breedte

Ook voor de volle breedte sectie zijn er speciale modules ontwikkeld. Deze modules zijn ervoor gemaakt om over de volledige breedte van het scherm jouw boodschap zichtbaar te maken. Houdt er rekening mee dat een foto die op volle breedte staat, er op een telefoon anders uit ziet dan op een pc. Test dus goed uit hoe de afbeelding getoond moet worden en maak gebruik van o.a. de instellingen voor het uitlijnen.

Wil je een slider met afbeeldingen, teksten en call to action (knoppen), gebruik dan deze optie.