Aangepaste CSS in Divi

door Maarten Hogeveen | 27 oktober 2019

Inleiding

Divi is momenteel het meest gebruikte WordPress thema in de wereld. Dat en het feit dat WordPress een marktaandeel van 34% heeft, maakt de kans groot dat u regelmatig een website bezoekt met Divi als thema. Misschien bouwt of onderhoud u zelfs wel een WordPress website met Divi.

Het gemak waarmee grote hoeveelheden content gemaakt kan worden en de flexibiliteit in het ontwerpen daarvan is wat mij betreft dé grote kracht van Divi. Alles kan aangepast worden. Of het nou door Divi geïntegreerde CSS is of niet. In dit artikel duik ik in de wereld van de door Divi genoemde ‘aangepaste CSS’. Waarom zou je aangepaste CSS gebruiken, waar kan het toegevoegd worden, en wat voor CSS moet ik gebruiken voor het door mij gewenste effect? Deze vragen zullen onder anderen aan bod komen, inclusief wat handige ‘tips and tricks’ tussendoor.

Waarom zou ik aangepaste CSS toevoegen in Divi?

Aanpassingen aan de stijl kunnen binnen Divi grofweg ingedeeld worden in twee categorieën: geïntegreerde CSS en aangepaste CSS. De geïntegreerde CSS is weergegeven in een prettig interface, en een wijziging is meteen te zien op de pagina (mits u de visual builder gebruikt).

Nu zult u zich wel afvragen: ‘Waarom zou ik aangepaste CSS gebruiken?’ Het antwoord is erg simpel. Divi heeft ongelofelijk veel CSS stijl aspecten geïntegreerd, maar bij lange na niet allemaal. Wilt u iets doen wat niet ingebouwd is in Divi, dan is het tijd om aangepaste CSS te gebruiken. Daarnaast kunt u met aangepaste CSS de ::before and ::after pseudo-elementen gebruiken. Dit kan niet zonder zelf aan de slag te gaan met wat (simpele) CSS. Hierover later meer.

Waar kan aangepaste CSS toegevoegd worden in Divi?

Er zijn 7 plekken waar aangepaste CSS toegevoegd kan worden in Divi. Hieronder een overzicht van deze plekken en waar je ze kunt vinden. De uitleg wordt gegeven met de pagina die u aan wilt passen  en een ingeschakelde visual builder als start positie.

Systeemaanpasser van het thema

In de ‘systeemaanpasser van thema’ is een extra CSS veld te vinden. De CSS in dit veld wordt toegepast op de hele site. De systeemaanpasser is links bovenin uw scherm te vinden als subkop onder de kop met uw websites naam.

Tip!
Als u het prettig vindt om al uw CSS op één plek te hebben, dan kunt u in het geavanceerd tabblad onder ‘CSS-id en -klasses’ de desbetreffende sectie, rij of module een CSS id of class toewijzen. Deze kunt u dan gebruiken in het extra CSS veld in de systeemaanpasser. Let op: in de sectie, rij of module moet alleen de naam van de id of class geschreven worden. Als u ze in de systeemaanpasser gebruikt, moet u #idnaam of .classnaam schrijven waarna u tussen de accolades {} uw CSS stijl aspecten schrijft. Bijvoorbeeld:

1 #id {
2 height: 10px;
3 }
4
5 .class {
6 border: 1px solid black;
7 }

Pagina, Bericht of Andere CPT (Custom Post Type)

De aangepaste CSS in een pagina, bericht of andere CPT wordt alleen daarop toegepast. Wilt u bijvoorbeeld per pagina een andere achtergrond voor uw header, dan kunt u dit aangepaste CSS veld gebruiken.

Dit veld is te vinden door te klikken op het paarse icoon gecentreerd onderaan de pagina, het tandwieltje, het ‘geavanceerd’ tabblad in het verschenen venster, en daarna aangepaste CSS.

Sectie, Rij en Module

Aangepaste CSS voor een sectie, rij of module wordt toegepast op het betreffende element. Deze drie plekken zijn samen gegroepeerd, omdat de plek waar het aangepaste CSS veld te vinden is bij alle drie (vrijwel) hetzelfde is.

Om dit veld te vinden zweeft u met uw muis over het gedeelte waar u de aangepaste CSS in wilt zetten. Klik op het tandwieltje, daarna op het ‘geavanceerd’ tabblad in het verschenen venster, en ten slotte op aangepaste CSS.

Tip!
Een handige manier om een grotere variëteit aan lay-out opties te krijgen, is het gebruik maken van flex-box. Dit is een CSS ruimte distributie systeem die erop gericht is inhoud met onbekende dimensies op een dynamische manier weer te geven. Met flex-box is het makkelijk om twee rijen of modules ten opzichte van elkaar te centreren zonder dat ze dezelfde dimensies hebben. U kunt flex-box gebruiken door een aantal regels CSS toe te voegen in de aangepaste CSS van uw secties, rijen en/of modules. Lees hier een zeer behulpzaam artikel over flex-box!

Inline

Inline styling kan op twee plekken in Divi: modules waar tekst in geschreven kan worden en de code module. Inline styling is het stijlen van HTML elementen door in de HTML tag CSS styling toe te voegen. Zie hieronder een voorbeeld:

<p style=”font-size: 14px; font-weight: bold; color: red;”>Hallo lezer!</p>

Soms is hetgeen wat u voor elkaar wilt krijgen net niet te doen met de geïntegreerde CSS opties, en dan kunt u ervoor kiezen inline styling te gebruiken.

Een voorbeeld van wanneer u inline styling zou willen gebruiken is bijvoorbeeld het kleuren van één woord in een zin. Dit kan in Divi door tijdens het schrijven van tekst in een tekstvak in plaats van het ‘Visueel’ tabblad te gebruiken het ‘Tekst’ tabblad te gebruiken.

<p style=”color: black;”>Hallo lezer, <span style=”color: red;”>dit</span> woord is nu geel, terwijl de rest van de zin zwart gekleurd is!</p>

Naast het veranderen van tekst is het ook mogelijk om HTML direct in uw website te zetten met de code module. U kunt er dan voor kiezen de HTML te stijlen met inline styling of u kunt de HTML elementen classes geven. Dan kunt u op een andere plek, bijvoorbeeld de aangepast CSS van de pagina de classes stijl aspecten toewijzen. De laatste opties is het meest efficient, want dan hoeft u niet meerdere malen dezelfde CSS te schrijven.

In het voorbeeld hieronder ziet u dat door de twee <p> elementen in de HTML een klasse van ‘groen’ te geven beide gestijld worden aan de hand van de stijl aspecten die u in de CSS zet. Het gebruiken van klasses en id’s (zogeheette selectoren) zorgt ervoor dat hele specifieke HTML elementen gestijld kunnen worden, en voorkomt dat u meerdere malen dezelfde CSS moet schrijven. Klik op de links om meer te lezen of klasses en id’s!

HTML in code module

1 <div class=”rij”>
2 <p class=”groen vetgedrukt”>
3 Hallo lezer!
4 </p>
5 <p class=”groen”>
6 Bedankt voor het lezen 🙂
7 </p>
8 </div>
9
10

CSS in de aangepaste CSS van de pagina

1 .rij {
2 display: flex;
3 }
4 .groen {
5 color: green;
6 width: 50%;
7 }
8 .vetgedrukt {
9 font-weight: 900;
10 }

Style.css

Het is ook mogelijk om de stylesheets van Divi direct aan te passen. Dit is echter niet aan te raden, omdat er grote risico’s aan vastzitten. U kunt belangrijke CSS verwijderen of veranderen zonder dat u daar erg in had. Zelfs als alles goed gaat, zullen de wijzigingen die u doorvoert verdwijnen nadat Divi een update krijgt. Dit kunt u uit de weg gaan door een child theme te maken, maar dat is vaak niet de moeite waard als u geen grote en structurele wijzigingen wilt doen aan uw website.

 Dat zijn alle zeven de plekken waar aangepaste CSS toegevoegd kan worden in een website gemaakt in Divi. Hierna komt nog een korte samenvatting over het gebruik van :: before and ::after pseudo-elementen.

Ik wil de standaard Divi CSS aanpassen. Hoe doe ik dat?

Het kan zijn dat u de stijl van iets probeert aan te passen met een van de voorgaande technieken, maar dat het niet lukt. Dat kan zijn, omdat Divi standaard CSS heeft die achter de schermen draait. Dit zorgt voor de standaard opmaak van bijvoorbeeld secties, rijen en modules. Het meeste hiervan valt aan te passen. U moet alleen weten hoe.

De eerste stap in het aanpassen van Divi’s standaard CSS is ontdekken welke klasse of id u moet aanpassen. De makkelijkste manier om dit te doen is in de dev (developer) omgeving in uw browser. Hieronder zal kort een beschrijving staan van hoe u deze vindt in Chrome, Firefox, en Safari. Dit werkt alleen als de visual builder is uitgeschakeld.

  • Google Chrome: Rechter klik op het element dat u wilt aanpassen en klik op inspecteer.
  • Mozilla Firefox: Rechter klik op het element dat u wilt aanpassen en klik op element inspecteren.
  • Safari: De dev omgeving in Safari moet eerst ingeschakeld worden. Open Safari, ga naar de voorkeuren van Safari (cmd + ,), navigeer na het ‘Geavanceerd’ tabblad, en klik onderaan op laat dev menu zien. Daarna kunt u op het element dat u wilt aanpassen op de rechter muisknop drukken en klik dan op inspecteer element.

Nu kunt u in het dev paneel op onderzoek uit! In alle drie de beschreven programma’s kunt u de HTML structuur van de website zien, en de stijlen die toegepast zijn op deze HTML elementen. Ook hebben alle drie de programma’s een knop die eenmaal aangeklikt de mogelijkheid geeft over de pagina te zweven en het element aan te klikken die u wilt aanpassen. Dit proces heeft wat oefening nodig, maar als u dit onder de knie krijgt, bent u al verder dan de meeste internet gebruikers!

Als u het juiste element hebt gevonden, dan kunt u eens kijken naar de stijlen die toegepast op dat element. De stijlen zijn allemaal ondergebracht onder selectors (id’s en klasses of combinaties van beide). De stijlen kunnen hier ‘live’ aangepast worden. Vind de specifieke selector en de stijl(en) die u wilt aanpassen, probeer het live, schrijf de selector en de aanpassingen op (of maak een screenshot), en pas deze toe op één van die in dit artikel beschreven plekken.

::before & ::after pseudo-elementen

::before & ::after pseudo-elementen (ook wel voor en na genoemd) zijn extra HTML elementen die je kunt toevoegen aan elke sectie, rij, en module in Divi. Het veld hiervoor is te vinden op dezelfde plek als het aangepaste CSS veld.

Om een voor of na element te creëren, moet één regel CSS toegevoegd worden die verder nooit nodig is:

content: ‘’;

Tussen de haakjes kan een groot aantal dingen geplaatst worden. Afbeeldingen die lokaal zijn opgeslagen, afbeeldingen op het internet (met een url), normale tekst, en iconen om een paar te noemen. Het is zelfs mogelijk niks tussen de haakjes te zetten. Dan kan het ‘lege voor of na element te gebruiken als een vorm door de hoogte, de breedte, en een achtergrond kleur toe te kennen.

Experimenteer eens met de ::before & ::after pseudo elementen en ontdek de vrijwel ongelimiteerde mogelijkheden!