Als u op mij lijkt, heeft u veel ideeën voor uw website die u tot leven wilt zien komen. En hoewel Elementor het eenvoudig maakt om unieke ontwerpen te maken met functies voor slepen en neerzetten en vooraf gebouwde elementen, kan soms niets de kracht van pure CSS vervangen. In dit artikel bespreken we hoe u aangepaste CSS in Elementor kunt toevoegen, zodat u uw website-ontwerp 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 dit te doen.
- Gebruik de WordPress-aanpasser
- Gebruik een CSS-plug-in
- HTML-widget gebruiken
Gebruik de WordPress-aanpasser.
Volg deze stappen om aangepaste CSS-code toe te voegen in Elementor:
- Ga naar Uiterlijk > Aanpassen
- Klik in de WordPress-aanpasser op Extra CSS.
- Het gedeelte Extra CSS wordt geopend. U kunt hier code toevoegen door deze in het tekstvak te plakken of door op de knop Aangepaste CSS toevoegen te klikken om vanaf uw computer naar uw bestand te bladeren.
Gebruik een CSS-plug-in
Er zijn verschillende plug-ins op de markt, zoals Simple CSS, Custom CSS Pro en CSS Hero, waarmee u aangepaste CSS aan Elementor kunt toevoegen.
Ga om te beginnen naar Aangepaste CSS en 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. Bovendien kunt u kiezen of de code in de koptekst of voettekst thuishoort:
Zodra u klaar bent met het bewerken van de CSS-code, klikt u op de Publiceren .
Opmerking: schakel over naar een front-endweergave om de code in actie te zien.
HTML-widget gebruiken
U kunt een HTML-widget gebruiken om aangepaste CSS aan Elementor toe te voegen. Het enige dat u voor deze optie hoeft te doen, is de HTML-widget slepen en neerzetten en uw CSS-code toevoegen aan een stijltag.
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 deze op uw websites gebruiken door deze 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 welke versie van WordPress je hebt).
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 te repareren met een plug-in of een themawijziging, probeer wat CSS-code toe te voegen!
