Vill du visa WordPress-bilder i kolumner och rader?
Som standard lägger WordPress till bilder i en vertikal kolumn ovanpå varandra. Men om du lägger till flera foton i ett blogginlägg, så ser detta inte särskilt rent ut och kräver mycket rullning för dina användare.
I den här artikeln kommer vi att visa dig hur du enkelt visar WordPress-foton i kolumner och rader.
Varför du behöver WordPress-foton i kolumner och rader
Som standard, när du lägger till flera bilder till en WordPress blogginläggskulle de dyka upp bredvid varandra eller ovanpå varandra.
Detta ser inte särskilt bra ut, och dina användare måste rulla mycket för att se flera bilder och foton.
Du kan enkelt lösa detta problem genom att visa foton i rader och kolumner med hjälp av en rutnätsbaserad layout. På så sätt kommer bilder att visas i en kompakt layout och förbättra användarupplevelsen på din webbplats.
Om du har en fotowebbplats, då kan du visa din portfölj på ett mer engagerande sätt. Eller så kan du visa fler produktbilder i en webbutik genom att visa dem i rader och kolumner.
Med det sagt, låt oss ta en titt på hur man visar WordPress-foton i kolumner och rader manuellt eller använder ett WordPress-plugin. Klicka bara på länkarna nedan för att gå vidare till ditt föredragna avsnitt.
1. Visa foton i kolumner och rader utan plugins
Denna metod kräver inte att du installerar ett plugin på din WordPress-webbplats. Om du inte lägger till flera foton för ofta, skulle detta fungera alldeles utmärkt för dig.
Du kan lägga till bilder manuellt i ett kolumnblock eller använda standardgalleriblocket i WordPress.
Lägga till bilder i ett kolumnblock
Först måste du skapa ett nytt inlägg eller redigera en befintlig där du vill visa dina foton. När du är i innehållsredigeringsskärmen klickar du på ’+’-knappen för att lägga till ett kolumnblock.
Därefter kan du välja antalet kolumner du vill ha och dess layout.
Du kan till exempel välja förhållandet 50/50, förhållandet 33/66, förhållandet 25/50/25 och mer.
Efter det kan du lägga till ett bildblock till varje kolumn.
Klicka bara på ’+’-knappen och välj ’Bild’-blocket.
Därefter måste du lägga till en bild i blocket.
Du kan klicka på knappen ”Ladda upp” för att lägga till en bild från din dator eller välja alternativet ”Mediebibliotek” för att använda en befintlig bild.
När mediabiblioteket öppnas, välj helt enkelt din önskade bild och klicka på knappen ”Välj”.
En av de bästa metoderna för bildoptimering är att lägga till en alt-text till din bild. Detta gör att sökmotorrobotar kan förstå din bild och visa den i bildsökresultat.
Du bör nu se din bild i ett av kolumnblocken.
Nu kan du göra samma sak för andra block i kolumnen och lägga till fler bilder.
Lägga till bilder i ett galleriblock
WordPress erbjuder också ett standardgalleriblock som du kan använda för att visa bilder i kolumner och rader.
För att börja, klicka på ’+’-knappen och lägg till ett Galleri-block i innehållsredigeraren.
Därefter måste du ladda upp bilder eller välja från mediebiblioteket.
För den här handledningen väljer vi alternativet ’Mediebibliotek.
Från, välj helt enkelt de bilder du vill lägga till i ditt galleri och visa dem i rader och kolumner.
När du har valt bilderna klickar du på knappen ”Skapa ett nytt galleri”.
Därefter kommer WordPress att be dig ange bildtexter för varje bild och ändra ordningen på bilderna.
När du har gjort det klickar du bara på knappen ”Infoga galleri”.
Du bör nu se dina bilder i galleriblocket.
Du kan justera antalet rader genom att klicka på reglaget i panelen Inställningar till höger.
När du är klar publicerar du helt enkelt ditt inlägg för att visa bilder i kolumner och rader.
Besök helt enkelt din webbplats för att se dem i aktion.
Denna metod skulle fungera för de flesta nybörjare. Men om du kör en fotoblogg eller ofta delar bilder på din webbplats, så saknar denna metod flera viktiga funktioner.
Till exempel beror utseendet på bilder på ditt WordPress-tema och du är begränsad till den specifika layouten och stilen.
Dina bilder kommer inte att öppnas i en lightbox popup och användare måste ladda dem som en ny sida och sedan trycka på bakåtknappen för att återgå till den ursprungliga sidan.
För en mer professionell och vacker användarupplevelse bör du prova pluginmetoden.
2. Visa foton i kolumner och rader med hjälp av en plugin
Den bästa plugin för att lägga till foton i kolumner och rader är Envira Gallery. Det är det mest populära WordPress galleri plugin som är superenkel att använda och erbjuder många funktioner.
Först måste du installera och aktivera Envira Gallery-plugin. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Vid aktivering måste du besöka Envira Gallery » Inställningar sida för att ange din licensnyckel. Du kan få den här nyckeln från ditt konto på Envira Gallery-webbplatsen.
Nu är du redo att skapa vackra bildgallerier.
Gå helt enkelt över till Envira Gallery » Lägg till ny från WordPress-instrumentpanelen för att skapa ditt första galleri.
Först måste du ange ett namn för ditt galleri högst upp. Härifrån kan du välja och ladda upp filer från din dator, eller så kan du välja från WordPress media bibliotek.
När du har laddat upp dina foton kommer du att se dem visas i rutan för galleriinställningar nedan.
Därefter måste du klicka på fliken ”Konfiguration” för att anpassa hur du vill visa dina foton.
Envira Gallery låter dig välja olika gallerilayouter. För att visa bilder i rader och kolumner kan du välja rutnät, murare och kvadratiska layouter.
När du har valt layout kan du klicka på rullgardinsmenyn ”Antal gallerikolumner” och välja hur många kolumner du vill visa.
Om du rullar nedåt kommer du att se fler alternativ för att anpassa ditt galleri. Det finns till exempel inställningar för att redigera måtten och storleken på ditt galleri.
Efter det kan du klicka på ”Publicera”-knappen för att göra ditt fotogalleri redo att läggas till på din WordPress-webbplats.
Nu måste du redigera ett inlägg eller skapa ett nytt. När du är i innehållsredigeraren klickar du helt enkelt på ’+’-knappen för att lägga till blocket ’Envira Gallery’.
Härifrån kan du klicka på rullgardinsmenyn och välja det galleri du skapade tidigare.
Du kan nu spara ditt inlägg och förhandsgranska det för att se dina foton i kolumner och rader i ett vackert mobilanpassat fotogalleri.
Nu när dina användare klickar på en fotominiatyr kommer den att öppnas i en vacker popup. De kommer också att kunna bläddra i bilder utan att lämna sidan.
Bonus: Skapa ett anpassat tema med bildkolumner och rader
Du kan också skapa anpassade WordPress-teman som har en platshållare för att lägga till bilder i kolumner och rader.
Det bästa sättet att skapa ett anpassat tema är att använda en SeedProd. Det är den bästa dra-och-släpp webbplatsbyggare som erbjuder förbyggda teman och massor av anpassningsalternativ.
Du kan lägga till ett kolumnblock till dina målsidedesigner med SeedProd och lägga till bilder i rader och kolumner. SeedProd kommer till och med med ett inbyggt Gallery-block som du kan använda för detta.
För att lära dig mer, se vår guide på hur man skapar ett anpassat WordPress-tema utan kod.