så här justerar du bilder sida vid sida i WordPress

Bildjustering är en ständig kamp för WordPress-bloggaren.

det här inlägget är för alla som har spenderat mer tid än de skulle bry sig om att erkänna fiddling med bildjustering och positionering i redigeraren.

de två bästa metoderna för att justera bilder

det finns två tekniker du bör tänka på för att placera bilder bredvid varandra. Jag ska dela hur man använder var och en samt för-och nackdelar ingår.

justera bilder med ett galleri

den mest tillförlitliga metoden för att placera bilder sida vid sida är att använda ett WordPress-galleri.

om du aldrig har skapat ett galleri tidigare, följ denna handledning om hur du skapar gallerier.

tricket är att använda en medelstor version av bilderna och välja två kolumner, även om du bara inkluderar två bilder. Resultatet kommer att se ut så här:

 skärmdump av ett exempel galleri

skärmdump av ett exempel galleri

till skillnad från bilder som du placerar i ditt inlägg har gallerier speciell HTML som håller bilderna bredvid varandra. Denna struktur gör det enklare och mindre krångel att anpassa bilderna i rader/kolumner.

placera bilder med kolumn kortkoder

om du inte har något emot att lägga till en ny plugin till din webbplats, kolumn kortkoder är en bra lösning för att anpassa bilder.

skärmdump av kolumn kortkoder plugin sida

kolumn kortkoder är en av de enorma plugins som inte fyller upp din webbplats med nya menyer. Faktum är att det enda som läggs till i din administratörspanel är den här praktiska knappen ovanför redigeraren.

 knappen läggs av kolumn kortkoder

knappen läggs av kolumn kortkoder

för att visa hur det fungerar, Jag ska skapa en enda rad av tre bilder.

hur man använder kolumn kortkoder

det första steget är att placera markören på en tom rad i redigeraren. Klicka sedan på kortkodsknappen och välj ett kolumnalternativ.

visar hur man lägger till en kolumn kortkod
skapa en rad med tre kolumner.

upprepa detta steg för att lägga till en andra kolumn 1/3 och upprepa sedan en gång till men den här gången med alternativet en tredjedel (sista). Resultatet är följande kortkoder som läggs till i redigeraren.

 kortkoder i redigeraren

kortkoder i redigeraren

om du aldrig har använt kortkoder tidigare kanske du vill följa denna handledning först.

som du kan se har varje kortkod en öppnings-och stängningstagg. Nu kan du lägga in en bild i varje kortkod, så här:

bilder i kortkoder i redigeraren

bilder i kortkoder i redigeraren

ser ut som en röra, eller hur?

det beror på att kortkoderna inte kan utforma bilderna i redigeraren, men det är inte ett problem. När du visar dem på webbplatsen, de kommer att anpassa prydligt i kolumner, så här:

 exempel på bilder placerade i kolumner

exempel på bilder placerade i kolumner

Kolumnkortkoder jämfört med gallerier

medan kortkoderna inte visas snyggt i redigeraren som gallerier och kan vara mer av en utmaning att arbeta med, får du också lite mer kontroll. Till exempel, gallerier tvinga alla bilder att länka till:

  • mediafil
  • bifogad sida
  • ingenting

med plugin-programmet kolumner kan Bilder ha anpassade webbadresser och varje länk till en annan typ av sida.

du kan också mixa och matcha kolumnerna. Till exempel kan du placera en bild i en 2/3 kortkod bredvid en bild med en 1/3 kolumn kortkod.

varför ska du inte använda justeringsalternativ

dessa metoder kommer att producera de layouter du vill ha utan alla huvudvärk.

WordPress-gallerier är det enklaste och enklaste sättet att anpassa bilder i rad. Kolumn kortkoder är dock ett bra alternativ som ger mer flexibilitet.

de båda fungerar så bra eftersom de placerar bilder i en ny HTML-struktur. HTML gör det möjligt att upprätthålla en sida vid sida layout, oavsett vilken skärm som används för att visa dem.

är det något jag missat? Har du några frågor? Skriv en kommentar nedan.

Ben Sibley
Ben Sibley
Ben Sibley är en WordPress tema designer & utvecklare, och grundare av konkurrera teman.

Leave a Reply