Wil je een achtergrondafbeelding toevoegen aan je WordPress-website?
Achtergrondafbeeldingen kunnen worden gebruikt om uw website aantrekkelijker en esthetischer te maken.
In dit artikel laten we u zien hoe u eenvoudig een achtergrondafbeelding aan uw WordPress-website kunt toevoegen.
Als u de voorkeur geeft aan de schriftelijke instructies, lees dan verder.
Methode 1. Voeg een achtergrondafbeelding toe met uw WordPress-thema-instellingen
de Meest populaire WordPress-thema's worden geleverd met aangepaste achtergrondondersteuning. Met deze functie kunt u eenvoudig een achtergrondafbeelding op uw WordPress-website plaatsen.
Als uw WordPress theme ondersteunt aangepaste achtergrondfunctionaliteit, raden we aan deze methode te gebruiken om een achtergrondafbeelding aan uw website toe te voegen.
Als je echter WordPress theme ondersteunt deze functie niet, of als je de manier waarop het achtergrondafbeeldingen implementeert niet leuk vindt, dan kun je de andere opties proberen die in onze tutorial worden genoemd.
U moet eerst de pagina bezoeken Uiterlijk »Aanpassen in uw WordPress-beheerder. Hierdoor wordt de Aanpasser gestart WordPress theme waar u verschillende instellingen van dit thema kunt wijzigen terwijl u een realtime voorbeeld bekijkt.
Dan moet je klikken op de optie 'Achtergrond afbeelding'. Het paneel schuift naar buiten en toont u de opties om een achtergrondafbeelding voor uw website te uploaden of te selecteren.
Klik op de knop Afbeelding selecteren om door te gaan.
Dit zal een WordPress-pop-up openen waar je een afbeelding vanaf je computer kunt uploaden. U kunt ook een afbeelding selecteren die u eerder uit de mediabibliotheek heeft gedownload.
Vervolgens moet u op de knop Afbeelding kiezen klikken na het uploaden of selecteren van de afbeelding die u op de achtergrond wilt gebruiken.
Hierdoor wordt de pop-up van de media-uploader gesloten en zie je een voorbeeld van je geselecteerde afbeelding in de WordPress-thema-aanpassing.
Onder de afbeelding ziet u ook de opties voor achtergrondafbeeldingen. Onder " Vooraf ingesteldU kunt selecteren hoe u de achtergrondafbeelding wilt weergeven: scherm vullen, scherm aanpassen, herhalen of aangepast.
U kunt ook de positie van de achtergrondafbeelding selecteren door op de onderstaande pijlen te klikken. Door op het midden te klikken, zal de afbeelding de afbeelding uitlijnen met het midden van het scherm.
Vergeet niet op de knop «te klikken publiceren Om uw instellingen op te slaan. Dat is alles, je hebt met succes een achtergrondafbeelding aan je WordPress-website toegevoegd.
Ga je gang en bezoek uw website om deze in actie te zien.
Methode 2. Voeg een aangepaste achtergrondafbeelding toe aan WordPress met behulp van een plug-in
Deze methode is veel flexibeler. Het werkt met elk WordPress-thema en stelt u in staat om meerdere achtergrondafbeeldingen te configureren.
U kunt ook verschillende achtergronden instellen voor elk bericht, pagina, categorie of elk ander gedeelte van uw WordPress-website.
Het maakt automatisch al uw achtergrondafbeeldingen op volledig scherm en responsief. Dit betekent dat uw achtergrondafbeelding automatisch wordt verkleind op kleinere apparaten.
Allereerst moet u de plug-in installeren en activeren Full Screen Achtergrond Pro. Raadpleeg onze stapsgewijze handleiding over voor meer informatie hoe een WordPress-plug-in te installeren.
Na activering moet u de pagina bezoeken Uiterlijk »BG-afbeelding op volledig scherm om de plug-ininstellingen te configureren.
U wordt gevraagd om uw licentiesleutel toe te voegen. U kunt deze informatie verkrijgen via de e-mail die u heeft ontvangen na aanschaf van de plug-in of via uw account op de plug-inwebsite.
Dan moet je klikken op de 'Instellingen opslaan'om uw wijzigingen op te slaan. U bent nu klaar om achtergrondafbeeldingen toe te voegen aan uw WordPress-website.
Ga je gang en klik op de knop Nieuwe afbeelding toevoegen Op de instellingenpagina van de plug-in. Hiermee gaat u naar het downloadscherm van de achtergrondafbeelding.
Klik op de knop 'Kies Afbeelding'om een afbeelding te downloaden of te selecteren. Zodra u de afbeelding selecteert, kunt u een real-time voorbeeld van de afbeelding op uw scherm zien.
Vervolgens moet u deze afbeelding een naam geven. Deze naam wordt intern gebruikt, dus je kunt hem overal gebruiken.
Ten slotte moet u selecteren waar u deze afbeelding als achtergrondafbeelding wilt gebruiken.
Met Full Screen Background Pro kunt u ook achtergrondafbeeldingen instellen voor de hele website, of u kunt kiezen uit verschillende secties van uw website, zoals categorieën, archieven, startpagina of blog.
Vergeet niet op te slaan om uw achtergrondafbeelding op te slaan.
U kunt zoveel afbeeldingen toevoegen als u wilt door de pagina te bezoeken Apparence »BG-afbeelding op volledig scherm
Als u meerdere afbeeldingen definieert die wereldwijd moeten worden gebruikt, wordt de plug-in weergegeven automatiquement achtergrondafbeeldingen als een diavoorstelling.
U kunt de tijd aanpassen die het duurt voordat een afbeelding verdwijnt en de tijd waarna een nieuwe achtergrondafbeelding verschijnt.
De tijd die u hier invoert, is in milliseconden. Als u wilt dat een achtergrondafbeelding na 20 seconden vervaagt, moet u 20000 invoeren.
Vergeet niet op de knop te klikken Opties opslaan om uw wijzigingen op te slaan.
Achtergrondafbeeldingen voor berichten, pagina's en categorieën
Met Full Screen Background Pro kunt u ook achtergrondafbeeldingen instellen voor berichten, pagina's, categorieën, tags en meer.
Bewerk gewoon de post / pagina waar u een andere achtergrondafbeelding wilt weergeven. Op de artikelbewerkingspagina ziet u de nieuwe groep " Achtergrondafbeelding op volledig scherm »In de artikeleditor.
Om een achtergrondafbeelding voor een specifieke categorie te gebruiken, moet u de pagina bezoeken Uiterlijk »Achtergrondafbeelding op volledig scherm, klik vervolgens op de "Kies Afbeelding .
Nadat u uw afbeelding heeft geüpload, kunt u "categorie" selecteren als de context waarin u de achtergrondafbeelding wilt weergeven.
Voer de ID in van de specifieke categorie of naaktslak waar u de afbeelding wilt weergeven.
Vergeet niet uw afbeelding op te slaan om uw instellingen op te slaan.
Methode 3. Voeg overal in WordPress aangepaste achtergrondafbeeldingen toe met behulp van CSS-code
WordPress voegt standaard meerdere CSS-klassen toe aan verschillende HTML-elementen op uw WordPress-website. U kunt eenvoudig aangepaste achtergrondafbeeldingen toevoegen aan berichten, categorieën, auteurs en andere pagina's met behulp van deze door WordPress gegenereerde CSS-klassen.
Als u bijvoorbeeld een categorie op uw website heeft met de naam TV, voegt WordPress deze CSS-klassen automatisch toe aan de body-tag wanneer iemand de categoriepagina TV bekijkt.
U kunt gebruiken inspectie tool om precies te zien welke CSS-klassen door WordPress aan de body-tag worden toegevoegd.
U kunt beide CSS-klassen gebruiken om deze categoriepagina anders op te maken.
categorie-tvcategory-4
Laten we een aangepaste achtergrondafbeelding toevoegen aan een categoriearchiefpagina. U moet deze aangepaste CSS toevoegen aan uw WordPress-thema.
body.categorie-tv { achtergrondafbeelding: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); achtergrondpositie: midden midden; achtergrondformaat: omslag; achtergrond herhalen: niet herhalen; achtergrondbijlage: vast; }
U kunt ook aangepaste achtergronden toevoegen aan individuele berichten en pagina's. WordPress voegt een CSS-klasse toe met de post- of pagina-ID in de body van de tag. Je kunt dezelfde CSS-code gebruiken, vervang gewoon .category-tv door de CSS-klasse van een specifiek bericht.
Ontdek ook enkele premium WordPress-plug-ins
U kunt andere gebruiken WordPress plugins om een moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.
We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.
1. Eenvoudig aangepast JS en CSS
Ce WordPress Plugin premium is een krachtige CSS- en JavaScript-code-editor waarmee u ze aan elk gedeelte van uw website kunt toevoegen. Hiermee kunt u uw aanpassingen behouden, zelfs na een grote update van uw WordPress-thema. 
U heeft de mogelijkheid om het gebruik van uw gepersonaliseerde code te beperken. U kunt uw code bijvoorbeeld alleen gebruiken voor een artikel met het videoformaat.
Zie onze artikelen over Hoe acceptatie van de gebruiksvoorwaarden op WordPress te eisen
Of u kunt uw code beperken tot een specifiek WordPress-thema; Dat is handig als u momenteel thema's voor uw WordPress-blog wijzigt.
Downloaden | demonstratie | web hosting
2. Geel potlood: visuele CSS-stijleditor
Yellow Pencil is een visuele stijleditor die u met elk thema kunt gebruiken om uw website binnen enkele minuten te personaliseren (lettertypen, kleuren, animaties en meer…).
Ce WordPress Plugin premium maakt CSS-stijlen door achtergrond terwijl je met de kleuren speelt alsof het een spel is.Het is ontworpen voor zowel beginners als ervaren gebruikers.
Ontdek ook onze 5-plug-ins WordPress om meldingen te tonen
Er is geen codeerkennis vereist. echter, de WordPress Plugin heeft een goede CSS-editor voor degenen die graag coderen. U kunt met deze editor live coderen en uw CSS aanpassen.
Downloaden | demonstratie | web hosting
3. Widget voor recente reacties van Facebook
Met deze widget kunt u een lijst met de nieuwste Facebook-opmerkingen van uw WordPress-blog op de eerste pagina weergeven, of waar dan ook waar een widget door de website wordt gebruikt.
Als functies heb je onder andere: de weergave van de nieuwste opmerkingen van je website of WordPress-blog, deAutomatische of handmatige goedkeuring van opmerkingen die op de widget moeten worden weergegeven,een e-mailmelding sturen wanneer een persoon opmerkingen maakt via de Facebook-opmerkingenplug-in goede SEO, compatibiliteit met elk WordPress-thema, oopties om de widget aan te passen en nog veel meer.
Downloaden | demonstratie | web hosting
Aanbevolen bronnen
Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.
- Hoe een WordPress-widget op mobiel te verbergen
- 10 WordPress plugins om de visie van uw website te verbeteren
- Handmatig een WordPress-website migreren: de gids
- 7 WordPress-plug-ins voor call-to-action-knoppen op WordPress
Conclusie
Alstublieft ! Dat is het voor deze tutorial. We hopen dat dit artikel je heeft geholpen bij het leren toevoegen van een achtergrondafbeelding in WordPress. Aarzel niet om deel met je vrienden op je favoriete sociale netwerken.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig heeft om uw projecten voor het maken van internetsites uit te voeren, raadpleeg dan onze gids op Creatie van WordPress blogs.
Als u suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires.
...
