MENU

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

Meer handige tips ontvangen?

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.
Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.

Geef een reactie

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

Tips ontvangen?

Schrijf je in voor updates!

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