Een van de grootste voordelen van het gebruik van pagebuilders zoals Elementor is dat je toegang krijgt tot vooraf gebouwde paginaelementen, oftewel “widgets”. Elementor widgets bevatten veel aanpassings- en stylingmogelijkheden. Soms is de enige manier om een bepaalde stijl toe te passen echter met Cascading Style Sheets (CSS).
CSS geeft je een verbazingwekkende mate van controle over elk onderdeel van je website. Het toevoegen aan WordPress is eenvoudig als je bekend bent met de taal. Elementor biedt ook verschillende opties voor het toevoegen van aangepaste CSS.
In dit artikel bespreken we wat CSS is en hoe je aangepaste styling aan Elementor kunt toevoegen. Tot slot bespreken we enkele praktische tips voor het gebruik van CSS in WordPress. Aan de slag!
Wat is CSS?
CSS is wat we noemen een “stylesheet” taal. Je kunt CSS stylesheets gebruiken om aangepaste opmaak aan HTML- of XML documenten toe te voegen. Door CSS te gebruiken, kun je een eenvoudige HTML pagina omzetten in een modern ogend ontwerp.
Zie CSS als een taal die beschrijft hoe elementen er in een browser uit moeten zien. Het werkt in elke browser en het is een van de kerntalen van het internet.
Dit is bijvoorbeeld de CSS code die je zou gebruiken om een achtergrondkleur toe te kennen aan de body van een HTML document:
body {
background-color: red;
}Je kunt CSS gebruiken in HTML om stijlen toe te passen op specifieke componenten, klassen en ID’s. Het volgende fragment zou bijvoorbeeld een specifieke tekstkleur en uitlijning toepassen op alle H2’s op een pagina:
h2 {
color: black;
text-align: left;
}Doorgaans wordt bij het laden van een HTML pagina ook een apart stylesheet geladen dat alle CSS code bevat. Dit betekent dat je stylesheets kunt hergebruiken op meerdere pagina’s.
Je bent vrij om CSS code rechtstreeks toe te passen op elke HTML pagina. Je kunt het ook “inline” gebruiken. Dit is een term die verwijst naar CSS code die van toepassing is op een enkel HTML element en zich in dat bestand bevindt.
Hier is een voorbeeld van inline CSS voor een specifieke H2 header:
<h2 style="color:black;text-align:center;">This is where the heading text goes</h1>Het wordt als best practice beschouwd om CSS in een apart stylesheet te zetten. Een van de vele voordelen van het gebruik van WordPress en Elementor is echter dat je CSS kunt toevoegen zonder bestanden handmatig te bewerken. Laten we eens kijken hoe het werkt.
Aangepaste CSS opties in Elementor
Als je bekend bent met Elementor, dan weet je dat de bouwer gebruik maakt van secties, kolommen en widgets om je te helpen pagina’s samen te stellen. Secties bevatten één of meerdere kolommen, en elke kolom kan meerdere modules bevatten:
Een van de beste dingen aan het gebruik van Elementor is dat je afzonderlijke CSS code kunt toevoegen op het niveau van de sectie, kolom en widget. Wanneer je met de muis over een sectie gaat, kun je het zes-stip icoon selecteren om het Edit Section menu aan de linkerkant van het scherm te openen:
Als je naar het tabblad Advanced gaat in het menu Edit Section, zie je een Custom CSS sectie. Binnenin vind je een veld waarmee je code kunt toevoegen voor dat specifieke gedeelte:
Wanneer je kolommen en widgets bewerkt, zul je merken dat je toegang hebt tot dezelfde drie tabbladen in hun respectievelijke instellingenmenu’s. Secties, kolommen en widgets bevatten allemaal layout-, stijl- en geavanceerde instellingen.
Om aangepaste CSS aan een kolom toe te voegen, ga er met de muis overheen en selecteer het twee-koloms icoon in de rechterbovenhoek van het element. Navigeer dan naar de Advanced optie en open de sectie Custom CSS:
Je kunt hetzelfde proces doorlopen om aangepaste CSS toe te voegen aan een Elementor widget. Selecteer de widget die je wilt aanpassen en ga direct naar het tabblad Advanced > Custom CSS tab:
Het toevoegen van aangepaste CSS aan specifieke elementen binnen de Elementor pagebuilder is erg eenvoudig. Houd er echter rekening mee dat de styling alleen op die elementen van toepassing is. Als je aangepaste CSS wilt toevoegen die van invloed is op je hele site, moet je een andere aanpak gebruiken.
Zo voeg je aangepaste CSS toe met Elementor (5 methodes)
In dit gedeelte gaan we op zoek naar andere manieren om aangepaste CSS van Elementor toe te voegen. We behandelen methoden die CSS toepassen op je hele website, op specifieke pagina’s en op Elementor widgets.
Methode 1: Gebruik de Elementor HTML widget
Met Elementor kun je aangepaste CSS toevoegen aan een van de widgets. In sommige gevallen wil je echter handmatig elementen toevoegen met HTML en CSS. In die gevallen moet je de HTML widget gebruiken:
De HTML widget kan HTML, CSS en JavaScript parsen. Je kunt elke code toevoegen die je wilt in het HTML Code veld en als het geldig is, zal Elementor het weergeven als een widget:
De HTML widget ondersteunt zowel inline als standalone CSS. Alle code die je met de widget toevoegt, heeft alleen invloed op dat ene element.
Methode 2: Gebruik het Elementor Site Settings menu
Elementor bevat een verzameling globale instellingen die lijken op de opties die je kunt vinden in de WordPress Customizer. Om toegang te krijgen tot het Elementor Site Settings menu, open je de editor en klik je op het hamburgermenu in de linkerbovenhoek van het scherm:
Selecteer op de volgende pagina de optie Site Settings:
Binnenin zie je een verzameling instellingen waarmee je de stijl van je site kunt aanpassen. Alle wijzigingen die je in dit menu aanbrengt, zijn van toepassing op je hele site, zelfs als je technisch slechts één pagina bewerkt.
Op de officiële site van Elementor kun je lezen hoe je het Site Settings menu kunt gebruiken om je pagina aan te passen. Voorlopig is de enige sectie waar we om geven het tabblad Custom CSS . Open het en je ziet een veld dat lijkt op de aangepaste CSS opties voor secties, widgets en kolommen:
Alle aangepaste CSS die je hier toevoegt zal je hele website beïnvloeden. Als je alleen van plan bent om specifieke elementen aan te passen, raden we je aan om een meer gerichte aanpak te gebruiken (zoals het rechtstreeks toevoegen van CSS aan een widget).
Methode 3: Gebruik de WordPress Customizer
Met de WordPress Customizer kun je ook aangepaste CSS toevoegen op een sitebrede basis. Om dit te doen, ga naar Appearance > Customize en selecteer de Additional CSS optie in het linkermenu:
Het is echter de moeite waard op te merken dat de codevelden van Elementor gebruiksvriendelijker zijn dan de velden die beschikbaar zijn in de Customizer. Als je Elementor al gebruikt voor het bouwen van sites, is er geen reden om aangepaste CSS toe te voegen via de Customizer.
Methode 4: Enqueue custom CSS bestanden
Als je je op je gemak voelt bij het bewerken van WordPress bestanden en het openen van je website via een File Transfer Protocol (FTP) client, kun je een CSS stylesheet enqueuen om te laden met Elementor. Deze aanpak vereist dat je code toevoegt aan het WordPress bestand functions.php.
Om toegang te krijgen tot het functions.php bestand, maakt je via FTP verbinding met je website en gaat je naar de root map van WordPress. Open de map, zoek het functions.php bestand, en bewerk het.
Hier is een voorbeeld van de code die je aan het bestand wilt toevoegen:
add_action( 'elementor/frontend/before_enqueue_scripts', function() {
wp_enqueue_script(
'custom-stylesheet',
get_stylesheet_uri()
);
} );Die code gebruikt de before_enqueue_scripts hook om een stylesheet genaamd custom-stylesheet te laden. We gebruiken ook de get_stylesheet_uri functie om te verwijzen naar de locatie van de stylesheet op de server.
Idealiter voeg je het aangepaste stylesheet toe in de map van je childthema of in de Themes map zelf. Het stylesheet kan elke gewenste Elementor CSS code bevatten. Het fragment dat je hebt toegevoegd aan functions.php zorgt ervoor dat de code alleen wordt geladen wanneer Elementor actief is op je website.
Methode 5: Gebruik een CSS plugin
Er zijn verschillende plugins waarmee je aangepaste CSS aan je website kunt toevoegen zonder de Customizer of paginabouwers te gebruiken. Een van onze favoriete tools voor de job is genaamd Simple Custom CSS and JS:
Met Simple Custom CSS and JS krijg je de mogelijkheid om code rechtstreeks toe te voegen aan de header- en footer-elementen van je thema. Om te beginnen, ga je naar Custom CSS & JS > Add Custom CSS en klik je op Add CSS Code.
Een basis CSS editor verschijnt aan de linkerkant. Aan de rechterkant kun je instellen of je de CSS code in een extern stylesheet of intern wilt laden. Je kan ook beslissen of de code in de header of de footer moet gaan:
Als je klaar bent met het bewerken van de CSS code, klik dan op de Publish knop. Mogelijk moet je overschakelen naar een front-end weergave om de code in actie te zien.
Best practices voor het maken van aangepaste CSS met Elementor
Wanneer je te maken hebt met aangepaste CSS of een type code aan je website toevoegt, doe je er goed aan om de volgende best practices in gedachten te houden. Laten we beginnen met het gebruik van een childthema.
Gebruik een WordPress childthema
Als je een deel van de stijl van je thema wilt wijzigen met behulp van CSS, raden we je aan een childthema te gebruiken. Een “child” thema is een template dat alle stijlen erft van een aangewezen thema.
Als je op deze manier wijzigingen aanbrengt in het oorspronkelijke thema, hebben deze geen invloed op de aanpassingen die je aan het childthema toevoegt. Bovendien, wanneer je je thema bijwerkt, zal het deze wijzigingen behouden.
Gebruik een code preprocessor voor eenvoudiger schrijven
Een van de grootste uitdagingen van het toevoegen van code binnen WordPress of het gebruik van Elementor is dat je geen toegang krijgt tot alle functionaliteit die moderne code editors bieden. In plaats van code te schrijven met eenvoudige on-site editors, raden we je aan om je favoriete preprocessor te gebruiken. Vervolgens kun je gewoon je code kopiëren en in WordPress plakken.
Overweeg het gebruik van een testwebsite
Wanneer je van plan bent om grote wijzigingen aan te brengen in WordPress, raden we je aan om een testwebsite te gebruiken. Met testomgevingen kun je wijzigingen in stijl en functionaliteit testen zonder het risico te lopen iets op je live site te slopen.
Sommige webhosts bieden je toegang tot testfunctionaliteiten vanaf je controlepaneel. Als je Kinsta gebruikt, kunt je je website selecteren via het MyKinsta dashboard en heen en weer schakelen tussen live- en testomgevingen:
Als je webhost geen testfunctionaliteit biedt, kun je een lokale WordPress ontwikkelingsomgeving zoals DevKinsta gebruiken voor testdoeleinden. Je kan ook overwegen van hostingprovider te veranderen.
Samenvatting
Het toevoegen van aangepaste CSS in Elementor is gemakkelijker dan je zou denken. De paginabouwer biedt verschillende methoden voor het toevoegen van code aan secties, kolommen, widgets en voor je hele website.
Om samen te vatten, hier zijn vijf belangrijke manieren om aangepaste CSS toe te voegen aan Elementor (of je website in het algemeen):
- Gebruik de Elementor HTML Widget.
- Gebruik het Elementor Site Settings menu.
- Gebruik de WordPress Customizer.
- Enqueue aangepaste CSS bestanden.
- Gebruik een CSS plugin.
Bij Kinsta zijn onze pakketten ontworpen om je te helpen de site van je dromen te bouwen met paginabouwers zoals Elementor. Bekijk onze pakketten of praat met de verkoopafdeling om het plan te vinden dat bij jou past.
Salman Ravoof is een autodidactische webdeveloper, schrijver, creator en een groot bewonderaar van Free and Open Source Software (FOSS). Naast techniek is hij enthousiast over wetenschap, filosofie, fotografie, kunst, katten en eten. Lees meer over hem op zijn website en kom in contact met Salman op X.
Laat een reactie achter