WordPress website typografie stijlen met css en class

Het aanpassen van je WordPress website met CSS en zogenaamde classes geeft je veel meer mogelijkheden om de vormgeving en ontwerp van je website naar je hand te zetten.

Voorbeelden typografie stijlen met css met classes

De typografie van bepaalde onderwerpen kun je goed naar je hand zetten en er iets subtiels van te maken. Wil je bijvoorbeeld een inleiding aan het begin van een artikel plaatsen dan kun je de tekst in een ‘class’ zetten. Hier onder lees je hoe:


Stap 1: Je zet de tekst dan tussen de onderstaande code:

 <p class="inleiding">Dit is het tekstje voor je inleiding</p>


Stap 2: plaats de onderstaande tekst in je custom css van je WordPress thema:

p.inleiding {
font-size: 160%;
line-height: 140%;
color: #777777;
}


Zo kun je diverse stijlen aanmaken. Bijvoorbeeld voor kleine en mini-tekstjes:
p.klein {
font-size: 85%;
}
p.mini {
font-size: 70%;
}
p.colofon {
font-size: 60%;
}

Blij met deze design tip?

Heb je een training gevolgd en tevreden over de handleidingen en tips? Laat dan een review achter. Je helpt Arthur dan zijn werk sustainabel te maken. Bekijk ter inspiratie de reviews:

Bekijk reviews

Buttons maken met css met classes

Een gewone link ziet er in html zo uit:
<a href="https://www.cursuswp.com">Dit is een link</a>

Door een class-code toe te voegen creeer je eenvoudig een button. Dit doe je zo:


Stap 1: Je zet de tekst dan tussen de onderstaande code:

<a class="bestelbutton" href="https://www.cursuswp.com">Bestel product</a>

Dit is eigenlijk een gewone html link alleen is de class toegevoegd in het begin van de html.


Stap 2: plaats de onderstaande tekst in je custom css van je WordPress thema:

.bestelbutton {
    display: inline-block;
    background-color: #a1bf0b; /* AW buttonkleur */
    border: none;
    color: white;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    font-size: 100%;
    margin: 14px 2px 124px 2px !important;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 34px;
}


Het resultaat is deze button:

Schrijf een review


Ook interessant