Hoe u uw WordPress-website kunt aanpassen met CSS: 3 eenvoudige methoden

WordPress is door de jaren heen geëvolueerd en tegenwoordig is het een behoorlijk flexibel en gemakkelijk aan te passen platform via de blokeditor, Gutenberg. Toch zullen er momenten zijn dat je iets meer bereik nodig hebt dan de Gutenberg-editor biedt.

Dit is waar aangepaste CSS van pas komt. Met CSS-styling kunt u de kleuren, spatiëring, lettertypen, lay-outs en eigenlijk elk ander visueel element van uw WordPress-website bewerken, zodat u deze er precies zo uit kunt laten zien als u wilt.

In dit artikel zullen we u door de essentie leiden van het aanpassen van uw WordPress-website met CSS.

Waarom uw website aanpassen met CSS?

Het toevoegen van aangepaste CSS is slechts een van de methoden die u kunt gebruiken om het uiterlijk van uw site te verfijnen. Andere methoden zijn onder meer het gebruik van a goed uitgerust premium WordPress-thema, of het installeren van een paginabuilder.

Hoewel deze twee methoden iets gemakkelijker te gebruiken zijn voor beginners en geen codeerkennis vereisen, is het gebruik van aangepaste CSS op twee manieren voordeliger:

Geen kosten

Premium-thema's en WordPress-paginabuilders kunnen handig zijn, maar ze kosten geld - in dollars en centen. Aan de andere kant, gewapend met de kennis van het schrijven van aangepaste CSS, kunt u dezelfde effecten bereiken zonder extra kosten te maken.

Minimale opgeblazen gevoel

Paginabuilders en goed uitgeruste thema's zijn ontworpen om gebruikers meer flexibiliteit en een breed scala aan opties te bieden voor het aanpassen van hun websites. Hierdoor hebben ze de neiging om een ​​opgeblazen gevoel aan websites toe te voegen, waardoor ze mogelijk langzamer worden.

Bij het schrijven van aangepaste CSS voegt u daarentegen alleen de noodzakelijke functies toe, wat over het algemeen resulteert in lichtere websites en hogere laadsnelheden.

3 eenvoudige methoden om uw WordPress-website aan te passen met CSS

Hopelijk weet je het al hoe CSS te schrijven. Als je eenmaal bekend bent met de basis, kun je een van de volgende methoden gebruiken om aangepaste CSS toe te voegen aan je WordPress-website:

Methode 1: Gebruik de WordPress Customizer

Met WordPress 4.7 of een latere versie kunt u aangepaste CSS rechtstreeks vanuit het beheerdersgedeelte toevoegen. Dit is de meest rechttoe rechtaan methode en omdat er een live preview beschikbaar is, kunt u alle wijzigingen die u aanbrengt in realtime zien.

Het is ook de meest aanbevolen, omdat alle wijzigingen die u aanbrengt, worden opgeslagen in WordPress zelf. Dit betekent dat zelfs als u uw thema wijzigt of bijwerkt, u uw aangepaste CSS niet kwijtraakt.

Dit zijn de te nemen stappen:

Stap 1: Navigeren naar Uiterlijk > Aanpassen.

Hiermee wordt de WordPress-thema-aanpasser geopend, die u een live voorbeeld van uw site aan de rechterkant laat zien, samen met enkele aanpassingsopties aan de linkerkant. Scrol omlaag naar de onderkant van het linkerdeelvenster en je zult een Aanvullende CSS tabblad.

Stap 2: Klik op de Aanvullende CSS Tabblad.

Dit opent een klein vak in het linkerdeelvenster waar u uw aangepaste CSS kunt toevoegen. U kunt zoveel regels CSS-code typen als u wilt. Het mooie van deze editor is dat het je code valideert en je waarschuwt als er fouten zijn.

Stap 3: publiceer uw wijzigingen.

Elke geldige CSS-regel die u toevoegt, wordt weergegeven in het live voorbeeldgebied aan de rechterkant. Om de wijzigingen op uw site toe te passen, klikt u op de Publiceren knop bovenaan het linkerdeelvenster als u tevreden bent. Als u niet wilt dat de wijzigingen onmiddellijk van kracht worden, kunt u publicatie op een later tijdstip plannen of uw werk opslaan als concept.

Het is belangrijk op te merken dat alle wijzigingen die u aanbrengt met behulp van de customizer, gekoppeld zijn aan uw huidige thema. Als u ooit overschakelt naar een ander thema, gaan de wijzigingen verloren, tenzij u uw aangepaste CSS kopieert en aan het nieuwe thema toevoegt. Het is een goede gewoonte om alle aangepaste CSS die u aan een thema toevoegt, op een notitieblok op te slaan. Op die manier kunt u de code eenvoudig kopiëren en in het gedeelte "Aanvullende CSS" voor een ander thema plakken.

Als dat te veel werk lijkt en je de voorkeur geeft aan een oplossing waarmee je je aangepaste CSS kunt toepassen op elk WordPress-thema dat je gebruikt, dan is de volgende methode iets voor jou.

Methode 2. Gebruik een plug-in

Aangepaste CSS-plug-ins slaan uw aangepaste CSS apart van uw thema op, zodat uw wijzigingen kunnen worden toegepast, ongeacht welk thema u gebruikt. Deze plug-ins worden ook geleverd met extra functies, zoals automatisch aanvullen, waardoor het toevoegen van CSS eenvoudiger wordt.

Het enige nadeel is dat het software van derden is, wat betekent dat ze uw site mogelijk kunnen vertragen. De meeste van deze plug-ins zijn echter lichtgewicht, dus ze hebben over het algemeen weinig invloed op de prestaties van uw site. Hier zijn enkele van de beste aangepaste CSS-plug-ins die u kunt gebruiken:

• Eenvoudige aangepaste CSS

Eenvoudige aangepaste CSS is een van de meest populaire aangepaste CSS-plug-ins. Het is lichtgewicht, gemakkelijk te gebruiken en biedt geweldige functies. Het instellen is eenvoudig. Het enige dat u hoeft te doen, is de plug-in installeren en activeren. Navigeer vervolgens naar de Verschijning sectie in het linkerdeelvenster van uw dashboard.

Je ziet een nieuwe optie genaamd Aangepaste CSS. Als u erop klikt, wordt een editor geopend waarin u uw aangepaste CSS kunt toevoegen. Klik op de Aangepaste CSS bijwerken knop om uw wijzigingen op te slaan. Vernieuw uw website om de wijzigingen te bekijken.

• Eenvoudige aangepaste CSS en JS

Als je nog meer functies wilt, is de Eenvoudige aangepaste CSS- en JS-plug-in is een geweldige optie. Naast het toevoegen van CSS, kunt u JavaScript-vermeldingen toevoegen.

• CSS-held

Als u geen enkele regel code wilt schrijven, gebruikt u de CSS Hero-plug-in past perfect bij jou. Deze plug-in biedt een visuele CSS-editor met vervolgkeuzemenu's en invoervelden waarmee u bijna elke CSS-stijl op uw site kunt bewerken zonder dat u code hoeft te schrijven.

Methode 3. Bewerk de onbewerkte code

Met de twee methoden die we hierboven hebben beschreven, kunt u aangepaste CSS aan uw site toevoegen zonder dat u uw themabestanden hoeft aan te raken. Maar in sommige gevallen wilt u misschien de CSS van uw thema bewerken of rechtstreeks aangepaste CSS toevoegen aan de code van uw thema.

Om dit te doen, moet u de stylesheet van uw website openen. Een gemakkelijke manier om toegang te krijgen tot dit stylesheet is via de Thema-editor op uw WordPress-dashboard.

Voordat we echter verder gaan, zijn er een paar voorzorgsmaatregelen die u moet nemen. Eerst, maak een back-up van je website. Tijdens het bewerken van uw themabestanden is het gemakkelijk om fouten te maken die uw site mogelijk kunnen laten crashen.

Een back-up zorgt ervoor dat je een functionele website hebt om naar terug te gaan. Volgende, maak een child-thema. Als u uw hoofdthema rechtstreeks bewerkt, gaan de wijzigingen verloren wanneer het thema wordt bijgewerkt.

Zodra deze beveiligingen aanwezig zijn, logt u in op uw WordPress-backend. Ga naar Uiterlijk > Thema-editor. Wanneer u op de thema-editoroptie klikt, ziet u een pop-upvenster waarin u wordt gewaarschuwd geen directe wijzigingen aan uw themabestanden aan te brengen. Als u de bovenstaande stappen volgt, bent u klaar om te gaan.

Klik ik begrijp verder gaan.

Nadat je hebt geklikt, zou je standaard de stylesheet van je site moeten zien. Zo niet, kijk dan gewoon in het rechterdeelvenster en klik op style.css onder de Stijlblad optie.

Vanaf hier kunt u rechtstreeks wijzigingen aanbrengen in uw themabestanden. Vergeet niet te klikken Opslaan en bijwerken als je klaar bent.

Neem de controle over het uiterlijk van uw site met aangepaste CSS

Het leren schrijven van aangepaste CSS op WordPress kan voor beginners enige tijd duren, maar het geeft je echte controle over het uiterlijk van je website. En dat kost niets en heeft een minimale impact op de prestaties van uw site.

Als u liever niet handmatig ontwerpt, zijn er andere manieren om de klus te klaren, bijvoorbeeld door een van de beste paginabuilders voor WordPress te gebruiken.

5 WordPress Page Builders die u kunnen helpen bij het bouwen van geweldige websites

Wilt u uw WordPress-site er geweldig uit laten zien, maar kunt u zich geen ontwikkelaar veroorloven? Probeer in plaats daarvan deze WordPress-paginabuilders.

Lees volgende

Over de auteur