Direct naar inhoud

Hoe voeg ik custom CSS toe in Elementor?

Elementor3 min leestijd
5,0 uit 14 Google reviewsVaste prijs voorafUit Assen, actief in heel Nederland

Kort antwoord

Ga naar Geavanceerd > Custom CSS bij elk element. Of gebruik het hamburgermenu > Site Settings > Custom CSS voor site-brede CSS.

Inhoudsopgave
  1. Kort antwoord
  2. Per element
  3. Site-breed
  4. Tips
  5. Praktische tips voor daarna
  6. CSS classes gebruiken
  7. Waarom dit belangrijk is
  8. Wat dit kost aan tijd
  9. Custom CSS en toekomstige Elementor-updates
  10. Wanneer custom CSS geen goed idee is

Per element

Selecteer een element, ga naar Geavanceerd > Custom CSS. Gebruik 'selector' als placeholder voor het huidige element: selector { color: red; }

Site-breed

Klik op het hamburgermenu linksboven > Site Settings > Custom CSS. CSS die je hier plaatst geldt voor de hele website.

Tips

Gebruik custom CSS alleen als je het niet via de Elementor interface kunt instellen. Te veel custom CSS maakt onderhoud lastiger.

Praktische tips voor daarna

Documenteer custom CSS die je toevoegt met een kort commentaar erboven, bijvoorbeeld over welk element het gaat. Zo begrijp je maanden later nog waarom een bepaalde regel is toegevoegd, en voorkom je dat je per ongeluk werkende code verwijdert.

CSS classes gebruiken

In plaats van CSS aan één element te koppelen, kun je onder Geavanceerd > CSS Classes ook een eigen class-naam toevoegen. Zo kun je dezelfde class op meerdere elementen gebruiken en die vervolgens in één keer stylen via de site-brede Custom CSS. Dit voorkomt dat je dezelfde code op meerdere plekken moet herhalen.

Waarom dit belangrijk is

Werk je aan CSS en custom en styling en code op een website die je zelf beheert, houd dan bij welke wijzigingen je doorvoert en wanneer. Zo kun je bij problemen makkelijker terugvinden wat er is aangepast. Bij een website van MADA Tech noteren wij dit soort wijzigingen ook in ons eigen systeem, zodat je aanspreekpunt precies weet wat er is gebeurd als je vragen hebt.

Wat dit kost aan tijd

Reken bij custom CSS altijd op een extra testronde op meerdere browsers: een regel die in Chrome goed werkt, kan in Safari net anders worden weergegeven. Bij websites die MADA Tech beheert, testen we aangepaste CSS standaard in de belangrijkste browsers voordat het live gaat.

Custom CSS en toekomstige Elementor-updates

Een Elementor-update kan soms de structuur van een widget lichtjes wijzigen, waardoor custom CSS die op een specifieke class steunt niet meer werkt zoals bedoeld. Controleer na een grote update daarom kort of je custom CSS nog het gewenste effect heeft.

Wanneer custom CSS geen goed idee is

Grote lay-outwijzigingen, zoals een compleet andere paginastructuur, kun je beter oplossen met Containers en de ingebouwde instellingen van Elementor dan met custom CSS. CSS is bedoeld voor kleine verfijningen, niet als vervanging van de opbouw van je pagina.

Volgende stap

Wil je niet zelf in Elementor blijven puzzelen? Bij managed hosting van MADA Tech maken of passen wij pagina's op verzoek voor je aan.

Managed WordPress hosting

Zie ook

Danny van Elteren

Danny van Elteren

Lead Developer & oprichter · 24 februari 2026

Wanneer MADA Tech inschakelen?

  • Je wilt het niet zelf doen of komt er niet uit
  • Je wilt het in een keer goed laten regelen
  • Je wilt doorlopend beheer en support
  • Je wilt hulp met elementor

Web- en marketingbureau in Assen, sinds 2023. Websites, webshops, software, SEO en beheer voor bedrijven en organisaties in heel Nederland. Websites vanaf €699 of €65 per maand inclusief managed hosting en basis SEO.

Hulp nodig?

Wij helpen je graag verder met persoonlijk advies. Professionele websites vanaf €699 of €65 per maand inclusief beheer.

Danny van Elteren van MADA Tech