Het aanpassen van je WordPress website met CSS en een zogenaamde class of span geeft je veel meer mogelijkheden voor de vormgeving en ontwerp van je website. Lees de handleiding.
IN DEZE HANDLEIDING:
Wat is een CLASS of SPAN in CSS?
Een class of span is een HTML ontwerpstijl van tekst voor je website. Classes en Spans houden je website veel overzichtelijker en maken het onderhoud van je website veel eenvoudiger. Ik werk zelf altijd met classes en spans en maak nooit tekst op in een pagina. Ik raad mijn cursisten en opdrachtgevers ook aan om altijd van classes en spans gebruik te maken, helemaal voor grotere websites. Hoe groter de website, hoe belangrijker het wordt. Het is even wennen en niet voor beginners. Vandaar deze uitgebreide handleiding.
Wat is CSS?
Met CSS kun je de vormgeving en ontwerp van meerdere webpagina bepalen en kun je effecten bereiken die met HTML tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle ‘h2 kopteksten' 24 pixels groot moet zijn in de kleur blauw en met het lettertype ‘Open Sans'. Het is dus veel flexibeler dan HTML wat de vormgeving betreft. Lees meer over CSS en de mogelijkheden:
- Zelf simpel HTML en CSS maken leren in WordPress voor beginners
- CSS Element inspecteren WordPress aanpassen browser
- Typografie stijlen | css, class, span opmaakstijlen maken WordPress website
- Verloop gradient achtergrondkleur overlay maken met CSS en page builder
- CSS aanpassen Beaver builder basis voor beginners
- Responsive Breakpoints Mobiel Tablet desktop aantal pixels
Waarom CLASS of SPAN gebruiken?
Lees hieronder waarom het altijd goed is classes en spans te maken:
CLASS en SPAN zijn belangrijk voor onderhoud
Classes en Spans stellen je in staat om alle stijlelementen van een website in een document onder te brengen. Je hoeft maar een document hoeft te veranderen om alle pagina's van je site aan te passen. Dit gebeurd in het CSS bestand van je WordPress thema. Wil je bijvoorbeeld de kleur van de naam van al je medewerkers op je site veranderen of het lettertype dat je in je paragrafen gebruikt? Dan verander je het CSS document en alle pagina's nemen deze stijl dan over. Met HTML zou je al deze wijzigingen in alle pagina's moeten aanbrengen, wat heel veel werk met zich meebrengt.
CLASS en SPAN zijn beter voor SEO (Zoekmachine-optimalisatie)
De pagina's van je WordPress website worden kleiner doordat je minder code gebruikt. Je WordPress website zal sneller laden waardoor je weer hoger in Google komt.
CLASS en SPAN werken altijd in elke browser
CSS code is browser-vriendelijk. Het wordt ondersteund door alle browsers: Chrome, Firefox, Safari en Internet Explorer 3 en hoger. Lagere browsers negeren CSS waardoor het daar niet voor problemen zorgt. Lees meer hierover op:
www.w3schools.com/tags/tag_span.asp
Zelf CLASS in CSS maken
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. Bijvoorbeeld:
Voorbeelden CLASS
Dit is het tekstje met de class (opmaakstijl) die ‘inleiding' heet.
Dit is het tekstje met zonder class. Gewone standaard opmaak dus.
Dit is het tekstje met de class (opmaakstijl) die ‘klein' heet.
Dit is het tekstje met de class (opmaakstijl) die ‘mini' heet.
Dit is het tekstje met de class (opmaakstijl) die ‘colofon' heet.
Hier onder lees je hoe je het bovenstaande met behulp van een class kan maken:
Handleiding CLASS stijlen maken met CSS
Stap 1: Je zet de tekst op je pagina of bericht in WordPress dan tussen de onderstaande code:
Dit is het tekstje voor je inleiding
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%; }
Zelf een SPAN in CSS maken in HTML
Wat is het verschil tussen een class en een span?
Met ‘Span' element kan een klein deel van een HTML-document worden ingesloten. Het element ‘Span' is een inline-element en breekt de tekst niet op in paragrafen. Je kan dit gebruiken door accenten in je tekst aan te geven. In het onderstaande voorbeeld zie je hoe je bijvoorbeeld een woordje rood kan maken.
Voorbeeld SPAN
Dit is het tekstje met de class (opmaakstijl) die ‘inleiding' heet.
Dit is het tekstje met de class (opmaakstijl) die ‘klein' heet.
Dit is het tekstje met de class (opmaakstijl) die ‘mini' heet.
Handleiding SPAN stijlen maken met CSS
Zet de onderstaande CSS-code voor een span in je Custom CSS van je thema of in je child theme:
span.rood { color: #ff0000; }
Plaats de onderstaande code op je webpagina:
<span class="rood">Deze tekst wordt rood</span>
Het bovenstaande voorbeeld is dus zo gemaakt:
Dit is het tekstje met de class (opmaakstijl) die ‘klein' heet.
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: |
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
CSS van WordPress Gutenberg blokken aanpassen
Wil je CSS van Gutenberg blokken aanpassen dan kan dat op verschillende manieren. Lees hier de uitgebreide handleiding:
CSS van Gutenberg blokken aanpassen
Meer handleidingen over blokken, CSS en Gutenberg
- Redux framework WordPress plugin Gutenberg blokken page builder
- Horizontale lijn maken regelscheidingsteken toevoegen WordPress
- Spectra Ultimate Addons Gutenberg extra blokken WordPress plugin
- Gutenberg blokken als widgets in footer WordPress 5.8
Links over CSS en span
how-to-make-an-inline-element-appear-on-new-line-or-block-element-not-occupy-th
Meer weten over css, class, span en opmaakstijlen voor WordPress webdesign
Meer weten of hulp nodig bij typografie stijlen, css, class, span en opmaakstijlen voor WordPress webdesign? Volg dan de onderstaande WordPress cursus: