Er zijn een paar simpele 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. Lees de handleiding.

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.

Voorbeeld

Voorbeeld html en CSS

Zo maak je het. Plaats dit in een html Gutenberg blok

<div class='kader-rood'>Dit is de tekst in een gekleurd kader.</div>

Plaats dit in je CSS.

  .kader-rood {
    border: 2px solid #222;
    height: 120px;
    width: 400px;
    background: #dd0000;
    color: #fff;
    padding: 20px;
  }

Style

Je kan de stijlen met style ook integreren. Alleen werkt het dan alleen voor dat element en niet voor je hele website. Bijvoorbeeld:

<style>
  .kader-rood {
    border: 2px solid #222;
    height: 120px;
    width: 400px;
    background: #dd0000;
    color: #fff;
    padding: 20px;
  }
</style>
<div style class='kader-rood'>Dit is de tekst in een gekleurd kader.</div>

Opmerking
In het voorbeeld moet je style class= aan elkaar schrijven.
Dus niet style=”” class=”kader-rood”

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;
 }

Je kan de CSS nog vereenvoudigen door de border allemaal onder 1 selector te zetten, maar ik heb het even zo gedaan om het inzichtelijk te maken voor beginners.

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:

WordPress Bootcamp all-in one spoedcursus

Geplaatst: 25 april 2014

All-in-one Wordpress training. Basis, design en SEO. In 3 dagen (Amsterdam, Den Haag en Antwerpen) of 5 ochtenden online maak je je site met deze spoedcursus.

Designcursus WordPress voor ontwerpers en vormgevers

Geplaatst: 27 oktober 2010

Cursus WordPress speciaal voor grafisch ontwerpers, designers, illustratoren en creatieven. Perfecte basis voor ontwerpen en vormgeven van WordPress websites.

WordPress Designcursus ontwerp en vormgevingstraining

Geplaatst: 25 januari 2011

WordPress designcursus voor ontwerpers, vormgevers en creatieven. Ideaal voor ontwerpen voor websites en webdesign. Geen standaard thema’s maar eigen design.

WordPress Pop-up Bootcamp spoedcursus op maat

Geplaatst: 12 januari 2017

Organiseer zelf je WordPress Bootcamp training. Werk in deze spoedcursus in 3 dagen in een klein groepje aan meerdere WordPress sites. Overal in Nederland en België.

Meer handleidingen over classes en Css voor WordPress

• Css, class, span stijlen maken opmaak WordPress website
• Gebruik class voor layout geen html page builder opmaak
• CSS aanpassen specifieke pagina en berichten in WordPress

DIV blok aanmaken of genereren

Je kan een DIV blok met bijvoorbeeld een kolom aanmaken of genereren
https://html-css-js.com/css/generator/column