jeg skal holde denne introen veldig kort.
Her er hva vi skal diskutere i denne artikkelen:
- Hva er bakgrunnsbilder
- Hva er tingen med parallax bakgrunner?
- slik legger du til bakgrunnsbilder Til WordPress-nettstedet ditt
- slik nærmer du bildestørrelse I WordPress
Klar, stabil? Kom igjen!
Hva er bakgrunnsbilder?
Bakgrunnsbilder er bilder som brukes på bakgrunnen til et element på et nettsted, i en e-post, etc. Mens helten bildet er det viktigste fokuspunktet for et nettsted eller en e-post, bakgrunnsbilder er mer subtil. De støtter andre nettsideelementer, som et andre lag: oppfordringer til handling, andre bilder, ulike deler av nettstedet, etc.
la oss ta en titt på noen eksempler på slike bakgrunnsbilder:
IKEA
på HJEMMESIDEN TIL IKEA-nettstedet brukes bakgrunnsbilder til å presentere sine inspirerende historier. Tittelen og kategorien av historien er plassert på toppen av bildet. Det brukes et gradientoverlegg slik at det reduserer opaciteten til det faktiske bildet. Denne tilnærmingen bidrar til å gjøre teksten mer synlig, men det skaper også konsistens i design, slik at ingen farge skiller seg ut mer enn en annen.
Loving Vincent
En av mine favorittfilmer, denne.
Bakgrunnsbilder ligger bak en karusell som presenterer historier bak Vincent van Gogh og filmen. Bakgrunnsbildene ser ut til å styrke historien og levere sterke følelser.
Lush
jeg så elsker hvordan Den Frodige nettsiden ser ut: fargerik og levende som produktene selv.
nå kan bakgrunnsbilder bruke mønstre eller former, som i dette nyhetsbrevets registreringsside eksempel. Disse mønstrene klarer å forvandle noe potensielt kjedelig, til noe muntert.
Parallax-bakgrunnsbilder
hvis Du ser På British Museums nettsted, vil Du legge merke til at det er bilder på sidene deres, som ligger i bakgrunnen hvorfor forgrunnsinnholdet ruller ned. Dette er parallax bakgrunnsbilder.
Parallax scrolling er en av de webdesign trender som klarer å legge til en strålende effekt på et nettsted hvis integrert riktig.
du kan også få en slik effekt I WordPress, jeg skal vise deg hvordan litt senere.
slik legger du til bakgrunnsbilder På WordPress-nettstedet ditt
det er tre hovedmåter å legge til bakgrunnsbilder På WordPress-nettstedet ditt. La oss sjekke dem ut, skal vi?
-
Legge til bakgrunnsbilder via WordPress theme Customizer
Mest Populære WordPress-temaer har dette alternativet tilgjengelig. Jeg kommer til å bruke Colibri tema for formålet med dette eksemplet. Andre temaer oppfører seg på samme måte Som Colibri-temaet.
hvis det valgte temaet ikke støtter funksjonen, går du til metode 2 og 3.
La Oss nå starte med å gå over Til Utseende – > Tilpass Fra WordPress Dashboard. Til venstre ser du temaets Tilpassingsredigeringsalternativer, mens til høyre er det en live forhåndsvisning av nettstedet ditt.
temaet lar deg plassere bakgrunnsbilder for:
- Rader
- Kolonner
- Blokker (hele nettstedet seksjoner som: om meg, portefølje, team, kontakt, etc.)
- Komponenter (overskrifter, karuseller, pristabeller, karuseller, etc.)
Måten du kan gjøre dette på er det samme uansett hvor du trenger bakgrunnsbildet ditt.
la oss si at du vil legge til et bakgrunnsbilde til tjenestens nettstedblokk. Start med å velge delen. Til venstre ser du redigeringsalternativene over en meny strukturert som nedenfor:
- Layout
- Stil
- Avansert
Gå Til Stil -> Bakgrunnstype.
Velg «Bilde». Du vil nå se et bilde som du kan erstatte med din egen. 
når du klikker på bildet, blir du bedt om en skjerm der Du kan velge et bilde fra WordPress media gallery, eller du kan laste opp et annet bilde.
som du kanskje allerede har lagt merke til, kan du til og med legge til en video som bakgrunn.
og det er også et vekslingsalternativ for parallax-effekten!
Nå er det en annen snarvei for å gjøre denne bakgrunnsbildeendringen. Når du velger en blokk fra høyre, ser du innstillingsikonet. Klikk på den og du vil se noen redigeringsalternativer.
hvis du velger «Endre bakgrunn», vil du bli ledet inne I «Stil» for å fortsette som beskrevet ovenfor.
Dette var alle folk. Ganske enkelt, ikke sant?
nå, Hvis temaet ditt ikke har bakgrunnsbildet, er det en måte å gjøre dette på I WordPress standard editor.
-
Legge til et bakgrunnsbilde ved Hjelp Av WordPress-blokker
Fra WordPress dashboard, gå over til «Sider». Nå, velg «rediger» fra under ønsket side. Du vil se et grensesnitt som vist nedenfor.
standard WordPress editor er blokkbasert, noe som betyr at hver nettside er laget av blokker. Disse blokkene kan nås fra et hvilket som helst » + » tegn som du vil se i grensesnittet. La oss klikke på den øverst til venstre.
velg nå» Cover » – blokken. Du vil se det dukke opp med en gang på siden din.
du kan laste opp et bilde som er lagret lokalt på datamaskinen, eller velge blant de eksisterende Bildene i Mediebiblioteket.
jeg valgte et bilde fra Mediebiblioteket. Nå kan jeg legge til litt tekst til det. Redigeringsalternativene er ganske begrenset her.
hvis du velger dekselet, ser du en meny som vises over, der du kan justere bildet ditt eller duplisere hele blokken. Du kan til og med lagre blokken din som en gjenbrukbar, som skal brukes igjen i andre design.
nå, på høyre side av skjermen, har du noen ekstra redigeringsalternativer.
I medieinnstillinger, hvis du bytter på alternativet fast bakgrunn, aktiverer du parallax-effekten.
når bryteren er av, kan du justere fokuspunktet.
denne fokuspunktjusteringen kan også gjøres på prosentvis basis, med tanke på bredden og høyden.
deretter kan du legge til et overlegg. Du kan velge farge og opasitet.
og du er ganske ferdig.
-
Legge til bakgrunnsbilder via WordPress plugins
Her er Noen WordPress plugins merket som bakgrunnsbilde plugins. Jeg skal spille litt Med Den Enkle Fullskjerm Bakgrunnsbilde plugin fordi den har de fleste installasjoner og de beste vurderingene så langt.
Nå, her er en tutorial på hvordan du installerer En WordPress plugin.
med denne plugin, vil bildene automatisk skaleres med nettleseren, så uavhengig av størrelsen på nettleseren, vil bildet alltid fylle skjermen.
alt du trenger å gjøre er å gå Til Utseende – > Fullscreen BG-Bilde. Herfra velger du bildet ditt.
når du trykker på «Lagre Alternativer», vil du se at alle delene på nettstedet ditt, uten bakgrunn, vil motta dette bildet som bakgrunn.
Nå er dette hva som skjer i gratisversjonen. Det er ganske grunnleggende og ikke i det hele tatt fleksibelt. Den betalte planen kommer med ekstra alternativer som:
- Ubegrenset bakgrunnsbilder
- Post / sidespesifikke bakgrunnsbilder
- Flere bilder med fade overganger på sider
og vi er ferdige, du har nettopp funnet ut 3-metodene du kan bruke til å legge til bakgrunnsbilder På WordPress-nettstedet ditt.
Det er en ting jeg vil du skal vite før vi kan kalle det en dag.
Bildestørrelser
før du laster opp et bilde på nettstedet ditt, må du være oppmerksom på størrelsen. Jeg vet at vi alle ser på megapiksler, men på nettet er det en fangst. Høyoppløselige bilder kan skade nettstedet ditt ved å påvirke lastetiden. På lang sikt kan noen ekstra lasting andre miste du besøkende og konverteringer. Også, du vil betydelig redusere sjansene dine til å rangere i søkemotorer, fordi alder hastighet er en viktig rangering faktor.
på den annen side kan bruk av bilder som er for små, også skade brukeropplevelsen din. Så, vi må få endene til å møtes.
En måte å gjøre dette på er å bruke eksterne apper som kan hjelpe deg med å endre størrelsen på bildene dine samtidig som du sikrer riktig klarhet.
Men I WordPress kan du gjøre dette enkelt ved hjelp av en … plugin, som du kanskje allerede har gjettet.
Her, På Colibri, Er Vi Smush-fans. Smush kan og vil komprimere bilder uten en synlig nedgang i kvalitet.
i pro-versjonen vil den også konvertere bilder Til WebP, et neste generasjons bildeformat som kan komprimere bildefilstørrelser opp til 35%, uten åpenbart tap av kvalitet.
og det er en wrap, folkens!
hvis du likte denne artikkelen, og du vil lære mer om hvordan du designer Et WordPress-nettsted, sørg for å abonnere På Colibri ‘ S Youtube-kanal og følg Oss På Twitter og Facebook!