Vraagt u zich af hoe u een achtergrondafbeelding kunt toevoegen aan uw WordPress website?
Achtergrondafbeeldingen kunnen op verschillende websites worden gebruikt om ze aantrekkelijker te maken en kunnen het ontwerp van uw site verbeteren.
We lopen stap voor stap met je door hoe je eenvoudig een achtergrondafbeelding aan je WordPress site kunt toevoegen.
Inhoudsopgave
1. Voeg een achtergrondafbeelding toe via de thema-instellingen van WordPress
De meeste WordPress thema’s bieden ondersteuning voor aangepaste achtergronden. Dit betekent dat u gemakkelijk de achtergrondafbeelding op uw WordPress site kunt veranderen.
Dit is waarschijnlijk de eenvoudigste manier om een achtergrond toe te voegen, dus als uw WordPress thema dit ondersteunt, kunt u met deze methode verder gaan.
Als uw thema deze functie niet biedt, hebben we hieronder genoeg andere methoden die u kunt volgen.
Navigeer naar Uiterlijk > Aanpassen in uw WordPress admin dashboard. Dit brengt u naar de WordPress thema-aanpasser. Hier kunt u uw thema-instellingen wijzigen met een live preview om de veranderingen van uw website te zien.
Onder het tabblad Kleuren & Achtergronden ziet u opties om een achtergrondafbeelding te kiezen, of om de achtergrondkleur en het patroon te wijzigen. Zoek de knop“Afbeelding selecteren” en klik erop.
U ziet nu uw WordPress mediabibliotheek waar u een afbeelding van uw computer kunt uploaden, of een afbeelding uit uw mediabibliotheek kunt selecteren om als achtergrondafbeelding op uw WordPress website te gebruiken.
Klik op de afbeelding die u als achtergrondafbeelding wilt instellen en druk op ‘Afbeelding kiezen’ om verder te gaan. Dit zal nu de mediabibliotheek sluiten en uw geselecteerde afbeelding zal worden weergegeven in de preview-sectie van de customizer van het thema.
U kunt uw achtergrondafbeelding verder aanpassen door‘Opties‘ te selecteren. Hier zie je de optie om je afbeelding te positioneren, te herhalen (als het niet groot genoeg is), en meer.
2. Gebruik een plugin om de achtergrondafbeelding in WordPress aan te passen
Als uw thema niet toestaat dat u de achtergrondafbeelding aanpast via de thema-aanpasser, kunt u een plugin gebruiken die werkt met elk thema.
Met de Full Screen Background Pro plugin kunt u achtergronden instellen voor elke post, pagina, of elk ander onderdeel van uw WordPress website.
Alle afbeeldingen worden automatisch schermvullend en mobiel responsief gemaakt, wat erg moeilijk te bereiken is met de thema-aanpasser.
Installeer eerst de Full Screen Background Pro plugin. Zodra het is geïnstalleerd, activeer de plugin.
Navigeer naar Uiterlijk > Volledig scherm achtergrondafbeelding waar je de plugin instellingen kunt configureren.
Deze plugin is een premium plugin, en is daarom niet gratis. Wanneer u naar de bovenstaande locatie navigeert, kan u gevraagd worden om uw licentiesleutel in te voeren. Dit staat in de e-mail die u heeft ontvangen na aankoop van de plugin.
Klik op‘Instellingen opslaan‘ om uw wijzigingen op te slaan. Nu bent u klaar om te beginnen met het toevoegen van achtergrond afbeeldingen aan uw WordPress pagina’s, berichten, en categorieën.
Selecteer ‘Afbeelding toevoegen‘ op de instellingenpagina van de plugin. Zoals we bij methode één deden, selecteer ‘Afbeelding kiezen’ om de mediabibliotheek in WordPress te starten.
U moet een afbeeldingsnaam toevoegen, maar deze zal alleen worden weergegeven in de backend van WordPress, dus noem het iets dat relevant is voor de afbeelding.
Kies waar u de afbeelding wilt weergeven:
- Global
- Categorie
- Archief
- Pagina’s
- Berichten
- Blog
- Voorpagina
- Zoeken op
- 404
- Inloggen
3. Voeg een achtergrondafbeelding toe via CSS Hero
CSS Hero is een WordPress plugin die het mogelijk maakt om het thema van uw WordPress website te veranderen zonder enige codering.
Dit is een perfecte optie voor beginners die meer flexibiliteit willen dan de theme customizer biedt, maar misschien niet voorbereid zijn op andere meer ingewikkelde methodes.
Installeer en activeer CSS Hero, ga dan naar uw homepage in uw internet brwoser. Bovenaan ziet u de optie‘Aanpassen met CSS Hero‘; klik op deze link in uw beheerdersbalk.
CSS Hero is een premium plugin, met plannen vanaf $19 per jaar. Als u slechts één site aanpast, kunt u de Starter-optie kiezen.
Zodra je op de knop in de admin balk hebt geklikt, krijg je de CSS Hero opties. Ga met de muis over het gebied waar u de achtergrondafbeelding wilt veranderen.
Kies de achtergrond link in de linker zijbalk en selecteer dan ‘Afbeelding’. U kunt uw eigen foto’s uploaden of er een kiezen van Unsplash, een gratis stockfotosite.
Wanneer u de afbeelding hebt die u als achtergrondafbeelding aan uw WordPress website wilt toevoegen, selecteert u ‘Afbeelding toepassen’. U kunt de grootte van uw afbeelding aanpassen en meer via de opties.
Als u klaar bent om uw nieuwe achtergrondafbeelding in actie te zien, klikt u op ‘Opslaan en publiceren’. CSS Hero werkt met een aantal andere plugins zoals Elementor, dus controleer de compatibiliteit voordat u het koopt.
4. Een achtergrondafbeelding toevoegen met CSS
WordPress voegt standaard CSS klassen toe aan de verschillende elementen op uw WordPress site. Als je klaar bent om te experimenteren met CSS code, dan is deze methode misschien het beste voor jou.
Als u een categorie op uw WordPress site heeft die ‘Recensies’ heet, dan zullen er automatisch CSS klassen worden toegevoegd wanneer deze categorie pagina wordt bekeken.
Navigeer naar een categoriepagina, klik met de rechtermuisknop en selecteer ‘Inspecteren’. U zult in staat zijn om de CSS klassen te zien die door WordPress zijn toegevoegd.
In dit voorbeeld kunt u de categorie-reviews CSS klasse gebruiken omdeze categorie anders te stylen dan alle andere op uw WordPress site.
Voeg de volgende aangepaste CSS toe aan uw thema, vergeet niet om de categorie en achtergrondafbeelding te vervangen naar uw eigen wensen.
|
1
2
3
4
5
6
7
|
body.category-reviews { background-image: url("http://example.com/wp-content/uploads/2019/03/your-background-image.jpg"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;} |
5. Roundup
Wij hopen dat dit artikel nuttig is geweest om u te leren hoe u een achtergrondafbeelding kunt toevoegen in WordPress. Voor meer WordPress handleidingen, bezoek onze blog pagina en gebruik de zoekfunctie om meer WordPress handleidingen te vinden!