Super leuk zo’n WordPress thema, maar er zijn altijd dingetjes op je website die uiteindelijk net niet zo worden zoals jij het wilt. En dat is best vervelend als je uren aan het uitzoeken bent hoe je net dat ene kleurtje anders krijgt, een kader maakt om dat blokje of hoe je de breedte van je tekst kleiner kunt maken. Om dit uiteindelijk toch voor elkaar te krijgen kun je CSS of HTML gebruiken. Je ziet het misschien niet, maar elke website is gemaakt met code. Ook als je een kant-en-klaar WordPress thema gebruikt zit daar een uitgebreide collectie aan codes achter. Met HTML en CSS kun je pagina’s en blogs opmaken om je website of blog precies zo te krijgen zoals jij het wilt. En dat is best handig. Nu is het heel normaal als je geen kaas hebt gegeten van codes, en daarom zijn er handige bronnen die je kunt gebruiken om toch die ene code te vinden die jij nodig hebt. In dit artikel vertel ik je meer over HTML en CSS en ontdek je waar je de juiste codes vandaan haalt.
Wat is HTML en CSS?
HTML staat voor ‘Hyper Text Markup Language’, oftewel: de opmaaktaal. Met HTML wordt een website pagina weergegeven. Denk aan de kleuren, afbeeldingen, knoppen, links in de tekst, enzovoorts. Alles wat je ziet op een website is dus gemaakt met HTML. Om vervolgens de vormgeving van elementen op een pagina, zoals knoppen, afbeeldingen en kleuren aan te passen aan jouw wensen, is CSS nodig. CSS staat voor ‘Cascading Style Sheets’. Hiermee bepaal je uiteindelijk hoe je website eruit komt te zien. Je vindt deze codes in elk WordPress thema in het style.css bestand. Het is niet zo lastig te leren hoe CSS werkt. Het is eigenlijk heel simpel:
- Bepaal concreet in welk element je wat wilt aanpassen;
- Zoek hiernaar op Google en zet er CSS achter;
- Dan krijg je diverse codes en handleidingen specifiek voor jouw vraag.
Werken met CSS en HTML in WordPress
In WordPress kun je makkelijk werken met CSS. Je hebt zoals gezegd dat style.css bestand, maar je hoeft daar niet naar op zoek om CSS toe te voegen aan je website. Het verschilt een beetje per thema waar je de editor vindt om CSS in toe te voegen, maar in ieder geval vind je deze in de customizer. Bij veel thema’s, zoals deze, kun je ook gewoon in de thema opties CSS toevoegen. Om de CSS editor in WordPress te openen klik je hier op:
- Ga naar Weergaven en klik op Customizer;
- Klik nu op Extra CSS;
- Vul daar je codes in en klik bovenaan op Publiceren.
Elk HTML element op je website kun je extra vormgeven met CSS. Voor een specifiek element gebruik je dus HTML codes in je CSS. Je kunt ook nog dezelfde HTML elementen op verschillende manieren vormgeven door een extra class of id toe te voegen.
Voorbeeld CSS
Heb je het idee dat je Russisch aan het lezen bent? Hier een voorbeeld. Met deze CSS-code maak je al je H1 tekstkoppen oranje:
h1 {
color: orange;
}
Voorbeeld HTML
Wil je weten hoe en waar je met HTML codes je teksten in je blog aanpast? Klik in de WordPress editor (dus waar je je blog schrijft) rechtsboven op ’tekst’ in plaats van ‘visueel’. Daar kun je extra HTML toevoegen en al bestaande HTML in actie zien. Dit is bijvoorbeeld een HTML-code om een H2 tussenkop te maken:
<h2>Voorbeeld</h2>
Of maak je tekst dik gedrukt:
<strong>CSS-code</strong>
Voor dit soort dingen heb je natuurlijk de tekst-editor van WordPress niet nodig, want dit pas je gewoon aan in de visuele editor. Het is daarom slechts een voorbeeld. Dingen die je niet kunt aanpassen in de visuele editor zijn bijvoorbeeld het lettertype en de breedte van een bepaald element. Daarvoor kun je HTML gebruiken in de tekst-editor.
CSS en HTML zijn ook de manier waarop je knoppen maakt in bijvoorbeeld een instagram-link pagina als je niet werkt met een WordPress thema met een builder. En zo zijn er voor zowel HTML als CSS honderden codes die je voor elke specifieke opmaak kunt gebruiken. Handig toch?
Pagina voor Instagram bio gemaakt met CSS en HTML
Meer leren over CSS en HTML en jouw codes vinden
HTML en CSS zijn zo uitgebreid dat het onmogelijk is je alles te leren in één blog. Ikzelf Google ook nog steeds regelmatig naar specifieke codes. Maar je kunt het jezelf wel stukken makkelijker maken met deze website.
W3Schools
Via W3Schools ga je stap voor stap door de opmaaktaal en vind je de codes én variaties voor op je eigen website. Ook kom je er snel achter hoe een CSS code is opgebouwd en hoe een HTML tekst precies in elkaar steekt. Je vindt er bijvoorbeeld codes voor achtergrondkleuren, lettertypen, tekstkleur, transparantie, blokken maken, lijnen maken en nog veel meer.
Als beginner kan het best intimiderend zijn, al die codes. Je hebt geen idee wat waar hoort en waar je wat überhaupt moet zoeken. Toch is het niet zo lastig als dat het lijkt. Wees heel specifiek in hetgeen je zoekt, dan vind je vaak precies wat je nodig hebt.
Om rekening mee te houden
Als je aan de slag gaat met CSS is het verstandig een child theme te gebruiken. Een child theme is een thema dat alle functionaliteiten van het bovenliggende theme, ook wel parent theme genoemd, overneemt. Hiermee kun je je thema aanpassen zonder daadwerkelijk het parent theme aan te passen.
Hier lees je alles over het WordPress child theme en hoe je het installeert op je website.
Voorbeeld
Ik gebruik het WordPress thema Impreza, maar het thema dat is geactiveerd op deze website en welke ik dus ook aanpas is Impreza Child. Het ziet er dus precies hetzelfde uit en werkt hetzelfde, alleen hiermee voorkom ik dat ik aan dat hoofdthema dingen moet aanpassen. Bij dit thema kun je het child theme gewoon makkelijk op je website installeren zoals het parent theme, maar er zijn ook veel thema’s waar je handmatig een child theme moet aanmaken.
Wil je je website precies zo krijgen zoals je het in je hoofd hebt? Of mist je thema aanpasmogelijkheden van bepaalde details op je website? Denk eens aan het gebruik van CSS en HTML!
Wil je meer inspiratie en praktische tips ontvangen over ondernemen, succesvol bloggen of het maken van een winstgevende website? Meld je dan hier aan!
In dit artikel staat een affiliatie link.
