Hur du enkelt placerar bilder sida vid sida i WordPress

När vi först började blogga kändes det ofta mer frustrerande än roligt att få bilder att linjera.

Men vi insåg snart att att placera bilder sida vid sida inte bara handlar om att få saker att se bra ut – det hjälper faktiskt läsarna att förstå och njuta av innehållet mer.

Med tiden har vi plockat upp några enkla tekniker för att göra den här processen enklare, och att placera bilder bredvid varandra har blivit ett av våra favoritsätt att bygga vackra fotogallerier.

I den här handledningen går vi igenom två enkla metoder för att visa bilder sida vid sida – en med den inbyggda WordPress blockredigeraren och en annan med Envira Gallery-pluginet.

I slutet kommer du att kunna förbättra din innehållslayout och skapa en mer engagerande upplevelse för dina besökare.

Varför lägga till bilder sida vid sida i WordPress?

Att lägga till bilder sida vid sida kan förbättra det visuella utseendet på din WordPress-webbplats genom att skapa en mer intressant layout.

Bilder sida vid sida kan också hjälpa till att effektivt utnyttja ditt webbplatsutrymme, vilket gör att du kan få plats med fler bilder inom ett begränsat område.

Till exempel, om du har en fotowebbplats, då hjälper det att arrangera bilder sida vid sida dig att fullt ut utnyttja din WordPress-sida genom att visa bilder på ett estetiskt tilltalande sätt.

Dessutom kan du ibland vilja att användare jämför två bilder på din WordPress-blogg. Att placera dem sida vid sida gör det lättare för människor att analysera och förstå skillnaderna mellan bilderna.

Med det sagt kommer vi att visa dig två enkla sätt att placera bilder bredvid varandra. Den bästa metoden beror på vad du behöver.

För de flesta enkla fall fungerar WordPress inbyggda blockredigerare perfekt. Om du vill skapa mer avancerade fotogallerier med extra funktioner, då är det bättre att använda ett plugin.

Du kan använda länkarna nedan för att hoppa till den metod du föredrar:

• Method 1: Add Images Side by Side in WordPress Using the Block Editor
• Method 2: Place Images Side by Side in WordPress Using a Plugin (Easy Way)
• Bonus: Justera bilder i WordPress
• Vanliga frågor om att lägga till bilder sida vid sida

Metod 1: Lägg till bilder sida vid sida i WordPress med hjälp av blockredigeraren

Om du letar efter ett enkelt sätt att lägga till bilder sida vid sida med hjälp av Gutenberg blockredigerare, då är den här metoden för dig.

Blockredigeraren erbjuder en Galleriblockfunktionalitet som låter dig enkelt visa bilder i rader och kolumner.

Steg 1: Lägg till galleriblocket

Först måste du skapa ett nytt inlägg/en ny sida eller redigera ett befintligt för att öppna innehållseditor. När du är där, klicka på knappen ‘Lägg till block’ (+) längst upp till vänster på skärmen för att öppna blockmenyn.

Härifrån, lokalisera och lägg helt enkelt till Galleriblocket till sidan eller inlägget.

Steg 2: Ladda upp dina bilder

Efter det kan du enkelt lägga till bilder i ditt galleriblock från datorn genom att klicka på knappen ‘Ladda upp’.

Du kan också välja bilder från ditt WordPress mediebibliotek genom att klicka på knappen ‘Mediebibliotek’.

Som du kan se har vi lagt till 2 bilder i vårt Galleriblock, och WordPress har automatiskt placerat dem sida vid sida.

Om du bestämmer dig för att lägga till en tredje bild måste du klicka på knappen ‘Lägg till’ i verktygsfältet för blocket högst upp.

Detta öppnar mediabiblioteket där du kan lägga till en tredje bild i ditt galleriblock. När du har gjort det kommer du att se att WordPress nu helt enkelt har ändrat storlek på bilderna för att automatiskt placera dem sida vid sida.

Steg 3: Justera galleriets kolumner

Om du däremot bestämmer dig för att placera en fjärde bild i Galleribläcket, kommer den att placeras under de andra bilderna.

För att åtgärda detta kan du ändra antalet kolumner för ditt galleri. Denna inställning styr hur många bilder som visas sida vid sida i varje rad.

Till exempel, om du vill ha två bilder sida vid sida och ytterligare två under dem, kan du ställa in Kolumner till 2.

Du kan också beskära bilder så att de linjerar, justera bildstorlekar, länka dem till olika sidor och ändra bakgrundsfärgen från blockpanelen.

För detaljerade instruktioner, se vår nybörjarguide om hur man skapar ett bildgalleri i WordPress.

Steg 4: Publicera dina ändringar

När du är klar, glöm inte att klicka på knappen ‘Uppdatera’ eller ‘Publicera’ för att spara dina ändringar.

Besök nu bara din webbplats för att se bilderna sida vid sida.

Metod 2: Placera bilder sida vid sida i WordPress med ett plugin (enkelt sätt)

Medan det inbyggda Galleri-blocket är perfekt för enkla layouter, behöver du ett plugin om du vill skapa mer avancerade fotogallerier med funktioner som vackra ljuslådor, album och alternativ för social delning.

För detta rekommenderar vi Envira Gallery. Det är det bästa WordPress-galleri-pluginet på marknaden, och enligt vår erfarenhet är det otroligt lätt att använda samtidigt som det erbjuder kraftfulla funktioner.

För mer detaljer om dess funktioner kan du ta en titt på vår recension av Envira Gallery.

Steg 1: Installera och aktivera Envira Gallery

Först måste du installera och aktivera pluginet Envira Gallery. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Steg 2: Skapa ett nytt galleri och ladda upp bilder

Efter aktivering, gå till sidan Envira Gallery » Lägg till ny från din WordPress-instrumentpanel.

När du är där måste du ge ditt nya galleri en titel. Vi har kallat vårt ‘Exempelgalleri’.

Ladda sedan upp de bilder du vill använda från datorn genom att klicka på knappen 'Välj filer från din dator'.

För att ladda upp bilder från mediebiblioteket, klicka på knappen ‘Välj filer från andra källor’.

Steg 3: Redigera bildmetadata (valfritt)

När du har laddat upp bilderna, scrolla ner till Gallerisektionen för att se dem.

Härifrån kan du ge dina bilder en titel och alternativ text.

Titeln visas när en användare för muspekaren över bilden och visas även under bilden i ljuslådan, som är helskärmsvisningen.

För att redigera titeln och alt-texten, klicka på knappen ‘Redigera’ på en bild i galleriet.

Du kan sedan ändra titeln på din bild och ange alternativtext, vilket är användbart för din WordPress-webbplatsens SEO.

Om din titel beskriver bilden kan du helt enkelt upprepa den för alt-texten.

När du är klar, se till att du klickar på knappen 'Spara metadata' innan du stänger fönstret.

Om du inte gör det, sparas inte några av dina ändringar i galleriet.

Steg 4: Publicera ditt galleri

Slutligen, scrolla tillbaka till toppen av sidan och klicka på knappen 'Publicera' för att spara bildgalleriet du just skapade.

Därefter går du till WordPress-sidan eller inlägget där du vill lägga till det.

Steg 5: Lägg till Envira Gallery-blocket i ett inlägg eller en sida

När du är där klickar du på knappen 'Lägg till block' (+) längst upp till vänster på skärmen för att öppna blockmenyn.

Härifrån, leta upp och lägg till Envira Gallery-blocket till sidan/inlägget.

Därefter måste du välja det galleri du skapade från rullgardinsmenyn i själva blocket.

Steg 6: Konfigurera layout och publicera

För att visa bilderna i galleriet sida vid sida, gå till blockpanelen i skärmens högra hörn.

Härifrån, scrolla ner till avsnittet ‘Välj layout’ och välj antalet kolumner från rullgardinsmenyn. Dina bilder kommer nu att visas sida vid sida på WordPress-sidan.

Du kan också ändra gallerimarginaler, aktivera en vacker animerad filtreringseffekt (känd som Isotope) och konfigurera ljuslådeinställningar från blockpanelen.

När du är klar, glöm inte att klicka på knappen ‘Publicera’ eller ‘Uppdatera’ för att spara dina inställningar.

Nu kan du besöka din webbplats för att se bilderna sida vid sida.

Användaren kan nu klicka på valfri bild för att se den fullstora versionen i en lightbox.

Dessutom kan de också bläddra igenom bilderna med hjälp av lightboxen.

Om du vill lägga till fler bilder i ditt galleri kan du gå tillbaka till det genom att besöka sidan Envira Gallery » Alla gallerier i din WordPress-instrumentpanel.

När du är där klickar du helt enkelt på namnet på ditt galleri för att redigera det.

Alla ändringar du gör i ditt galleri kommer att visas var du än har placerat det i dina inlägg, sidor eller sidofält. Du behöver inte lägga till det igen på dessa platser.

Bonus: Justera bilder i WordPress

När du lägger till två bilder sida vid sida måste de justeras tillsammans för att skapa ett sammanhängande och visuellt tilltalande utseende.

Även om du lägger till en enda bild i din WordPress-blogg, vill du fortfarande justera den med ditt innehåll för att skapa en visuell balans.

Du kan enkelt anpassa bilder i WordPress blockredigerare genom att klicka på knappen 'Anpassa' i verktygsfältet ovanför blocket.

Detta öppnar några alternativ där du kan flytta din bild åt höger eller vänster, göra den lika bred som behållaren, eller använda alternativet för full bredd så att bildens bredd är densamma som resten av sidan.

Förutom det kan du också använda kolumnblocket för att anpassa din bild med innehållet. För att göra detta måste du välja 50/50-varianten.

När du har gjort det kan du lägga till ett bildblock som perfekt anpassas till ditt innehåll.

Dessutom kan du också linda text runt bilden, använda gruppblocket, lägga till omslagsblocket, eller göra så mycket mer för att justera bilder tillsammans eller separat.

För mer information, se vår nybörjarguide om hur man justerar bilder i WordPress blockredigerare.

Vanliga frågor om att lägga till bilder sida vid sida

Här är några frågor som våra läsare ofta har ställt om att lägga till bilder sida vid sida i WordPress:

Hur placerar jag en bild och text sida vid sida i WordPress?

Det bästa sättet att placera en bild bredvid text är att använda Kolumn-blocket.

Lägg först till Kolumn-blocket och välj en layout, som 50/50. Sedan kan du lägga till ett Bild-block i en kolumn och ett Stycke-block i den andra. Detta ger dig en ren, sida vid sida-layout.

Vad är det bästa sättet att placera bilder av olika storlekar sida vid sida?

Medan Galleribladet är utmärkt för enhetliga bilder, erbjuder Kolumnbladet mer flexibilitet för olika storlekar. Du kan använda det för att skapa en 70/30 eller andra anpassade layouter.

För mer avancerad kontroll, ett plugin som Envira Gallery låter dig skapa anpassade rutnät som kan hantera olika bilddimensioner på ett smidigt sätt.

Kommer mina sida-vid-sida-bilder att förbli bredvid varandra på mobila enheter?

Vanligtvis inte. De flesta moderna WordPress-teman är responsiva, vilket innebär att bildblock som placeras sida vid sida på en dator automatiskt staplas vertikalt på mindre skärmar.

Detta görs för att säkerställa att bilderna är tillräckligt stora för att ses tydligt på en telefon, vilket ger en bättre användarupplevelse.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du placerar bilder sida vid sida i WordPress. Du kanske också vill gå igenom vår guide om hur du ändrar blockhöjd och bredd i WordPress och vår guide om att lägga till tabeller i WordPress-inlägg och sidor.

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.