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.
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 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 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 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’.
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’.
