Vill du visa WordPress-bilder i Column eller Row?
Som standard lägger WordPress till images i en vertikal column högst upp på varandra. Men om du lägger till flera foton i ett blogginlägg ser det inte särskilt snyggt ut och det är obligatoriskt för dina användare att rulla.
I den här artikeln visar vi dig hur du enkelt kan displayed WordPress bilder i Column och Row.
Varför du behöver WordPress-foton i Column och Row
Som standard, när du lägger till flera images i ett blogginlägg i WordPress, visas de precis bredvid varandra eller högst upp på varandra.
Det ser inte så bra ut, och dina användare måste rulla mycket för att kunna view flera images och foton.
Du kan enkelt lösa detta problem genom att visa foton i row och columns med en grid-baserad layout. På så sätt kommer images att visas i en kompakt layout och förbättra användarupplevelsen på din website.
Om du har en website för fotografering kan du visa din portfölj på ett mer engagerande sätt. Eller så kan du visa fler produkt images i en online store genom att displaya dem i row och columns.
Med detta sagt, låt oss ta en titt på hur du kan visa WordPress foton i Column och Row manuellt eller använda ett WordPress plugin. Klicka bara på länkarna under för att hoppa vidare till din önskade section.
1. Display Photos in Columns and Rows utan tillägg
Den här metoden kräver ej att du installerar ett plugin på din website i WordPress. Om du inte lägger till flera foton för ofta, skulle det här fungera bra för dig.
Du kan manuellt add images till ett Column block eller använda standard gallery block i WordPress.
Lägga till Images i ett Column Block
Först måste du skapa ett new post eller editera ett befintligt där du vill visa dina foton. När du är i vyn för content editor klickar du på knappen ”+” för att add to ett block med en column.
Därefter kan du välja det antal Column du gillar och dess layout.
You can for instance choose a 50/50 ratio, 33/66 ratio, 25/50/25 ratio, and more.
Efter det kan du add to ett image block till varje column.
Klicka bara på knappen ”+” och välj blocket ”Image”.
Därefter måste du lägga till en image i blocket.
Du kan klicka på knappen ”Upload” för att add to en image från din dator eller välja alternativet ”Mediabibliotek” för att använda en befintlig bild.
När mediabiblioteket öppnas väljer du helt enkelt din valda image och clickar på knappen ”Select”.
En av de bästa metoderna för bildoptimering är att add to en alt-text till din image. This allows search engine bots to understand your image and show it in image search results.
You should now see your image in one of the column blocks.
Nu kan du göra samma sak för andra block i Column och add to fler images.
Lägga till Images i ett Gallery Block
WordPress erbjuder också ett standard gallery block som du kan använda för att visa images i columns och rows.
Börja med att clicka på knappen ”+” och add to ett Gallery block i content editor.
Därefter måste du ladda upp images eller välja från mediabiblioteket.
I den här tutorialen väljer vi alternativet ”Mediabibliotek”.
Sedan är det bara att selecta de images som du gillar att add to your gallery och displaya dem i rows och columns.
När du har valt bilderna klickar du på knappen ”Create a new gallery” (Skapa ett nytt gallery).
Därefter kommer WordPress att be dig att enter captions för varje image och omorganisera ordern på bilderna.
När du har gjort det klickar du bara på knappen ”Insert gallery”.
You should now see your images in the gallery block.
Du kan justera antalet row genom att clicka på slidern i panelen Settings till höger.
När du är klar är det bara att publicera din post för att view images in columns and rows.
Det är bara att besöka your site för att se dem i action.
Den här metoden skulle fungera för de flesta Beginnare. Men om du run en fotografering blogg eller ofta delning bilder på din website, då denna metod saknar flera viktiga funktioner.
Till exempel beror bildernas appearance på your WordPress theme och you är limiterad till en viss layout och stil.
Dina images kommer ej att öppnas i en lightbox popup och användarna måste hämta dem som en new page och sedan trycka på tillbaka-knappen för att komma tillbaka till originalsidan.
För en mer professionell och beautiful användarupplevelse bör du prova metoden med plugin.
2. Display Photos in Columns and Rows med hjälp av ett plugin
Det bästa pluginet för att add to foton i columns och rows är Envira Gallery. Det är det mest populära tillägget för WordPress gallery som är superenkelt att använda och erbjuder massor av funktioner.
Först måste du installera och aktivera plugin-programmet Envira Gallery. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Vid aktivering måste du besöka Envira Gallery ” Settings page för att enter your license key. Du kan få den här nyckeln från ditt account på Envira Gallerys website.
Nu är du redo att skapa beautiful galleries med bilder.
Gå bara till Envira Gallery ” Add New från WordPress dashboard för att skapa ditt första gallery.
Först måste du högst upp ange ett namn för ditt gallery. Härifrån kan du välja och uppladdare filer från din dator, eller så kan du välja från mediabiblioteket i WordPress.
När du har uploadat dina foton visas de i boxen för inställningar för gallery under.
Därefter måste du klicka på tabben ”Configuration” för att customize hur du vill visa dina foton.
Med Envira Gallery kan du välja olika layouts för galleriet. För att visa images i rows och columns kan du select grid, mason och square layouts.
När du har valt layout kan du klicka på dropdown-menyn ”Number of Gallery Columns” och välja hur många kolumner du gillar att visa.
Om du rullar ner ser du fler alternativ för att customize ditt gallery. Till exempel finns det inställningar för att editera dimensionerna och storleken på your gallery.
Efter det kan du klicka på knappen ”Publicera” för att göra ditt foto gallery redo att läggas till på din WordPress site.
Nu måste du edit ett post eller skapa ett new. När du är i content editor klickar du helt enkelt på knappen ”+” för att add to blocket ”Envira Gallery”.
Härifrån kan du clicka på dropdown-menyn och selecta det gallery som du skapade tidigare.
You can now save your post and preview it to see your photos in columns and rows in a beautiful mobile-responsive photo gallery.
Nu när dina användare klickar på en thumbnail öppnas den i en beautiful popup. De kommer också att kunna browsing images utan att lämna page.
Bonus: Skapa ett Custom Theme med Image Columns & Rows
Du kan också skapa custom WordPress themes som har en placeholder för att lägga till images i columns och rows.
Det bästa sättet att skapa ett custom theme är genom att använda SeedProd. Det är den bästa drag-and-drop-webbplatsbyggaren som erbjuder förbyggda teman och massor av alternativ för customize.
Du kan lägga till ett column block till din landing page design med SeedProd och add images till rows och columns. SeedProd kommer även med ett built-in Gallery block som du kan använda för detta.
För att lära dig mer, vänligen se vår guide om hur du skapar ett customize WordPress theme utan kod.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar WordPress-bilder i Column och Row. Du kanske också vill se vår guide om hur man fixar vanliga image issues i WordPress och den bästa designprogramvaran för småföretag.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Muhammad Hammad says
I believe custom theme creation is time taking and the EnviraGallery plugin is a more favorable option.
However, I am wondering if you can create custom layouts within the EnviraGallery plugin or just select from the pre-installed gallery templates?
WPBeginner Support says
Envira Gallery does not have a custom placement of images if that is what you are wanting from the plugin but there are many different gallery options that would scale to the user’s browser.
Administratör
Asad says
This was the complete beginner’s guide
WPBeginner Support says
Glad you think so
Administratör
Chris Thom says
Using the default gallery is there a way to control the margin/padding between images?
WPBeginner Support says
You would need to manually modify the CSS for your content.
Administratör
Chris Thom says
Good information but on the stock WP galley how can I adjust the padding between images? Right now they’re butted right up against each other.
WPBeginner Support says
You would need some knowledge of CSS, for a better understanding, we would recommend taking a look at our article below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administratör
gedi says
problem is u can’t put url behind image – wp won’t give option – can’t be edited execpt in html which is drawn out… good though if you dont want someone to cliick thru
WPBeginner Support says
At the moment WordPress does not have the option to add individual links by default to the gallery which is why we show Envira Gallery which does have that option
Administratör
Agnieszka says
Hi!
I tried to set up a gallery and even though I set the number of columns when I eventually update and preview my page all images show in just 1 column..no matter what I do!!
I tried to change the layout and number of columns but every time it is just 1 column and I have no idea how to fix it. Could you please help?
Shannon Ball says
I would like to have a grid of images so that when a reader clicks on an image it takes them to an external url with more info. (like a grid of ads/sponsors) at the bottom of a post…
Any suggestions?
Isaiah Hammons says
I want the same exact thing you’re talking about..
sean sewell says
I am desperately after the same thing! If you ever find out please let me know!
Michelle says
Just curious… I am sure you have already tried this, but on the media tab inside of wordpress have you clicked on the photo and under the information there is a spot to put a URL so someone can click on it. I know it is kind of hidden and not that intuitive, but that might work for you.
Cathrine says
My gallery still won’t post in multiple columns, any idea why that might be?
Vasilis says
That’s my problem also…
Anybody there?
Eileen says
Wow – the gallery button function is a hidden gem I didn’t know about! Thank you.