Kleurkader box maken met Div in WordPress met class css

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.

Logo cursus traing wordpress

Kleurkader box maken met Div in WordPress met class css

Er zijn een paar simpele stappen nodig om zelf een ​​contentbox of 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

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

Dit is de tekst in een gekleurd kader.

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 = 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 van je . Je kan zelf een class toevoegen en zo de 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 aanpassen van een .

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

DIV blok aanmaken of genereren

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


Meer informatie over Kleurkader box maken met Div in WordPress met class cssof info?

Wil je meer informatie? Veel bezoekers met interesse in Kleurkader box maken met Div in WordPress met class css bekeken ook de onderstaande handleidingen:


Scroll naar boven