Extra CSS toevoegen voor je affiliatewebsite

Nu we de customizer instellingen hebben ingesteld, gaan we kijken naar de CSS en opmaak van de website. We gaan wat extra CSS toevoegen aan je website, om een aantal elementen net even wat mooier te weergeven. Zo gaan we onder andere hmooie wist-je-dat-blokken maken en wat overige opmaak toevoegen. Ik leg dit uit aan de hand van stappenplannen en uitgebreide uitleg. Zo weet je ook waarom je een bepaalde code gebruikt.

Vooraf: De CSS voorbeelden werken goed op websites die draaien op het GeneratePress thema en die gebruikmaken van de Rank Math SEO plugin.

Het lichtgewicht WordPress-thema dat wij gebruiken 

GeneratePress

Snel thema

geschikt voor vrijwel alle projecten

Gratis versie beschikbaar

Wij gebruiken de Premium versie van GeneratePress voor al onze grote websites

MijnOnlineInkomen is ook gebouwd in GeneratePress

Bekijk mijn uitgebreide GeneratePress review

Bekijk dit thema

Wat is CSS?

CSS is een opmaaktaal die wordt gebruikt om de visuele stijl en lay-out van een webpagina te bepalen. De afkorting staat voor Cascading Style Sheets. Je kan CSS toepassen op o.a. elementen zoals tekst, afbeeldingen, knoppen en formulieren. Je kan deze met CSS code opmaken, zodat ze er aantrekkelijker uitzien en/of beter werken op verschillende apparaten en schermformaten. Door CSS te gebruiken, kun je de kleuren, lettertypen, marges, afstanden en andere visuele elementen van je website aanpassen. Iets wat ook op een affiliatwebsite erg handig is.

Het gebruik van /* en */ in CSS

Alles wat we in de extra CSS zetten van WordPress ziet jouw website als een code. De website probeert deze code dan te begrijpen.  /* */ in CSS is een manier om commentaar toe te voegen aan je CSS-code. Commentaar is tekst die is opgenomen in de CSS-code maar die niet wordt weergegeven op de website zelf. In plaats daarvan is het bedoeld als uitleg of notitie voor de iemand die de code bekijkt. Ook voor jezelf is het handig om per CSS-code uit te schrijven wat deze doet. Anders vergeet je dit snel (ik spreek uit ervaring 😉). In de onderstaande voorbeelden zie je hoe dit er uit ziet.

Hoe voeg je eenvoudig CSS toe in WordPress?

• Stap 1: Ga naar de Customizer. Dit kan worden gedaan door in de WordPress-administratiepanel te gaan naar “Weergave” en vervolgens te klikken op “Aanpassen”.
• Stap 2: Klik op “Extra CSS”. Dit is de optie die je nodig hebt om extra CSS toe te voegen aan je site.
• Stap 3: Voeg je CSS-code toe
• Stap 4: Bekijk het resultaat. Nadat je je CSS-code hebt toegevoegd, kun je de veranderingen direct in het live preview gedeelte zien. Je kan ook op publiceren drukken en de website zelf bekijken.

Vier voorbeelden van CSS

Ik ga je in deze cursus niet een CSS  opleiding voor gevorderden geven. Dit is ook niet nodig voor op een gemiddelde WordPress website. Online kan je veel goede gratis informatie vinden om CSS te leren. Mocht je na deze cursus interesse hebben, dan kun je dit eenvoudig zelf oppikken. Hieronder ga ik je wel wat basis meegeven aan de hand van voorbeelden met daarbij uitleg.

Vooraf: Deze codes hoef je niet in te voeren op je website! De meeste codes kun je namelijk in de customizer zelf al aangeven, zonder een code te hoeven gebruiken. De codes hieronder dienen als voorbeeld.

/*CSS-code die de kleur van een link op je website verandert in rood*/ 
a {
color: red;
}

In dit voorbeeld verwijst “a” naar de link-elementen op je website, terwijl “color: red” de kleur van de link verandert in rood.

/*verander de achtergrondkleur van de pagina*/
body {
background-color: #f2f2f2;
}

In dit voorbeeld verandert “body” de achtergrondkleur van de hele pagina naar een lichtgrijze tint met de hexadecimale waarde #f2f2f2.

/*kleur van de button aanpassen*/
button {
background-color: #007bff;
color: #fff;
}

In dit voorbeeld verandert “button” de achtergrondkleur van de knop naar #007bff (een blauwe tint) en de kleur van de tekst op de knop naar wit (#fff)

Meerdere dingen in één CSS code aangeven

Je kan ook meerdere dingen aanpassen in één CSS code

/*paragraaf aanpassen*/
p {
    color: red;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

In dit voorbeeld is “p” de selector, die verwijst naar alle paragrafen op de pagina. De CSS-eigenschappen binnen de accolades geven aan dat de tekstkleur rood moet zijn, de grootte van het lettertype 16 pixels moet zijn en het lettertype Arial of een standaard sans-serif lettertype moet zijn.

Wist je dat: Je kan CSS code eenvoudig online uittesten op bijvoorbeeld CSSPortal of W3schools

Aantal CSS codes voor jouw affiliate website

Nu gaan we een aantal codes toevoegen aan je website. Dit ter extra opmaak. Hoewel dit niet essentieel is, vind ik het wel handig om meteen te doen. Zoals ik in de inleiding al zei, deze codes werken sowieso voor websites met GeneratePress en RankMath SEO.

Wist-je-datjes

Google houdt van extra opmaak in artikelen. Hierbij kun je denken aan een leuke afbeelding (met alt-tag), een YouTube video, interne link naar een relevante pagina op je website of een externe link naar een pagina met autoriteit (bijv. Wikipedia). Ik heb gemerkt dat goede Wist-je-dat blokken ook meetellen als extra opmaak aan een artikel. Deze wist-je-datjes worden vaak goed geïndexeerd in de zoekmachine. Ik heb het standaard citaat-blok van de Gutenberg editor in WordPress omgetoverd tot een wist-je-dat-blok.

Wist je dat: Dit is een blok met een wist-je-dat er in. Ik klik in de editor op + en voeg een Citaat blok toe. De onderstaande opmaak in CSS doet de rest.

De code om mooie wist-je-datjes te maken op je website in de vorm van een citaatblok:

/*wist je datjes */
blockquote {
font-size: 18px;
width: 100%;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #000;
border-left:8px solid #49A392!important;
background: #f7fbfa;
font-style: normal;  
}

blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block
    margin-top: 5px;
}

blockquote:after, blockquote:before {
    height: 3px;
    width: 100%;
    background-color: #f7fbfa;
    content: " ";
    display: block;
}

blockquote cite:before {
content: "\2014 \2009";
}

Tip: border-left en background kan je aanpassen naar de stijl van jouw website. Het kan zijn dat je de background bij blockquote:after, blockquote:before  moet veranderen in de kleur van je achtergrond. Dit doe je het beste met een hex-code.

De marge veranderen onder afbeeldingen

Bij GeneratePress demo website staan soms de afbeeldingen erg dicht op de andere elementen. Hoewel dit – volgens mij – ook in de customizer geregeld kan worden, krijg ik het beste resultaat door dit gewoon in CSS te doen. Doet doe je als volgt

/*ondermarge afbeeldingen- */
.wp-block-image {margin-bottom: 1em;}

Centreren van titels in de widgets

In de zijbalk staan widgets. Ik vind zelf mooi als deze titels gecentreerd staan op de website. Dit vind ik vooral op mobiele apparaten erg mooi. Je kan dit als volgt doen:

/*centreren widget titels */
.widget-title {
    text-align: center;
}

Goed om te weten: Deze code werkt niet als je de zijbalk opbouwd in Elementen van GeneratePress.

Een aantal veel gebruikte CSS elementen op een rij