Als je net als ik bent, heb je vast veel ideeën voor je website die je graag tot leven wilt brengen. En hoewel Elementor het makkelijk maakt om unieke ontwerpen te creëren met drag-and-drop-functies en vooraf gebouwde elementen, kan niets de kracht van pure CSS vervangen. In dit artikel leggen we uit hoe je aangepaste CSS kunt toevoegen in Elementor, zodat je je websiteontwerp naar een nog hoger niveau kunt tillen!
3 populaire manieren om aangepaste CSS toe te voegen in Elementor
Er zijn verschillende manieren om aangepaste CSS toe te voegen in Elementor. Laten we eens kijken naar onze top 3 manieren om dit te doen.
- Gebruik de WordPress-aanpasser
- Gebruik een CSS-plugin
- HTML-widget gebruiken
Gebruik de WordPress-customizer.
Volg deze stappen om aangepaste CSS-code toe te voegen in Elementor:
- Ga naar Uiterlijk > Aanpassen
- Klik in de WordPress-customizer op 'Extra CSS'.
- Het gedeelte 'Aanvullende CSS' wordt geopend. Hier kunt u code toevoegen door deze in het tekstvak te plakken of door op de knop 'Aangepaste CSS toevoegen' te klikken om uw bestand op uw computer te selecteren.
Gebruik een CSS-plugin
Er zijn diverse plugins op de markt, zoals Simple CSS, Custom CSS Pro en CSS Hero, waarmee je aangepaste CSS aan Elementor kunt toevoegen.
Ga om te beginnen naar Aangepaste CSS & JS > Aangepaste CSS toevoegen en klik op CSS-code toevoegen.
Aan de linkerkant verschijnt een eenvoudige CSS-editor. U kunt ervoor kiezen om de CSS-code intern of in een extern stylesheet te laden met behulp van de configuratieopties aan de rechterkant. Daarnaast kunt u kiezen of de code in de header of de footer thuishoort
Zodra je klaar bent met het bewerken van de CSS-code, klik je op de 'Publiceren' .
Opmerking: Schakel over naar de front-endweergave om de code in actie te zien.
HTML-widget gebruiken
Je kunt een HTML-widget gebruiken om aangepaste CSS aan Elementor toe te voegen. Het enige wat je hiervoor hoeft te doen, is de HTML-widget slepen en neerzetten en je CSS-code in een `<style>`-tag plaatsen.
Met aangepaste CSS kun je eigen code aan je website toevoegen. Je kunt het voor van alles gebruiken, van het veranderen van het uiterlijk van je website tot het toevoegen van extra functionaliteit.
Nu je weet hoe je aangepaste CSS kunt toevoegen, kun je deze op je websites gebruiken door de volgende stappen te volgen:
- Open het editorvenster van Elementor en klik op het '+' pictogram linksboven
- Klik op 'Aangepaste code' en plak vervolgens dit stukje code: `.elementor-custom-css{display:none;}`. Je vindt dit onder Instellingen > Aangepaste CSS of Uiterlijk > Themaopties > Aangepaste CSS (afhankelijk van je WordPress-versie).
Conclusie
Nu je weet hoe je aangepaste CSS kunt toevoegen, kun je optimaal profiteren van de flexibiliteit van Elementor. De volgende keer dat iets niet werkt zoals verwacht, probeer dan eens wat CSS-code toe te voegen in plaats van het op te lossen met een plugin of een themawijziging. Probeer gewoon wat CSS-code toe te voegen!
Relevante inhoud
- Wat is een CSS-framework?
- Hoe verwijder ik ongebruikte CSS in WordPress?
