Styling aanpassen via de CSS Customizer van WordPress

23 aug 2021

1 reactie

Wat is de CSS Customizer van WordPress?

De CSS customizer stelt je in staat om CSS toe te voegen aan je website.

Wat in vredesnaam is CSS?!

CSS, Cascading Style Sheet.. die benaming maakt het niet echt duidelijk.
STYLING!

Met HTML elementen geef je data weer in je website, en met CSS geef je die elementen vorm.

Wil je dus aanpassingen verrichten aan de stijl van je website? Dan schrijf je een stukje CSS.

Waarom zou ik dat met de CSS Customizer doen?

De Customizer heeft kleur-codering waardoor je gemakkelijker kunt zien of je code goed geschreven is. De Customizer biedt tevens een LIVE voorbeeld-weergave waar je de wijzigingen direct kunt zien, dus kunt pre-viewen voordat je het Publiceert.
Je ziet direct of je CSS stylingcode ook werkt!

Op de screenshot hieronder zie je een stukje CSS dat in de Customizer geschreven is.
je ziet hier de ID, Class en een H2 titel-element die ik ter voorbeeld rood heb gemaakt met de CSS.

Wanneer gebruik je de CSS Customizer van WordPress?

1. Als je de vormgeving van je website snel wilt aanpassen
2. Als je huidige thema geen beheerpaneel heeft waar je styling kunt aanpassen
3. Als je geen Child thema wilt aanmaken
4. Als je geen toegang hebt tot de styling & Serverbestanden

Let op!

Om de CSS Customizer van WordPress te kunnen gebruiken is het belangrijk dat je ervaring hebt met CSS.
CSS is de code-taal die gebruikt wordt om de vormgeving, kleur en afmetingen te bepalen van een website.

De CSS die je in de Customizer schrijft zal inline boven in de code van je website geladen worden. Hierdoor overschrijft deze CSS de styling die je thema gebruikt.

Je kunt je website er ook grafisch mee om zeep helpen, in dat geval is het een kwestie van de geschreven CSS verwijderen, maar hou er rekening mee.

De voordelen van de CSS Customizer

• Je ziet direct wat er aan de voorkant van je website veranderd
• De styling blijft staan, ook bij thema-updates
• Je hoeft geen servertoegang of code-editor te hebben
• De CSS code heeft duidelijke code-opmaak in kleur
• Je kunt wisselen van weergave: desktop, tablet en smartphoneformaat

HTML stylen met CSS in de praktijk

Ik zie je denken: HOE weet ik WAT ik moet stylen?!
Om de HTML elementen van je website met CSS aan te kunnen passen moet je natuurlijk weten hoe de elementen heten. Je pakt ze immers bij ID of CLASS naam.

Open je website daarom middels een Element Inspector.
De meeste browsers (chrome, Firefox en meer) hebben die optie, je klikt met je rechtermuisknop op een bepaald gedeelte van je website en kiest dan voor Element Inspecteren – Soms moet je dit 2x herhalen om een bepaald element te pakken te krijgen.

Tip: Het openen van de Element Inspector kun je natuurlijk ook in een ander tabblad doen, of liever nog op een andere monitor omdat je dan simpelweg meer ziet. Je wilt immers alleen de naam van een element weten.

Op de onderstaande screenshot zie je de CSS Customizer en de Element Inspector helemaal rechts geopend.

Oké, je weet nu dat er een CSS Customizer in WordPress zit. Je weet dat je daar CSS in kunt zetten waarmee je de vormgeving van je website aan kunt passen.

nu nog de CSS schrijven!
Iedere programmeur heeft dit artikel nu natuurlijk al lang weg-geklikt en is lekker CSS aan het toevoegen.

Ja maar, ik kan geen CSS schrijven?!

Ben jij nu een enthousiaste website-eigenaar die geen idee heeft hoe CSS te schrijven?
Dan kun je ons de opdracht geven om een bepaald element aan te passen met CSS. Wij schrijven CSS namelijk net zo gemakkelijk als het ABC.

Klik hier om ons aan het werk te zetten*.
* let op, soms is het druk waardoor we de dienst niet kunnen bieden. Beveiliging en herstellen van gehackte WordPress websites heeft namelijk prio 1 bij ons.

Ik wil CSS leren schrijven

Dat kun je doen op w3schools.com
Op dit moment zijn er gratis lessen om CSS te leren. (Wel in het engels)
Klik hier om CSS te leren schrijven.

Wijzigingen in de CSS Customizer opslaan

Pas als je op “Publiceren” klikt – wordt de CSS in je website opgeslagen en weergegeven voor nieuwe bezoekers! Vergeet die knop dus niet in de drukken na het schrijven van CSS.