{"id":44793,"date":"2022-08-01T09:33:38","date_gmt":"2022-08-01T07:33:38","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=44793&preview=true&preview_id=44793"},"modified":"2023-06-09T09:04:32","modified_gmt":"2023-06-09T07:04:32","slug":"elementor-aangepaste-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/","title":{"rendered":"Zo voeg je aangepaste CSS toe aan Elementor (5 methodes)"},"content":{"rendered":"

Een van de grootste voordelen van het gebruik van pagebuilders<\/a> zoals Elementor is dat je toegang krijgt tot vooraf gebouwde paginaelementen, oftewel “widgets”. Elementor widgets bevatten veel aanpassings- en stylingmogelijkheden. Soms is de enige manier om een bepaalde stijl toe te passen echter met Cascading Style Sheets (CSS)<\/a>.<\/p>\n

CSS geeft je een verbazingwekkende mate van controle over elk onderdeel van je website. Het toevoegen aan WordPress is eenvoudig als je bekend bent met de taal. Elementor biedt ook verschillende opties voor het toevoegen van aangepaste CSS.<\/p>\n

In dit artikel bespreken we wat CSS is en hoe je aangepaste styling aan\u00a0Elementor<\/a> kunt toevoegen. Tot slot bespreken we enkele praktische tips voor het gebruik van CSS in WordPress. Aan de slag!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Wat is CSS?<\/h2>\n

CSS is wat we noemen een “stylesheet” taal. Je kunt CSS stylesheets gebruiken om aangepaste opmaak aan HTML- of XML<\/a> documenten toe te voegen. Door CSS te gebruiken, kun je een eenvoudige HTML pagina omzetten in een\u00a0modern ogend ontwerp<\/a>.<\/p>\n

Zie CSS als een taal die beschrijft hoe elementen er in een browser uit moeten zien. Het werkt in elke browser en het is een van de kerntalen van het internet.<\/p>\n

Dit is bijvoorbeeld de CSS code die je zou gebruiken om een achtergrondkleur toe te kennen aan de body van een HTML document:<\/p>\n

body {\n\nbackground-color: red;\n\n}<\/code><\/pre>\n
Je kunt CSS gebruiken in HTML om stijlen toe te passen op specifieke componenten, klassen en ID’s. Het volgende fragment zou bijvoorbeeld een specifieke tekstkleur en uitlijning toepassen op alle H2’s op een pagina:<\/p>\n
h2 {\n\ncolor: black;\n\ntext-align: left;\n\n}<\/code><\/pre>\n
Doorgaans wordt bij het laden van een HTML pagina ook een apart stylesheet geladen dat alle CSS code bevat. Dit betekent dat je stylesheets kunt hergebruiken op meerdere pagina’s.<\/p>\n
Je bent vrij om CSS code\u00a0rechtstreeks toe te passen op elke\u00a0HTML pagina<\/a>. Je kunt het ook \u201cinline\u201d gebruiken. Dit is een term die verwijst naar CSS code die van toepassing is op een enkel HTML element en zich in dat bestand bevindt.<\/p>\n
Hier is een voorbeeld van inline CSS voor een specifieke H2 header:<\/p>\n
<h2 style=\"color:black;text-align:center;\">This is where the heading text goes<\/h1><\/code><\/pre>\n
Het wordt als best practice beschouwd om CSS<\/a> in een apart stylesheet te zetten. Een van de vele voordelen van het gebruik van WordPress en\u00a0Elementor<\/a>\u00a0is echter dat je CSS kunt toevoegen zonder bestanden handmatig te bewerken. Laten we eens kijken hoe het werkt.<\/p>\n\n
Aangepaste CSS opties in Elementor<\/h2>\n
Als je bekend bent met Elementor, dan weet je dat de bouwer gebruik maakt van secties, kolommen en widgets om je te helpen pagina’s samen te stellen. Secties bevatten \u00e9\u00e9n of meerdere kolommen, en elke kolom kan meerdere modules bevatten:<\/p>\n
\"Kolommen
Kolommen en modules in Elementor<\/figcaption><\/figure>\n
Een van de beste dingen aan het gebruik van Elementor is dat je afzonderlijke CSS code kunt toevoegen op het niveau van de sectie, kolom en widget. Wanneer je met de muis over een sectie gaat, kun je het zes-stip icoon selecteren om het Edit Section<\/strong> menu aan de linkerkant van het scherm te openen:<\/p>\n
\"Voeg
Voeg aparte CSS code toe op niveau van sectie, kolom en widget.<\/figcaption><\/figure>\n
Als je naar het tabblad Advanced<\/strong> gaat in het menu Edit Section<\/strong>, zie je een Custom CSS<\/strong> sectie. Binnenin vind je een veld waarmee je code kunt toevoegen voor dat specifieke gedeelte:<\/p>\n
\"Aangepaste
Aangepaste CSS optie is te vinden onder het “Advanced” tab<\/figcaption><\/figure>\n
Wanneer je kolommen en widgets bewerkt, zul je merken dat je toegang hebt tot dezelfde drie tabbladen in hun respectievelijke instellingenmenu’s. Secties, kolommen en widgets bevatten allemaal layout-, stijl- en geavanceerde instellingen.<\/p>\n
Om aangepaste CSS aan een kolom toe te voegen, ga er met de muis overheen en selecteer het twee-koloms icoon in de rechterbovenhoek van het element. Navigeer dan naar de Advanced<\/strong> optie en open de sectie Custom CSS<\/strong>:<\/p>\n
\"Aangepaste
Aangepaste CSS toevoegen aan een enkele kolom<\/figcaption><\/figure>\n
Je kunt hetzelfde proces doorlopen om aangepaste CSS toe te voegen aan een Elementor widget. Selecteer de widget die je wilt aanpassen en ga direct naar het tabblad Advanced > Custom CSS<\/strong> tab:<\/p>\n
\"Je
Je kunt ook CSS aan een widget toevoegen<\/figcaption><\/figure>\n
Het toevoegen van aangepaste CSS aan specifieke elementen binnen de Elementor pagebuilder is erg eenvoudig. Houd er echter rekening mee dat de styling alleen op die elementen van toepassing is. Als je aangepaste CSS wilt toevoegen die van invloed is op je hele site, moet je een andere aanpak gebruiken.<\/p>\n
Zo voeg je aangepaste CSS toe met Elementor (5 methodes)<\/h2>\n
In dit gedeelte gaan we op zoek naar andere manieren om aangepaste CSS van Elementor toe te voegen. We behandelen methoden die CSS toepassen op je hele website, op specifieke pagina’s en op Elementor widgets.<\/p>\n
Methode 1: Gebruik de Elementor HTML widget<\/h3>\n
Met Elementor kun je aangepaste CSS toevoegen aan een van de widgets. In sommige gevallen wil je echter handmatig elementen toevoegen met HTML<\/a> en CSS. In die gevallen moet je de HTML<\/strong> widget gebruiken:<\/p>\n
\"De
De HTML widget gebruiken<\/figcaption><\/figure>\n
De\u00a0HTML<\/strong> widget kan HTML, CSS en\u00a0JavaScript<\/a> parsen. Je kunt elke code toevoegen die je wilt in het HTML Code<\/strong> veld en als het geldig is, zal Elementor het weergeven als een widget:<\/p>\n
\"Voeg
Voeg een code toe in de widget<\/figcaption><\/figure>\n
De HTML <\/strong>widget ondersteunt zowel inline als standalone CSS. Alle code die je met de widget toevoegt, heeft alleen invloed op dat ene element.<\/p>\n
Methode 2: Gebruik het Elementor Site Settings menu<\/h3>\n
Elementor bevat een verzameling globale instellingen die lijken op de opties die je kunt vinden in de WordPress Customizer. Om toegang te krijgen tot het Elementor Site Settings <\/strong>menu, open je de editor en klik je op het hamburgermenu in de linkerbovenhoek van het scherm:<\/p>\n
\"Klik
Klik op het beschikbare hamburgermenu<\/figcaption><\/figure>\n
Selecteer op de volgende pagina de optie Site Settings<\/strong>:<\/p>\n
\"Klik
Klik op de optie “Site Settings”<\/figcaption><\/figure>\n
Binnenin zie je een verzameling instellingen waarmee je de stijl van je site kunt aanpassen. Alle wijzigingen die je in dit menu aanbrengt, zijn van toepassing op je hele site, zelfs als je technisch slechts \u00e9\u00e9n pagina bewerkt.<\/p>\n
Op de offici\u00eble site van Elementor kun je lezen hoe je het Site Settings<\/strong> menu kunt gebruiken<\/a> om je pagina aan te passen. Voorlopig is de enige sectie waar we om geven het tabblad Custom CSS\u00a0<\/strong>. Open het en je ziet een veld dat lijkt op de aangepaste CSS opties voor secties, widgets en kolommen:<\/p>\n
\"Het
Het toevoegen van aangepaste CSS hier zal de hele site be\u00efnvloeden<\/figcaption><\/figure>\n
Alle aangepaste CSS die je hier toevoegt zal je hele website be\u00efnvloeden. Als je alleen van plan bent om specifieke elementen aan te passen, raden we je aan om een meer gerichte aanpak te gebruiken (zoals het rechtstreeks toevoegen van CSS aan een widget).<\/p>\n
Methode 3: Gebruik de WordPress Customizer<\/h3>\n
Met de WordPress Customizer kun je ook aangepaste CSS toevoegen op een sitebrede basis. Om dit te doen, ga naar Appearance > Customize\u00a0en <\/strong>selecteer de Additional CSS\u00a0<\/strong>optie in het linkermenu:<\/p>\n
\"Gebruik
Gebruik de WordPress Customizer om CSS toe te voegen<\/figcaption><\/figure>\n
Het is echter de moeite waard op te merken dat de codevelden van Elementor gebruiksvriendelijker zijn dan de velden die beschikbaar zijn in de Customizer. Als je Elementor al gebruikt voor het bouwen van sites, is er geen reden om aangepaste CSS toe te voegen via de Customizer.<\/p>\n
Methode 4: Enqueue custom CSS bestanden<\/h3>\n
Als je je op je gemak voelt bij het bewerken van WordPress bestanden en het openen van je website via een\u00a0File Transfer Protocol (FTP)\u00a0 client<\/a>, kun je een CSS stylesheet enqueuen om te laden met Elementor. Deze aanpak vereist dat je code toevoegt aan het WordPress bestand \u00a0functions.php<\/strong>.<\/p>\n
Om toegang te krijgen tot het functions.php<\/strong> bestand, maakt je via FTP verbinding met je website en gaat je naar de root<\/strong> map van WordPress. Open de map, zoek het functions.php<\/strong> bestand, en bewerk het.<\/p>\n
Hier is een voorbeeld van de code die je aan het bestand wilt toevoegen:<\/p>\n
add_action( 'elementor\/frontend\/before_enqueue_scripts', function() {\n\nwp_enqueue_script(\n\n'custom-stylesheet',\n\nget_stylesheet_uri()\n\n);\n\n} );<\/code><\/pre>\n
Die code gebruikt de before_enqueue_scripts<\/strong> hook om een stylesheet genaamd custom-stylesheet<\/strong> te laden. <\/em>We gebruiken ook de get_stylesheet_uri<\/strong> functie om te verwijzen naar de locatie van de stylesheet op de server.<\/p>\n
Idealiter voeg je het aangepaste stylesheet toe in de map van je childthema of in de Themes<\/strong> map zelf. Het stylesheet kan elke gewenste Elementor CSS code bevatten. Het fragment dat je hebt toegevoegd aan\u00a0functions.php<\/strong> zorgt ervoor dat de code alleen wordt geladen wanneer Elementor actief is op je website.<\/p>\n
Methode 5: Gebruik een CSS plugin<\/h3>\n
Er zijn verschillende plugins waarmee je aangepaste CSS aan je website kunt toevoegen zonder de Customizer of\u00a0paginabouwers<\/a> te gebruiken. Een van onze favoriete tools voor de job is genaamd\u00a0Simple Custom CSS and JS<\/a>:<\/p>\n
\"Simple
Simple Custom CSS and JS<\/figcaption><\/figure>\n
Met Simple Custom CSS and JS krijg je de mogelijkheid om code rechtstreeks toe te voegen aan de header- en footer-elementen van je thema. Om te beginnen, ga je naar Custom CSS & JS > Add Custom CSS\u00a0<\/strong> en klik je op\u00a0Add CSS Code.<\/strong><\/p>\n
Een basis CSS editor verschijnt aan de linkerkant. Aan de rechterkant kun je instellen of je de CSS code in een\u00a0extern stylesheet<\/a>\u00a0of intern wilt laden. Je kan ook beslissen of de code in de header of de footer moet gaan:<\/p>\n
\"Code
Code laden op een extern stylesheet<\/figcaption><\/figure>\n
Als je klaar bent met het bewerken van de CSS code, klik dan op de Publish<\/strong> knop. Mogelijk moet je overschakelen naar een front-end weergave om de code in actie te zien.<\/p>\n
Best practices voor het maken van aangepaste CSS met Elementor<\/h2>\n
Wanneer je te maken hebt met aangepaste CSS of een type code aan je website toevoegt, doe je er goed aan om de volgende best practices in gedachten te houden. Laten we beginnen met het gebruik van een childthema.<\/p>\n
Gebruik een WordPress childthema<\/h3>\n
Als je een deel van de stijl van\u00a0je thema<\/a> wilt wijzigen met behulp van CSS, raden we je aan een childthema<\/a> te gebruiken. Een “child” thema is een template dat alle stijlen erft van een aangewezen thema.<\/p>\n
Als je op deze manier wijzigingen aanbrengt in het oorspronkelijke thema, hebben deze geen invloed op de aanpassingen die je aan het childthema toevoegt. Bovendien, wanneer je je thema bijwerkt, zal het deze wijzigingen behouden.<\/p>\n
Gebruik een code preprocessor voor eenvoudiger schrijven<\/h3>\n
Een van de grootste uitdagingen van het toevoegen van code binnen WordPress of het gebruik van Elementor is dat je geen toegang krijgt tot alle functionaliteit die moderne code editors bieden. In plaats van code te schrijven met eenvoudige on-site editors, raden we je aan om je favoriete preprocessor te gebruiken<\/a>. Vervolgens kun je gewoon je code kopi\u00ebren en in WordPress plakken.<\/p>\n
Overweeg het gebruik van een testwebsite<\/h3>\n
Wanneer je van plan bent om grote wijzigingen aan te brengen in WordPress, raden we je aan om een testwebsite te gebruiken. Met testomgevingen kun je wijzigingen in stijl en functionaliteit testen zonder het risico te lopen iets op je live site te slopen.<\/p>\n
Sommige webhosts bieden je toegang tot testfunctionaliteiten vanaf je controlepaneel. Als je Kinsta gebruikt, kunt je je website selecteren via het\u00a0MyKinsta dashboard<\/a>\u00a0en heen en weer schakelen tussen live- en testomgevingen:<\/p>\n
\"De
De testomgeving in MyKinsta<\/figcaption><\/figure>\n
Als je webhost geen testfunctionaliteit<\/a> biedt, kun je een lokale WordPress ontwikkelingsomgeving zoals DevKinsta<\/a> gebruiken\u00a0voor testdoeleinden. Je kan ook overwegen van hostingprovider te veranderen.<\/p>\n\n
Samenvatting<\/h2>\n
Het toevoegen van aangepaste CSS in Elementor is gemakkelijker dan je zou denken. De paginabouwer biedt verschillende methoden voor het toevoegen van code aan secties, kolommen, widgets en voor je hele website.<\/p>\n
Om samen te vatten, hier zijn vijf belangrijke manieren om aangepaste CSS toe te voegen aan Elementor (of je website in het algemeen):<\/p>\n
    \n
  1. Gebruik de Elementor HTML Widget.<\/li>\n
  2. Gebruik het Elementor Site Settings menu.<\/li>\n
  3. Gebruik de WordPress Customizer.<\/li>\n
  4. Enqueue aangepaste CSS bestanden.<\/li>\n
  5. Gebruik een CSS plugin.<\/li>\n<\/ol>\n
    Bij Kinsta zijn onze pakketten ontworpen om je te helpen de site van je dromen te bouwen met paginabouwers zoals Elementor. Bekijk onze pakketten<\/a> of praat met de verkoopafdeling om het plan te vinden dat bij jou past.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Een van de grootste voordelen van het gebruik van pagebuilders zoals Elementor is dat je toegang krijgt tot vooraf gebouwde paginaelementen, oftewel “widgets”. Elementor widgets bevatten …<\/p>\n","protected":false},"author":117,"featured_media":44794,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[340,402,626],"topic":[892],"class_list":["post-44793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-css","tag-elementor","tag-page-builder","topic-wordpress-ontwikkeling"],"yoast_head":"\nZo voeg je aangepaste CSS toe aan Elementor (5 methodes)<\/title>\n<meta name=\"description\" content=\"Weet je niet precies waar je custom CSS in Elementor moet toevoegen? Leer precies hoe je custom CSS aan Elementor toevoegt en laat je site opvallen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo voeg je aangepaste CSS toe aan Elementor (5 methodes)\" \/>\n<meta property=\"og:description\" content=\"Weet je niet precies waar je custom CSS in Elementor moet toevoegen? Leer precies hoe je custom CSS aan Elementor toevoegt en laat je site opvallen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-01T07:33:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-09T07:04:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Weet je niet precies waar je custom CSS in Elementor moet toevoegen? Leer precies hoe je custom CSS aan Elementor toevoegt en laat je site opvallen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Zo voeg je aangepaste CSS toe aan Elementor (5 methodes)\",\"datePublished\":\"2022-08-01T07:33:38+00:00\",\"dateModified\":\"2023-06-09T07:04:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/\"},\"wordCount\":2122,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg\",\"keywords\":[\"css\",\"Elementor\",\"page builder\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/\",\"name\":\"Zo voeg je aangepaste CSS toe aan Elementor (5 methodes)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg\",\"datePublished\":\"2022-08-01T07:33:38+00:00\",\"dateModified\":\"2023-06-09T07:04:32+00:00\",\"description\":\"Weet je niet precies waar je custom CSS in Elementor moet toevoegen? Leer precies hoe je custom CSS aan Elementor toevoegt en laat je site opvallen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress ontwikkeling\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo voeg je aangepaste CSS toe aan Elementor (5 methodes)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo voeg je aangepaste CSS toe aan Elementor (5 methodes)","description":"Weet je niet precies waar je custom CSS in Elementor moet toevoegen? Leer precies hoe je custom CSS aan Elementor toevoegt en laat je site opvallen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo voeg je aangepaste CSS toe aan Elementor (5 methodes)","og_description":"Weet je niet precies waar je custom CSS in Elementor moet toevoegen? Leer precies hoe je custom CSS aan Elementor toevoegt en laat je site opvallen.","og_url":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2022-08-01T07:33:38+00:00","article_modified_time":"2023-06-09T07:04:32+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Weet je niet precies waar je custom CSS in Elementor moet toevoegen? Leer precies hoe je custom CSS aan Elementor toevoegt en laat je site opvallen.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Salman Ravoof","Geschatte leestijd":"12 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Zo voeg je aangepaste CSS toe aan Elementor (5 methodes)","datePublished":"2022-08-01T07:33:38+00:00","dateModified":"2023-06-09T07:04:32+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/"},"wordCount":2122,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg","keywords":["css","Elementor","page builder"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/","url":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/","name":"Zo voeg je aangepaste CSS toe aan Elementor (5 methodes)","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg","datePublished":"2022-08-01T07:33:38+00:00","dateModified":"2023-06-09T07:04:32+00:00","description":"Weet je niet precies waar je custom CSS in Elementor moet toevoegen? Leer precies hoe je custom CSS aan Elementor toevoegt en laat je site opvallen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/elementor-custom-css.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-aangepaste-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress ontwikkeling","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/"},{"@type":"ListItem","position":3,"name":"Zo voeg je aangepaste CSS toe aan Elementor (5 methodes)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/44793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=44793"}],"version-history":[{"count":3,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/44793\/revisions"}],"predecessor-version":[{"id":45750,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/44793\/revisions\/45750"}],"alternate":[{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/44793\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/44793\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/44793\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/44793\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/44793\/translations\/es"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/44793\/translations\/en"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/44793\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/44793\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/44793\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/44793\/translations\/dk"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/44793\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/44794"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=44793"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=44793"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=44793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}