Ik zal deze intro heel kort houden.
dit is wat we gaan bespreken in dit artikel:
- Wat zijn achtergrondafbeeldingen
- Wat is het ding met parallax achtergronden?
- hoe voeg ik achtergrondafbeeldingen toe aan uw WordPress website
- hoe benader ik de afbeeldingsgrootte in WordPress
klaar, stabiel? Laten we gaan!
wat zijn achtergrondafbeeldingen?
achtergrondafbeeldingen zijn afbeeldingen die worden toegepast op de achtergrond van een element op een website, in een e-mail, enz. Terwijl de afbeelding van de held is het belangrijkste brandpunt van een website of een e-mail, de achtergrond beelden zijn subtieler. Ze ondersteunen andere website-elementen, als tweede laag: oproepen tot actie, andere afbeeldingen, verschillende delen van de site, enz.
laten we enkele voorbeelden van dergelijke achtergrondafbeeldingen bekijken:
IKEA
op de homepage van de IKEA-website worden achtergrondafbeeldingen gebruikt om hun inspirerende verhalen te presenteren. De titel en categorie van het verhaal worden bovenop de afbeelding geplaatst. Er wordt een kleurverloopoverlay gebruikt zodat de dekking van de werkelijke afbeelding wordt verminderd. Deze aanpak helpt de tekst zichtbaarder te maken, maar zorgt ook voor consistentie in het ontwerp, zodat geen enkele kleur meer opvalt dan een andere.
Loving Vincent
een van mijn favoriete films, deze.
achtergrondafbeeldingen lagen achter een draaimolen die verhalen presenteert achter Vincent Van Gogh en de film. De achtergrondafbeeldingen lijken het verhaal te versterken en sterke emoties te leveren.
Lush
I so love how the weelderige website looks: kleurrijk en levendig als de producten zelf.
nu kunnen achtergrondafbeeldingen patronen of vormen gebruiken, zoals in dit voorbeeld van de aanmeldingspagina voor de nieuwsbrief. Deze patronen slagen erin om iets potentieel saai te transformeren, in iets vrolijks.
Parallax achtergrondafbeeldingen
als u de website van het British Museum bekijkt, zult u zien dat er afbeeldingen op hun pagina ‘ s staan, die op de achtergrond liggen waarom de voorgrondinhoud naar beneden scrolt. Dit zijn parallax achtergrondafbeeldingen.
Parallax scrollen is een van die webontwerptrends die erin slaagt een briljant effect aan een website toe te voegen als deze correct is geïntegreerd.
u kunt een dergelijk effect ook verkrijgen in WordPress, Ik zal u later laten zien hoe.
achtergrondafbeeldingen toevoegen aan uw WordPress-website
er zijn drie manieren om achtergrondafbeeldingen toe te voegen aan uw WordPress-website. Laten we ze controleren, zullen we?
-
het toevoegen van achtergrondafbeeldingen via uw WordPress theme Customizer
meest populaire WordPress thema ‘ s hebben deze optie beschikbaar. Ik ga het Colibri thema gebruiken voor het doel van dit voorbeeld. Andere thema ‘ s gedragen zich vergelijkbaar met het Colibri thema.
als het gekozen thema de functie niet ondersteunt, ga dan naar methoden 2 en 3.
laten we nu beginnen door naar Uiterlijk -> aanpassen vanaf het WordPress Dashboard. Aan de linkerkant ziet u de Customizer editing opties van het thema, terwijl aan de rechterkant, er is een live preview van uw website.
met het thema kunt u achtergrondafbeeldingen plaatsen voor:
- rijen
- kolommen
- blokken (volledige secties van de website zoals: over mij, portfolio, team, contact, enz.)
- componenten(rubrieken, carrousels, prijstabellen, carrousels, enz.)
de manier waarop je dit kunt doen is hetzelfde, ongeacht waar je je achtergrondafbeelding nodig hebt.
stel dat u een achtergrondafbeelding wilt toevoegen aan uw websiteblok voor services. Begin met het selecteren van de sectie. Aan de linkerkant ziet u de bewerkingsopties over een menu gestructureerd zoals hieronder:
- opmaak
- stijl
- geavanceerde
Ga naar Style – > achtergrondtype.
kies “Image”. U ziet nu een afbeelding die u kunt vervangen door uw eigen. 
wanneer u op de afbeelding klikt wordt u gevraagd naar een scherm waar u een afbeelding kunt selecteren uit de WordPress media gallery, of u kunt een andere afbeelding uploaden.
zoals u misschien al gemerkt hebt, kunt u zelfs een video als achtergrond toevoegen.
en er is ook een toggle optie voor het parallax effect!
nu is er een andere sneltoets om deze achtergrondafbeelding te wijzigen. Wanneer u een blok aan de rechterkant selecteert, ziet u het pictogram Instellingen. Klik erop en je ziet een aantal bewerkingsopties.
als u “Change background” selecteert, wordt u binnen “Style” geleid om verder te gaan zoals hierboven beschreven.
dit was alles mensen. Best makkelijk, toch?
als uw thema niet de optie achtergrondafbeelding heeft, is er een manier om dit te doen in de WordPress default editor.
-
het toevoegen van een achtergrondafbeelding met behulp van WordPress blokken
van het WordPress dashboard, ga naar “pagina ‘ s”. Nu, selecteer “Bewerken” van onder de gewenste pagina. U zult een interface zien zoals hieronder weergegeven.
de standaard WordPress-editor is gebaseerd op blokken, wat betekent dat elke websitesectie uit blokken bestaat. Deze blokken kunnen worden benaderd vanuit een ” + ” teken dat je zult zien in de interface. Laten we klikken op de ene in de linkerbovenhoek.
Selecteer nu het “Cover” blok. Je ziet het meteen op je pagina.
u kunt een afbeelding uploaden die lokaal is opgeslagen op uw computer of kiezen uit de bestaande in de mediabibliotheek.
ik heb een afbeelding uit de mediabibliotheek geselecteerd. Nu kan ik er wat tekst aan toevoegen. De bewerkingsopties zijn hier vrij beperkt.
als u de omslag selecteert, ziet u een menu hierboven, waar u uw afbeelding kunt uitlijnen of uw hele blok kunt dupliceren. U kunt uw blok zelfs opslaan als een herbruikbare, om opnieuw te worden gebruikt in andere ontwerpen.
nu, aan de rechterkant van het scherm, heb je wat extra bewerkingsopties.
in media-instellingen activeert u het parallax-effect als u de optie vaste achtergrond inschakelt.
wanneer de schakelaar is uitgeschakeld, kunt u het brandpunt aanpassen.
deze focal point aanpassing kan ook worden gedaan op een procentuele basis, rekening houdend met de breedte en hoogte.
vervolgens kunt u een overlay toevoegen. U kunt de kleur en dekking ervan kiezen.
en je bent klaar.
-
achtergrondafbeeldingen toevoegen via WordPress plugins
hier zijn een aantal WordPress plugins getagd als achtergrond afbeelding plugins. Ik ga een beetje spelen met de eenvoudige Full-Screen achtergrondafbeelding plugin, want het heeft de meest installaties en de beste beoordelingen tot nu toe.
nu, hier is een tutorial over het installeren van een WordPress plugin.
met deze plugin worden afbeeldingen automatisch geschaald met de browser, dus ongeacht de browsergrootte zal de afbeelding altijd het scherm vullen.
alles wat u hoeft te doen is naar Uiterlijk -> AG-afbeelding op Volledig scherm. Selecteer hier uw afbeelding.
wanneer u op “Opties Opslaan” klikt, zult u zien dat alle secties op uw site, zonder achtergrond, deze afbeelding als achtergrond zullen ontvangen.
Dit is wat er gebeurt in de gratis versie. Het is vrij eenvoudig en helemaal niet flexibel. Het betaalde plan wordt geleverd met extra opties zoals:
- onbeperkte achtergrondafbeeldingen
- Post / pagina-specifieke achtergrondafbeeldingen
- meerdere afbeeldingen met fade-overgangen op pagina ‘ s
en, we zijn klaar, je hebt net de 3 methoden ontdekt die je kunt gebruiken om achtergrondafbeeldingen toe te voegen aan je WordPress site.
er is nog één ding dat ik je wil laten weten voordat we het voor gezien kunnen houden.
afbeeldingsformaten
voordat u een afbeelding uploadt op uw site, let op de grootte ervan. Ik weet dat we allemaal naar megapixels kijken, maar, op het web, is er een addertje onder het gras. Afbeeldingen met hoge resolutie kunnen uw site beschadigen door de laadtijd te beïnvloeden. Op de lange termijn, elke extra lading tweede zou kunnen verliezen U website bezoekers en conversies. Ook, u zult aanzienlijk verminderen uw kansen om te rangschikken in zoekmachines, omdat leeftijd snelheid is een belangrijke ranking factor.
aan de andere kant kan het gebruik van afbeeldingen die te klein zijn ook uw gebruikerservaring schaden. Dus we moeten rondkomen.
een manier om dit te doen is door gebruik te maken van externe apps die u kunnen helpen bij het verkleinen van uw afbeeldingen en tegelijkertijd de juiste helderheid te garanderen.
maar in WordPress kunt u dit eenvoudig doen met behulp van een…plugin, zoals u misschien al geraden hebt.
hier, bij Colibri, zijn we Smush fans. Smush kan en zal beelden comprimeren zonder een zichtbare daling in kwaliteit.
in de pro-versie zal het ook afbeeldingen converteren naar WebP, een next-gen-afbeeldingsformaat dat afbeeldingsbestanden tot 35% kan comprimeren, zonder duidelijk kwaliteitsverlies.
en dat is een punt, mensen!
als u dit artikel leuk vond en meer wilt weten over het ontwerpen van een WordPress website, schrijf u dan in op Colibri ‘ s Youtube kanaal en volg ons op Twitter en Facebook!