När vi först bytte till WordPress blockredigerare kändes även enkla uppgifter som att lägga till och justera bilder annorlunda.
Efter att ha hjälpt så många användare via WPBeginner har vi märkt att detta är en av de vanligaste hindren som folk stöter på när de övergår till Gutenberg.
De goda nyheterna är att det faktiskt har blivit mer intuitivt att arbeta med bilder i blockredigeraren – när du vet var du ska leta.
I den här guiden visar vi dig exakt hur du lägger till och justerar bilder i WordPress blockredigerare. Dessa är samma tekniker som vi använder varje dag på WPBeginner, förklarade i enkla termer som vem som helst kan följa.
Bildjustering i WordPress-redigeraren
Tidigare använde WordPress ett textområde med redigeringsknappar som standardredigerare. Ett särskilt problem i den gamla redigeraren var bildjustering, vilket kunde göra det svårt att få saker att linjera korrekt på din WordPress-webbplats.
Även om det fanns alternativ för att justera bilder åt vänster, höger eller i mitten, så såg de inte alltid bra ut. Ibland var bilderna inte korrekt justerade, hade fel storlek eller såg helt enkelt inte bra ut.
WordPress 5.0 introducerade en ny WordPress-inläggsredigerare som kallas Gutenberg blockredigerare. Den löste flera problem med den gamla redigeraren, inklusive problem med bildjustering.
I de följande avsnitten kommer vi att förklara hur du enkelt lägger till och justerar bilder i den nya redigeraren för att skapa vackra layouter för dina WordPress-inlägg och sidor.
Här är en snabb översikt över alla ämnen vi kommer att dela med oss av:
- Hur man lägger till och justerar bilder i WordPress
- Hur man perfekt justerar en bild bredvid text
- Hur man justerar galleribilder i WordPress
- Hur man lägger till två bilder sida vid sida i WordPress
- Fler sätt att lägga till och justera bilder i WordPress
- Bonustips: Hur man centrerar en video i WordPress
- Vanliga frågor om justering av bilder i WordPress
Låt oss börja!
Hur man lägger till och justerar bilder i WordPress
Redigeraren levereras med flera block som du kan använda för att lägga till bilder i dina WordPress-inlägg och sidor. I den här guiden kommer vi att fokusera på de mest populära:
- Bild
- Galleri
- Media & Text
- Omslag
Låt oss börja med ett enkelt bildblock först.
Du kan klicka på knappen "Lägg till nytt block" eller skriva /bild i inläggsredigeraren för att infoga ett bildblock.
Detta aktiverar de 3 knapparna inuti det tomma bildblocket.
Nu kan du ladda upp en bild från din dator, välja en redan uppladdad bild från mediabiblioteket, eller infoga en bild genom att ange bildfilens URL.
Klicka sedan på knappen 'Ladda upp' och välj sedan bilden du vill ladda upp från din dator.
Så snart du väljer bilden kommer WordPress att ladda upp den till ditt mediebibliotek och infoga den i bildblocket.
Nu kommer du att märka en verktygsfält ovanför din bild och några inställningar för bildblocket i den högra kolumnen.
För att justera din bild kommer du att använda verktygsfältet som visas ovanför bilden.
Bildblocket ger dig flera justeringsalternativ. Beroende på ditt WordPress-tema kan du se alla följande:
- Ingen: Standardjusteringen, som placerar bilden i linje med din text.
- Justera vänster: Skjuter bilden åt vänster, vilket gör att texten kan flöda runt dess högra sida.
- Centrera: Centrerar bilden i huvudinnehållskolumnen.
- Justera höger: Flyttar bilden åt höger, vilket gör att texten kan lindas runt dess vänstra sida.
- Bred bredd: Gör bilden bredare än huvudområdet för en mer dynamisk look.
- Full bredd: Sträcker bilden för att fylla hela webbläsarens bredd, från kant till kant.
Klicka på knappen 'Centrera' för att centrera din bild i ditt inlägg.
Hur man perfekt justerar en bild bredvid text
Ofta kan du behöva justera en bild bredvid text perfekt. WordPress blockredigerare gör detta enkelt med blocket Media & Text.
Det här blocket lägger i princip till ett område med två kolumner – en kolumn för bilder (media) och den andra kolumnen för textinnehåll.
Ladda bara upp din bild genom att klicka på knappen 'Ladda upp'.
Sedan kan du lägga till den text du vill visa bredvid den.
Om du behöver en längre beskrivning, skriv bara in den.
Bildens justering anpassas automatiskt till höjden på texten i nästa kolumn.
Hur man justerar galleribilder i WordPress
WordPress blockredigerare inkluderar även ett block för att lägga till bildgallerier. Detta gör att du enkelt kan visa bilder i ett rutnät av rader och kolumner.
Galleribläcket har liknande justeringsalternativ i verktygsfältet. Som standard visar blocket bilderna i en layout med 3 kolumner.
Så, ditt bildgalleri kan se ut så här:
Du kan justera galleriets layout genom att flytta reglaget åt vänster eller höger. Alternativt kan du bara skriva in antalet kolumner du vill ha i rutan.
Här provade vi 4-kolumns layouten:
Om ditt galleri inte ser bra ut på grund av skillnader i bildstorlekar, måste du justera dess justering.
I postredigeraren kan du klicka på galleriet. Sedan kan du klicka på ikonen ‘Välj överordnat block: Galleri’ för att öppna anpassningspanelen.
Från detta, låt oss se till att aktivera alternativet 'Beskär bilder för att passa'.
Så fort du gör det kommer WordPress att justera galleriet till mitten.
Standardgallerifunktionen i WordPress är ganska bra. Men om du regelbundet lägger till fotogallerier i dina WordPress-inlägg och sidor, överväg då att använda ett fotogalleriprogram som Envira Gallery.
Dessa plugins ger dig fler alternativ för att justera bilder i dina fotogallerier, visa dem i popup-fönster och styla dem annorlunda.
För mer information, se vår handledning om hur man lägger till ett bildgalleri i WordPress.
Hur man lägger till två bilder sida vid sida i WordPress
Det enklaste sättet att visa 2 bilder sida vid sida i ett WordPress-inlägg är att lägga till båda bilderna i ett galleriblock.
För att öppna anpassningsalternativen för Galleriblocket kan du klicka på galleriet och sedan en gång till på ikonen "Välj föräldrablock: Galleri".
Detta öppnar anpassningspanelen på höger sida.
Från detta, välj helt enkelt en 2-kolumns layout för galleriblocket för att visa båda bilderna bredvid varandra.
Du kan också aktivera alternativet 'Beskär bilder för att passa' för att säkerställa att båda bilderna är lika stora och centrerade.
Fler sätt att lägga till och justera bilder i WordPress
Förutom de block vi redan har gått igenom kan du även använda Omslagsblocket.
Dess huvudsakliga syfte är att låta dig placera text direkt ovanpå en bild, vilket är perfekt för att skapa iögonfallande sektionsrubriker och uppmaningar till handling.
Omslagsblocket har samma justeringsalternativ som en vanlig bild.
Du kan också lägga till en färgöverläggning för att göra din text lättare att läsa och till och med välja alternativet 'Fast bakgrund', vilket skapar en cool parallax scrollningseffekt.
För att lära dig mer om hur du använder omslagsbilder, kolla in vår artikel om skillnaden mellan utvalda och omslagsbilder i WordPress.
Hittills har vi pratat om att lägga till bilder direkt i dina inlägg och sidor. Vad sägs om bilder från tredjepartswebbplatser?
Blockredigeraren gör även detta enkelt. Du kan lägga till bilder från populära sociala delningssajter, inklusive Instagram, Facebook, Flickr, Imgur, Photobucket och mer.
Till exempel, om du vill lägga till ett Instagram-foto, lägg helt enkelt till Instagram-blocket i inläggsredigeraren och ange URL:en för inlägget du vill dela.
Sedan kan du bara klicka på den justering du vill ha i verktygsfältet. Bädda in block låter dig också enkelt bädda in videor i WordPress.
För mer information, se vår guide om hur man bäddar in Instagram i WordPress.
Bonustips: Hur man centrerar en video i WordPress
Precis som med bilder kan du vilja ändra justeringen av dina videor. Lyckligtvis använder videoblock i WordPress exakt samma justeringsverktyg.
Oavsett om du bäddar in en YouTube-video eller laddar upp din egen, klicka bara på videoblocket. Du kommer att se den välbekanta justeringsverktygsfältet dyka upp högst upp.
Klicka bara på knappen 'Justera i mitten' för att centrera hela videospelaren i ditt innehållsområde. Detta skapar en mycket renare och mer polerad layout för din sida.
För att lära dig mer kan du läsa vår guide om hur man centrerar en video i WordPress.
Vanliga frågor om justering av bilder i WordPress
Här är några frågor som våra läsare ofta ställer om att justera bilder i WordPress:
Vilken är den bästa bildfiltypen för WordPress?
För fotografier är JPEG vanligtvis det bästa valet eftersom det balanserar kvalitet och liten filstorlek. Om din bild behöver en transparent bakgrund, som en logotyp, bör du använda PNG-formatet.
Hur gör jag mina bilder responsiva på mobila enheter?
WordPress blockredigerare hanterar detta åt dig automatiskt. Varje bild du lägger till kommer att vara responsiv, vilket innebär att den anpassar sig för att passa skärmstorleken på alla enheter.
Kan jag linda text runt en bild?
Absolut. Lägg bara till ett Bildblock och använd alternativet 'Justera vänster' eller 'Justera höger' i verktygsfältet. Styckestexten som följer kommer automatiskt att lindas runt bilden.
Hur lägger jag till en bildtext till min bild?
När du infogar en bild ser du ett fält för 'Lägg till bildtext' direkt under den. Klicka bara på detta område och skriv in den text du vill använda för din bildtext.
Varför linjerar inte mina galleribilder ordentligt?
Detta händer ofta när bilderna i ditt galleri har olika höjder eller bredder. För att åtgärda detta, välj Galleriblocket och aktivera alternativet 'Beskär bilder för att passa' i inställningspanelen till höger. Detta gör alla galleribilder enhetliga i storlek.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till och justerar bilder i WordPress blockredigerare. Du kanske också vill se vår guide om hur du ändrar blockhöjd och bredd i WordPress och vanliga Gutenberg-frågor besvarade.
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.
Jiří Vaněk
Gutenberg är fortfarande ett stort okänt för mig. Jag erkänner att jag först började upptäcka det efter att WordPress 6.4 kom och läste dessa sidor. Under lång tid kunde jag till exempel inte förstå hur man placerade en bild och text bredvid varandra (i Elementor var det en helt enkel sak). Efter att ha läst den här artikeln kan jag göra lite mer med Gutenberg. Tack för det.
WPBeginner Support
You’re welcome
Admin
fred dugas
kommer detta att fungera med Iframes? Jag redigerar ett anpassat HTML-block och lägger till iframe och sparar och sedan läggs det till linje med allt annat som är centrerat?
WPBeginner Support
Det skulle bero på iframen men normalt sett har iframes inga automatiska justeringsalternativ.
Admin
Harry Goldhagen
Hur justerar du utvalda bilder som visas på den automatiskt genererade bloggsidan och kategorisidan? Att klicka på bilden öppnar inlägget, och det verkar inte finnas någon justeringsinställning för utvalda bilder när du fyller i inläggsinställningarna.
WPBeginner Support
För den utvalda bilden bestäms det av ditt tema. Om du kontrollerar med ditt specifika temas support bör de kunna hjälpa till med justeringen av din utvalda bild.
Admin
john McIntyre
Jag vill ha alla bildtexter på min webbplats, samma storlek och typsnitt.
Hur uppnås detta?
WPBeginner Support
Om inte ditt tema har en specifik inställning för det, bör de flesta teman ha texten enhetlig om det bara är bildtexten och inte ett annat textblock.
Admin
Sharon
Jag vill ändra standardinställningen för att ladda upp en bild så att den centreras varje gång. Att ändra varje bild jag laddar upp för att centreras varje gång jag lägger till en bild är så tidskrävande. Kan jag ändra standardinställningen till att centrera?
WPBeginner Support
Det finns ingen enkel metod som vi skulle rekommendera för nybörjare för tillfället, men vi kommer att hålla utkik efter något vi kan rekommendera.
Admin
Amanda A.
Jag försöker använda Blockredigeraren för att visa två bilder sida vid sida. Jag använde funktionen med två kolumner och sedan bildblock i varje kolumn. Under designen visas det korrekt, men när jag "förhandsgranskar i ny flik" är kolumnerna sida vid sida borta och bilderna är staplade. Vad gör jag fel? Är detta ett vanligt problem? Hur kan jag fixa detta?
WPBeginner Support
Du kanske vill säkerställa att bilderna inte är för stora för att de ska kunna vara sida vid sida i ditt specifika tema, vilket är den vanligaste orsaken till det problemet.
Admin
Sheryl Zeiset
Jag försöker lära mig hur man använder den nya blockredigeraren. När jag klickar på knappen Lägg till block och väljer bild för att lägga till ett foto, får jag bara alternativet 'infoga från URL' och jag kan inte hitta ett sätt att lägga till foton från mitt mediabibliotek. Kan du hjälpa mig?
WPBeginner Support
Du vill noggrant kontrollera för att hitta texten bredvid uppladdningsknappen för att välja bilden från ditt mediebibliotek
Admin
Luther Mckinnon
Jag har publicerat en blogg i många år. Jag har lärt mig att frukta introduktionen av ett nytt system. Att göra något enkelt som att lägga till fotografier är nu mycket svårt.
WPBeginner Support
Hopefully, once you are comfortable with the new system it becomes easier for you
Admin
Ward
Bra information, problemet är att det fungerar i backend men i frontend justeras det alltid till vänster. Skulle det vara möjligt att detta har något att göra med min Elementor-mall?
WPBeginner Support
Om du använder en sidbyggare finns det en chans att din sidbyggare åsidosätter stilen och du kan kontakta din byggares support för hjälp.
Admin
tanmay
absolut fantastisk funktion det är inte allas lätt att använda HTML-redigeraren
WPBeginner Support
Glad you like the block editor feature
Admin
Louie Adem
började precis med WordPress igår. Helt nybörjare och så glad att wpbeginner gav mig "stödhjulen" för att komma igång. Utbildningen på den här webbplatsen är så värdefull. Kan inte tacka er nog.
WPBeginner Support
Glad we could help get you started
Admin
BadlyDrawmWolf
Thank you for this little gold nugget – really struggling getting in to the “new” way of handling my blog and almost giving up and searching for other alternatives….
WPBeginner Support
Glad att vår artikel kunde hjälpa, för en annan hjälpsam artikel kan du vilja ta en titt på vår artikel nedan:
https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/
Admin
Karen
Du nämner "Inline Image", men jag ser inget sådant block. Din artikel skrevs för ett tag sedan men uppdaterades tydligen i januari 2020 – försvann det blocket och du glömde ta bort det från den här artikeln? Eller en bättre fråga: Hur kan jag lägga till en inline-bild inom ett annat block som stycke eller rubrik?
WPBeginner Support
Inline-bildblocket är inte tillgängligt för närvarande, men du kan normalt återskapa formateringen med text- och bildblocket eller standardbildblocket
Admin
Ted Strutz
När jag lägger till en bild från mitt media kommer bildverktygsfältet inte upp för att justera vänster eller höger. Jag kan ändra storlek på bilden.
WPBeginner Support
Du vill säkerställa att du inte har ställt in den att vara högst upp på sidan istället för hur vi har den för närvarande.
Admin
Hannah
Hej, jag har justerat alla bilder med hjälp av blockredigeraren och allt ser bra ut tills jag förhandsgranskar?
Sedan har vissa bilder blivit mycket större än de andra, jag har ett galleri med två bilder som plötsligt ligger ovanpå en enda bild. Allt har flyttats runt slumpmässigt!
Även när jag publicerade det var det fortfarande helt fel. Jag skulle verkligen uppskatta din hjälp, tack!
WPBeginner Support
Du bör kontakta ditt temas support för att säkerställa att det inte finns någon stilkonflikt, annars kan du försöka inaktivera dina plugins för att se om det också är en plugin-konflikt.
Admin
Harry
Hej, jag vill justera kortkoder bredvid varandra som du beskriver med bilderna, är detta möjligt? Tack så mycket
WPBeginner Support
Det skulle bero på kortkoderna själva
Admin
Ap
Hej,
Hur ställer man in titeln för omslagsblocken?
Du har det alternativet i din stapel, men av någon anledning, när jag klickar på omslagsblocket, finns det inget alternativ för textjustering.
Några idéer om detta?
Tack för den utmärkta artikeln.
WPBeginner Support
Du vill kontrollera toppen av din sida eftersom det skulle vara den andra platsen där justeringsalternativen finns istället för att sväva över elementet
Admin
Cheryl
Hur gör man en bild klickbar med en klickbar länk? Jag har letat efter handledningar och de verkade alla baserade på ett tidigare Gutenberg-block som sedan har ändrats och handledningarna matchar inte längre blocket.
WPBeginner Support
Du vill kontrollera verktygsfältet högst upp för den aktuella platsen där du kan lägga till en länk till en bild
Admin
Alejandro
Hej, Är det möjligt att skriva en bildtext precis under bilden när man använder "Media & Text-blocket"?
WPBeginner Support
Det skulle bero på ditt specifika tema för stylingen men du borde kunna
Admin
Lancer Kind
Trevligt! Tack så mycket!
WPBeginner Support
You’re welcome
Admin
Pete Newman
Det finns ett befintligt problem med inkompatibilitet mellan Gutenberg och teman. Har ni en lista över teman som är kompatibla med Gutenberg (och som tillåter full funktionalitet av Gutenberg)?
Tack och hälsningar,
Pete.
WPBeginner Support
Det bör finnas färre problem med det när teman uppdateras, men för specifikt Gutenberg-vänliga teman kan du ta en titt på vår lista här: https://www.wpbeginner.com/showcase/gutenberg-friendly-wordpress-themes/
Admin
Pete Newman
Jag har använt wordpress i flera år men har varit lite frånvarande på sistone. Gutenberg är en huvudvärk. Jag följer dessa instruktioner men kan helt enkelt inte justera bilder i ett bild/text-block. När jag går till förhandsgranskning är bilden extremt vänsterjusterad på sidan utan marginal alls. Några lösningar att erbjuda?
Tack!!
WPBeginner Support
Om inställningarna ignoreras kan du behöva kontrollera med ditt temas support för att säkerställa att det inte åsidosätter din styling. Om du vill försöka återgå till den klassiska redigeraren har vi vår guide här: https://www.wpbeginner.com/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/
Admin
Pete Newman
Tack! Utmärkt support. Jag lade till pluginet för klassisk redigerare och pluginet för att inaktivera Gutenberg och kunde skapa en approximation av vad jag vill ha. Ser fram emot att Gutenberg fungerar som avsett och att utvecklarna hinner ikapp – det är en bra idé.
WPBeginner Support
Glad we could help
Jimmie
Men du kan inte länka bilder i ett galleri? Det gör gallerifunktionen mindre attraktiv
WPBeginner Support
If each image needs its own link then setting up columns would likely be what you’re looking to do
Admin
Roxana Snedeker
What is the best way to add multiple images at once, I can’t seem to add more than one at the time
WPBeginner Support
Om du vill lägga till flera bilder i samma område, bör du titta på galleribläcket för att lägga till flera bilder i en sektion
Admin
Aaranja
Hur lägger man till en bild direkt i "Kodredigeraren", utan att gå via "Visuell redigerare"?
WPBeginner Support
Du kan inaktivera den visuella redigeraren under Användare>Din profil men det skulle hindra dig från att använda den visuella redigeraren för andra sektioner.
Admin
Alice
Jag centrerar alla mina bilder korrekt i redigeraren, men de visas alla som vänsterjusterade i förhandsgranskning och liveinlägg oavsett vad. Vet du vad som kan orsaka detta? Det gör mig så galen!
WPBeginner Support
Ditt tema kan åsidosätta den stil du ställer in. Om du kontaktar ditt temas support bör de kunna hjälpa till.
Admin
Anne
Jag skulle vilja ha en bild bredvid en fil (pdf) – allt på samma rad. Kan jag göra det i ett block, eller behöver jag skapa två? Tack!
WPBeginner Support
Du vill lägga till kolumnblocket för att dela upp innehållet och tillåta dig att visa innehållet på det sättet.
Admin
Suzy Algar
Jag har problem med att skapa bildtexter för bilder och nedladdningar som visas i mina filer. Jag vet inte vart jag ska gå när jag har bilden i mina filer.
WPBeginner Support
Om du försöker lägga till bilden i ett inlägg eller en sida skulle du normalt lägga till ett bildblock och sedan välja den fil du vill använda i blocket
Admin
Roxana Safipour
Så hur gör man nu "ingen justering", där bilden är till vänster och inte har någon text som flyter runt den? Detta var tidigare enkelt med alternativet "ingen justering", som nu är borta. Vänligen ta tillbaka detta! Jag håller på att bli galen och försöker lista ut hur jag får min bild till vänster (inte centrerad) och utan text bredvid den, men texten fortsätter att flyta runt den automatiskt!
WPBeginner Support
För det du verkar vilja, om du inte specifikt ställer in justeringen för en bild, bör bilden ställa sig själv på det sättet.
Admin
Ben
Bara en snabb uppföljning på detta, eftersom det irriterade mig också. Det finns ett enkelt svar men det är lite inte så uppenbart eftersom jag letade efter en inställning – tryck bara på den valda justeringsknappen igen för att stänga av justeringen och återgå till standard utan justering.
Jesse
Bra inlägg mycket användbart. Jag har uppgraderat till WordPress 5.1 men har nu problem med att länka bilder till URL. Kan du hjälpa mig?
WPBeginner Support
Om du använder blockredigeraren, i bildblockets inställningar bör det finnas en sektion för länkinställningar där du kan ställa in vart en bild ska länka.
Admin