Les 4: Child themes en code-aanpassingen

Als je CSS-aanpassingen maakt die verder gaan dan de Divi-aanpasser, doe je dat altijd in een child theme. Zo gaan je aanpassingen niet verloren bij een Divi-update. In deze les leer je een Divi child theme aanmaken en gebruiken.

Waarom een child theme?

Als je CSS direct aan het Divi-thema toevoegt, worden die aanpassingen overschreven zodra je Divi updatet. Een child theme erft alle stijlen van het parent theme (Divi), maar heeft zijn eigen style.css en functions.php waar jij veilig aanpassingen maakt.

Een Divi child theme aanmaken

Maak een nieuwe map aan op je server (via FTP of de bestandsmanager van je hosting) in wp-content/themes/. Geef hem een naam, bijv. divi-child.

Maak daarin een bestand style.css met deze inhoud:

/*
Theme Name: Divi Child
Template: Divi
Version: 1.0.0
*/

@import url("../Divi/style.css");

/* Jouw eigen CSS hieronder */

Maak ook een leeg bestand functions.php aan:

<?php
// Eigen functies hier

Activeer het child theme via Weergave → Thema’s. Je site ziet er precies hetzelfde uit — Divi Child erft alles van Divi.

CSS toevoegen

Voeg CSS toe aan het einde van je child theme style.css. Divi gebruikt relatief specifieke selectors, dus voeg body toe aan je selectors als je Divi-stijlen wilt overschrijven:

/* Koptekstkleuren aanpassen */
body h1, body h2, body h3 {
    color: #0f1923;
}

/* Knoppen afgerond maken */
body .et_pb_button {
    border-radius: 50px !important;
}

/* Navigatie lettergrootte */
body #top-menu li a {
    font-size: 15px;
}

Custom CSS via de Divi-aanpasser

Als alternatief voor het child theme kun je CSS ook toevoegen via Divi → Thema-opties → Aangepaste CSS of via Weergave → Aanpassen → Extra CSS. Dit is makkelijker maar heeft een nadeel: bij een thema-reset gaat het verloren. Voor kleine aanpassingen is het prima; voor grotere projecten altijd een child theme.

Divi-specifieke CSS-klassen

Divi geeft je de mogelijkheid eigen CSS-klassen toe te voegen aan elke sectie, rij of module via het “Geavanceerd” tabblad → CSS-klasse. Zo target je heel specifiek één element zonder andere elementen te beïnvloeden.

/* Alleen deze sectie een blauwe achtergrond */
.mijn-blauwe-sectie {
    background-color: #0070c9 !important;
}

Opdracht

Maak een Divi child theme aan. Voeg drie CSS-aanpassingen toe: een andere koptekstkleur, afgeronde knoppen en een aangepaste lettergroot voor de navigatie. Test of de aanpassingen werken en of ze na een Divi-update bewaard blijven.