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.
IN DEZE HANDLEIDING:
- 1 Maak een DIV aan
- 2 Plaats de onderstaande code voor een kader op je pagina
- 3 Plaats deze code in je Custom CSS
- 4 Pas CSS aan voor kleur en ontwerp kaders
- 5 Ruimtes en gedrag van een kader aanpassen
- 6 Kaders en layout maken in WordPress
- 7 WordPress Bootcamp all-in one spoedcursus
- 8 Cursus WordPress op maat beginners & gevorderden
- 9 Designcursus WordPress voor ontwerpers en vormgevers
- 10 WordPress Pop-up Bootcamp spoedcursus op maat
- 11 DIV blok aanmaken of genereren
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
CSS aanpassen in WordPress
Je moet eerst wat basisprincipes weten van CSS.
- Wat is de CSS code die ik nodig heb?
- Hoe achterhaal ik de CSS code?
- Kan ik zelf CSS code maken?
- Waar zit ik deze code neer?
De basis van CSS aanpassen in WordPress leer je hier:
CSS aanpassen en toevoegen voor beginners of volg onze CSS training op maat.
Meer over kleuren en kleurenschema’s
Ik ben eigenlijk al vanaf mijn kunstacademie-opleiding gefascineerd door kleuren en kleurgebruik. Ik heb een eigen kleurensysteem opgezet. Al met al heb ik hier honderden uren inzitten.
Veel lezers maken hier gebruik van voor hun WordPress websites. Meer weten over deze kleuren? Kijk dan op:
GoldenRatioColors.com
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
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.
Cursus WordPress op maat beginners & gevorderden
POPULAIR Wordpress cursus of training op maat voor gevorderden of voor beginners. Haal zo veel mogelijk uit je WordPress website. Leer je website maken op elk niveau.
Designcursus WordPress voor ontwerpers en vormgevers
Cursus WordPress speciaal voor grafisch ontwerpers, designers, illustratoren en creatieven. Perfecte basis voor ontwerpen en vormgeven van WordPress websites.
WordPress Pop-up Bootcamp spoedcursus op maat
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
- Kleurkader box maken met Div in WordPress met class css
- Gebruik class voor layout geen html page builder opmaak
- Css, class, span stijlen maken opmaak WordPress website
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