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

Deze vind je misschien ook interessant:

Tekst opmaken of aanpassen met Elementor op 3 manieren

De tekstopmaak aanpassen met Elementor? Wanneer je werkt met Elementor (Pro) is het handig om gebruik te maken van standaard instellingen voor de opmaak van...

Achtergrondafbeelding aanpassen in Elementor

Met Elementor kun je eenvoudig een achtergrondafbeelding instellen voor een sectie, kolom of widget. Zo kun je bijvoorbeeld de header een achtergrondafbeelding geven, een pop-up...

Elementor site instellingen: stijlen zonder thema

Hoe gebruik je Elementor site-instellingen? Sinds Elementor 3.0 kun je via Site-instellingen de styling van je website instellen. Waarom is dit handig? Voorheen moest je...