Hvordan legge til et bakgrunnsbilde i WordPress

Bakgrunnsbilder kan gå en lang vei mot gjør nettstedet ditt mer attraktivt for de besøkende. Mer overbevisende enn en monokrom bakgrunn, de kan illustrere et poeng du gjør eller sette stemningen for hele nettstedet ditt.

I denne opplæringen vil vi vise deg flere måter du kan legge til et bakgrunnsbilde i WordPress. Her er hva vi skal diskutere:

Men før vi begynner, må vi merke oss at det ikke er mulig å gi et enkelt, definitivt svar på hvordan legge til et bakgrunnsbilde i WordPress, på grunn av mange faktorer som påvirker den generelle utformingen og utseendet til en nettside. Temaet, fremfor alt, dikterer muligheten eller manglende evne til å legge til et bakgrunnsbilde til deler eller hele en side. Vi har gitt deg tre forskjellige måter, men de fungerer kanskje ikke alle, eller kan fungere annerledes, avhengig av temaet du bruker. Selv begrepet «bakgrunn» kan relatere seg til forskjellige områder av forskjellige temaer. Likevel, les videre siden en av disse metodene kan være akkurat det du trenger.

Hvordan legge til et bakgrunnsbilde ved å bruke temaets innstillinger

Dette kan være et godt øyeblikk for å påpeke at store bilder av høy kvalitet har en tendens til å senke nedlastingstiden. Likevel er det ting du kan gjøre for å optimalisere bildene dine og gjøre dem så enkle å laste som mulig. Hvis du bygger et nettsted med tanke på lastehastighet, har vi også dekket gjentatte (flislagte) bakgrunner.

Hvis temaet ditt har en bakgrunnsinnstilling, som mange populære temaer gjør i dag, kan du bruke det til å sette opp bakgrunnsbildet ditt. De fleste temaer som har denne funksjonaliteten fungerer omtrent på samme måte. Vi brukte WordPresss standard Twenty Twenty-tema.

Først må du navigere til tematilpasningen fra Utseende>Tilpass i WordPress-dashbordet ditt.

Deretter vil du ha Bakgrunnsbilde undermenyen på venstre side av skjermen.

Hvis du klikker på det, kommer du til Velg bilde knapp. Du kan legge til et bakgrunnsbilde fra mediebiblioteket ditt, eller du kan laste opp et. Vi har valgt en fra vårt mediebibliotek.

Og nå har du endret bakgrunnen din.

Twenty Twenty-temaet vi bruker gir oss noen alternativer her. Du kan bruke et bilde som kan flislegges (gjentas), for eksempel vårt lille grønne blad der, eller du kan bruke et enkelt bilde som bakgrunn.

I så fall trenger du høyoppløselige bilder for nettstedet ditt som vil ta opp hele bredden av siden din, men de kan ta mye tid å laste og kan føre til dårlige brukeropplevelser. Det er egentlig opp til deg å finne ut hvilke bilder og innstillinger som fungerer for temaet ditt og stilen på nettstedet ditt.

Vær imidlertid oppmerksom på at selv om mange temaer har muligheten til å legge til et bakgrunnsbilde på denne måten, gjør de fleste det ikke, og det er derfor du kanskje må ty til en av de to andre metodene vi har skissert i denne artikkelen.

Hvordan legge til et bakgrunnsbilde ved hjelp av CSS

Hvis du er mer en praktisk bruker, har du også muligheten til endre CSS for å sette opp et bakgrunnsbilde for individuelle innlegg, men også kategorier, forfattere og andre CSS-klasser.

Du kan endre bakgrunnen for en kategori, eller for hele nettstedet, ved å bruke tematilpasningen. Naviger til den fra WordPress-dashbordet ved å klikke på Utseende>Tilpass.

Når du er der, åpner du Ekstra CSS seksjon.

Du må legge til noen linjer med kode i CSS-feltet for å legge til et bakgrunnsbilde. For å endre bakgrunnen for hele nettstedet, bruk denne koden:

body {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Du må selvfølgelig erstatte XXX med URL-en til bildet du vil bruke. Vi har valgt en fra vårt mediebibliotek.

Hvis du vil endre det for sider med en bestemt kategori, fungerer det imidlertid litt annerledes. Koden du ønsker er denne:

body.category-YYY {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Du må, som ovenfor, endre XXX til en gyldig bilde-URL, samtidig som du bytter YYY med en gyldig kategori.

Og det er egentlig alt som skal til!

Hvordan legge til en bakgrunn til spesifikke innholdsseksjoner

Nå, som alltid, er vårt forslag å bruke et temas funksjonalitet når du kan, da det er prøvd og testet for å fungere. Men hvis et tema du bruker ikke har funksjonaliteten du trenger, du kan sannsynligvis finne en plugin det gjør det. Vårt utvalgte plugin er Avanserte WordPress-bakgrunner. Når du har installert og aktivert plugin, vil du ha fått en spesiell Gutenberg-blokk som du kan bruke til å sette opp en dynamisk bakgrunn.

Dette pluginet fungerer først og fremst ved å sette opp en slags metablokk, som fungerer som bakgrunn, og som du så må fylle ut med en annen blokk eller blokker.

Vi viser deg hvordan du gjør dette i et innlegg.

Først vil vi lage et innlegg fra WordPress-dashbordet vårt ved å velge Innlegg>Legg til ny. Så, etter å ha skrevet inn tittelen og fylt den med to avsnittsblokker, trykker vi enter etter første avsnitt, og klikker deretter på Plus signer og legg til en Bakgrunn blokkere.

Nå må du konfigurere blokken. Standardinnstillingen er Farge, som er en enkel fargeblokk du kan velge hvis du vil ha en monokrom bakgrunn. Et annet interessant alternativ er Video bakgrunn. Du kan bruke denne plugin-en til å sette opp en videobakgrunn, enten på loop eller single-play, og du trenger ikke engang å være vert for den på nettstedet ditt: plugin-en støtter YouTube- og Vimeo-vertsvideoer. For denne demonstrasjonen er vi imidlertid hovedsakelig opptatt av Bilde bakgrunn.

Ved å klikke på Bilde knappen, vil du finne et sett med kontroller for denne plugin-en. I Bilde delen, klikk på Velg bilde -knappen, og enten last opp et bilde eller velg et bilde fra mediebiblioteket ditt.

Når du har gjort det, vil du oppdage at bildet har tatt opp en del av bakgrunnen. På høyre side finner du alternativer for parallakse og mellomrom som du kan bruke hvis du ønsker å få nettstedet ditt til å se litt mer dynamisk ut. Helt øverst finner du posisjonskontrollene. Du kan velge hvilken del av bildet som skal vises basert på plasseringen av indikatoren på aksene. Standarden (50 % horisontal og 50 % vertikal) er der vi vil la den nå – rett midt i bildet.

Nå må vi legge til innholdet dette bildet vil være bakgrunnen til. For å gjøre det, klikk ganske enkelt på Plus skilt i midten av bakgrunnsblokken. Vi vil gå for en avsnittsblokk, men du kan velge hvilken som helst blokk du liker. Et sitat eller en overskrift kan for eksempel se bra ut mot en parallaksbakgrunn.

Vi har limt inn teksten vår og endret fargen i blokkinnstillinger-fanen til hvit, jo bedre å bli forskjøvet av bakgrunnen. Og det er egentlig det.

Nå, ved å klikke på forhåndsvisningsknappen, kan vi se plugin-en i aksjon.

Og nå kan du legge til hva slags bakgrunn du vil til den individuelle innholdsdelen på nettstedet ditt du ønsker å fremheve.

For å konkludere

Et bakgrunnsbilde kan virkelig få nettstedet ditt til å skille seg ut for brukerne som en stor, skinnende nål i en høystakk med trist halm. Det kommer imidlertid med en kostnad: du vil sannsynligvis trenge å lagre medier i stort format, og de vil påvirke lastetiden negativt. Likevel er nydelig grafikk fortsatt den beste måten å gjøre et varig førsteinntrykk på, og internettbrukere har begynt å forvente profesjonell, iøynefallende design. Bakgrunnen vil sannsynligvis være det største enkeltstående grafiske elementet på de besøkendes skjermer. Hvis du har råd til den økte lastetiden, hvorfor ikke gjøre de besøkendes opplevelse visuelt interessant? Så enten du gjør det ved å bruke temaets opprinnelige innstillinger, en plugin eller CSS, vet du nå hvordan du gjør det.