WordPress achtergrondafbeeldingen zijn er in allerlei vormen. Je kunt een achtergrondafbeelding voor de gehele website uploaden, achter knoppen plaatsen, of een achtergrond met een effen kleur voor je loginpagina instellen. Ongeacht waar je ze wilt plaatsen, het is essentieel om de basisprincipes van het uploaden van een afbeelding, inclusief een achtergrondafbeelding, te begrijpen.

In dit artikel wordt uitgelegd wat een achtergrondafbeelding is en hoe je deze kunt bewerken voor een beter resultaat. We behandelen ook hoe je snel achtergrondafbeeldingen activeert op je site en hoe je eventuele problemen oplost die onderweg kunnen optreden.

Enthousiast? Laten we beginnen!

Wat is een WordPress achtergrondafbeelding?

Een WordPress achtergrondafbeelding dient als de volledige achtergrond van jouw website. Het wordt ook wel een aangepaste (custom) achtergrond genoemd.

Een WordPress achtergrondafbeelding voorbeeld
Een WordPress achtergrondafbeelding voorbeeld

Een achtergrond kan ook een effen kleur zijn.

Ongeacht de optie die je kiest, het functions.php bestand gaat over de achtergrondafbeelding in een WordPress thema. Het wordt ook weergegeven door het header.php bestand van WordPress.

Als gevolg hiervan hebben thema-ontwikkelaars meer controle over het al dan niet activeren van de aangepaste-achtergrondfunctionaliteit binnen jouw WordPress thema. Je kunt de functionaliteit nog steeds Aan of Uit zetten, maar het thema van jouw site dicteert meestal de standaardinstellingen.

Er zijn verschillende soorten achtergronden die je kunt implementeren op WordPress. Je kunt kiezen voor een standaard volledige achtergrond of een die achter specifieke elementen zit, zoals zijbalken en artikelen.

Aangepaste achtergronden zijn ook mogelijk voor meer specifieke locaties op de WordPress site:

  • Achter een WordPress pagina of bericht
  • Op een WordPress categoriepagina
  • Binnen een contentblok van een pagina of bericht
  • Op de Login pagina
  • Achter het navigatiemenu
  • Op de pagina’s Onderhoud of Binnenkort

In het algemeen, als aangepaste achtergronden zijn ingeschakeld binnen een thema, dan heeft de gebruiker de mogelijkheid om een afbeelding te uploaden of een kleur te kiezen om de gehele achtergrond van de site te vullen.

De instellingen zijn te vinden in het WordPress dashboard onder Appearance > Customize > Background Image. Andere soorten achtergronden zijn echter mogelijk via drag-and-drop paginabouwers, plugins, en andere opties.

Het uploaden van een achtergrondafbeelding naar het dashboard is slechts een deel van het proces. Daarna moet je de instellingen voor de achtergrondafbeelding configureren. Soms kun je de instellingen laten zoals ze zijn, terwijl het andere keren belangrijk is om de instellingen te her-configureren om ervoor te zorgen dat de afbeelding er uitstekend uitziet.

Instellingen voor een WordPress achtergrondafbeelding omvatten:

  • Achtergrondkleuren
  • Formaat
  • Positie van de afbeelding
  • Of de afbeelding al dan niet herhaald moet worden
  • Opties om het scherm te vullen of de afbeelding uit te rekken

We zullen eerst de beste manieren bespreken om een WordPress achtergrondafbeelding te gebruiken. Daarna gaan we in op hoe je een WordPress achtergrondafbeelding in verschillende situaties kunt instellen.

Wil je je site een nieuwe look geven? ✅ Leer hoe je een achtergrondafbeelding toevoegt, de grootte aanpast. Kortom: het helemaal naar jouw wensen aan te passen, én meer. ✨Klik om te tweeten

De vele stijlen achtergronden

Een groot voordeel van een WordPress achtergrond is dat het niet allemaal statische afbeeldingen zijn. Je kunt verschillende soorten achtergronden tegenkomen, variërend van video’s tot fotopatronen tot diavoorstellingen.

Een voorbeeld van een achtergrondafbeelding op de site van Kinsta
Een voorbeeld van een achtergrondafbeelding op de site van Kinsta

Het is vaak mogelijk om unieke achtergronden te gebruiken met behulp van aangepaste CSS of plugins (of beide). We laten je beide methodes zien in dit artikel.

Hier zijn enkele achtergrondstijlen om te overwegen:

  • Achtergrond met effen kleur: De effen kleuren achtergrondafbeelding komt van pas wanneer je wat levendigheid aan je site wilt toevoegen, maar geen afbeelding hebt die bij je merk past of die er goed uitziet als achtergrond. Een achtergrond in simpele kleuren geeft ook een netter en professioneler beeld, en het duurt niet lang om ze te implementeren. Ze zijn geweldig voor het afstemmen van jouw branding zonder aangepaste code of een plugin nodig te hebben.
  • Gradient achtergronden: Een achtergrond met kleurverloop gaat over van de ene kleur naar de andere. Het is visueel aantrekkelijker dan een effen kleur, kost niet veel tijd om toe te voegen, en je kunt er een toevoegen met een van de vele plugins. Het grootste nadeel is dat een voorgrond aan de ene kant van het kleurverloop goed te zien is en aan de andere kant niet.
  • Patroon- of textuurachtergronden: Alle patroon- en textuurachtergronden zijn foto’s, maar ze richten zich op repetitieve items in de afbeelding of een close-up textuur, zoals een houten paneel of een stukje gras. Het mooie van een patroon of textuur is dat het wonderen doet als achtergrond, aangezien je het kunt uitrekken, en de meeste mensen zullen het niet merken als er een onderbreking in het patroon is, als de afbeelding niet groot genoeg is.-
  • Diavoorstelling met afbeeldingen als achtergrond: Een diavoorstelling met afbeeldingen als achtergrond stelt site-eigenaren in staat om meerdere soorten ontwerpen of foto’s te delen op de achtergrond. Je kan hiermee de sfeer aanpassen terwijl een klant scrolt door jouw site. Diavoorstellingen kunnen echter ook storend overkomen of de site vertragen.
  • Video-achtergronden: Videoachtergronden zijn boeiend, leuk om naar te kijken, en erg geschikt om de kern van jouw merk uit te beelden. Ze leiden echter ook tot prestatieproblemen als ze niet correct worden uitgevoerd en kunnen de aandacht van jouw salesfunnel wegnemen. Bovendien moeten achtergrondvideo’s de perfecte afmetingen hebben en op het juiste moment worden afgespeeld. Ze kunnen ook duur zijn om te maken, tenzij je kiest voor gratis stockvideo’s.

Best practices voor het gebruik van WordPress achtergrondafbeeldingen

Het instellen van een aangepaste achtergrondafbeelding lijkt een eenvoudige taak. Je uploadt de afbeelding naar de juiste plaats en ziet hem vanzelf aan de voorkant verschijnen, toch?

Meestal is dat het geval, maar soms kan de achtergrondafbeelding wat beetje lastig doen. Daarom raden wij je aan de best practices voor WordPress achtergrondafbeeldingen te volgen om zo veel mogelijk problemen te elimineren.

Blijf bij afbeeldingen van hoge kwaliteit

De resolutie van jouw beoogde achtergrondafbeelding maakt of breekt vaak de presentatie ervan. Misschien denk je dat een foto die je met jouw smartphone hebt genomen perfect is voor een achtergrondafbeelding, maar de kans is groot dat deze van veel hogere kwaliteit moet zijn.

Gratis stockfoto's op Unsplash
Gratis stockfoto’s op Unsplash

Je kunt betalen voor een rechtenvrije afbeelding van een site als Shutterstock. Deze sites hebben meestal afbeeldingen van professioneel niveau die zijn geprepareerd en klaar staan als om te worden gebruikt als een grote achtergrondafbeelding. Je kunt er ook veel vinden op sites met gratis stockafbeeldingen.

De achtergrondafbeelding wordt mogelijk niet in zijn geheel weergegeven op jouw website, omdat een groot deel ervan wordt bedekt door inhoud. Toch wordt de eigenlijke afbeelding over het hele scherm weergegeven.

Als je geen afbeelding van hoge kwaliteit gebruikt, loop je het risico dat je een uitgerekte achtergrond te zien krijgt.

Zorg ervoor dat de achtergrondafbeeldingen de juiste afmetingen hebben

Naast de beeldresolutie is ook de fysieke grootte van de afbeelding van groot belang.

Alle schermen hebben verschillende beeldverhoudingen. En mobiele apparaten maken het nog ingewikkelder. Maar het doel is om een afbeelding te gebruiken die er goed uitziet voor de grootste schermen. Anders loop je het risico dat de afbeelding weer eens uitgerekt wordt of niet goed wordt weergegeven.

Over het algemeen is een goede regel om een minimale WordPress achtergrondafbeelding grootte van 1024 x 768 pixels aan te houden. Andere experts raden echter iets van 1920 x 1080 pixels aan. Over het algemeen kun je het beste ergens tussen de 1000 en 3000 pixels voor de breedte aanhouden, afhankelijk van waar de afbeelding wordt weergegeven.

WordPress achtergrondafbeelding afmetingen
WordPress achtergrondafbeelding afmetingen

De volgende factor die je moet overwegen is de beeldverhouding. Dekt de achtergrondafbeelding de hele website, of is het alleen het bovenste kwart?

Technisch gezien heeft een website een staande (langere hoogte dan breedte) beeldverhouding. Dus je kunt kijken naar dat soort afbeeldingen. Maar gedeeltelijke achtergronden, zoals die voor kopteksten of banneradvertenties, moeten in liggende opmaak blijven (langer in de breedte dan in de hoogte).

De meest voorkomende beeldverhouding voor desktops is tegenwoordig 16:9. Het helpt om rond dat doel te blijven. Een responsief thema of plugin kan de achtergrondafbeelding automatisch aanpassen voor gebruik op kleinere schermen.

Uiteindelijk zou het testen van jouw achtergrondafbeeldingen op een echte site en meerdere apparaattypes de uiteindelijke beslissing veel gemakkelijker moeten maken.

Optimaliseer voordat je een WordPress achtergrondafbeelding maakt

Zoals met alle afbeeldingen die je uploadt naar WordPress, bewijs je jezelf een slechte dienst als je ze niet optimaliseert voordat je ze op het internet publiceert. Dit is vooral belangrijk voor achtergrondafbeeldingen omdat deze vaak op meerdere pagina’s van jouw website voorkomen. Plus, het zijn grote foto’s en ze nemen een aanzienlijke hoeveelheid ruimte in op het scherm.

Grotere afbeeldingen belasten de server aanzienlijk. Handhaaf de resolutie van jouw afbeelding, maar optimaliseer de grootte zodat jouw website snel laadt voor mobiele weergave.

Je hebt twee opties om foto’s te optimaliseren:

  1. Optimaliseer de achtergrondafbeeldingen (en alle website afbeeldingen) voordat je ze naar WordPress uploadt. Voltooi dit handmatige proces met behulp van tools zoals Photoshop Express, GIMP, en Pixlr.
  2. Automatiseer het optimalisatieproces door een WordPress plugin te installeren die foto’s hervormt en verkleint bij het uploaden.

Lees onze uitgebreide handleiding over het optimaliseren van afbeeldingen voor betere webprestaties.

Controleer of achtergronden worden ondersteund voordat je een thema installeert

Helaas ondersteunen niet alle thema’s aangepaste achtergrondafbeeldingen. Dat komt vaak omdat de achtergrond niet in het algemene ontwerp van het thema past, dus heeft de ontwikkelaar ervoor gekozen deze helemaal uit te schakelen.

Maar als je echt een achtergrond op jouw website wilt, is het verstandig om de lijst met functies te controleren wanneer je een nieuw thema downloadt, vooral als je van plan bent te betalen voor een premium thema. Veel thema verkoopwebsites geven informatie over de vraag of een thema achtergronden ondersteunt of niet.

Thema’s die in de WordPress Theme Library worden vermeld, bieden bijvoorbeeld ondersteuning voor aangepaste achtergronden als tags. Je kunt ook een verwijzing naar een aangepaste achtergrond vinden in de beschrijving van het thema.

Ondersteuning voor thema's met een eigen achtergrond
Ondersteuning voor thema’s met een eigen achtergrond

Andere themasites bevatten doorgaans soortgelijke informatie over aangepaste achtergrondafbeeldingen. Zo niet, neem dan contact op met de ontwikkelaar om na te gaan of dit op enigerlei wijze mogelijk is en of het overschrijven van het blok met achtergrondafbeeldingen (zie hieronder) problemen met het thema zal veroorzaken.

Overweeg het gebruik van een visuele paginabouwer om achtergrondafbeeldingen eenvoudiger te maken

Pagina bouwers zoals Gutenberg, WPBakery, Divi, en Elementor, bieden indrukwekkende lijsten van blokken en modules om elementen zoals afbeeldingen en tekstvakken overal op een webpagina in te voegen.

Elementor websitebouwer
Elementor websitebouwer

Zonder een drag-and-drop bouwer, wordt het een beetje moeilijker om een achtergrondafbeelding te configureren. Het is vooral lastig om eventuele problemen die je tegenkomt op te lossen.

Paginabouwers hebben ook de neiging om de standaard achtergrondafbeelding functionaliteit te vervangen die door WordPress wordt geleverd. Je kunt themabeperkingen of ontbrekende elementen die helpen bij het weergeven van een achtergrondafbeelding in de code opheffen.

Zorg ervoor dat jouw achtergrondafbeelding legaal is

Legaliteit komt altijd ter sprake als we het over afbeeldingen hebben, vooral als ze op het internet worden gepubliceerd. Er is een groeiende trend op sociale media waarbij mensen lijken aan te nemen dat het toevoegen van een naamsvermelding aan een foto het automatisch in orde maakt om die foto te gebruiken.

Dat is niet waar.

Degene die de foto maakt, is de eigenaar. Zelfs als die foto afkomstig is van een snel iPhone kiekje, is die foto onmiddellijk auteursrechtelijk beschermd in de Verenigde Staten en veel andere landen.

Als je de wettelijke rechten wilt om de foto van iemand anders te gebruiken, heb je een schriftelijke verklaring nodig van de houder van het auteursrecht die jou toestaat hun foto’s te gebruiken – een eenvoudige e-mail is voldoende. Zelfs dan kan het zijn dat je de foto moet vermelden als de persoon jou daarom vraagt.

Wij hebben een uitgebreide gids over het beschermen van afbeeldingen op jouw site, maar het artikel bevat ook waardevolle informatie voor degenen die foto’s van andere bronnen willen gebruiken.

Het lastige aan achtergrondafbeeldingen is dat het meestal niet praktisch is om de naamsvermelding toe te voegen, aangezien WordPress geen plaats heeft om een zichtbaar bijschrift voor achtergrondafbeeldingen op te nemen. En nee, je kunt geen bronvermelding toevoegen aan een willekeurige blog post of pagina en verwachten dat deze als credits dienen voor een volledige website achtergrondafbeelding.

Om jezelf te beschermen en om degenen die de foto’s nemen te respecteren, overweeg dan een van de volgende bij het zoeken naar een WordPress achtergrondafbeelding:

  • Maak de foto zelf. Dat is de eenvoudigste manier om er zeker van te zijn dat je geen inbreuk maakt op het auteursrecht van iemand anders.
  • Betaal voor foto’s op websites als Shutterstock en iStockPhoto. Deze zijn soms duur, maar voor één achtergrondafbeelding kan het net binnen je budget passen.
  • Overweeg een website met gratis afbeeldingen zoals Unsplash of Pexels. Let er echter wel op dat naamsvermelding niet verplicht is! Je kunt op deze sites soms afbeeldingen vinden waarbij naamsvermelding wordt gesuggereerd, maar niet vereist is.
  • Neem contact op met de fotograaf of kunstenaar en vraag of je de foto gratis mag gebruiken. Je zal verbazen hoe vaak dit werkt, vooral als je iets in ruil aanbiedt.
  • Overweeg om de achtergrondafbeelding over te slaan, of om een gekleurde achtergrond te kiezen in plaats van een foto.

Hoe stel ik een achtergrondafbeelding in WordPress in?

Er zijn verschillende manieren om een achtergrondafbeelding in WordPress in te stellen. Deze methoden veranderen meestal op basis van de plaats waar je de afbeelding wilt plaatsen.

Je kunt bijvoorbeeld besluiten dat je een achtergrondafbeelding wilt hebben die op jouw hele website hetzelfde blijft. Het is natuurlijk ook mogelijk dat je liever een manier vindt om unieke achtergrondafbeeldingen voor al jouw pagina’s te tonen.

Omdat er zoveel mogelijkheden zijn, zullen we vertellen hoe je een achtergrondafbeelding of -kleur kunt toevoegen aan de volgende secties:

  • De hele site
  • Een WordPress pagina
  • Een WordPress bericht
  • Een individueel inhoudsblok
  • De WordPress header
  • Een archiefpagina voor categorieën
  • De WordPress loginpagina
  • Het navigatiemenu
  • Een onderhoudspagina

Voordat je begint: Activeer de ondersteuning voor aangepaste achtergronden in WordPress (indien nodig)

Thema-ontwikkelaars beslissen over het lot van de achtergrondmogelijkheden van een site. WordPress heeft de functionaliteit in de core ingebouwd, maar een thema-ontwikkelaar kan het uitschakelen, waardoor je geen dashboardinstelling meer hebt om het in te schakelen.

Als je op enig moment in de volgende tutorials ontdekt dat jouw thema de reden is waarom je geen optie voor een aangepaste achtergrond hebt, overweeg dan de volgende stappen om dit snel te verhelpen.

De belangrijkste plek waar de ondersteuning van een aangepaste achtergrond wordt bepaald is functions.php bestand. Open dat bestand en voeg de volgende code in als die ontbreekt:

$defaults = array(
    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => '',
    'default-position-x'     => '',
    'default-attachment'     => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

Houd in gedachten dat het element dat daadwerkelijk de achtergrondsondersteuning activeert, de add_theme_support() functie is met alles erin. Die code zet de achtergrondfunctie aan in het WordPress dashboard, die je kunt gebruiken binnen veel van de volgende tutorials in dit artikel.

Het is ook mogelijk om een standaard achtergrondafbeelding voor het hele thema toe te voegen via het functions.php bestand. Ga gewoon naar het gebied van de vorige code met de default-image waarde en voeg de URL van de afbeelding toe aan de lege ruimte tussen de ' ' na de =>.

Dit is een snelle en eenvoudige manier om aangepaste achtergronden in te schakelen binnen het WordPress dashboard.

Dat gezegd hebbende, raden wij aan om van thema te veranderen als het geen achtergrondondersteuning heeft. Het verwijderen van de aangepaste achtergrondfunctie is namelijk niet voor niets gedaan, misschien vond de thema-ontwikkelaar dat het te veel problemen veroorzaakte met het ontwerp.

Hoe een achtergrondafbeelding aan jouw hele WordPress site toevoegen

Als jouw thema de mogelijkheid biedt om een aangepaste achtergrondafbeelding toe te voegen (en veel thema’s bieden die mogelijkheid), maakt dat het voor jou een stuk eenvoudiger.

Om te beginnen, ga naar jouw WordPress dashboard en klik op Appearance > Customize.

Klik op de link ‘Customize’ onder het menu Appearance
Klik op de link ‘Customize’ onder het menu Appearance

Dat brengt je naar de WordPress Theme Customizer, met aanpassingsinstellingen aan de linkerkant en een website preview aan de rechterkant.

Hier zoek en klik je op het Background tabblad.

WordPress achtergrondafbeelding in de editor
WordPress achtergrondafbeelding in de editor

Als alternatief kun je Appearance > Background kiezen voor een meer directe route naar deze instelling.

Klik op de Background link onder het Appearance menu
Klik op de Background link onder het Appearance menu

Het gebied voor het aanpassen van de achtergrond beheert de achtergrondelementen voor jouw hele website.

Klik op de knop Select Image om verder te gaan.

Klik op de knop Select Image
Klik op de knop Select Image

Kies in het venster Select Image een afbeelding die goed past als achtergrond voor jouw merk en de styling van de website. In het algemeen helpt een neutraal kleurenpatroon met een zwarte, witte, of grijze tint om ervoor te zorgen dat het grootste gedeelte van jouw tekst en inhoud er nog steeds goed uitzien met de achtergrond erachter.

Zodra je jouw afbeelding hebt geselecteerd, klik je op de knop Choose Image om verder te gaan.

Kies de achtergrondafbeelding
Kies de achtergrondafbeelding

De achtergrond die je hebt geïmplementeerd verschijnt nu in de preview van de website.

Kijk of je inhoud nog steeds opvalt en er toonbaar uitziet met de gekozen afbeelding. Soms kan het nodig zijn om de achtergrond volledig te vervangen of dingen te veranderen zoals tekst of linkkleuren.

Een kleine thumbnail van de achtergrond wordt ook weergegeven in het Settings paneel, om te laten zien dat de afbeelding is geïmplementeerd.

WordPress achtergrondafbeelding thumbnails
WordPress achtergrondafbeelding thumbnails

Een paar extra instellingen zijn beschikbaar voor WordPress achtergronden, waaronder het Preset veld.

Klik op het Preset veld om de opmaak van de afbeelding te wijzigen met behulp van vooringestelde ontwerpen en uitlijningen.

De Preset optie voor WordPress achtergrondafbeeldingen
De Preset optie voor WordPress achtergrondafbeeldingen

Je kunt kiezen uit de volgende voorinstellingen:

  • Standaard: Dit is meestal hetzelfde als Herhalend, maar kan afhankelijk zijn van jouw thema. De standaard (default) instelling werkt over het algemeen het beste, maar het hangt af van de afbeelding die wordt gebruikt.
  • Schermvullend: Deze instelling rekt de afbeelding uit om ervoor te zorgen dat alle delen van het scherm bedekt worden, zelfs als dat betekent dat het beeld moet worden bijgesneden zodat het over het scherm uitvloeit. Dit werkt goed voor afbeeldingen met een hoge resolutie, maar kan wazigheid veroorzaken bij afbeeldingen met een lage resolutie.
  • Aanpassen aan scherm: Dit behoudt de beeldverhouding van de originele foto en probeert die verhouding te gebruiken om in het huidige schermbeeld te passen. De afbeelding blijft zo dicht mogelijk bij het origineel, maar het is mogelijk dat niet de hele achtergrond wordt bedekt.
  • Herhalend: Dit gebruikt delen van de functie Schermvullend, waarbij de afbeelding wordt uitgebreid en uitgerekt, maar het herhaalt ook de afbeelding als het niet lukt om het hele scherm te bedekken. Voor patronen ziet dit er meestal goed uit. Maar voor sommige afbeeldingen kan dit een harde lijn opleveren tussen de herhaalde afbeeldingen.
  • Aangepast: Deze instelling geeft je de meeste controle over de achtergrond en biedt verschillende opties om de grootte van de WordPress achtergrondafbeelding aan te passen, zoals hoe deze zich herhaalt op de pagina, uitrekt, of beweegt als de gebruiker scrolt.

Er is geen regel voor welke van de Presets het beste werkt, omdat afbeeldingen in verschillende afmetingen, resoluties en details bestaan. Daarom kun je het beste beginnen met Default en dan de andere presets testen om te zien welke het beste werkt voor jouw achtergrondafbeelding.

Als al het andere mislukt, ga dan naar de instelling Custom om echt specifiek te worden met jouw keuzes.

Schermvullende preset voor WordPress achtergrondafbeeldingen
Schermvullende preset voor WordPress achtergrondafbeeldingen

De voorinstelling Schermvullend voldoet niet helemaal voor deze afbeelding, vooral omdat de originele afbeelding veel langer is dan hij breed is, waardoor er aan de rechterkant een aanzienlijke hoeveelheid ruimte overblijft. Ik zou de afbeeldingspositie (Image Position) naar het midden kunnen wijzigen, maar dan zou er waarschijnlijk witruimte aan de zijkanten overblijven.

De preset Fit to Screen
De preset Fit to Screen

De volgende instelling om te overwegen is de Image Position tool. Klik op de pijlen om de achtergrondafbeelding te verplaatsen, de oriëntatie aan te passen om de focus van de afbeelding naar het midden te plaatsen of om het scherm te vullen.

Net als bij de instelling van de andere presets, moet je bij de Image Position tool enigszins gissen en jouw werk previewen, aangezien de originele afbeelding en de inhoud ervan bepalen hoe het eruit ziet.

Positie WordPress achtergrondafbeelding
Positie WordPress achtergrondafbeelding

Vervolgens is er een selectievakje om de achtergrondafbeelding mee te laten scrollen met de pagina, die Scroll with Page heet.

Met dit vakje aangevinkt, blijft de achtergrondafbeelding plakken aan de content die je op de voorgrond vindt en scrolt hij mee met de gebruiker als die persoon omhoog of omlaag beweegt op de pagina.

De Scroll with Page optie inschakelen
De Scroll with Page optie inschakelen

Het uitvinken van dit vakje verandert vaak ook de algemene placering van de achtergrondafbeelding, maar de belangrijkste eigenschap is om de achtergrond statisch te laten blijven staan, terwijl de gebruiker naar beneden scrolt op de pagina.

De content op de voorgrond (zoals de producten in dit geval) glijdt in dat geval over de achtergrondafbeelding, wat een aantrekkelijk effect geeft.

De Scroll with Page uitschakelen
De Scroll with Page uitschakelen

Werken met een aangepaste preset

Wanneer je kiest voor iets anders dan de Custom preset, krijg je niet zo veel extra instellingen om te configureren.

Als je echter de custom preset kiest, krijg je verschillende andere velden waar je wat mee kan doen.

Je kunt bijvoorbeeld kiezen voor Schermvullend of Aanpassen aan scherm, en dat combineren met een herhaalde of niet-herhaalde achtergrondafbeelding, waarbij je de elementen van de preset van voorheen combineert. En je krijgt nog steeds de Scroll met Pagina optie.

Presets en afbeeldingsformaten voor achtergrondafbeeldingen
Presets en afbeeldingsformaten voor achtergrondafbeeldingen

Kijk of het mogelijk is om de originele foto te gebruiken zonder bewerkingen of instellingen. Soms is de originele foto een bijna perfecte match om als achtergrond te gebruiken, dus waarom knoeien met iets wat al klaar is om te gebruiken?

Maar het kan ook zijn dat de foto te groot is voor je website, of dat de beeldverhouding niet helemaal goed is. Hoe dan ook, we raden je aan om met deze instelling te experimenteren om uit te vinden of hij geschikt is voor jou.

De grootte van de achtergrondafbeelding instellen
De grootte van de achtergrondafbeelding instellen

Zodra je jouw perfecte achtergrondinstellingen hebt gekozen (voor deze handleiding ziet de Default optie er goed uit), klik je op de knop Publish om de wijzigingen op jouw website te renderen.

Druk op de Publish knop
Druk op de Publish knop

Ga naar de voorkant van je website om de achtergrond in actie te zien.

De homepage is een prachtige plek om te beginnen. Je zult zien dat de header en de welkomstafbeelding geen achtergrond hebben. Dat komt omdat de welkomstafbeelding bovenaan de site al het hele horizontale deel van het scherm opneemt als een schermvullende hero-afbeelding.

Wat betreft de header en het menu: je zult leren hoe je die achtergronden kunt configureren in een aantal van de volgende tutorials.

De WordPress achtergrondafbeelding bekijken
De WordPress achtergrondafbeelding bekijken

Houd in gedachten dat de algemene aangepaste WordPress achtergrond wordt geactiveerd op elke pagina en post van uw website. Het is een algemene functie voor degenen die een snelle manier willen om hun site een eigen gezicht te geven en wat op te laten vallen.

Bijvoorbeeld, als je naar de Shop pagina op deze site gaat, zie je de achtergrond achter de product selectie.

De WordPress achtergrondafbeelding op een andere pagina
De WordPress achtergrondafbeelding op een andere pagina

Hoe een achtergrondkleur instellen in plaats van een afbeelding voor je hele website

Het proces van het activeren van een achtergrondkleur op de gehele website is niet veel anders dan wanneer je een achtergrondafbeelding inschakelt. Ga eerst naar Appearance > Background in het dashboard en zoek dan naar het veld Background Color.

Klik op de knop Select Color om meer instellingen te openen om verschillende kleuren voor je achtergrond te kiezen en uit te wisselen.

Een effen kleur als achtergrond kiezen
Een effen kleur als achtergrond kiezen

Het kleurenpaneel biedt meerdere opties om een kleur te kiezen. De eerste is door een kleurcode in te typen, of te plakken. Alle kleuren hebben unieke kleurcodes, en je kunt deze kleuren en hun bijbehorende codes met een snelle internet zoekopdracht vinden.

De andere optie is om in het kleurenpaneel rond te klikken om de perfecte kleur voor de achtergrond te vinden. Er zijn zelfs gewone kleurstalen onderaan het paneel als je liever een van de eenvoudigere kleuren neemt.

Om een achtergrondkleur te activeren, moet je ervoor zorgen dat de kleur is geselecteerd en wordt weergegeven in de Select Color preview.

Een achtergrondkleur kiezen
Een achtergrondkleur kiezen

Je zou de kleur achtergrond in de WordPress Customizer voorbeeldweergave moeten zien. Als dit niet het geval is, betekent dit waarschijnlijk dat je een achtergrondafbeelding hebt geïnstalleerd die de gekleurde achtergrond overschrijft.

Het enige wat je hoeft te doen om de gekleurde achtergrond te onthullen is klikken op de knop Remove onder de Background Image preview.

WordPress achtergrondafbeelding verwijderen
WordPress achtergrondafbeelding verwijderen

Nu verschijnt de kleur over de gehele site, achter de inhoud. Net als bij een achtergrondafbeelding, is het verstandig om jouw website te bekijken om er zeker van te zijn dat alle tekst, afbeeldingen en links nog steeds zichtbaar zijn met de nieuwe achtergrond.

Voorbeeld van een effen oranje WordPress achtergrond
Voorbeeld van een effen oranje WordPress achtergrond

Hoe een achtergrondafbeelding aan een WordPress pagina toevoegen

Maar wat als je een afbeelding in WordPress wilt invoegen om als achtergrond op een enkele WordPress pagina te laten weergeven? In het vorige gedeelte zijn de globale instellingen voor een achtergrondafbeelding voor de hele site beschreven.

Veel mensen vinden het leuk om achtergronden aan hun pagina’s toe te voegen, omdat je een bepaald thema of gevoel aan een pagina kunt geven dat van toepassing is op de inhoud. Een Over Ons pagina kan bijvoorbeeld een achtergrond in Los Angeles hebben als het bedrijf in LA is gevestigd. Of een inleiding tot een boek van een auteur kan een achtergrond hebben die past bij het thema van het verhaal.

In dit gedeelte bespreken we hoe je een WordPress achtergrondafbeelding aan een pagina kunt toevoegen met behulp van één primaire methode en een paar alternatieven als je het niet erg vindt om geld uit te geven aan een plugin of te kiezen voor een paginabouwer.

Opmerking: Het maakt niet uit of je de Gutenberg of Classic WordPress Editor gebruikt.

Voor pagina-specifieke achtergronden lijken deze methoden het beste te werken:

  • Het toevoegen van een unieke pagina achtergrond met aangepaste CSS.
  • Een plugin gebruiken die individuele pagina achtergronden mogelijk maakt.
  • Het opnemen van een aangepaste achtergrond op elke pagina met behulp van een paginabouwer.

Het toevoegen van jouw eigen aangepaste CSS aan een pagina vereist het vinden van de class ID voor die pagina en het oproepen van een achtergrond URL, binnen de Custom CSS module, in de WordPress pagina-instellingen. Gelukkig is het niet zo moeilijk om de class ID van een pagina te achterhalen, aangezien we die kunnen opzoeken, of misschien weet je al wat het is.

Ga naar de pagina op jouw site waar je een achtergrond wilt voor alleen die pagina.

Een pagina-specifieke WordPress achtergrondafbeelding toevoegen
Een pagina-specifieke WordPress achtergrondafbeelding toevoegen

Klik met de rechtermuisknop ergens op de pagina om een keuzemenu op het scherm te openen. Selecteer de Inspect tool onderaan het dropdown menu.

De Inspect module toont codering van de pagina zelf, samen met aangepaste CSS die globaal voor jouw website wordt gebruikt. Het is een handig gedeelte om informatie over een pagina of post op jouw site op te zoeken.

Een webpagina inspecteren
Een webpagina inspecteren

Het Inspect vak bevat coderegels van de pagina, maar we zijn alleen geïnteresseerd in de class-tag die aan deze pagina in het bijzonder is toegewezen. Ter verduidelijking, elke WordPress pagina heeft een class tag als identificatiecode.

Gebruik de zoekfunctie en typ in body of class om de regel code met de page-id tag te vinden.

In dit geval is de ID page-id-352, maar die van jou zal verschillen.

Je wilt het gehele deel van de code met het page-id-# sleutelwoord kopiëren, inclusief de streepjes.

Het vinden van de page ID in WordPress
Het vinden van de page ID in WordPress

Met de page id ergens opgeslagen voor gebruik in de volgende stappen, ga je terug naar jouw WordPress dashboard en klik je op Appearance > Customize.

Ga naar de themacustomizer
Ga naar de themacustomizer

Selecteer het tabblad Additional CSS in de WordPress Customizer.

‘Additional CSS' sectie in de Customizer
‘Additional CSS’ sectie in de Customizer

In deze sectie kunt je alle aangepaste CSS typen of plakken die je wilt om items op jouw website te manipuleren. In dit geval is het handig om de standaard achtergrondafbeelding te overschrijven en een achtergrondafbeelding in te schakelen voor één pagina en niet voor de andere pagina’s.

Plak de volgende code in het Additional CSS veld, maar vergeet niet om de “#” te vervangen door het werkelijke nummer dat je als page ID uit de vorige stappen hebt gehaald. Ook moet je een echte afbeeldings URL plaatsen in plaats van de tekst die we daar hebben (http://YOURIMAGEURL.jpeg).

body.page-id-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

In dit voorbeeld is de page ID ingevuld als 352, en hebben we een URL voor de achtergrondafbeelding geplakt uit onze Mediabibliotheek.

Indien nodig kun je de aangepaste achtergrondinstellingen wijzigen als je problemen hebt met de achtergrondafbeelding van het scherm. Je kunt bijvoorbeeld elementen zoals de grootte, bijlage of positie van de WordPress achtergrondafbeelding wijzigen. Zo niet, laat ze dan allemaal zoals ze in de voorbeeldcode staan.

Aangepaste CSS toevoegen aan een WordPress site
Aangepaste CSS toevoegen aan een WordPress site

Klik op de Publish knop wanneer je tevreden bent met de aangepaste CSS.

Klik op de Publish knop
Klik op de Publish knop

Met die aangepaste CSS bevat de opgegeven pagina een achtergrondafbeelding met behulp van de instellingen van de code. Geen enkele andere pagina op jouw site zal dezelfde achtergrond tonen, tenzij je de CSS herhaalt voor verschillende pagina ID’s.

De achtergrondafbeelding wordt nu op de pagina getoond
De achtergrondafbeelding wordt nu op de pagina getoond

Zoals eerder vermeld, zijn er nog andere opties om een unieke achtergrond aan een WordPress pagina toe te voegen zoals het gebruik van een paginabuilder of een plugin die achtergrondafbeeldingen op individuele pagina’s mogelijk maakt.

Echter, de goedkoopste en snelste manier om een achtergrondafbeelding op een individuele pagina te plaatsen is door gebruik te maken van de CSS code methode zoals hierboven getoond.

Hoe voeg je een achtergrondafbeelding toe aan een WordPress bericht

De meeste achtergrondafbeeldingen worden ingevoegd achter WordPress pagina’s of elke pagina in een website.

De standaard aangepaste achtergrondfunctie in WordPress heeft niets te maken met individuele berichten, afgezien van het feit dat deze achtergrond ook voor de blogberichten zal worden weergegeven. Dat is niet ideaal voor alle organisaties, omdat verschillende blogposts drastisch verschillende onderwerpen kunnen hebben.

Dergelijke blogs kunnen baat hebben bij hun eigen unieke achtergrondafbeeldingen. WordPress berichten hebben echter geen eigen achtergrondafbeelding, wat het een beetje lastiger maakt.

Daarom hebben we een paar opties om te overwegen bij het toevoegen van een achtergrondafbeelding aan een bericht (je zult merken dat ze hetzelfde zijn als bij het werken met paginaspecifieke achtergrondafbeeldingen):

  • Voeg een achtergrondafbeelding in met behulp van aangepaste CSS.
  • Gebruik een plugin om een achtergrond te implementeren op individuele berichten.
  • Installeer een visuele paginabouwer voor achtergronden bij berichten.

Net als in de vorige sectie over unieke pagina-achtergronden, kun je een bericht-specifieke achtergrond toevoegen met behulp van een paginabouwer of een plugin.

Aangezien het maken van een bericht-specifieke achtergrond niet veel verschilt van een pagina-specifieke achtergrond, zullen we alleen kort ingaan op de stappen om dit proces voor een individueel bericht uit te voeren.

Wanneer je aangepaste CSS gebruikt om een bericht-specifieke achtergrond te implementeren, gebruik je dezelfde code als voor de pagina-achtergrond, met één verschil: je moet de bericht ID vinden in plaats van de pagina ID.

WordPress achtergrondafbeelding voor berichten
WordPress achtergrondafbeelding voor berichten

Klik met de rechtermuisknop op het bericht en kies de optie Inspect. Zoek in de code naar de body class sectie in de code. Zoek naar het postid-# gedeelte – dat is de bericht ID die je moet invoegen in de aangepaste CSS.

find post id

Je zult merken dat de opmaak voor de post ID in dit voorbeeld iets anders is dan voor de pagina ID, waar de postid-# tag geen streepje heeft tussen “post” en “id” zoals bij page-id-#. Dit zijn ook geen strenge regels. Je kunt verschillende formaten voor de tags vinden.

Ga nu naar je WordPress dashboard en klik op Appearance > Customize. Navigeer naar het tabblad Additional CSS.

Ga naar Additional CSS sectie
Ga naar Additional CSS sectie

Plak de volgende code in dat aangepaste CSS veld:

body.postid-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Neem daarna het nummer van de bericht ID dat je eerder hebt gevonden van het gewenste bericht. Vervang de “#” in de CSS code door het nummer. Verander ook de http://YOURIMAGEURL.jpeg tekst met de echte URL van de achtergrondafbeelding die je wilt laten zien, en laat de aanhalingstekens er omheen staan.

Het toevoegen van de aangepaste CSS voor een specifieke post id
Het toevoegen van de aangepaste CSS voor een specifieke post id

Zorg ervoor dat je op de Publish knop drukt voordat je de Additional CSS tab verlaat, omdat dit je wijzigingen opslaat op de website en je in staat stelt om de achtergrond op de front-end te bekijken.

Klik op de Publish knop om de wijzigingen op te slaan
Klik op de Publish knop om de wijzigingen op te slaan

Met deze CSS wijzigingen op zijn plaats, kun je nu terug gaan naar de front-end van die WordPress blog post om de nieuwe achtergrond te zien. Test de andere blogberichten en pagina’s op jouw site om ervoor te zorgen dat geen van de andere een achtergrond heeft, tenzij je dezelfde code implementeert voor die bericht ID’s.

Bekijk de achtergrondafbeelding op de post
Bekijk de achtergrondafbeelding op de post

Hoe voeg je een achtergrondafbeelding toe aan een individueel inhoudsblok

De individuele inhoudsblokken van de WordPress Gutenberg blok-editor zorgen voor een breed scala aan opties voor het weergeven van inhoud, waaronder tekstvakken, afbeeldingen en galerijen.

Deze breken de inhoud op in afzonderlijke secties. Zo kun je een achtergrondkleur of afbeelding alleen voor dat blok toevoegen.

Stel dat je bijvoorbeeld een blogbericht schrijft over de status van de kledingindustrie. Je wilt de post eindigen of beginnen met een call-to-action voor mensen om zich in te schrijven voor jouw volgende webinar. Het zou logisch zijn om deze sectie te laten opvallen door een achtergrondkleur of afbeelding te gebruiken.

Helaas biedt de WordPress blok-editor geen allesomvattende instelling waar je een achtergrond kunt toevoegen aan elk blok. Echter, sommige blokken hebben de mogelijkheid om een gekleurde achtergrond te gebruiken.

Er is ook een blok, genaamd een Cover blok, dat het dichtst in de buurt komt van wat wij willen:  een achtergrondafbeelding voor een blok toevoegen in een bericht of pagina. De cover maakt het mogelijk om tekst en sommige media-items te overlappen, waardoor het geschikt is voor ons einddoel.

Hieronder staan de technieken die je kunt gebruiken voor het instellen van een afbeelding of kleuren achtergrond voor een individueel WordPress blok.

Een gekleurde achtergrond instellen voor één blok

De eenvoudigste manier om een enkel blok wat levendigheid te geven is door een gekleurde achtergrond toe te voegen. Het is niet zo mooi als een afbeeldingsachtergrond, maar de kleurenachtergrond is eigenlijk het enige type achtergrond in de WordPress blok editor dat beschikbaar is voor de standaard blokken.

Opmerking: Sommige blokken hebben helemaal geen achtergrondinstellingen. Als dat het geval is, kun je het beste een Cover blok gebruiken en daar andere blokken overheen leggen, zoals verderop in dit artikel wordt behandeld.

Het Paragraph blok, bijvoorbeeld, heeft een instelling om een gekleurde achtergrond te activeren.

Om dit aan te zetten, selecteer je het blok en zoek je de Color Settings onder het tabblad Block aan de rechterkant.

De achtergrond kleurinstellingen wijzigen
De achtergrond kleurinstellingen wijzigen

Dit gedeelte onthult de velden Tekst Color en Background Color.

Ga naar het gebied Background Color en selecteer een kleur uit de lijst met beschikbare opties. Je kunt ook de link Custom Color kiezen om jouw eigen kleurcode in te voegen of een unieke kleur te kiezen.

Zoals je kunt zien, verandert de achtergrond van het Paragraph blok in een andere kleur – in dit geval blauw.

Een achtergrondkleur kiezen
Een achtergrondkleur kiezen

Een gekleurde achtergrond toevoegen aan elk WordPress blok

Zoals eerder vermeld, hebben niet alle WordPress blokken deze ingebouwde achtergrondfunctie. Wat moet je doen als je een galerij wilt maken, of een ander blokelement, dat niet de achtergrondoptie biedt?

De snelste oplossing is om gebruik te maken van de Group blokfunctie in WordPress.

Om dit te doen, selecteer je meerdere blokken die al in je inhoud staan. Voor dit voorbeeld zal ik zowel een Paragraph blok als een Gallery blok tegelijk selecteren.

Klik op het gestapelde vierkante pictogram in het menu dat verschijnt.

De sectie 'Ons team' op een pagina
De sectie ‘Ons team’ op een pagina

Kies de optie Group in het uitklapmenu.

Dit neemt alle blokken die je op dat moment hebt geselecteerd en combineert ze tot een groep, zodat je ze allemaal samen kunt verplaatsen of bewerken in plaats van afzonderlijke blokken.

Groepeer de secties als een blok
Groepeer de secties als een blok

Dit stelt de groep als een eigen blok. Dit betekent dat je naar het tabblad Block Settings aan de rechterkant van de pagina kunt gaan om de instellingen te vinden.

Zoek naar het tabblad Color Settings en klik daarop.

Wijzig de kleurinstellingen van het gegroepeerde blok
Wijzig de kleurinstellingen van het gegroepeerde blok

Net als een standaard Paragraph blok, heeft het Groepsblok ook een Background Color functie.

Kies de kleur die je het mooist vindt voor deze situatie. Als het goed is zie je nu dat alles binnen die groep nu die kleurachtergrond zou moeten hebben.

Het mooie van dit Group blok is dat het een ander blok, dat geen achtergrondfunctie heeft (zoals het Gallery blok), toch een achtergrond kan geven.

De achtergrondkleur instellen als blauw
De achtergrondkleur instellen als blauw

Een achtergrond van een afbeelding toevoegen aan een WordPress blok

WordPress blokken staan zowel in pagina’s als in berichten. Daarom kunnen we deze tactiek voor beide gebruiken. Je kunt vrijwel elke inhoud boven de achtergrond van het gegroepeerde blok invoegen – of alleen in één WordPress blok.

Om met dit proces te beginnen, klik je op de knop Add Block of op het pictogram “+” en zoek je naar het Cover blok.

Kies dat blok om het in jouw bericht of pagina in te voegen.

Een Cover blok toevoegen
Een Cover blok toevoegen

Klik vervolgens op de knop Upload of Select Media, waarmee je kunt zoeken naar afbeeldingen die je als achtergrond kunt gebruiken.

Klik op de knop Select Media
Klik op de knop Select Media

Kies de afbeelding die je wilt en klik op de knop Select.

Kies de afbeelding en klik op de knop Select
Kies de afbeelding en klik op de knop Select

Nu zie je die afbeelding als achtergrond voor het Cover blok.

Voel je vrij om op dat blok te klikken om te beginnen met het typen van content, aangezien het overlappen van tekst de belangrijkste reden is dat mensen deze gebruiken.

Wat geweldig is aan het Cover blok is dat het verschillende opmaak opties biedt, waardoor je in een paar seconden van header- naar paragraafopmaak kunt springen.

WordPress achtergrondafbeelding in sectie
WordPress achtergrondafbeelding in sectie

Om andere blokken boven op die achtergrond toe te voegen, klik je op het “+” pictogram in het Cover blok zelf. Het kan zijn dat je een keer op de Enter toets moet drukken om de knop zichtbaar te maken.

Klik op het plusteken in de bloksectie
Klik op het plusteken in de bloksectie

Net als bij het toevoegen van een inhoudsblok in een gewoon artikel, kun je met het Cover blok door alle mogelijke inhoudsblokken in WordPress bladeren.

Dat betekent dat je een Image, Gallery, Column, of elk type WordPress blok binnen het Cover blok kunt plaatsen, waardoor het de ideale oplossing is voor afbeeldingsachtergronden met een individueel blok.

Zoeken naar blok
Zoeken naar blok

Voor dit voorbeeld heb ik een afbeelding ingevoegd en het een beetje opgemaakt zodat het er acceptabel uitziet binnen het Cover blok.

Elk blok dat je voor de achtergrond plaatst heeft zijn eigen aangepaste instellingen in het rechter Block tabblad, dus overweeg ze te bewerken terwijl je ze in het Cover blok zet.

Een blokvoorbeeld met WordPress achtergrondafbeelding
Een blokvoorbeeld met WordPress achtergrondafbeelding

Op een gegeven moment wil je misschien de achtergrondafbeelding zelf bewerken of aanpassen. Als dat het geval is, kies je Cover blok en ga je naar het tabblad Block Settings aan de rechterkant van de pagina.

Dit onthult een groot aantal instellingen die je kunt aanpassen voor de achtergrondafbeelding, waaronder de volgende:

  • Vaste achtergrond
  • Herhaalde achtergrond
  • Brandpuntkiezer
  • Afmetingen
  • Overlay
  • Doorzichtigheid
  • Geavanceerd
De blokinstellingen wijzigen
De blokinstellingen wijzigen

Een van de belangrijkste instellingen bevindt zich onderaan in het paneel met Block Settings.

Scrol naar beneden om de sectie Overlay te vinden. Open de sectie om een lijst van kleur-overlays te onthullen en opties om die kleuren effen of gradiënten te maken.

Dit is een goede optie om de achtergrondkleur enigszins aan te passen aan jouw merk of om de inhoud op de voorgrond te benadrukken. Je kunt ook de Ondoorzichtigheid aanpassen om ervoor te zorgen dat de kleur-overlay de achtergrond niet helemaal overweldigt.

De achtergrondkleur van het blok wijzigen
De achtergrondkleur van het blok wijzigen

Als alternatief, overweeg de Stackable Page Builder Gutenberg Blocks plugin om meer geavanceerde tools te openen voor achtergronden op individuele blokken.

Hoe een achtergrondafbeelding achter de WordPress header plaatsen

Tot nu toe hebben we het gehad over hoe je een achtergrondafbeelding aan jouw gehele WordPress site kunt toevoegen, samen met methoden voor achtergronden op specifieke gebieden zoals WordPress blokken, berichten en pagina’s. Maar hoe zit het met het gebied dat jouw menu en logo bevat?

Soms is een achtergrond achter de header alles wat je nodig hebt.

Het instellen van een achtergrondafbeelding voor de header voegt een nieuwe vibe aan je site toe, vooral als er een vakantie aan de gang is of een grote uitverkoop die je kunt highlighten.

Om te beginnen, ga naar Appearance > Header in het WordPress dashboard.

Opmerking: Je kunt de header instellingen ook vinden door naar Appearance > Customize > Header te gaan.

WordPress Dashboard > Appearance > Header
WordPress Dashboard > Appearance > Header

Je zou nu een voorbeeld van jouw homepage aan de rechterkant van het scherm moeten zien, samen met de Header instellingen aan de linkerkant daarvan.

De Header module legt de voorkeursafmetingen uit voor een header achtergrondafbeelding, dus je kunt ervoor kiezen om jouw afbeelding bij te snijden voordat je deze uploadt, of te wachten totdat je de afbeelding op jouw WordPress dashboard krijgt.

Klik onder de titel Current header op de knop Add New Image.

Klik op de knop Add new image
Klik op de knop Add new image

Headers zijn lastig omdat je ervoor wilt zorgen dat alle links en tekstelementen (en niet te vergeten jouw logo) er kristalhelder uitzien bovenop de achtergrondafbeelding.

Daarom raden we je aan om achtergrondafbeeldingen uit te proberen en afbeeldingen te overwegen die het bij effen kleuren en patronen houden. Deze maken het niet zo moeilijk om jouw menu-items en logo te zien.

Selecteer een afbeelding die voor jou ideaal lijkt en klik vervolgens op de knop Select and Crop om verder te gaan.

Een afbeelding kiezen
Een afbeelding kiezen

Wij houden van het ingebouwde bijsnijdgereedschap omdat het automatisch de juiste afmetingen voor de achtergrondafbeelding van de koptekst geeft. Dit zou het proces moeten versnellen in vergelijking met het vooraf bewerken van een foto in iets als Photoshop.

Verplaats het uitsnijdvak naar de locatie die het meest logisch is voor jouw achtergrondafbeelding. Versleep gerust een van de hoeken als je de afbeelding nog verder wilt verkleinen.

Als je de perfecte uitsnede hebt, klik je op de knop Crop Image.

De afbeelding bijsnijden
De afbeelding bijsnijden

De header achtergrondafbeelding wordt onmiddellijk geactiveerd in de WordPress Customizer preview, zodat je precies kunt zien waar jouw klanten naar zullen kijken met dit type achtergrond.

Je zult zien dat de achtergrondafbeelding van de koptekst niet overloopt in de rest van de pagina-inhoud. In plaats daarvan blijft ze in de header, achter alles wat zich daar momenteel bevindt, zoals een logo, slogan, menu en zoekbalk.

Selecteer de achtergrondafbeelding van de koptekst
Selecteer de achtergrondafbeelding van de koptekst

Een andere optie voor je headerachtergrond is om meerdere afbeeldingen te uploaden en ze willekeurig te laten roteren, zodat jouw website een beetje opfleurt en verrast wanneer een gebruiker op de homepage landt.

Om dit te laten werken moet je eerst verschillende afbeeldingen uploaden naar de instellingenbox van de header. Klik op de knop Add New Image om dat proces te voltooien.

Zodra je meer dan één afbeelding hebt, klik je op de knop Randomize Uploaded Headers om de functie te activeren die elke keer een andere achtergrond voor de header toont.

Meer headers toevoegen
Meer headers toevoegen

Je zult misschien merken dat het toevoegen van een achtergrondafbeelding aan de header het moeilijk maakt om sommige header-items te zien, zoals het menu of een winkelwagen.

Als dat het geval is, raden wij je aan de headerafbeelding niet meteen te verwijderen. Ga in plaats daarvan naar de velden Text Color en Link Color om te zien of aanpassingen kunnen helpen.

De instelling Text Color bepaalt alle tekst in de header die geen hyperlink heeft naar een andere interne of externe pagina. Vaak is dat alleen de tagline, als je die hebt, maar soms heb je andere items zoals een winkelwagen totaal of socialmedia pictogrammen die ook van kleur veranderen met de tekst.

Het andere vak is voor de linkkleur. Je zult waarschijnlijk meer veranderingen zien wanneer je deze kleur aanpast, omdat het alle menu-items omvat die gelinkt zijn aan andere pagina’s.

Tekstkleur over de WordPress achtergrondafbeelding
Tekstkleur over de WordPress achtergrondafbeelding

Hier is een voorbeeld van wat er gebeurt als je een nieuwe kleur kiest voor zowel de Text Color als de Link Color. Je kunt zien dat de tagline en de site naam zijn veranderd, het menu is veranderd in wit, en zo ook de meeste andere headerelementen zoals het winkelwagen-icoontje.

De headerelementen controleren
De headerelementen controleren

Voor degenen die geen achtergrondafbeelding willen gebruiken voor de header, is er ook de mogelijkheid om een effen achtergrondkleur te gebruiken.

Zoek hiervoor het veld Background Color in hetzelfde gebied als de koptekstinstellingen.

Klik op de knop Select Color en maak een keuze uit het kleurenpaneel om de voorbeeldresultaten te bekijken. Je kunt ook de tekstkleuren wijzigen wanneer je een achtergrondkleur gebruikt.

Een achtergrondkleur instellen
Een achtergrondkleur instellen

Nadat je hebt getest wat het beste werkt voor jouw header, en de perfecte achtergrondafbeelding voor die header hebt gekozen, klik je op de knop Publish zodat iedereen de veranderingen kan zien.

En als je problemen hebt met het zien van de wijzigingen aan de front-end, overweeg dan de WordPress cache te legen.

Klik op de Publish knop
Klik op de Publish knop

Hoe een achtergrondafbeelding aan een WordPress categorie toevoegen

Een WordPress categorie archiefpagina verzamelt alle berichten die onder een bepaalde categorie vallen. Bijvoorbeeld, veel websites hebben categorieën voor aangepaste berichttypes zoals producten. Standaard hebben alle WordPress websites categorieën voor berichten. De berichten die je niet categoriseert worden gelabeld met de categorie Uncategorized.

Aangezien categorie archiefpagina’s soortgelijke inhoud verzamelen, is het zinvol om een relevante achtergrondafbeelding op die pagina’s op te nemen om de categorie beter te laten uitkomen. Je kunt bijvoorbeeld een technisch georiënteerde achtergrond gebruiken voor de categorie Webdesign of een achtergrond met schelpen- of strandpatronen voor de categorie Reizen.

De aangepaste CSS methode (hieronder beschreven) is de goedkoopste optie. Je kunt echter ook kijken naar de verschillende paginabouwers en plugins om te zien welke daarvan achtergronden op categoriepagina’s toestaan.

Om deze taak met CSS uit te voeren, open je jouw WordPress dashboard en ga je naar Appearance > Customize.

Selecteer het tabblad Additional CSS om de module te openen die het mogelijk maakt jouw eigen CSS in te typen.

Ga naar de Additional CSS sectie
Ga naar de Additional CSS sectie

Open een van jouw categorie archiefpagina’s op jouw WordPress site. Meestal hebben deze pagina’s URL’s zoals deze: http://yourwebsitedomain.com/category/travel. Je moet het ravel gedeelte veranderen in welke categorie je ook hebt op jouw eigen site en het yourwebsitedomain gedeelte veranderen in jouw eigen domeinnaam.

Klik met de rechtermuisknop ergens op de categoriepagina en klik op Inspecteren. De Inspect tool wordt getoond in je browser, met de code voor die pagina om te bekijken.

Klik met de rechtermuisknop op de webpagina en selecteer Inspect
Klik met de rechtermuisknop op de webpagina en selecteer Inspect

Zoek naar “body” of “class” om de CSS class te vinden voor categoriepagina’s, samen met de class voor deze categorie in het bijzonder.

In dit geval is onze CSS klasse “category-travel,” omdat ik een categorie heb met de naam “Travel” op de site.

Bewaar de CSS tag voor later.

Noteer de categorie in de lijst
Noteer de categorie in de lijst

Navigeer daarna terug naar de Additional CSS sectie in jouw WordPress Customizer.

Plak de volgende code in dat vak, waarbij je de category-travel class vervangt door je eigen class en een echte afbeeldings URL plaatst op de plaats waar http://YOURIMAGEURL.jpeg staat.

body.category-travel {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Voeg de aangepaste codering voor de WordPress achtergrondafbeelding toe
Voeg de aangepaste codering voor de WordPress achtergrondafbeelding toe

Klik op de knop Publish om de wijzigingen op te slaan.

Het toevoegen van de Custom CSS code
Het toevoegen van de Custom CSS code

Ga tenslotte terug naar de categorie archiefpagina op de front-end van jouw WordPress site. Deze zou nu dezelfde pagina moeten tonen als voorheen, maar dan met de achtergrond zoals gespecificeerd in de CSS code. Als je problemen ondervindt met de opmaak van de WordPress achtergrondafbeelding, schakel dan terug naar het Additional CSS paneel om elementen zoals de positie, grootte en herhaalfunctie van de achtergrond aan te passen.

Ga naar de categoriepagina en bekijk de achtergrond
Ga naar de categoriepagina en bekijk de achtergrond

Hoe een achtergrondafbeelding aan je WordPress loginpagina toe te voegen

De WordPress loginpagina heeft twee versies: één voor gewone gebruikers die naar jouw site komen en zich willen registreren en inloggen op jouw website, en de andere voor interne gebruikers, zoals admins en auteurs.

Deze loginpagina’s zijn gescheiden van de hoofdwerking van jouw website (de meeste bestanden bevinden zich in het wp-login.php bestand). De aangepaste achtergrondafbeelding tool zal dus niet overlopen in de loginmodules.

Je kunt dit doen door gebruik te maken van een plugin genaamd Custom Login Page Customizer. Om te beginnen, installeer en activeer je de plugin op jouw WordPress site.

LoginPress plugin
LoginPress plugin

Aan de linkerkant verschijnt een nieuw tabblad in het WordPress dashboard menu voor LoginPress.

Ga naar LoginPress > Settings.

Ga naar LoginPress settings
Ga naar LoginPress settings

Hier kun je de plugin-instellingen aanpassen voor het toevoegen van jouw achtergrond en het aanpassen van elk ander deel van jouw loginpagina.

Het biedt bijvoorbeeld instellingen om gebruikers automatisch te onthouden, aangepaste wachtwoordvelden te tonen en sessies te laten verlopen na een bepaalde periode.

Veranderen van de LoginPress instellingen
Veranderen van de LoginPress instellingen

Voor het activeren van een aangepaste afbeeldingsachtergrond voor de login pagina, klik op LoginPress > Customizer.

Ga naar LoginPress > Customizer.
Ga naar LoginPress > Customizer.

Dit stuurt je naar de WordPress Customizer, waar een nieuwe pagina is toegevoegd voor de LoginPress tools. Je zult tabbladen zien voor thema’s, logo, achtergrond en meer.

Het is ook mogelijk om de loginpagina aan te passen door te klikken op de knoppen in het visueel voorbeeld.

Een LoginPress thema instellen
Een LoginPress thema instellen

We zullen niet alle andere instellingen behandelen aangezien we ons nu vooral richten op de achtergrond.

Klik op de Background tab om verder te gaan.

Ga naar de LoginPress Background tab
Ga naar de LoginPress Background tab

Het eerste wat je moet doen is beslissen of je een kleurenachtergrond of een afbeeldingsachtergrond wilt.

Als je liever een gekleurde achtergrond hebt, zoek je het veld Background Color op en klik je op Select Color. Er verschijnt nu een kleurenpaneel waarin je precies kunt kiezen welke kleur voor jouw bedrijf geschikt is.

Zoals je kunt zien, wordt de verandering ook van kracht in de WordPress Customizer preview.

Selecteer de LoginPress achtergrondkleur
Selecteer de LoginPress achtergrondkleur

Direct onder de Background Color instelling, is er een Background Image sectie.

Zet de schakelaar Enable Background Images aan om een verzameling van vooraf gemaakte achtergrondafbeeldingen te tonen.

De WordPress achtergrondafbeelding inschakelen
De WordPress achtergrondafbeelding inschakelen

Er zijn er niet veel om uit te kiezen in de gratis versie, maar de plugin voegt er meer toe als je besluit om te upgraden naar de premium versie.

Ga je gang en test deze vooraf gemaakte achtergronden om te zien of ze kunnen werken voor jouw merk.

Een achtergrondgalerij instellen
Een achtergrondgalerij instellen

Het meest voor de hand liggende pad is om je eigen afbeelding te uploaden als achtergrond voor de loginpagina.

Zoek naar de kop Background Image en klik op de knop Select Image.

Kies de optie Select Image
Kies de optie Select Image

Je wordt naar de WordPress Mediabibliotheek gebracht waar je ofwel een foto van jouw computer kunt uploaden of er een kunt kiezen die al in WordPress aanwezig is.

Selecteer de gewenste foto en klik op de knop Choose Image.

Kies de WordPress login achtergrondafbeelding
Kies de WordPress login achtergrondafbeelding

De geactiveerde achtergrondafbeelding verschijnt als een thumbnail in het Customizer paneel en in de daadwerkelijke preview van jouw loginpagina.

Stel de achtergrondafbeeldingsopties in
Stel de achtergrondafbeeldingsopties in

Je hebt nu de optie om op de Publish knop te klikken en het te houden bij wat er op het scherm staat. Of je kunt naar beneden scrollen naar de aanvullende instellingen om ervoor te zorgen dat de beste weergave van de geüploade afbeelding op dat moment actief is.

Klik op het Background Repeat dropdown veld en test opties zoals Repeat, No-Repeat, en Repeat-x.

Afhankelijk van de grootte van jouw foto, kun je de afbeelding wel of niet een beetje zien bewegen.

Kies de Background Repeat instellingen
Kies de Background Repeat instellingen

Kijk vervolgens naar de opties voor ‘Positie selecteren’ om de achtergrondafbeelding nog meer te verplaatsen.

Standaard wordt de afbeelding in het midden van het scherm geplaatst, maar soms ziet het er beter uit als je het ergens rechtsonder of linksboven laat plaatsen. Probeer ze allemaal uit om uit te vinden welke het beste werkt voor jouw achtergrondafbeelding.

Selecteer de positie van de achtergrond
Selecteer de positie van de achtergrond

De WordPress Background Image Size dropdown heeft instellingen voor hoe de afbeelding de schermruimte bedekt, waarbij de grootte wordt aangepast met elke vooraf ingestelde optie.

Nogmaals, test deze uit om te beslissen welke het beste lijkt. Misschien ben jij van mening dat iets als de instelling Contain een beter beeld geeft dan de instellingen Auto of Cover.

Stel de WordPress achtergrondafbeelding grootte in
Stel de WordPress achtergrondafbeelding grootte in

En dat is alles wat er komt kijken bij het uploaden en activeren van een achtergrondafbeelding voor jouw loginpagina!

De laatste instelling is beschikbaar voor als je een video als achtergrond wilt laten zien in plaats van een afbeelding. Zet die instelling aan als je een interessante video hebt die gerelateerd is aan je bedrijf en niet te veel aandacht weghaalt van mensen die zich aanmelden op de site.

Achtergrondvideo inschakelen
Achtergrondvideo inschakelen

Zodra alles klaar is, klik je op de knop Publish om de achtergrond van jouw loginpagina in te schakelen en te kunnen zien wanneer een gebruiker zich probeert te registreren of in te loggen op de site.

Hoe een achtergrondafbeelding aan jouw navigatiemenu toevoegen

Het is je misschien opgevallen dat sommige websites mooie menu’s hebben met achtergrondafbeeldingen of pictogrammen. Dit is een veelvoorkomende praktijk in de e-commerce wereld, waar het merk een mega menu kan hebben met categorieën en achtergrondafbeeldingen voor elke categorieknop.

Als je geïnteresseerd bent in het toevoegen van achtergronden aan jouw menu, kijk dan naar ons artikel over de beste WordPress menuplugins. Veel van deze menuplugins bieden opties om afbeeldingen en kleurenachtergronden in je menu op te nemen.

Aangezien er verschillende plugins zijn om een bepaalde achtergrond voor navigatiemenu’s toe te voegen, zullen we tutorials geven voor twee, waarvan er één achtergronden achter je submenu toestaat. De andere, daarentegen, voegt een achtergrond toe aan je mobiele menu.

Om een achtergrondafbeelding toe te voegen aan verschillende submenu’s, installeer en activeer je de WP Mega Menu plugin. Met deze plugin kun je een megamenu met meerdere dropdown niveaus activeren en beheren. Het is ideaal voor grote online winkels, maar het doet de truc voor kleinere menu’s ook, vooral als je een achtergrondafbeelding of pictogrammen wilt toevoegen.

WP Mega Menu plugin
WP Mega Menu plugin

Begin met het vinden van de WP Mega Menu tab in het WordPress dashboard.

Klik op het menu-item Themes.

Ga naar het paneel Themes
Ga naar het paneel Themes

Hier zie je een lijst van standaard thema’s gemaakt voor jouw menu door de plugin.

Je kunt klikken om een van de thema’s te bewerken of jouw eigen ontwerp vanuit het niets toe te voegen.

De vele Mega Menu thema's
De vele Mega Menu thema’s

Elk thema heeft zijn eigen instellingen waar je elementen specificeert zoals de thematitel, menubalk opties, en het merklogo. Zowat elk onderdeel van je menu is aanpasbaar, van het dropdown menu tot de submenu’s.

Voor de achtergrond van het menu hoef je echter alleen maar te weten welk thema je wilt kiezen.

Stel het Mega Menu thema in
Stel het Mega Menu thema in

Ga naar Appearance > Menus in het dashboard.

Ga naar Appearance > Menus.
Ga naar Appearance > Menus.

Je ziet een nieuwe module die linkt naar de Mega Menu Settings.

Klik om het megamenu in te schakelen op Enable, kies vervolgens welke je het beste bevalt voor jouw website.

Klik tenslotte op de knop Save.

Klik op de Enable knop
Klik op de Enable knop

Verplaats nu je aandacht naar het Menu Structure gebied.

Als je over een van jouw huidige menu-items scrolt, zie je een WP Mega Menu knop. Dit is waar je de lay-out en het ontwerp voor elke dropdown sectie aanpast.

Klik op de WP Mega Menu knop voor elk menu item dat je wilt. In dit geval voegen we een uitklapbaar mega-menu toe aan het tabblad Shop.

Opmerking: We gaan ervan uit dat je al een menu hebt geconfigureerd op je WordPress site. Lees onze WordPress Dropdown Menu handleiding als je daar hulp bij nodig hebt.

Voeg het megamenu aan jouw site toe
Voeg het megamenu aan jouw site toe

In het nieuwe popup venster, zet je de schakelaar om, om het Mega Menu in te schakelen voor dat specifieke menu-item.

Je kunt dan een dropdown rij toevoegen en een aantal van de vele widgets van de linkerkant naar die rij slepen. We zullen bijvoorbeeld een lijst met producten slepen, zodat ze verschijnen wanneer iemand over het Shop menu-item scrolt.

Klik op de Add Now knop
Klik op de Add Now knop

Om een achtergrond toe te voegen aan dit dropdown gebied, klik op de Options knop in de linkerbenedenhoek.

Kies de link Options
Kies de link Options

Zoek het veld ‘Upload Background Image.’

Klik op de knop ‘Upload‘ en zoek de juiste foto in jouw Mediabibliotheek om deze als achtergrond te gebruiken.

Selecteer de knop Upload Image
Selecteer de knop Upload Image

Een thumbnail verschijnt nadat je deze uit de Mediabibliotheek hebt geselecteerd.

Er zijn nog enkele andere instellingen om rekening mee te houden, dus voel je vrij om die te controleren als je wilt.

Controleer de thumbnail
Controleer de thumbnail

Zorg ervoor dat u op de knop Save Changes klikt onderaan het paneel Options.

Klik op de knop 'Save Changes’
Klik op de knop ‘Save Changes’

Je moet ook klikken op Save Menu in het Menu Structure gebied van het WordPress dashboard.

Klik op de knop Save Menu
Klik op de knop Save Menu

Navigeer nu naar de front-end van jouw website om het menu te zien. Als je over het item scrolt dat we net hebben aangepast, zou je een dropdown sectie moeten zien met de achtergrond.

Het menu heeft nu een achtergrondafbeelding
Het menu heeft nu een achtergrondafbeelding

Een andere manier om een achtergrondafbeelding aan een menu toe te voegen is door een mobiel, responsief menu te gebruiken dat wordt weergegeven wanneer iemand je website via een mobiel apparaat bezoekt.

Je kunt een achtergrond achter het mobiele menu plaatsen met behulp van de WP Mobile Menu plugin.

WP Mobile Menu plugin
WP Mobile Menu plugin

Na het installeren en activeren van de WP Mobile Menu plugin, ga je naar Mobile Menu Options in het WordPress dashboard.

Ga naar de Mobile menu options link
Ga naar de Mobile menu options link

De plugin biedt verschillende manieren om jouw mobiele menu te configureren. De algemene vereiste is dat je een van de menuformats inschakelt en aangeeft welk WordPress menu je wilt gebruiken voor dat mobiele menu.

We kunnen bijvoorbeeld klikken op de Enable Left Menu schakelaar (het inschakelen van een mobiel menu dat aan de linkerkant van het scherm zit) en de Main Menu optie kiezen uit de Left Menu dropdown. Dit koppelt ons huidige Main Menu aan het mobiele menu, zodat bezoekers dezelfde tabbladen te zien krijgen.

De opties voor het mobiele menu instellen
De opties voor het mobiele menu instellen

Het hangt af van het type mobiele menu dat je maakt, maar omdat we een menu aan de linkerkant maken, kunnen we op het tabblad Left Menu klikken om de juiste instellingen te onthullen om een achtergrond toe te voegen.

Kies de instellingen voor het linkermenu
Kies de instellingen voor het linkermenu

Scrol naar beneden naar het veld Panel Background Image en klik op het “+” teken om de Mediabibliotheek te openen.

Een achtergrondafbeelding voor het mobiele menu toevoegen
Een achtergrondafbeelding voor het mobiele menu toevoegen

Selecteer een afbeelding uit jouw Mediabibliotheek en voeg deze toe aan het veld.

Je zou een thumbnail van de achtergrondafbeelding moeten zien als bevestiging.

Selecteer de knop Save Changes om de achtergrond te activeren.

Controleer de achtergrondafbeelding met de thumbnail
Controleer de achtergrondafbeelding met de thumbnail

Aangezien de plugin mobiele menu’s genereert, kan het menu alleen verschijnen wanneer je browser is ingesteld op een smalle breedte of wanneer je naar je site gaat op een telefoon of tablet.

Het nieuwe menu wordt geconsolideerd onder een hamburger-pictogram (drie horizontale lijnen).

Klik daarop om het nieuwe menu met de achtergrond te testen.

Klik op het hamburger menupictogram
Klik op het hamburger menupictogram

Zoals in de schermafbeelding te zien is, wordt de achtergrond achter het hele mobiele menu geplaatst zodat iedereen het kan zien.

Mobiel menu met een achtergrondafbeelding
Mobiel menu met een achtergrondafbeelding

Hoe voeg je een WordPress achtergrondafbeelding toe aan een onderhoudspagina

Alle websites hebben af en toe onderhoud nodig, en soms duurt dat onderhoud zo lang dat het weergeven van een onderhoudspagina helpt.

Achtergrondafbeeldingen spelen een grote rol bij het werken met onderhoudspagina’s. De meeste onderhoudspagina’s bestaan uit een schermvullende achtergrondafbeelding en misschien wat tekst of links met meer bronnen.

Als je al een onderhoudspagina hebt en deze bevat geen achtergrondafbeelding, overweeg dan de volgende stappen om een mooie omgeving te genereren voor wanneer je jouw website misschien voor een bepaalde tijd moet afsluiten voor het publiek.

Je kunt een achtergrondafbeelding toevoegen aan een onderhoudspagina met behulp van de Maintenance plugin. Installeer en activeer de plugin op je website.

Maintenance plugin
Maintenance plugin

Zodra deze actief is, vind je de Maintenance is On/Off knop bovenaan het dashboard.

Klik op de knop om naar de Instellingen pagina van de Maintenance plugin te gaan.

Klik op de Maintenance is off link
Klik op de Maintenance is off link

Een andere manier om naar de Instellingen pagina te gaan is door te klikken op het Maintenance menu-item in het zijmenu van het dashboard.

Klik op het Maintenance menu-item
Klik op het Maintenance menu-item

De Maintenance plugin’s instellingenpagina heeft een behoorlijke verzameling van opties om aan te passen, maar het belangrijkste gebied om te overwegen is de General Settings module. Hier kun je een Headline en Description schrijven, die beide dienen als de tekst die de achtergrond – die we zo gaan toevoegen – overlapt.

De paginatitel verschijnt in de browsertab, dus je zou moeten overwegen die ook aan te passen.

Je kunt de Maintenance plugin gebruiken voor alles, van onderhoudspagina’s tot ‘coming soon’-pagina’s, dus je kunt iets typen als “Onze site wordt onderhouden”, of je kunt een beetje informatie over je bedrijf laten zien en een formulier opnemen waar mensen hun e-mailadres in kunnen typen.

Het toevoegen van een header voor de onderhoudspagina
Het toevoegen van een header voor de onderhoudspagina

Verder biedt de plugin een optie om je logo te uploaden, die ook overlapt bovenop de achtergrondafbeelding.

Upload logo knop
Upload logo knop

Klik op de Upload Logo knop en kies je logo om de thumbnail te zien in het dashboard.

Logo voor de onderhoudspagina
Logo voor de onderhoudspagina

Ten slotte vraagt het veld Background Image je om te klikken op de knop Upload Background Image.

Upload een afbeelding vanaf je computer of ga door jouw Mediabibliotheek om een achtergrond te vinden die geschikt is voor de onderhoudspagina.

Opmerking: De beste achtergrondafbeeldingen voor onderhoudapagina’s zijn groot, hebben een hoge resolutie en zijn liggend georiënteerd. Een alternatief voor de “Portret modus” achtergrond is beschikbaar in de instellingen hieronder.

Klik op de knop Upload Background
Klik op de knop Upload Background

Zodra je de achtergrond hebt gekozen, verschijnt deze als een kleinere thumbnail in het dashboard.

De thumbnail van de achtergrond
De thumbnail van de achtergrond

Hoewel een achtergrondafbeelding in liggende richting het meest zinvol is voor desktopcomputers en bredere schermen, komen veel mensen op jouw site terecht met schermen in staande richting, zoals wanneer een telefoon verticaal wordt gehouden.

Daarom zal een bredere achtergrondafbeelding er niet zo mooi uitzien. Dat is waarom de plugin een Portrait Mode Background aanbiedt die dient als een alternatief, die responsief wordt verwisseld wanneer een gebruiker de pagina bezoekt met behulp van een portret-georiënteerd scherm.

Het is belangrijk om een afbeelding in dit veld op te nemen, dus klik op de Upload image for portrait device orientation knop.

Een portrait orientation background image uploaden
Een portrait orientation background image uploaden

Zoek deze keer een afbeelding die hoger is dan breed (portretmodus). Je kunt de originele achtergrondafbeelding altijd bijsnijden om er een portretafbeelding van te maken, of je kunt een heel andere afbeelding uploaden om de plek op te vullen.

Markeer de afbeelding die je wilt en klik op de knop Select Image om deze in het dashboard in te voegen.

Kies de achtergrondafbeelding
Kies de achtergrondafbeelding

Al deze instellingen betekenen niets, tenzij je de Maintenance Mode activeert.

Om dat te doen, zoek je de Maintenance On/Off knop bovenaan de Instellingenpagina.

De onderhoudspagina "Aan" of "Uit" zetten
De onderhoudspagina “Aan” of “Uit” zetten

Zet de schakelaar zo dat er “On” staat en klik dan op de knop Save Changes.

De onderhoudspagina inschakelen
De onderhoudspagina inschakelen

Ga naar de voorkant van jouw website om te controleren of de achtergrondafbeelding en de onderhoudspagina correct worden weergegeven.

Er is een grote kans dat dit niet het geval is.

Daar zijn twee redenen voor: Ten eerste moet je uitloggen uit het WordPress Admin account om de onderhoudsmodus website te zien. Ten tweede moet je wellicht de cache van de site wissen om de gewijzigde inhoud te kunnen bijwerken.

De website in Maintenance Mode bekijken
De website in Maintenance Mode bekijken

Wanneer ik bijvoorbeeld uitlog uit het Admin account, verschijnt de onderhoudspagina nu wanneer ik naar een willekeurige pagina ga.

De achtergrondafbeelding is er, samen met mijn aanpassingen zoals het logo en de tekstbeschrijving.

De achtergrondafbeelding op de onderhoudspagina
De achtergrondafbeelding op de onderhoudspagina

Door het formaat van het browservenster te wijzigen in een meer staande oriëntatie, wordt de achtergrond in portretmodus op zijn plaats vastgezet.

Je zou de portretmodus ook moeten zien wanneer je de site bezoekt op een telefoon of tablet.

De achtergrondafbeelding in portretmodus
De achtergrondafbeelding in portretmodus

Een ander type achtergrondafbeelding met de plugin wordt een Preloader Image genoemd. Deze laadt in wezen een snelle afbeelding met een geanimeerd effect voordat de eigenlijke onderhoudspagina, achtergrond, en inhoud wordt onthuld.

Net als de gewone achtergrondafbeelding, klik op de Upload Preloader knop om een afbeelding te vinden die er mooi uitziet en voeg het toe aan het dashboard.

Nogmaals, klik op de Save Changes knop en leeg de cache.

Klik op de 'Upload Preloader' knop
Klik op de ‘Upload Preloader’ knop

Standaard draait het Preloader Image effect even rond, en verdwijnt dan om de onderhoudspagina en achtergrondafbeelding te presenteren.

Het is geheel aan jou of je dit type effect wilt behouden of niet.

Een intro-effect toevoegen aan de achtergrondafbeelding
Een intro-effect toevoegen aan de achtergrondafbeelding

Verschillende andere achtergrondelementen zijn beschikbaar voor jou om mee te experimenteren in het instellingenpaneel van de Maintenance plugin.

Misschien wil je bijvoorbeeld een achtergrondkleur toevoegen in plaats van een achtergrondafbeelding.

Als dat het geval is, ga dan naar het Background Color veld en selecteer een kleur die bij jouw merk past.

Open het achtergrondkleur veld
Open het achtergrondkleur veld

De achtergrondkleur wordt niet getoond voor de onderhoudspagina tenzij je alle andere achtergrondafbeeldingen uitschakelt.

Zorg er dus voor dat je de achtergrondafbeelding verwijdert.

De achtergrondafbeelding verwijderen
De achtergrondafbeelding verwijderen

Je moet ook de achtergrondafbeelding voor de portretmodus verwijderen.

De achtergrondafbeelding voor de Portretmodus instellen
De achtergrondafbeelding voor de Portretmodus instellen

Sla de wijzigingen op en wis de cache. Ga dan naar de voorkant van je site om de achtergrondkleur in werking te zien.

Controleer de voorkant van je site
Controleer de voorkant van je site

Andere instellingen om te overwegen zijn onder andere de letterkleur, lettertypefamilie, en de achtergrond vervagen.

Zoek je een hostingoplossing die je concurrentievoordeel geeft? Kinsta zorgt ervoor met ongelofijke snelheden, topbeveiliging en auto-scaling. Bekijk onze pakketten

We raden ook aan om na te denken over of je een front-end login nodig hebt of niet. Dit biedt een manier voor gebruikers om in te loggen op hun accounts en toegang te krijgen tot profielen indien nodig.

Als alles klaar is, klik dan op de Save Changes knop.

Stel de kleur van het lettertype in
Stel de kleur van het lettertype in

De Maintenance plugin biedt ook verschillende vooraf gemaakte thema’s met mooie achtergrondafbeeldingen en professioneel ontworpen lay-outs en tekst.

Je kunt thema’s vinden voor coming soon pagina’s en onderhoud lay-outs, samen met pagina’s om e-mailadressen en andere contactinformatie te verzamelen.

Je moet de thema’s wel kopen om ze te kunnen gebruiken.

Een premium thema kopen
Een premium thema kopen

Afhankelijk van jouw budget, zijn ze vrij goedkoop en zien ze er geweldig uit.

Een voorbeeld van een template
Een voorbeeld van een template

Voor degenen die niet geïnteresseerd zijn in het kopen van een thema, zijn alle instellingen die hierboven zijn behandeld tot jouw beschikking. Je kunt ook naar de Custom CSS module gaan om jouw onderhoudspagina en achtergrondafbeelding te configureren zoals jij dat wilt.

Ga naar de Custom CSS module
Ga naar de Custom CSS module

Onthoud dat de instellingen voor de onderhoudspagina zelden van kracht worden, tenzij je uitlogt uit jouw beheerdersaccount en op de knop Clear Cache klikt.

Je kunt de Clear Cache knop vinden in de rechterbovenhoek van het dashboard wanneer je Kinsta gebruikt. Als je een andere host gebruikt, overweeg dan een van de vele caching plugins op de markt.

Klik op de Clear Cache knop
Klik op de Clear Cache knop

Zodra je de cache hebt gewist en je instellingen hebt opgeslagen, zou je een mooie achtergrondafbeelding moeten zien die de onderhoudspagina aanvult!

De onderhoudspagina controleren
De onderhoudspagina controleren

Hoe een WordPress achtergrond toevoegen met een externe paginabouwer

Ons artikel over de beste paginabouwers biedt een lijst met opties voor het kiezen van een paginabouwer met drag-and-drop functies. WordPress bevat al een paginabouwer in Gutenberg, maar toch geven veel website-eigenaren de voorkeur aan andere oplossingen.

In het volgende gedeelte wordt uitgelegd hoe je een achtergrond kunt implementeren met behulp van enkele populaire paginabouwers, waaronder Elementor, Beaver Builder en Pagebuilder by SiteOrigin.

Een WordPress achtergrond toevoegen met Elementor

Elementor, de populaire paginabouwer bedoeld om de productie van websites drastisch te versnellen, biedt een gratis plugin met verschillende tools voor achtergrondafbeeldingen.

Elementor biedt ook visuele achtergrondflexibiliteit voor verschillende delen van jouw website in plaats van achtergronden te beperken tot de hele website. Je kunt bijvoorbeeld een achtergrond toevoegen achter zowat elke sectie en verschillende achtergronden tonen van pagina tot pagina.

Om te beginnen, installeer en activeer de Elementor plugin.

Elementor plugin
Elementor plugin

Elementor verspreidt zijn achtergrondinstellingen over de hele bouwer, waardoor het gemakkelijk is om een element te selecteren en een achtergrond te implementeren indien nodig. Daarom kun je technisch gezien naar elke pagina of bericht gaan met de verwachting dat je toegang hebt tot een achtergrond upload knop.

In dit geval, gaan we naar de Homepage van onze test site. Ga naar de pagina van je keuze door te kiezen uit de lijst bij Pages > All Pages. Je kunt hetzelfde doen met Posts.

Eenmaal op de standaard WordPress pagina-editor, klik op de knop Edit with Elementor.

Klik op de Edit with Elementor plugin
Klik op de Edit with Elementor plugin

Hierdoor verschuift de weergave op jouw scherm naar de Elementor Editor. Hier heeft de linkerkant een menu met drag-and-drop modules om jouw pagina op te bouwen en te bewerken.

De achtergrondfunctionaliteit is niet beschikbaar in een sectie of blok maar wel in de primaire Settings voor die pagina.

Klik daarom op het kleine Instellingen icoon (het ziet eruit als een tandwiel) in de linkerbenedenhoek van de editor.

Klik op het instellingenpictogram
Klik op het instellingenpictogram

Dit toont een sectie voor algemene pagina-instellingen.

Klik op de tab Style bovenaan de sectie Page Settings.

Ga naar het Style tabblad
Ga naar het Style tabblad

Zoek onder Style het veld Background Type en klik op het Penseel icoon om een standaard achtergrond toe te voegen.

Het veld Background Type instellen
Het veld Background Type instellen

Kies vervolgens het type achtergrond dat je wilt weergeven. Met het veld Color kun je bijvoorbeeld de achtergrond veranderen in een effen kleur. Er is ook een optie Gradient in het veld Background Type als dat meer jouw stijl is.

Het veld Background Color instellen
Het veld Background Color instellen

Klik op de knop Choose Image onder het veld Image om jouw mediabibliotheek op te roepen en een achtergrondafbeelding te kiezen die geschikt is voor deze pagina.

Klik op de knop Choose Image
Klik op de knop Choose Image

Zoals altijd, test je achtergrondafbeeldingen en houd je je aan de optimale afmetingen en beste manieren (hoge resolutie en staande oriëntatie voor de meeste), selecteer dan de afbeelding die goed werkt en klik op de knop ‘Insert Media’.

Klik op de knop Insert Media
Klik op de knop Insert Media

De geselecteerde achtergrondafbeelding verschijnt nu in de Elementor websitepreview aan de rechterkant. Het kan nodig zijn om andere delen van je content aan te passen om ervoor te zorgen dat items zoals tekst en afbeeldingen zichtbaar zijn wanneer ze bovenop de achtergrond staan.

Elementor biedt afbeeldingsachtergrond instellingen zoals Position, Attachment, Repeat, en WordPress Background Image Size. Pas de instellingen aan om te bepalen of jouw achtergrond er beter uitziet als een vaste bijlage, of misschien met een oriëntatie rechtsboven of een alternatieve grootte.

Druk op de knop Update om alle wijzigingen op de pagina op te slaan en de nieuwe achtergrond van jouw website te publiceren.

Een nieuwe achtergrond toevoegen
Een nieuwe achtergrond toevoegen
Sectie achtergronden met Elementor

Elementor biedt geavanceerde achtergrondfunctionaliteit voor de meeste secties die aan jouw pagina’s zijn toegevoegd.

Het enige wat je hoeft te doen is een sectie op een Elementor pagina te selecteren en de Achtergrond instellingen aan te passen om de achtergrond te beperken tot alleen dat gebied.

We kunnen bijvoorbeeld deze Text Editor sectie selecteren om de Tekst sectie instellingen te bekijken. .

Kies de tekst sectie met Elementor
Kies de tekst sectie met Elementor

Kies het tabblad Advanced en zoek de sectie Background binnen dat tabblad.

Ga naar de Background sectie
Ga naar de Background sectie

De Achtergrond instellingen omvatten Background Type, Color, Image, en meer, net als de instellingen die we zagen voor de algemene pagina achtergrond instellingen. Het enige verschil is dat deze instellingen beperkt zijn tot de geselecteerde sectie.

Kies het Penseel icoon voor Background Type, klik dan op de Choose Image knop onder het Image veld.

Klik op de knop Choose Image
Klik op de knop Choose Image

Kies een afbeelding uit de Mediabibliotheek en klik op de knop Insert Media.

Kies de afbeelding en klik op de knop Insert Media
Kies de afbeelding en klik op de knop Insert Media

Zoals je kunt zien, blijft de achtergrondafbeelding binnen de grenzen van die sectie terwijl ze achter de inhoud zit die al voor die sectie is gemaakt.

Gebruik de Position, Attachment, Repeat, en Size selectors om aan te passen hoe de achtergrondafbeelding wordt gepresenteerd in de sectie.

Klik tenslotte op de knop Update om de wijzigingen op te slaan.

Klik op Update om de wijzigingen te zien
Klik op Update om de wijzigingen te zien

Een achtergrondafbeelding toevoegen met Beaver Builder

De Beaver Builder plugin bevat een Lite versie met een aantal basis achtergrondtools. Het is een van de meest populaire paginabouwers op de markt, en biedt vele contentmodules voor items zoals video, afbeeldingen, paragrafen, en nog veel meer.

Daarnaast kun je er een achtergrondafbeelding, -kleur of -video mee implementeren, met behulp van visuele tools en CSS om het achtergrondelement op je hele website, één pagina of een afzonderlijke sectie op een pagina te plaatsen.

Installeer eerst de Beaver Builder plugin om te beginnen.

Beaver Builder plugin
Beaver Builder plugin

Ga naar een pagina of bericht om deze te bewerken met Beaver Builder.

Je moet eerder gemaakte pagina’s converteren naar de Beaver Builder indeling. Als alternatief heb je de optie om een pagina vanaf nul aan te maken en te kiezen om de pagina in Beaver Builder te bewerken.

Voor het converteren van een huidige pagina naar Beaver Builder, open je die pagina-editor en klik je op het pictogram met de drie stippen om het menu View in de rechterbovenhoek te openen.

Ga naar het instellingenmenu van de pagina
Ga naar het instellingenmenu van de pagina

Scrol naar beneden om de Convert to Beaver Builder link te vinden en te kiezen.

Deze probeert alle inhoud die je op je pagina hebt te compileren en die elementen in compatibele Beaver Builder modules te schuiven.

Klik op de Convert to Beaver Builder link
Klik op de Convert to Beaver Builder link

Om een pagina vanaf nul te maken, ga je naar Pages > Add New.

Klik dan op de knop Launch Beaver Builder.

Klik op de knop Launch Beaver Builder
Klik op de knop Launch Beaver Builder

De Beaver Builder plugin brengt je naar een front-end view van de webpagina. Het neemt het grootste deel van het scherm in beslag en werkt als een echte front-end editor, waar je op de elementen klikt en met je muis over de vakken beweegt.

De eerste manier om een achtergrond toe te voegen via Beaver Builder is door een achtergrond te uploaden naar een sectieblok. Dit kan het grootste deel van de pagina in beslag nemen of een fractie van de pagina, afhankelijk van de grootte van je sectieblok.

Eenmaal geselecteerd, zoek dan de Row Settings knop (het ⚙ pictogram).

Klik op dat icoon om de instellingen voor die rij te openen. Je kunt dit ook doen met secties en kolommen, en andere soorten blokken.

Bewerk de rij-instellingen
Bewerk de rij-instellingen

Een Instellingen paneel verschijnt bovenaan jouw website preview. Klik op het tabblad Style en zoek dan naar de sectie Background.

Onder Background, klik op het dropdown menu om alle achtergrondtypes te tonen.

Ga naar het tabblad ‘Style’
Ga naar het tabblad ‘Style’

Je hebt verschillende achtergrondtypes om te overwegen, waarvan er één voor een foto is. De andere zijn:

  • Kleur
  • Gradient
  • Video
  • Ingesloten Code
Stel het type in voor de WordPress achtergrondafbeelding
Stel het type in voor de WordPress achtergrondafbeelding

Voel je vrij om de verschillende achtergrondtypes uit te testen.

Misschien staat een Gradient achtergrond in jouw ogen bijvoorbeeld beter dan een afbeelding. Elk van de achtergrond types heeft zijn eigen instellingen. Het Gradient type, in dit geval, vraagt om twee kleuren om het kleurverloop van de ene naar de andere kleur te laten overgaan.

'About The Company' section
Over het bedrijf sectie

Als je kiest voor de foto-achtergrond, krijg je velden om te kiezen uit de mediabibliotheek of om een URL in te plakken voor de afbeelding. Klik op de link Select Photo als je de fotobron uit de Mediabibliotheek gebruikt.

Klik op de link Select Photo
Klik op de link Select Photo

Zoek jouw favoriete achtergrondfoto en klik op de knop Select Photo.

Kies de media
Kies de media

Beaver Builder plaatst de foto in de eerder gekozen achtergrondruimte. De sectie Foto instellingen vraagt hoe je de foto wilt opmaken. Kies uit opties zoals Size, Repeat, Position en Attachment.

Stel de grootte van de achtergrondfoto in
Stel de grootte van de achtergrondfoto in
Globale en paginavullende Beaver Builder achtergrondfoto’s

Beaver Builder werkt met de standaard WordPress design tools om gebruik te maken van de ingebouwde achtergrondfuncties.

Daarom kun je naar het tabblad Appearance > Background gaan om een foto achtergrond voor jouw gehele website te activeren.

Als alternatief, open een willekeurige webpagina in Beaver Builder en klik op het Tools dropdown menu in de linkerbovenhoek.

Klik hier op de optie Global Settings.

Globale instellingen voor Beaver Builder
Globale instellingen voor Beaver Builder

Het Global Settings Panel biedt de mogelijkheid om je hele website te veranderen, waarbij je ingebouwde WordPress codering kunt overschrijven of wijzigen. Daarom willen we een CSS code blok invoegen om de achtergrondafbeelding van de hele website (globaal) te wijzigen.

Klik op het CSS tabblad in de Global Settings, en plak het volgende stukje code in het veld:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Vervang de URL naar Afbeelding tekst door de URL naar de gewenste achtergrondfoto. Je kunt ook dingen als herhalingen, bijlages, en afmetingen van de achtergrond veranderen met de CSS code.

Ga naar de CSS tab
Ga naar de CSS tab

Het is zinvoller om Beaver Builder te gebruiken voor aangepaste pagina-achtergronden, aangezien elke pagina zijn eigen afbeelding als achtergrond heeft.

Op jouw pagina editor, open het Tools menu opnieuw.

Selecteer de Layout CSS & Javascript optie.

Layout CSS & JavaScript knop
Layout CSS & JavaScript knop

Plak dezelfde code in het CSS tabblad, verander de URL naar Afbeelding tekst naar de daadwerkelijke URL en pas de instellingen aan die je wilt:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}
Zoals je kunt zien, verandert de hele achtergrond naar de URL afbeelding die je in de CSS codering hebt staan. Houd in gedachten dat het Layout CSS / Javascript paneel alleen de huidige pagina controleert. Je zult de achtergrond niet zien op andere pagina’s dan deze.
Toevoegen van aangepaste CSS
Toevoegen van aangepaste CSS

Voeg een eenvoudige rij of widget achtergrond toe met de Page Builder by SiteOrigin

De paginabouwer van SiteOrigin is weer een andere drag-and-drop visuele website-maker. Het is beperkt in zijn mogelijkheden om achtergronden toe te voegen voor de gehele website (je zou terug moeten keren naar de standaard WordPress Custom Background tool). Toch biedt het instellingen om achtergrondafbeeldingen en kleuren toe te voegen voor rijen en widgets gebruikt door SiteOrigin.

Download en activeer eerst de Pagebuilder by SiteOrigin plugin.

Page Builder by SiteOrigin plugin
Page Builder by SiteOrigin plugin

Navigeer naar een nieuwe pagina of overweeg een SiteOrigin rij toe te voegen aan een huidige pagina op de website.

Elke SiteOrigin sectie geeft je de mogelijkheid voor Add Widget of Add Row. Je hebt ook de mogelijkheid om te bladeren door de Pre-built Layouts als je liever niet wilt beginnen met een ontwerp vanaf nul.

Het goede nieuws is dat zowel widgets als rijen in SiteOrigin instellingen hebben om achtergrondafbeeldingen op te nemen.

Klik daarom op de knop Add Widget of Add Row om verder te gaan.

Een nieuwe widget of rij toevoegen
Een nieuwe widget of rij toevoegen

In dit voorbeeld kijken we naar de Widgets bibliotheek.

Hier kun je kiezen uit een van de vele widgets die SiteOrigin aanbiedt, van navigatie menu’s en pagina’s tot Post Inhoud en Product Lijsten.

Wij kiezen de Products widget voor dit voorbeeld, maar je kunt kiezen voor een van de vele andere widgets gebaseerd op de behoeften van jouw ontwerp. Je kunt deze widgets ook groeperen met een rij, en dan een achtergrondafbeelding toevoegen aan die rij, zodat de achtergrond achter meerdere widgets verschijnt.

Kies de Products widget
Kies de Products widget

De nieuwe widget of rij komt terecht in de SiteOrigin pagina-editor. Het grootste deel van SiteOrigin blijft in het WordPress dashboard, dus er is niet zo veel van een front-end editor als er is met andere paginabouwers.

Om een achtergrond toe te voegen aan een SiteOrigin item, scrol over het element en klik op de Edit link.

Klik op de Edit link
Klik op de Edit link

Ik koos de Products widget voor dit voorbeeld, maar elke widget heeft zijn eigen instellingen om te configureren hoe het eruit ziet op je website.

De achtergrond tools staan onder het Design dropdown menu. Klik daarop om verder te gaan.

Het Design tabblad voor WordPress achtergrondafbeelding
Het Design tabblad voor WordPress achtergrondafbeelding

Zoek het veld Background Image en klik op de knop Select Image.

Je hebt ook de mogelijkheid om een Externe URL in te plakken voor de achtergrondafbeelding.

Het kiezen van de achtergrondafbeelding en kleur
Het kiezen van de achtergrondafbeelding en kleur

De Mediabibliotheek toont je de huidige afbeeldingen die je naar WordPress hebt geüpload. Klik op de afbeelding die het beste werkt voor deze achtergrond en selecteer de knop Done om deze in de SiteOrigin module te plaatsen.

Klik op de knop Done
Klik op de knop Done

Nu toont het veld Background Image een thumbnail van die foto.

Scrol naar beneden door de instellingen om alles te configureren van de Background Image Display tot de Font Color voor de overlappende tekst.

In het algemeen zou je de gewenste resultaten moeten kunnen krijgen door de Cover weergave te kiezen. Het lijkt erop dat de SiteOrigin plugin standaard voor de Tiled weergave kiest, dus het kan zijn dat je dat moet veranderen.

Zorg ervoor dat je op de Done knop klikt als je klaar bent met je aangepaste instellingen voor de achtergrond.

De WordPress Background Image instellingen
De WordPress Background Image instellingen

De widget (in dit geval, de Products widget) gaat in de SiteOrigin WordPress editor voor die pagina. Je kunt dit element verslepen waar je maar wilt op de pagina en nieuwe widgets en rijen erboven en eronder toevoegen.

Je moet of op de Preview of Update knop klikken en dan navigeren door de front-end van de pagina om de resultaten te zien.

Ga naar de Products sectie
Ga naar de Products sectie

De huidige achtergrond die ik heb toegevoegd verschijnt binnen de beperkingen van de Products widget van eerder. Deze achtergrond moet natuurlijk nog wat bewerkt worden om er mooier uit te zien, maar het is een goed begin om de ruimte in te vullen met een veel creatiever uitziende achtergrondafbeelding.

De sectie achtergrond
De sectie achtergrond

Unieke achtergrondafbeeldingen toevoegen met Brizy

De laatste paginabouwer binnen deze uitleg is Brizy, en biedt stijlvolle templates en een superieure front-end interface voor het toevoegen van ongebruikelijke ontwerpen en snelle aanpassingen.

De Brizy paginabouwer bevat een uitgebreide set drag-and-drop modules om in jouw huidige website te integreren. Je kunt ook beginnen met een lege templateen de hele website met Brizy bouwen.

Je zult ook blij zijn te horen dat Brizy ook een achtergrond tool heeft voor zo ongeveer elk element dat je opneemt via de paginabouwer. Niet te vergeten, Brizy beschikt over verschillende unieke achtergrondstijlen, zoals het toevoegen van een zichzelf herhalende (loop) video aan de achtergrond of een volledige kaart.

Om te profiteren van deze achtergrondinstellingen, installeer en activeer de Brizy plugin om te beginnen.

De Brizy – Page Builder plugin
De Brizy – Page Builder plugin

Een groot deel van het Brizy ontwerpproces vereist dat je begint met een lege template. Brizy zal proberen jouw oudere ontwerpen om te zetten in Brizy modules, maar wij zijn van mening dat het het beste is om opnieuw te beginnen.

Ga naar een pagina of bericht in jouw WordPress dashboard en begin met het opbouwen van de pagina met een titel en misschien wat content.

Je zou een knop moeten zien met de tekst Edit With Brizy. Klik daarop om naar de volledige Brizy paginabouwer te worden gestuurd.

Klik op de knop Continue to edit with Brizy
Klik op de knop Continue to edit with Brizy

De Brizy paginabouwer toont een volledig voorbeeld van jouw website met knoppen, tekst en afbeeldingen. Als de pagina leeg is, klik je op de knop Start Building Your Page.

Klik op het plus pictogram om te beginnen met het bouwen van jouw pagina
Klik op het plus pictogram om te beginnen met het bouwen van jouw pagina

Zoek naar de tabbladen Layouts and Blocks in de bovenste menubalk.

De layouts zijn kant-en-klare webpagina’s, gevuld met demo-inhoud en klaar om te gebruiken, zolang je de inhoud van jouw eigen bedrijf maar aanpast. De blokken zijn kleinere brokken van webpagina’s, maar ze zijn nog steeds vooraf gemaakt en vaak gemakkelijker te gebruiken en te manipuleren dan wanneer je zelf een blok zou maken.

Het maakt niet uit welke richting je op gaat. Blader door de layouts en blokken en voeg er zoveel toe aan de pagina als je wilt. Dit zijn simpelweg de elementen die je zult gebruiken om een complete webpagina te vormen.

Layouts en blokken secties
Layouts en blokken secties

Nadat je een paar blokken of lay-outs op de webpagina hebt gezet, ga je terug naar het editorscherm om je werk te bekijken.

Je zult zien dat elke bloksectie een Settings pictogram heeft aan de rechterbovenkant van het blok, dat meestal verschijnt als je over de sectie scrolt.

Klik hierop voor het blok van je keuze. We zullen een achtergrond aan dat blok toevoegen.

Klik op Settings pictogram
Klik op Settings pictogram

Het paneel met Block Settings blijft in de rechterbovenhoek staan. Scrol over de menupictogrammen om te zien wat ze allemaal doen.

Een ervan is voor Colors, en daarmee bedoelen ze een gekleurde achtergrond. Je kunt dat veranderen en een kleurverloop toevoegen als je het liever bij een effen of kleurverloop achtergrondweergave houdt.

De Color knop voor de achtergrond
De Color knop voor de achtergrond

De icoonknop links bevat de Background instellingen.

Klik op die knop om de snelle tools te openen voor het uploaden van een achtergrondafbeelding naar dit blok.

WordPress Background Image knop
WordPress Background Image knop

Brizy biedt drie media achtergronden:

  • Afbeeldingen
  • Video’s
  • Kaarten

Probeer eerst het type Afbeelding om te begrijpen hoe het werkt met jouw huidige lay-out.

Klik op het Image Upload gebied om een foto te vinden in de mediabibliotheek en voeg deze toe aan de achtergrond.

WordPress achtergrondafbeelding type
WordPress achtergrondafbeelding type

We hebben een foto van een houten paneel gevonden voor deze tutorial en aangegeven dat we geen parallax effect willen hebben.

Dit geeft een aangenaam effect omdat de gekleurde achtergrond dient als een overlay, maar we zien nog steeds de textuur van het hout erachter.

Vergeet niet dat je altijd het Parallax veld kunt aanpassen om de achtergrondafbeelding een vaste, geanimeerde, of scrollende achtergrond te maken.

Achtergrondafbeelding zonder parallax
Achtergrondafbeelding zonder parallax

En dat is hoe je een achtergrondafbeelding invoegt met Brizy!

Het beste aan Brizy is dat je door het ontwerp kunt blijven gaan en op de knop Instellingen van elke sectie kunt klikken.

Een sectie verder kunnen we nog een achtergrondafbeelding invoegen zonder er veel tijd aan te besteden.

Een andere achtergrondafbeelding toevoegen
Een andere achtergrondafbeelding toevoegen

En om de kracht van de andere achtergrondtypes te demonstreren, kunnen we klikken op het achtergrondtype Map, een adres intikken, en kijken hoe een kaart van die locatie verschijnt direct achter de content op de voorgrond.

De kaart wordt gesitueerd als een volledige achtergrond en heeft een zoom functie als het er niet helemaal goed uit komt met de standaard instellingen.

Voeg een kaart toe als een WordPress achtergrondafbeelding
Voeg een kaart toe als een WordPress achtergrondafbeelding

Tot slot raden wij aan om de Brizy achtergrond videotool te bekijken, die zich in dezelfde sectie bevindt als de afbeelding achtergrondtool. Het werkt door het invoegen van een video URL (YouTube of Vimeo), waardoor een volledige video direct achter de voorgrond inhoud wordt weergegeven. Het biedt zelfs een instelling om de video te loopen en te kiezen wanneer het moet beginnen als de gebruiker over de sectie scrolt.

URL voor WordPress achtergrondafbeelding
URL voor WordPress achtergrondafbeelding

De geanimeerde gif hieronder geeft een kort voorbeeld van de video in actie, ook al kan het waarschijnlijk wel wat bewerking gebruiken.

Achtergrond met video
Achtergrond met video

Achtergrondafbeelding afmetingen, bron, en basisbewerking

We hebben eerder in het artikel vermeld dat er geen perfecte grootte is voor een achtergrondafbeelding, maar we raden aan om niet kleiner te beginnen dan 1024 x 768 pixels en een gebruikelijke beeldverhouding aan te houden zoals 16:9. De beeldverhouding is niet zo belangrijk als de werkelijke grootte en resolutie van de afbeelding, aangezien je de afbeelding kunt bijsnijden of WordPress dit voor je kan laten doen.

Het is ook essentieel om de juiste plaatsen te vinden om WordPress achtergrondafbeeldingen te kopen of te lenen als je niet van plan bent om jouw eigen foto’s te maken.

Waar vind ik geschikte achtergrondafbeeldingen

Voor het zoeken naar achtergrondafbeeldingen, kun je onze gids over het vinden en toevoegen van stockfoto’s zonder WordPress te verlaten bekijken. We hebben ook een lijst met nuttige marktplaatsbronnen om stockfoto’s met een hoge resolutie te zoeken, waarvan vele gratis zijn.

Over het algemeen raden wij aan om te proberen zelf achtergrondafbeeldingen te maken. Als dat niet mogelijk is, of als je geen ervaring hebt met fotografie of grafisch ontwerp, kun je overwegen gratis stockfotografiebronnen te gebruiken. Je kunt er ook voor kiezen om te betalen voor een achtergrondafbeelding van een van de vele premium stockafbeeldingen websites, waarvan sommige een maandelijkse vergoeding vragen voor het downloaden van een stel foto’s.

Enkele hoogtepunten van deze links zijn:

  • Unsplash – Gratis, en geen naamsvermelding vereist.
  • Visual Hunt – Gratis foto’s. Voor de meeste afbeeldingen is geen bronvermelding nodig.
  • Pexels – Gratis en geen bronvermelding nodig.
  • Pixabay – Gratis en voor de meeste afbeeldingen is geen bronvermelding nodig.
  • iStockphoto – Een vrij goedkoop premium abonnement voor royalty-vrije afbeeldingen.
  • Shutterstock – Royalty-vrije afbeeldingen voor een redelijke abonnementsprijs.

Hoe de WordPress achtergrondafbeelding te veranderen met aangepaste CSS

Zoals we hebben geleerd, kun je een WordPress achtergrondafbeelding toevoegen met standaard ingebouwde WordPress tools of een plugin. Het maakt niet uit welke route je kiest, zolang je maar het gewenste resultaat krijgt. Er is ook de mogelijkheid om aangepaste CSS te gebruiken om de achtergrondafbeelding te stylen of helemaal aan jouw site toe te voegen.

We zullen niet ingaan op de fijne kneepjes van aangepaste CSS, aangezien elke achtergrondafbeelding en elk thema een ander proces zal hebben. We raden je echter aan onze gids over het bewerken, toevoegen en aanpassen van CSS in WordPress te lezen. Het artikel bevat nuttige tips voor het toevoegen van achtergrondafbeeldingen aan zowat elke website sectie, van menu-items tot specifieke pagina blokken.

Veelvoorkomende problemen met een WordPress achtergrondafbeelding oplossen

Alle WordPress sites worden geleverd met de mogelijkheid om een achtergrond toe te voegen. Dat betekent echter niet dat de kernfunctie voor alle websites werkt. Het kan bijvoorbeeld zijn dat het thema dat je gebruikt geen aangepaste achtergronden ondersteunt. Of misschien blijf je een achtergrond uploaden, maar ziet die er niet helemaal goed uit (te groot of te wazig).

Een probleem tegenkomen met een achtergrond in WordPress is frustrerend en komt helaas vaak voor. We hebben hieronder een aantal van de meest voorkomende problemen met achtergrondafbeeldingen op een rijtje gezet en de te volgen handelwijze in kaart gebracht.

Mijn thema ondersteunt geen WordPress achtergrondafbeelding

In WordPress hebben thema-ontwikkelaars de mogelijkheid om aangepaste achtergronden in of uit te schakelen. Ze kunnen deze aan- of uitzetten, afhankelijk van of ze de ondersteuning voor aangepaste achtergronden willen inschakelen. De achtergrond wordt uitgeschakeld wanneer deze niet nodig is, of wanneer deze conflicteert met het algemene ontwerp van het thema.

Als je merkt dat jouw thema geen aangepaste achtergrond ondersteunt of jouw mogelijkheden beperkt om een achtergrond toe te voegen, kun je de volgende oplossingen overwegen:

  • Verwissel het thema voor een die wel aangepaste achtergronden ondersteunt. Zoek naar ‘aangepaste achtergronden’ (custom backgrounds) in de lijst met functies bij het kopen of downloaden van thema’s.
  • Gebruik een achtergrondplugin om het blokkeren van de functie voor aangepaste achtergronden op te heffen.

Hoewel het mogelijk is om jouw eigen aangepaste codering op te nemen of in de themabestanden te gaan om aangepaste achtergronden te reageren, raden we meestal beide opties af. Je kunt het beste een thema zoeken dat achtergronden ondersteunt of een plugin toevoegen die achtergronden toestaat maar niet veel met de functionaliteit van het thema knoeit.

Mijn WordPress achtergrondafbeelding is te donker of heeft de verkeerde kleur

Een donkere achtergrondafbeelding kan het gevolg zijn van vele instellingen die naast de achtergrondafbeelding zelf lopen. Meestal heeft het te maken met een overlappende filter of een slecht gekleurde achtergrond.

In de meeste gevallen waar de achtergrond verkleurd is, moet je je thema of plugin controleren die de achtergrond regelt.

Zoek naar een instelling in de buurt van het achtergrondveld dat vraagt om een filter of overlay. Je kunt ook een doorzichtigheidsfunctie vinden die moet worden gewist, zodat je achtergrond goed wordt weergegeven.

Als al het andere mislukt, kan het zijn dat het thema een achtergrondfilter heeft die hard gecodeerd is in de themabestanden. In dat geval kun je contact opnemen met de ontwikkelaar van het thema om een idee te krijgen van wat er mogelijk is om de achtergrondkleur te corrigeren.

Mijn WordPress achtergrondafbeelding staat niet op de juiste plaats

Een achtergrondafbeelding die op de verkeerde plaats staat, heeft de neiging om het algemene ontwerp van jouw website te verstoren. Het kan zijn dat de achtergrond te ver naar links of rechts staat, of misschien verschijnt de centrale focus van de achtergrond helemaal niet op het scherm.

Gelukkig is het verplaatsen van de achtergrond maar een kwestie van een paar klikken op de knop.

Ga naar Appearance > Background in het WordPress dashboard. Zoek de afbeelding die je momenteel hebt geüpload als achtergrond en zoek naar het veld Position. In dit veld kun je de positie van de achtergrond wijzigen, met opties om deze naar links, rechts, boven, onder of hoeken te verplaatsen.

We raden aan op alle positioneringsknoppen te klikken om te zien welke resultaten ze opleveren. Nadat je de juiste positie hebt gevonden, sla je de pagina op.

Mijn WordPress achtergrondafbeelding wordt steeds herhaald

Texturen en effen achtergronden zien er vaak beter uit wanneer ze herhaald worden, omdat je vaak de afbeeldingsonderbrekingen niet kan zien. Veel normale afbeeldingen zien er echter vreselijk uit wanneer ze herhaaldelijk als achtergrond worden gebruikt, vooral als ze veel details en verschillende gradaties van kleur bevatten.

Een herhaalde achtergrondafbeelding layout is handig als je bronafbeelding niet groot genoeg is om de hele achtergrond te bedekken zonder er uitgerekt uit te zien. Daarom kiest WordPress soms standaard voor een herhaalde opmaak om de resolutie van de afbeelding te behouden.

De belangrijkste oplossing voor dit probleem is te vinden in de Background sectie bij Appearance > Background in WordPress. Als je een geüploade foto als achtergrond hebt, probeer dan presets zoals Fill Screen, Fit To Screen of Custom, in plaats van de Repeat preset optie.

Het kan echter voorkomen dat het proberen om een kleinere afbeelding het hele achtergrondscherm te laten bedekken tot onaangename resultaten leidt. In dat geval is de beste oplossing om de bronafbeelding van de achtergrond volledig te vervangen en er een te zoeken die groot en met een hoge resolutie is en klaar is om op het web te worden gepubliceerd.

Mijn WordPress achtergrondafbeelding is uitgerekt

Een uitgerekte achtergrondafbeelding betekent dat jouw aangepaste achtergrondinstellingen proberen om een kleinere afbeelding te nemen en het hele scherm te bedekken met de afbeelding.

Je kunt dit ook zien gebeuren met grotere, hoge-resolutie afbeeldingen als ze niet overeenkomen met de vereiste beeldverhouding. Voor uitgerekte achtergrondafbeeldingen, denk aan het bronbestand. Het kiezen van een andere afbeelding die wel geschikt is, is de beste optie.

Een ander probleem is dat de achtergrond instellingen misschien verkeerd zijn geconfigureerd. Controleer zaken als de positie van de achtergrondafbeelding en of deze is uitgerekt over het canvas in de modus Fill Screen. Misschien hoef je alleen maar de oorspronkelijke afmetingen aan te houden of een functie Repeat toe te voegen om het allemaal in orde te maken.

Andere achtergrond tips voor het oplossen van problemen

  • Thema-ontwikkelaars hebben de volledige macht over de aangepaste achtergrondfunctie in WordPress. Als je een thema hebt geïnstalleerd en de achtergrond werkt niet, kun je het beste contact opnemen met de thema-ontwikkelaar of een nieuw thema installeren om te zien of dat het probleem oplost.
  • Aangepaste achtergrondkleuren en -afbeeldingen overschrijven vaak alle aangepaste CSS code die je implementeert om de grootte, plaatsing of bron van jouw achtergrondafbeelding te regelen. Het kan zijn dat je het bij de achtergrond instellingen van het thema moet houden in plaats van aangepaste CSS te gebruiken.
  • Een thema kan worden verkocht met een aangepaste achtergrond al geactiveerd. Meestal hoef je dan alleen de achtergrondafbeelding te vervangen door een nieuwe. Soms is het nodig om in de thema bestanden te tappen of aangepaste CSS te gebruiken om de thema instellingen te overschrijven.

Beste WordPress achtergrondafbeelding plugins

Als je verdere bewerkingsmogelijkheden voor een achtergrondafbeelding wilt hebben, geïnteresseerd bent in video achtergronden, of tools die pagina-specifieke achtergronden mogelijk maken, kun je de volgende WordPress achtergrondafbeelding plugins overwegen:

Simple Full Screen Background Image

Simple Full Screen Background Image plugin
Simple Full Screen Background Image plugin

De Simple Full Screen Background Image plugin verschilt niet veel van de standaard achtergrondafbeelding tool in WordPress, behalve dat het geautomatiseerde functies toevoegt voor dingen zoals resizing en scaling voor browsers.

In het algemeen werkt deze plugin het beste voor degenen die vinden dat hun thema de mogelijkheid om een achtergrond toe te voegen blokkeert, of misschien hebben ze problemen met de ingebouwde WordPress achtergrond tool. Het overschrijft wat je hebt op WordPress en voegt een speciale Background knop in jouw WordPress dashboard om direct een afbeelding te uploaden vanaf jouw computer.

Dat is alles wat erbij komt kijken!

De plugin heeft ook een Premium versie die verbeterde scaling biedt, ondersteuning voor een onbeperkt aantal achtergronden, unieke effecten, en nog veel meer.

Advanced WordPress Backgrounds

AWB - Advanced WordPress Backgrounds plugin
AWB – Advanced WordPress Backgrounds plugin

De Advanced WordPress Backgrounds plugin benadert WordPress achtergronden op een andere manier, door je in staat te stellen gebruik te maken van unieke effecten die je achtergrond opleuken. Een voorbeeld hiervan is de parallax achtergrond, die langzaam kan meebewegen met de gebruiker terwijl ze door jouw website scrollen.

De plugin biedt ook ondersteuning voor video’s. De video achtergronden worden gehaald van plaatsen zoals YouTube en Vimeo, of je kunt ze zelfs zelf hosten.

Het is ook mogelijk om een effen kleur of textuur achtergrond te hebben. Al deze achtergronden hebben geavanceerde functies die je niet kunt vinden met de basis WordPress achtergrond tool. Sommige van deze omvatten scrollen en scalingseffecten, ondoorzichtigheidseffecten en aangepaste snelheidsopties.

Het ondersteunt Gutenberg en kan samengaan met de standaard WordPress editor en vele andere visuele paginabouwers. Tot slot kun je zijn aangepaste CSS opties gebruiken om nog meer stijl aan jouw achtergronden toe te voegen.

Perfect Images + Retina

Perfect Images + Retina plugin
Perfect Images + Retina plugin

De Perfect Images + Retina plugin komt van pas als een twee-in-één oplossing. Het stelt je in staat om de WordPress achtergrondafbeelding grootte en uiterlijk te beheren, terwijl ook zorgt voor het regenereren van thumbnails en het vervangen van afbeeldingen. Het afbeeldingsbeheer is vrij indrukwekkend, en het is vooral van cruciaal belang voor hoge-resolutie achtergronden.

De plugin biedt ook een achtergrond functie als je voor de premium versie gaat. Het genereert een retina gelijkwaardige variant voor die achtergrondafbeelding, zodat de afbeeldingen eruitzien zoals ze eruit horen te zien, zelfs op hoge-resolutie beeldschermen.

Maintenance

Maintenance plugin met WordPress achtergrondafbeelding
Maintenance plugin met WordPress achtergrondafbeelding

Maintenance is een eenvoudige en makkelijk te gebruiken plugin voor het ontwerpen van onderhoud en Coming Soon pagina’s. De Maintenance plugin heeft zowel gratis als premium versies, maar de gratis versie is voldoende om een onderhoudspagina te activeren en een achtergrondafbeelding toe te voegen met overlappende tekst en velden.

Je kunt zelfs je eigen logo uploaden, dingen aanpassen zoals lettertypes en iconen, en verschillende templates kiezen met hun eigen prachtige achtergrondafbeeldingen. Je kunt ook de vele kant-en-klare templates installeren, maar voor de meeste heb je de premium licentie van de plugin nodig.

Jouw alles-in-één gids voor het toevoegen, bewerken en aanpassen van de achtergrondafbeeldingen van jouw site voor een unieke look & feel 🎨Klik om te tweeten

Samenvatting

Een basis WordPress achtergrondafbeelding toevoegen is zo gepiept en wordt meteen op jouw hele WordPress laten zien. Het is een functionaliteit die in de WordPress Core is ingebouwd, dus het is gemakkelijk om achtergronden voor bepaalde evenementen of feestdagen te verwisselen. Je kunt het ook bij één achtergrond voor het leven houden.

Naast de standaard WordPress achtergrond, kun je gebruik maken van aangepaste CSS code, plugins en paginabouwers om allerlei achtergronden op jouw WordPress site te implementeren. Van afbeeldingsachtergronden op specifieke pagina’s tot achtergronden voor je menuknop, de mogelijkheden zijn eindeloos.

Het is nu tijd om die achtergrond die je altijd al wilde aan je WordPress site toe te voegen.

Zijn we iets vergeten? Laat een reactie achter als je problemen hebt met het toevoegen of beheren van WordPress achtergrondafbeeldingen.


Bespaar tijd en kosten en maximaliseer siteprestaties met:

  • Directe hulp van WordPress-hostingexperts, 24/7.
  • Cloudflare Enterprise integration.
  • Globaal bereik met 35 datacenters verspreid over de wereld.
  • Optimalisatie met onze ingebouwde Application Performance Monitoring.

Dat alles en nog veel meer, in één pakket zonder langlopende contracten, met migraties en een 30 dagen geld-terug-garantie. Bekijk onze pakketten of neem contact op met sales om het pakket te vinden dat bij je past.