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.
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.
We gebruiken cookies om de site goed te laten werken, en met jouw toestemming voor anonieme statistieken en gerichte advertenties. Je kiest zelf wat je deelt.