Als je op mij lijkt, heb je veel ideeën voor je website die je tot leven wilt zien komen. En hoewel Elementor het gemakkelijk maakt om unieke ontwerpen te maken met drag-and-drop functies en vooraf gebouwde elementen, kan soms niets de kracht van pure CSS vervangen. In dit artikel behandelen we hoe u aangepaste CSS kunt toevoegen in Elementor, zodat u uw websiteontwerp nog verder kunt brengen!
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 dat te doen.
- Gebruik de WordPress customizer
- 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.
- De sectie Extra CSS wordt geopend. U kunt hier code toevoegen door deze in het tekstvak te plakken of op de knop Aangepaste CSS toevoegen te klikken om naar uw bestand op uw computer te bladeren.
Gebruik een CSS-plugin
Er zijn verschillende plugins op de markt, zoals Simple CSS, Custom CSS Pro, en CSS Hero, waarmee u aangepaste CSS kunt toevoegen aan Elementor.
Ga om te beginnen naar Custom CSS & JS > Add Custom CSS en klik op Add CSS Code.
Links 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 configuratie-opties aan de rechterkant. Bovendien kunt u kiezen of de code in de header of de footer hoort:
Als u klaar bent met het bewerken van de CSS-code, drukt u op de knop Publiceren .
Opmerking: Schakel over naar een front-end weergave om de code in actie te zien.
HTML-widget gebruiken
U kunt een HTML-widget gebruiken om aangepaste CSS aan Elementor toe te voegen. Voor deze optie hoeft u alleen maar de HTML-widget te slepen en uw CSS-code toe te voegen in een Style-tag.
Aangepaste CSS is een manier om aangepaste code aan uw website toe te voegen. Het kan voor veel dingen worden gebruikt, van het veranderen van het uiterlijk van uw website tot het toevoegen van extra functionaliteit.
Nu u weet hoe u aangepaste CSS kunt toevoegen, kunt u het op uw websites gebruiken door deze stappen te volgen:
- Open het editorvenster van Elementor en klik op het '+'-pictogram linksboven.
- Click ‘Custom Code’ and then paste in this piece of code: `.elementor-custom-css{display:none;}`. You can find this under Settings > Custom CSS or Appearance > Theme Options > Custom CSS (depending on which version of WordPress you have).
Conclusie
Nu u weet hoe u aangepaste CSS kunt toevoegen, kunt u profiteren van de flexibiliteit van Elementor. De volgende keer dat iets zich niet gedraagt zoals verwacht, probeer dan wat CSS-code toe te voegen in plaats van het op te lossen met een plugin of themawijziging!
