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:

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:

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. ✨Click to Tweet

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:

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:

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:

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:

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 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):

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:

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:

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:

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:

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:

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

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 🎨Click to Tweet

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.
  • Wereldwijd bereik met 28 datacenters wereldwijd.
  • Optimalisatie met onze ingebouwde Application Performance Monitoring.

Dat alles en nog veel meer, in één pakket zonder langlopende contracten, 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.