Kleurkader / box maken aan WordPress met class css en div

Er zijn 2 eenvoudige stappen nodig om zelf een ​​contentbox of kader te maken met behulp van CSS. Op die manier kun je je zelf blokken voor tekst ontwerpen.

Maak een DIV aan

Om zelf kaders te maken voor tekst of beeld moet een zogenaamde DIV aanmaken. Lees de onderstaande handleiding hoe je makkelijk zelf kaders kan maken.
Lees meer over een Div

Plaats de onderstaande code voor een kader op je pagina

Plak de onderstaande HTML-code in je WordPress editor. In Gutenberg is dit een HTML-blok.
Voor gevorderden: Je kunt de code ook overal in je thema laten aansluiten met je PHP-code.
De code begint en eidigt met een code voor een DIV. Alle haakjes dien je te kopieëren anders werkt het niet.
<div class="kader-rood">Dit is de tekst in een gekleurd kader.</div>

Plaats deze code in je Custom CSS

Kopieer en plak alle CSS uit het onderstaande kader aan het einde van het style.css-bestand van je child thema’s vóór het begin van de Mediaquery’s of in de Custom CSS van je WordPress thema. Je kan zelf een class toevoegen en zo de kleur van je kader veranderen.

.kader-blauw,
.kader-grijs,
.kader-lichtgrijs,
.kader-leger,
.kader-groen,
.kader-paars,
.kader-rood,
.kader-geel {
  margin: 0 0 25px;
  overflow: hidden;
  padding: 20px;
  color: #919191;
        font-family: Georgia,"Times New Roman",Times,serif;
        font-style: italic;
  font-size: 18px;
}

.kader-blauw {
  background-color: #F0F8FF;
  border-left: 8px solid #CEE1EF;
        font-size: 18px;
}

.kader-grijs {
  background-color: #e2e2e2;
  border-left: 8px solid #bdbdbd;
        font-size: 18px;
}

.kader-lichtgrijs {
  background-color: #F5F5F5;
  border-left: 8px solid #DDDDDD;
        font-size: 18px;
}

.kader-leger {
  background-color: #737a36;
  border: 1px solid #000000;
}

.kader-groen {
  background-color: #d9edc2;
  border: 1px solid #b2ce96;
}

.kader-paars {
  background-color: #e2e2f9;
  border: 1px solid #bebde9;
}

.kader-rood {
  background-color: #f9dbdb;
  border-left: 8px solid #D95762;
        font-size: 18px;
}

.kader-geel {
  background-color: #fef5c4;
  border-left: 8px solid #FADF98;
}

Pas CSS aan voor kleur en ontwerp kaders

Pas nu zelf waar nodig je CSS aan voor kaders en blokken. Dit doe je in de bovenstaande code. Je kan bijvoorbeeld de grootte en lettertype aanpassen van een tekstblok.

Ruimtes en gedrag van een kader aanpassen

Lees deze uitgebreide handleiding:
developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

Kaders en layout maken in WordPress

Je kunt dus classes (stijlen) toevoegen in het aanvullende CSS-menu van WordPress en hiernaar verwijzen om zelf blokken en kaders te ontwerpen. Meer over lay-out, ontwerp en vormgeving leer je tijdens één van de cursussen waarbij we uitgebreid ingaan op het design van je website:

Meer handleidingen over classes en Css voor WordPress