Omslagsbild vs. utvald bild i WordPress blockredigerare (nybörjarguide)

När jag först började använda WordPress förväxlade jag ofta utvalda bilder med omslagsbilder. Som ett resultat uppnådde några av mina tidiga blogginlägg inte riktigt målet. Antingen saknade de viktiga visuella element, eller så var bilderna felplacerade, vilket lämnade designen lite off.

Lyckligtvis lärde jag mig snabbt att dessa två typer av bilder fyller unikt viktiga roller.

Omslagsbilder används inom ditt innehåll för att sätta tonen och engagera läsarna. Däremot fungerar utvalda bilder som en visuell sammanfattning och visar essensen av ditt inlägg innan det ens öppnas.

I den här guiden delar jag med mig av allt jag har lärt mig om omslagsbilder och utvalda bilder i WordPress blockredigerare.

Här är en snabb översikt över vad jag kommer att täcka i den här guiden:

• Vad är en omslagsbild?
• Vad är en utvald bild?
• Omslagsbild vs. Utvald bild i WordPress Blockredigerare
• Hur man lägger till en omslagsbild i WordPress
• How to Add a Featured Image in WordPress
• Vanliga frågor om omslagsbilder och utvalda bilder
• Experthandledningar för användning av WordPress-bilder

Vad är en omslagsbild?

En omslagsbild är en bred bild som du placerar var som helst i innehållet på ett inlägg eller en sida.

Det är ett specifikt block som används för att bryta upp långa textstycken och skapa en visuell start på en ny sektion, ofta med text skriven ovanpå.

De är särskilt vanliga på webbplatser som förlitar sig tungt på berättande eller visuellt innehåll, såsom resor, livsstil och portföljer.

Till exempel kan en bloggare använda en omslagsbild för att introducera ett nytt kapitel i en lång artikel. Marknadsförare använder dem ofta för att skapa heltäckande call-to-action-banderoller, och fotografer kan använda dem för att visa upp ett fantastiskt portföljstycke inom en fallstudie.

Blocket 'Omslag' i WordPress låter dig lägga till en omslagsbild. Det låter dig också lägga till text och färgöverlägg till dina bilder.

Du kan också anpassa dessa överlägg för att matcha din webbplatsens färg eller sätta stämningen för olika innehållssektioner. Senare i artikeln kommer jag att visa dig mer om detta anpassningsalternativ.

För bästa utseende rekommenderar jag att använda omslagsbilder som är 1920×1080 pixlar. Den här storleken säkerställer att bilderna är av hög kvalitet och fyller toppområdet av dina inlägg snyggt.

Vad är en utvald bild?

En utvald bild är som ansiktet på ditt blogginlägg och ger en visuell representation som lockar läsare.

Även känd som en inläggstumnagel, visas den på din startsida och dina bloggarkivsidor. Den visas också på sociala medieflöden när en artikel delas.

Dessa bilder är utformade för att vara visuellt tilltalande och uppmuntra läsare att klicka och utforska din WordPress-blogg eller webbplats.

Till exempel, på WPBeginner ser jag och mitt team till att varje utvald bild är unik samtidigt som vi upprätthåller vårt varumärkes konsekventa stil.

Tänk på att utvalda bilder beror på det WordPress-tema du använder eftersom temat bestämmer den bästa storleken för dessa bilder.

Detta beror på att teman har fördefinierade layouter, som inläggsgallerier eller listor på din startsida och arkivsidor, och de kräver konsekventa bildstorlekar för att upprätthålla en ren och professionell design.

Till exempel väljer många teman ett standard bildförhållande på 16:9 och använder storlekar som 680×382 pixlar. Vissa teman kan till och med använda utvalda bilder som sidhuvudsbilder, med dimensioner som 1200×675 pixlar.

Om du behöver mer detaljerade insikter, kolla in den här omfattande guiden om WordPress-bildstorlekar.

Omslagsbild vs. Utvald bild i WordPress Blockredigerare

För att göra skillnaderna ännu tydligare, här är en snabb jämförelse sida vid sida av en omslagsbild kontra en utvald bild:

Funktion	Omslagsbild	Utvald bild
Primärt syfte	Att skapa visuella pauser och markera sektioner inuti ett inlägg.	Att representera hela artikeln på startsidor, arkiv och sociala medier.
Plats	Var som helst inom inläggets eller sidans innehåll.	Visas av ditt tema på sidor utanför själva inlägget.
Hur det läggs till	Använda blocket 'Omslag' i innehållseditor.	Använda inställningen 'Framhävda bild' i sidofältet för inlägget.
Nyckelfunktioner	Kan ha textöverlägg, parallaxeffekter och filter.	Utseende och storlek styrs av ditt WordPress-tema.

Hur man lägger till en omslagsbild i WordPress

WordPress blockredigerare, som även är känd som Gutenberg, gör det mycket enkelt att lägga till omslagsbilder med hjälp av det praktiska Omslagsblocket.

För att börja måste du skapa ett nytt inlägg genom att gå till Inlägg » Lägg till inlägg.

Du kan också redigera den du redan har genom att navigera till Inlägg » Alla inlägg, hitta inlägget du vill redigera och klicka på inläggstiteln för att öppna det i redigeraren.

I inläggseditor, klicka på '+' -knappen för att lägga till ett nytt block och välj blocket 'Omslag' från listan.

Du hittar blocket ‘Omslag’ under fliken ‘Media’. Alternativt kan du också skriva ‘/omslag’ i fältet för block-sökning för att enkelt hitta det.

Efter att ha valt blocket 'Omslag' ser du det dyka upp i innehållsredigeraren. Du är nu redo att lägga till din omslagsbild.

Dra och släpp helt enkelt din favoritbild eller video i blockområdet. Alternativt kan du trycka på knappen ‘Ladda upp’ för att välja en fil från din dator.

Och om du redan har något bra i ditt mediebibliotek, klicka på knappen ‘Mediebibliotek’ för att välja en bild från ditt mediebibliotek.

Klicka på knappen ‘Välj’ för att lägga till din bild i inlägget.

Nu är det dags att anpassa den.

Klicka bara på bilden så öppnas en verktygsfält för justeringar. Panelerna till höger erbjuder ännu fler alternativ.

Låt oss börja med att lägga till en titel. Klicka bara på området 'Skriv titel...' i mitten av din omslagsbild och skriv din text.

Du får praktiska formateringsalternativ som visas ovanför texten för anpassning.

Kontrollera sedan panelen på höger sida för ytterligare inställningar.

Här ser du två flikar – 'Inställningar' och 'Stilar'.

I fliken 'Inställningar' kan du anpassa layoutalternativen. Som standard är layouten inställd på full bredd, så du kan lämna den här inställningen som den är.

Välj sedan mellan en fast eller upprepad bakgrund som passar din design. En fast bakgrund är perfekt för att skapa en parallaxeffekt, vilket ger din bild en dynamisk känsla. En upprepad bakgrund hjälper när du använder kaklade bilder.

Justera sedan bildens fokuspunkt för att lyfta fram viktiga delar. Du kan också ställa in upplösningen för att välja hur skarp och tydlig du vill att dina bilder ska vara.

Gå sedan till fliken 'Stilar' och justera överlagrets opacitet. Det hänvisar till hur genomskinlig ett färglager är på din bild.

Som standard är den inställd på 50 % transparens, men du kan justera den för att passa ditt inläggs stämning. Detta hjälper till att säkerställa att texten förblir lättläst samtidigt som du kan styra hur mycket färg som visas.

Slutligen kan du experimentera med filter för att ändra din bilds stil. Prova olika för att hitta den som passar bäst för ditt inlägg.

För dig som gillar att vara kreativ, dyk ner i inställningarna för Avancerat för att lägga till anpassad CSS och ge din omslagsbild en unik känsla.

Och där har du det! Du kan gärna upprepa dessa steg för att lägga till fler omslagsbilder om ditt inlägg behöver dem, vilket skapar en dynamisk och engagerande läsupplevelse.

När du är klar kan du gärna förhandsgranska och publicera ditt inlägg för att säkerställa att allt ser bra ut på framsidan.

Hur man lägger till en utvald bild i WordPress

Att lägga till en utvald bild till ditt WordPress-inlägg är ett enkelt sätt att få det att sticka ut. Processen är nästan densamma som att lägga till en omslagsbild.

Oavsett om du är nybörjare på att blogga eller behöver en snabb uppfräschning, här är hur du gör det.

För att börja, öppna inlägget du vill redigera. Metafältet för "Utvald bild" finns till höger.

Klicka helt enkelt på alternativet 'Ange utvald bild' för att komma igång.

Låt oss nu lägga till din utvalda bild.

Du kan ladda upp en ny bild antingen genom att använda dra-och-släpp-uppladdaren eller genom att välja en bild från ditt mediabibliotek.

Därefter kan du lägga till en titel och alt-text (viktigt för SEO och för användare med skärmläsare) för din framhävda bild, och klicka sedan på knappen 'Ange framhävda bild'. Du har framgångsrikt lagt till en framhävda bild till din artikel!

För mer detaljerade instruktioner kan du läsa vår nybörjarguide om att lägga till utvalda bilder i WordPress.

Efter att ha lagt till din utvalda bild kan du anpassa den. Anpassningsalternativen beror dock på vilken typ av WordPress-tema du använder.

I det här steget kommer jag att utforska två metoder för att anpassa dina utvalda bilder: använda en temaanpassare och Full Site Editor (FSE).

Använda temaanpassaren

Den här metoden fungerar generellt för klassiska teman, men jag kommer att använda Sydney-temat för den här artikeln. Sydney erbjuder användarvänliga designalternativ som gör det enkelt att förbättra utseendet och känslan på din webbplats.

För att börja måste du först installera och aktivera temat. Om du behöver hjälp, läs mitt teams guide om att installera ett WordPress-tema.

Navigera sedan till din WordPress-instrumentpanel och gå till Utseende » Anpassa. Detta öppnar anpassningsverktyget.

Här kan du finjustera många aspekter av din webbplats visuella presentation, inklusive din utvalda bild.

Inom anpassaren kan du också utforska sektioner som 'Header' för att komma åt inställningar relaterade till dina utvalda bilder.

Du kan också justera rubrikens förinställningar och mobilanpassning. När du är nöjd med ändringarna, klicka på ‘Publicera’ längst upp till vänster för att spara dem.

För mer detaljer, ta gärna en titt på den här guiden om att använda temaanpassaren.

Använda en Full Site Editor (FSE)

För de som använder blockbaserade teman, tillåter Full Site Editor (FSE) dig att anpassa dina framhävda bilder. Stegen nedan visar hur du ändrar den globala, webbplatsomfattande stilen för alla dina framhävda bilder.

Tänk på att detta är en global inställning. För mer specifika justeringar kan du också redigera enskilda mallar som mallen 'Enskilt inlägg'.

Börja med att gå till Utseende » Redigerare från din WordPress-adminpanel. Detta öppnar webbplatsredigeraren. När du är i redigeraren, gå till Navigation » Stilar.

Bläddra sedan ner och välj “Block” från listan.

Detta öppnar listan över block som du kan anpassa i redigeraren.

Leta sedan efter blocket ‘Utvald bild’. För att hitta det snabbare kan du skriva ”utvald bild” i sökfältet.

Här ser du anpassningsalternativen för din utvalda bild, inklusive att ändra dimensioner (utfyllnad och marginal).

Du kan också lägga till bildens kant, skugga och radie. Experimentera gärna med dessa inställningar och se hur de påverkar utseendet på din utvalda bild.

När du är nöjd med ändringarna, ta en stund att förhandsgranska dem innan du publicerar. Detta säkerställer att allt ser perfekt ut på alla enheter.

Om du behöver mer information, kolla in vår kompletta nybörjarguide till WordPress Full Site Editing.

Vanliga frågor om omslagsbilder och utvalda bilder

Här är svar på några vanliga frågor som vårt team får om att använda omslags- och utvalda bilder i WordPress.

Kan jag använda samma bild för både omslaget och den utvalda bilden?

Ja, absolut. Det är vanligt att ställa in din utvalda bild och sedan använda samma bild i ett Omslagsblock högst upp i ditt inlägg. Detta skapar en konsekvent visuell upplevelse för dina läsare från det ögonblick de klickar på länken tills de börjar läsa.

Varför är texten på min omslagsbild svår att läsa?

Detta händer vanligtvis eftersom det inte finns tillräckligt med kontrast mellan din textfärg och bilden bakom den. Du kan åtgärda detta genom att justera färgöverlägget i Omslagsblockets inställningar.

Ett mörkare överlägg med ljus text (eller vice versa) gör det mycket mer läsbart.

Vad händer om jag inte ställer in en utvald bild för mitt inlägg?

Om du inte ställer in en utvald bild kan ditt inlägg visas som ett tomt utrymme på din blogs startsida eller arkivsidor.

När artikeln delas på sociala medier kan plattformen hämta en slumpmässig bild från sidan eller inte visa någon bild alls, vilket kan minska engagemanget.

Påverkar texten jag lägger till på en omslagsbild min SEO?

Texten du placerar i ett Omslagsblock behandlas som ett vanligt stycke eller en rubrik av Google, så den indexeras och kan bidra till ditt inläggs SEO. Din huvudsakliga sidrubrik och dedikerade rubriker (H2, H3) har dock en mycket större inverkan.

Kan ett inlägg ha mer än en utvald bild?

Som standard tillåter WordPress endast en utvald bild per inlägg. Du kan dock använda ett plugin som All in One SEO för att ställa in en annan bild specifikt för sociala medieplattformar.

Detta gör att du kan ha en standard utvald bild för din webbplats och en anpassad som är optimerad för Facebook eller Twitter.

Experthandledningar för användning av WordPress-bilder

Kolla in dessa användbara verktyg och tips för att göra dina WordPress-bilder ännu bättre:

• Bästa plugins och verktyg för utvalda bilder för WordPress (jämförda)
• Hur man beskär och redigerar WordPress-miniatyrbilder för inlägg
• Hur man skapar ytterligare bildstorlekar i WordPress
• Hur man lägger till en hjältebild i WordPress (fungerar för alla teman)
• Bildens Alt-text kontra bildens titel i WordPress – Vad är skillnaden?
• Hur man optimerar bilder för webbprestanda utan att förlora kvalitet
• Sätt att förhindra bildstöld i WordPress

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.