Waar je meestal werkt in de grijze modules van je Divi Page Builder gaan we voor het wijzigen van een achtergrondkleur of -foto naar het groene en blauwe kader.
Aan de slag
Je hebt je pagina geopend met de Divi pagebuilder en je kunt nu klikken op de section (blauw) of row (groen) die je wilt bewerken. Klik op het tandwiel van het section of row vakje om instellingen te openen.
In onderstaand voorbeeld; als je de achtergrondafbeelding wilt wijzigen klik je daarvoor op het blauwe tandwiel. Wil je de achtergrondkleur van de tekst wijzigen dan klik je op het groene tandwiel.
Ik ga hieronder verder met uitleg over het aanpassen van de section (het blauwe kader).
De section opties
De section is verdeeld in drie groepen: Content, Design en Advanced.
Het eerste tabblad content gebruik je voor het wijzigen van de achtergrond.
In het tweede tabblad design kun je alle stylingsopties bepalen. Denk aan een schaduw of rand om je section heen.
Het tabblad Advanced gebruik je voor geavanceerde instellingen zoals CSS en zichtbaarheid.
- Klik op het groene vinkje om je wijzigingen in de module op te slaan.
Imagemodule Content opties
Background color: Kies een kleur voor je achtergrond.
Background image: Hier kun je je afbeelding uploaden vanuit de mediabibliotheek.
- Tip: Geef de afbeelding een passend formaat en passende omschrijving voor je deze upload.
Background gradiënt: Maak een kleurverloop in de achtergrond.
Background video: Voeg een achtergrondvideo toe.
Admin label: Standaard krijgt deze module het label section. Hier kun je dat aanpassen als je dat wilt.
Section Design opties
In het tabblad Design options kun je de stylingsopties aanpassen. Iedere section heeft een scala aan design mogelijkheden.
Layout: Kies een layout.
Dividers: Kies een scheidingslijn. Ga bijvoorbeeld voor golven, wolken of een schuine streep.
Sizing: Bepaal grote en uitlijning van de section. Let op dat wanneer dit niet meer op auto staat, de schaling van desktop naar mobiel niet altijd meer mooi aanpast. Je kunt dit controleren door onderin op het tablet of mobiel icoon te klikken.
Spacing: Pas marge en padding aan.
Border: Stel een randlijn in. Je kunt kiezen voor kleur, dikte en stijl.
Box Shadow: Maak een boxschaduw om de section heen.
Filters: speel met kleurinstellingen.
Transform: Maak de section bewegend. Laat het element bijvoorbeeld iets groter worden wanneer het wordt aangewezen.
Animation: Kies animatie stijlen.
Section Advanced opties
Hier kun je de o.a. de zichtbaarheid op verschillende apparaten instellen. Soms wil je bepaalde modules alleen laten zien op desktop of juist alleen op tablet en mobiele telefoon.
In het tabblad Advanced opties > Visibility kun je instellen voor welk apparaat de module zichtbaar is. Standaard staat dit ingesteld op zichtbaar voor desktop, tablet en mobiel en hoef je hier dus niets aan te veranderen.
Je kunt dit ook gebruiken wanneer je nog niet klaar bent met een section maar je deze wel wilt opslaan om er een volgende keer mee verder te gaan. Zet de Visibility dan voor alle apparaten op disable en voilà, het staat er wel voor jou maar nog niet voor je bezoekers.