jag ska hålla denna intro riktigt kort.
här är vad vi ska diskutera i den här artikeln:
- vad är bakgrundsbilder
- Vad är det med parallax bakgrunder?
- Hur lägger du till bakgrundsbilder på din WordPress-webbplats
- hur man närmar sig bildstorlek i WordPress
klar, stadig? Kom igen!
vad är bakgrundsbilder?
Bakgrundsbilder är bilder som appliceras på bakgrunden till ett element på en webbplats, i ett e-postmeddelande etc. Medan hjältebilden är huvudpunkten för en webbplats eller ett e-postmeddelande, är bakgrundsbilderna mer subtila. De stöder andra Webbplatselement, som ett andra lager: uppmaningar till handling, andra bilder, olika delar av webbplatsen etc.
Låt oss ta en titt på några exempel på sådana bakgrundsbilder:
IKEA
på hemsidan för IKEA-webbplatsen används bakgrundsbilder för att presentera sina inspirerande berättelser. Historiens titel och kategori placeras ovanpå bilden. Det finns en gradientöverlagring som används så att den minskar opaciteten för den faktiska bilden. Detta tillvägagångssätt hjälper till att göra texten mer synlig, men det skapar också konsistens i design, så ingen färg sticker ut mer än en annan.
Loving Vincent
en av mina favoritfilmer, den här.
bakgrundsbilder låg bakom en karusell som presenterar historier bakom Vincent van Gogh och filmen. Bakgrundsbilderna verkar stärka historien och leverera starka känslor.
Lush
jag älskar så hur Lush webbplatsen ser ut: färgglada och levande som själva produkterna.
nu, bakgrundsbilder kan använda mönster eller former, som i detta nyhetsbrev sign-up sida exempel. Dessa mönster lyckas förvandla något potentiellt tråkigt, till något glatt.
Parallax bakgrundsbilder
om du tittar på British Museums webbplats märker du att det finns bilder över deras sidor, som ligger i bakgrunden varför förgrundsinnehållet rullar ner. Dessa är parallax bakgrundsbilder.
Parallax rullning är en av de webbdesigntrender som lyckas lägga till en lysande effekt på en webbplats om den integreras korrekt.
du kan också få en sådan effekt i WordPress, jag ska visa dig hur lite senare.
hur man lägger till bakgrundsbilder på din WordPress-webbplats
det finns tre huvudsakliga sätt att lägga till bakgrundsbilder på din WordPress-webbplats. Låt oss kolla in dem, ska vi?
-
lägga till bakgrundsbilder via din WordPress theme Customizer
mest populära WordPress-teman har det här alternativet tillgängligt. Jag kommer att använda Colibri-temat för detta exempel. Andra teman beter sig på samma sätt som Colibri-temat.
om ditt valda tema inte stöder funktionen, Hoppa till metoder 2 och 3.
låt oss nu börja med att gå över till utseende -> Anpassa från WordPress-instrumentpanelen. Till vänster ser du temats redigeringsalternativ för anpassare, medan till höger finns en liveförhandsvisning av din webbplats.
temat låter dig placera bakgrundsbilder för:
- rader
- kolumner
- Block (hela webbplatsavsnitt som: om mig, portfölj, team, kontakt etc.)
- komponenter (rubriker, karuseller, prissättningstabeller, karuseller etc.)
hur du kan göra detta är detsamma oavsett var du behöver din bakgrundsbild.
låt oss säga att du vill lägga till en bakgrundsbild till din Tjänster webbplats block. Börja med att välja avsnittet. Till vänster ser du redigeringsalternativen över en meny strukturerad som nedan:
- Layout
- stil
- avancerad
gå till Style – > Bakgrundstyp.
Välj ”bild”. Nu ser du en bild som du kan ersätta med din egen. 
när du klickar på bilden blir du ombedd till en skärm där du kan välja en bild från WordPress media gallery, eller så kan du ladda upp en annan bild.
som du kanske redan har märkt kan du till och med lägga till en video som bakgrund.
och det finns också ett växlingsalternativ för parallaxeffekten!
nu finns det en annan genväg för att göra denna bakgrundsbild förändring. När du väljer ett block från höger ser du inställningsikonen. Klicka på den så ser du några redigeringsalternativ.
om du väljer ”Ändra Bakgrund” kommer du att styras inuti ”stil” för att fortsätta som beskrivet ovan.
detta var alla folk. Ganska lätt, eller hur?
om ditt tema inte har alternativet bakgrundsbild finns det ett sätt att göra detta i WordPress-standardredigeraren.
-
lägga till en bakgrundsbild med WordPress-block
från WordPress-instrumentpanelen, gå över till”sidor”. Välj nu ”Redigera”under önskad sida. Du kommer att se ett gränssnitt som visas nedan.
standard WordPress-redigeraren är blockbaserad, vilket innebär att varje webbplatsavsnitt är gjord av block. Dessa block kan nås från alla ” + ” tecken som du ser i gränssnittet. Låt oss klicka på den längst upp till vänster.
Välj nu ”Cover” – blocket. Du ser att det dyker upp direkt på din sida.
du kan ladda upp en bild som är lokalt lagrad på din dator eller välja från de befintliga i mediebiblioteket.
jag valde en bild från mediebiblioteket. Nu kan jag lägga till lite text till den. Redigeringsalternativen är ganska begränsade här.
om du väljer omslaget ser du en meny som visas ovan, där du kan justera din bild eller duplicera hela ditt block. Du kan till och med spara ditt block som ett återanvändbart, för att användas igen i andra mönster.
nu, på höger sida av skärmen, har du några extra redigeringsalternativ.
inuti mediainställningar, om du växlar på alternativet fast bakgrund, aktiverar du parallaxeffekten.
När växeln är avstängd kan du justera brännpunkten.
denna brännpunktsjustering kan också göras i procent, med hänsyn till bredden och höjden.
därefter kan du lägga till ett överlägg. Du kan välja färg och opacitet.
och du är ganska klar.
-
lägga till bakgrundsbilder via WordPress plugins
här är några WordPress plugins taggade som bakgrundsbild plugins. Jag ska spela lite med det enkla fullskärmsbildspluginet för bakgrundsbild eftersom det har flest installationer och de bästa recensionerna hittills.
nu, här är en handledning om hur man installerar en WordPress plugin.
med detta plugin kommer bilderna automatiskt att skalas med webbläsaren, så oavsett webbläsarstorlek kommer bilden alltid att fylla skärmen.
allt du behöver göra är att gå till utseende -> Fullscreen BG Image. Härifrån väljer du din bild.
när du trycker på ”Spara alternativ” ser du att alla avsnitt på din webbplats, utan bakgrund, kommer att få den här bilden som bakgrund.
nu är detta vad som händer i den fria versionen. Det är ganska grundläggande och inte alls flexibelt. Den betalda planen kommer med extra alternativ som:
- obegränsad bakgrundsbilder
- Post / sida-specifika bakgrundsbilder
- flera bilder med fade övergångar på sidor
och, vi är klara, du har just fått reda på 3 metoder som du kan använda för att lägga till bakgrundsbilder till din WordPress webbplats.
det finns en sak jag vill att du ska veta innan vi kan kalla det en dag.
bildstorlekar
innan du laddar upp någon bild på din webbplats, Var uppmärksam på dess storlek. Jag vet att vi alla tittar på megapixlar, men på webben finns det en fångst. Högupplösta bilder kan skada din webbplats genom att påverka laddningstiden. På lång sikt kan någon extra laddning andra förlora dig besökare och omvandlingar. Du kommer också att minska dina chanser att rangordna i sökmotorer avsevärt, eftersom åldershastighet är en viktig rankningsfaktor.
å andra sidan kan bilder som är för små också skada din användarupplevelse. Så vi måste få slut på mötet.
ett sätt att göra detta är att använda externa appar som kan hjälpa dig att ändra storlek på dina bilder samtidigt som du säkerställer korrekt tydlighet.
men i WordPress kan du göra det enkelt med ett … plugin, som du kanske redan har gissat.
här på Colibri är vi Smush fans. Smush kan och kommer att komprimera bilder utan synlig kvalitetsminskning.
i pro-versionen, kommer det också konvertera bilder till WebP, en nästa generations bildformat som kan komprimera bildfilstorlekar upp till 35%, utan uppenbar kvalitetsförlust.
och det är en wrap, folk!
om du gillade den här artikeln och vill lära dig mer om hur du utformar en WordPress-webbplats, se till att prenumerera på Colibris Youtube-kanal och följ oss på Twitter och Facebook!