Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

Custom CSS toevoegen met Elementor

Inhoud van dit artikel:

Hoewel Elementor enorm veel design opties biedt, is het in sommige gevallen handig dat je toch de mogelijkheid hebt om custom CSS toe te voegen. Het toevoegen van custom CSS is een geavanceerde functie waarvoor je Elementor Pro nodig hebt. In dit artikel leg ik je uit op welke manieren je custom CSS kunt toevoegen met Elementor Pro.

Custom CSS voor de hele website

Wil je de custom CSS gebruiken voor je hele website? Je wilt bijvoorbeeld speciale opsommingstekens gebruiken en deze consistent doorvoeren op de hele website. Of je wilt bepaalde elementen uitschakelen.

Via Theme Style

In februari 2020 voegde Elementor een nieuwe functie toe: Theme Style. Hiermee kun je globale stijlen instellen voor Elementor. In de Pro versie zit nu ook een custom css functie waar je stijlen kunt toevoegen die van toepassing zijn op de hele website.

Elementor pro update 2.9 Custom css theme style elementor

Via thema

Daarnaast bieden de meeste thema’s  hiervoor ook een standaard optie. Bij OceanWP vind je deze optie als je de customizer opent. Mijn advies: als je Theme Style van Elementor gebruikt, gebruik dan ook de custom css functie via Elementor in plaats van het thema.

Custom css elementor via thema

Custom css op een pagina

Als je custom CSS wilt gebruiken voor een enkele pagina, dan kun je dit doen via de pagina instellingen. Deze vind je als je linksonderin het Elementor panel klikt op het tandwiel.

Custom css elementor hele pagina

Custom CSS gebruiken voor een sectie

Als je custom CSS wilt gebruiken voor een enkele sectie, dan kun je via de sectie instellingen custom CSS toevoegen. De custom CSS optie vind je altijd onder het tabblad ‘Geavanceerd’ in het laatste tabje.

Custom css Elementor sectie

Custom CSS voor een widget

Wil je specifieke aanpassingen doen voor een bepaalde widget? Bij widgets heb je ook de mogelijkheid om custom CSS toe te voegen. Hier ga je ook naar het tabblad ‘Geavanceerd’.

Custom css elementor widget

Aangepaste CSS classes toevoegen

Aan iedere pagina, sectie, widget of kolom kun je aangepaste CSS classes toevoegen. Dit doe je ook via het tabblad ‘Geavanceerd’.

css classes elementor

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.
Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.

Offerte aanvragen

Een nieuwe website laten bouwen? Of hulp nodig bij een probleem of het bouwen van je website? Laat ons weten wat je precies nodig hebt en je ontvangt zo snel mogelijk een prijsindicatie: