{"id":17118,"date":"2021-08-23T17:15:54","date_gmt":"2021-08-23T16:15:54","guid":{"rendered":"https:\/\/wpbeveiligen.nl\/?p=17118"},"modified":"2023-12-26T16:55:43","modified_gmt":"2023-12-26T14:55:43","slug":"styling-aanpassen-via-de-css-customizer-van-wordpress","status":"publish","type":"post","link":"https:\/\/wpbeveiligen.nl\/styling-aanpassen-via-de-css-customizer-van-wordpress\/","title":{"rendered":"Styling aanpassen via de CSS Customizer van WordPress"},"content":{"rendered":"<h2>Wat is de CSS Customizer van WordPress?<\/h2>\n<p>De CSS customizer stelt je in staat om CSS toe te voegen aan je website.<\/p>\n<h2>Wat in vredesnaam is CSS?!<\/h2>\n<p>CSS, Cascading Style Sheet.. die benaming maakt het niet echt duidelijk.<br \/>\nSTYLING!<\/p>\n<p>Met HTML elementen geef je data weer in je website, en met CSS geef je die elementen vorm.<\/p>\n<blockquote><p>Wil je dus aanpassingen verrichten aan de stijl van je website? Dan schrijf je een stukje CSS.<\/p><\/blockquote>\n<h2>Waarom zou ik dat met de CSS Customizer doen?<\/h2>\n<p>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.<br \/>\nJe ziet direct of je CSS stylingcode ook werkt!<\/p>\n<p><strong>Op de screenshot hieronder zie je een stukje CSS dat in de Customizer geschreven is.<\/strong><br \/>\nje ziet hier de ID, Class en een H2 titel-element die ik ter voorbeeld rood heb gemaakt met de CSS.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wpbeveiligen.nl\/wp-content\/uploads\/2021\/07\/voorbeeld-css-custmizer.jpg\" alt=\"customizer\" \/><\/p>\n<h2>Wanneer gebruik je de CSS Customizer van WordPress?<\/h2>\n<ol>\n<li>Als je de vormgeving van je website snel wilt aanpassen<\/li>\n<li>Als je huidige thema geen beheerpaneel heeft waar je styling kunt aanpassen<\/li>\n<li>Als je geen Child thema wilt aanmaken<\/li>\n<li>Als je geen toegang hebt tot de styling &amp; Serverbestanden<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><strong>Let op!<\/strong><\/p>\n<hr \/>\n<p>Om de CSS Customizer van WordPress te kunnen gebruiken is het belangrijk dat je ervaring hebt met CSS.<br \/>\nCSS is de code-taal die gebruikt wordt om de vormgeving, kleur en afmetingen te bepalen van een website.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<h2>De voordelen van de CSS Customizer<\/h2>\n<ul class=\"vink check\">\n<li>Je ziet direct wat er aan de voorkant van je website veranderd<\/li>\n<li>De styling blijft staan, ook bij thema-updates<\/li>\n<li>Je hoeft geen servertoegang of code-editor te hebben<\/li>\n<li>De CSS code heeft duidelijke code-opmaak in kleur<\/li>\n<li>Je kunt wisselen van weergave: desktop, tablet en smartphoneformaat<\/li>\n<\/ul>\n<h2>HTML stylen met CSS in de praktijk<\/h2>\n<p>Ik zie je denken: HOE weet ik WAT ik moet stylen?!<br \/>\nOm 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.<\/p>\n<p><strong>Open je website daarom middels een Element Inspector.<\/strong><br \/>\nDe 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 &#8211; Soms moet je dit 2x herhalen om een bepaald element te pakken te krijgen.<\/p>\n<p>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.<\/p>\n<p><strong>Op de onderstaande screenshot zie je de CSS Customizer en de Element Inspector helemaal rechts geopend.<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wpbeveiligen.nl\/wp-content\/uploads\/2021\/07\/css-customizer-met-element-inspector.jpg\" alt=\"element-inspector\" \/><\/p>\n<p>Ok\u00e9, 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.<\/p>\n<p><strong>nu nog de CSS schrijven!<\/strong><br \/>\nIedere programmeur heeft dit artikel nu natuurlijk al lang weg-geklikt en is lekker CSS aan het toevoegen.<\/p>\n<h2>Ja maar, ik kan geen CSS schrijven?!<\/h2>\n<p>Ben jij nu een enthousiaste website-eigenaar die geen idee heeft hoe CSS te schrijven?<br \/>\nDan kun je ons de <a href=\"https:\/\/wpbeveiligen.nl\/opdracht-geven\" target=\"_blank\" rel=\"noopener\">opdracht geven<\/a> om een bepaald element aan te passen met CSS. Wij schrijven CSS namelijk net zo gemakkelijk als het ABC.<\/p>\n<p>Klik <a href=\"https:\/\/wpbeveiligen.nl\/opdracht-geven\"><span style=\"text-decoration: underline;\">hier<\/span><\/a> om ons aan het werk te zetten*.<br \/>\n* 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.<\/p>\n<h2>Ik wil CSS leren schrijven<\/h2>\n<p>Dat kun je doen op w3schools.com<br \/>\nOp dit moment zijn er gratis lessen om CSS te leren. (Wel in het engels)<br \/>\nKlik <a href=\"https:\/\/www.w3schools.com\/css\/css_intro.asp\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"text-decoration: underline;\">hier<\/span><\/a> om CSS te leren schrijven.<\/p>\n<h2>Wijzigingen in de CSS Customizer opslaan<\/h2>\n<p>Pas als je op &#8220;Publiceren&#8221; klikt &#8211; 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.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wpbeveiligen.nl\/wp-content\/uploads\/2021\/07\/aanpassingen-opslaan.jpg\"\"alt=\"opslaan\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":17119,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,91,10],"tags":[596,600,598,602],"_links":{"self":[{"href":"https:\/\/wpbeveiligen.nl\/wp-json\/wp\/v2\/posts\/17118"}],"collection":[{"href":"https:\/\/wpbeveiligen.nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeveiligen.nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeveiligen.nl\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeveiligen.nl\/wp-json\/wp\/v2\/comments?post=17118"}],"version-history":[{"count":1,"href":"https:\/\/wpbeveiligen.nl\/wp-json\/wp\/v2\/posts\/17118\/revisions"}],"predecessor-version":[{"id":22719,"href":"https:\/\/wpbeveiligen.nl\/wp-json\/wp\/v2\/posts\/17118\/revisions\/22719"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeveiligen.nl\/wp-json\/wp\/v2\/media\/17119"}],"wp:attachment":[{"href":"https:\/\/wpbeveiligen.nl\/wp-json\/wp\/v2\/media?parent=17118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeveiligen.nl\/wp-json\/wp\/v2\/categories?post=17118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeveiligen.nl\/wp-json\/wp\/v2\/tags?post=17118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}