Att skapa layouter med flera kolumner brukade kräva HTML-kunskaper eller en utvecklares hjälp, men inte längre. ✨
Genom vår testning av WordPress innehållsredigeringsfunktioner har vi hittat ett användarvänligt sätt att dela upp ditt innehåll i kolumner utan att röra någon kod.
Dessa layouter kan göra dina inlägg lättare att läsa och mer visuellt tilltalande, särskilt när du jämför funktioner, listar för- och nackdelar eller organiserar stora textmängder.
I den här guiden delar vi med oss av de enklaste metoderna vi har upptäckt för att lägga till innehåll i flera kolumner i dina WordPress-inlägg.
💡Snabbt svar: Hur man lägger till innehåll i flera kolumner i WordPress
Här är en snabb översikt över metoderna vi kommer att gå igenom för att lägga till kolumner i dina WordPress-inlägg och sidor.
- Använda blockredigeraren: Den enklaste metoden är att använda det inbyggda blocket 'Kolumner' för att skapa layouter utan några plugins.
- Använda klassiska redigeraren: För användare som fortfarande använder den äldre redigeraren visar vi hur du använder pluginet Column Shortcodes för att lägga till en rutnätslayout.
Varför lägga till innehåll i flera kolumner i WordPress?
Huvudanledningen till att lägga till innehåll i flera kolumner är att göra dina inlägg mer lättskannade och visuellt organiserade, vilket hjälper till att hålla läsarna engagerade.
Medan layouter med en kolumn är vanliga online, är rutnätslayouter ett kraftfullt verktyg för att förbättra användarupplevelsen. Här är de viktigaste fördelarna med att använda en layout med flera kolumner i WordPress:
- Förbättrar läsbarheten: Precis som tidningar och magasin, bryter kolumner upp långa textrader, vilket gör ditt innehåll lättare för besökare att läsa och snabbt skanna.
- Bättre organisation: De är perfekta för att organisera information sida vid sida. Detta är idealiskt för produktjämförelser, listor med för- och nackdelar, eller för att visa bilder bredvid textbeskrivningar.
- Lyfter fram viktig information: Du kan använda en kolumnlayout för att rikta läsarens uppmärksamhet mot de viktigaste delarna av din artikel.
- Ökar engagemanget: Genom att göra ditt innehåll lättare att ta till sig skapar du en bättre användarupplevelse. Detta kan uppmuntra besökare att spendera mer tid på din webbplats.
Med det sagt, låt oss se hur du kan lägga till innehåll i flera kolumner i block- och klassiska redigeraren. Du kan helt enkelt klicka på länkarna nedan för att hoppa till den metod du vill använda:
- Lägga till innehåll i flera kolumner i WordPress Block Editor – Det enkla sättet
- Lägga till flera kolumner i den gamla WordPress klassiska redigeraren
- Vanliga frågor om att lägga till innehåll i flera kolumner i WordPress
Lägga till innehåll i flera kolumner i WordPress Block Editor – Det enkla sättet
Att skapa innehåll i flera kolumner, även känt som rutnätskolumninnehåll i WordPress, är nu enkelt eftersom det är en standardfunktion. WordPress blockredigerare inkluderar ett Kolumnblock.
För att lägga till en layout med flera kolumner behöver du skapa ett nytt inlägg eller redigera ett befintligt. När du är i innehållseditor klickar du på ikonen '+' högst upp för att lägga till ett block.
Därefter behöver du välja Columns-blocket under fliken 'Design'.
Därefter behöver du välja antal kolumner och layouter som du vill använda för dina blogginlägg.
WordPress kommer att visa dig olika alternativ att välja mellan. Du kan till exempel välja en 50/50 kolumnlayout, använda en 33/66 layout och mer.
Efter att ha valt en layout kan du lägga till block i dina kolumner. Kolumnblocket låter dig lägga till block inuti varje kolumn.
Du kan till exempel välja Paragraph-blocket och lägga till innehåll i det.
Du kommer också att kunna se blockinställningarna i den högra kolumnen på inläggsredigeringsskärmen i inställningspanelen. Här kan du redigera bredden på kolumnerna.
Förutom text kan du även lägga till bilder och bädda in videor i WordPress-kolumner.
Håll bara musen över en av kolumnerna och klicka på '+' -knappen för att lägga till ett block. Du kan också lägga till ett block genom att skriva '/' och sedan blocknamnet.
Till exempel lade vi till en bild i en kolumn och lite text i den andra kolumnen.
Lägga till flera kolumner i den gamla WordPress klassiska redigeraren
Om du inte har uppgraderat din WordPress till Gutenberg och fortfarande använder klassisk redigerare, måste du installera ett separat plugin för att skapa en rutnätskolumnlayout.
Installera och aktivera först pluginet Column Shortcodes. För detaljerade instruktioner, följ vår steg-för-steg-guide om hur man installerar ett plugin i WordPress.
📌 Ansvarsfriskrivning: Tänk på att pluginet inte har testats med den senaste versionen av WordPress. När vi testade det på vår demosida fungerade det dock bra. Om du fortfarande är osäker, se vår nybörjarguide om användning av föråldrade plugins.
Efter aktivering kan du skapa ett nytt inlägg eller redigera ett gammalt. När du är i den klassiska redigeraren, klicka helt enkelt på knappen '[ ]' i verktygsfältet.
Pluginet kommer nu att visa en lista över kolumn-kortkoder för ditt blogginlägg.
Du kan välja vilken layout du vill lägga till i din WordPress-blogg. Det finns också alternativ för att redigera kolumnutfyllnaden.
När du har valt en kortkod kommer den automatiskt att visas i den klassiska redigeraren. Till exempel valde vi kortkoden 'en halv' för den här handledningen.
Du kan sedan ange ditt innehåll mellan kortkoderna.
Därefter kan du klicka på kortkodikonen '[ ]' igen för att lägga till en annan kolumnkortkod.
Låt oss lägga till kortkoden 'en halv (sista)' för att visa två kolumner bredvid varandra. Härifrån behöver du bara lägga till ditt innehåll i den andra kolumnen.
Efter det kan du förhandsgranska ditt inlägg och publicera det.
Så här såg det ut på vår testsida.
Vanliga frågor om att lägga till innehåll i flera kolumner i WordPress
Här är några frågor som våra läsare ofta har ställt om att lägga till innehåll i flera kolumner på sina webbplatser:
Hur ser WordPress-kolumner ut på mobila enheter?
WordPress hanterar detta automatiskt åt dig. På mindre skärmar som mobiltelefoner staplas kolumnerna vertikalt ovanpå varandra.
Denna responsiva design säkerställer att ditt innehåll alltid är läsbart och användarvänligt, oavsett enhet.
Kan jag justera bredden på enskilda WordPress-kolumnblock?
Ja. För att justera bredden, klicka för att välja ett enskilt kolumnblock (inte den överordnade 'Kolumner'-behållaren). I sidofältet för blockinställningar till höger kan du ange ett breddvärde.
Du kan använda procent (%), pixlar (px) och andra webbenheter för exakt kontroll.
Vad händer om jag behöver mer avancerade layoutalternativ?
Standardkolumnblocket är utmärkt för de flesta enkla layouter. Men om du behöver mer avancerad kontroll över avstånd, justering, responsiva inställningar, eller vill skapa mer komplexa rutnätsdesigner, då är ett sidbyggarplugin den bästa lösningen.
Vi rekommenderar att använda ett verktyg som SeedProd för fullständig dra-och-släpp designfrihet.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till innehåll i flera kolumner i WordPress-inlägg och sidor. Du kanske också vill se vår enkla guide om hur man lägger till en checklista för blogginlägg i WordPress-redigeraren och vår handledning om hur man lägger till innehållsmallar i WordPress.
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
Bra, äntligen vet jag hur man gör det i Gutenberg också. Det var faktiskt därför jag bytte till Elementor eftersom jag tyckte att Gutenberg inte var särskilt intuitivt. Kanske var jag bara för lat för att lära mig det. Men i Elementor förstod jag och hittade den här funktionen direkt. Nu vet jag hur jag ska hantera Gutenberg också :). Tack!
Ralph
Tack! Det var verkligen enkelt med din guide. Att använda 3 kolumner kommer definitivt att få en del av mitt innehåll att se bättre ut än en tråkig textvägg.
WPBeginner Support
Kul att vår guide kunde hjälpa!
Admin
Nishant Kumar
Verkligen mycket användbart. Jag vet inte hur man lägger till en kolumnsektion i WordPress-bloggen. Nu förstår jag.
WPBeginner Support
Glad our guide could help
Admin
Matt
Hej – tack för det här inlägget, verkligen hjälpsamt. En snabb fråga – tilldelas texten automatiskt till var och en av (två) kolumner för att säkerställa att kolumnerna har samma höjd på sidan, eller är det något du måste testa/hantera vid inmatning av text?
WPBeginner Support
Du skulle behöva säkerställa manuellt att ditt innehåll har samma eller liknande längd om du ville ha det.
Admin
Sir Newton
Snälla, hur kan jag få min e-handelswebbplats att visa en produktvy i två kolumner på mobilen.
Tack
WPBeginner Support
Du bör kontrollera med supporten för ditt tema eller den e-handelsplugin du använder för att ändra stilen på din butikssida.
Admin
Stuart
Hej – Jag behöver 11 kolumner. Finns det ett sätt att överskrida vad jag räknar som max (10)?
WPBeginner Support
Vi har för närvarande ingen rekommenderad metod för att gå upp till 11 kolumner. Beroende på vad du vill visa kanske du vill titta på att skapa en tabell istället för kolumner.
Admin
Caite Adamek
Finns det ett sätt att automatiskt överföra kolumnerna? När jag ställde in mina 2 kolumner, placerade jag bilderna i den första kolumnen, sedan texten i den andra. Jag märkte att mobilversionen inte kan visa de 2 kolumnerna bredvid varandra, så bilderna visas först, sedan texten. Jag skulle vilja att texten visas först, sedan bilderna. Måste jag skriva om allt, eller finns det ett smart sätt att byta innehållet i de 2 kolumnerna?
WPBeginner Support
Inte för tillfället, du kan skapa ett 2-kolumners område under där du har det för närvarande och placera innehållet hur du vill där och sedan ta bort originalet.
Admin
Kimberly Kelley
När du använder flerkolumnslayouten (2) överlappar videorna varandra. Finns det något sätt att justera maximal bredd på videorna eftersom det enda sättet jag verkar kunna lägga till dem är via URL, inte inbäddad kod.
WPBeginner Support
Du kanske vill kontrollera om videorna överlappar när de inte visas i redigeraren, annars kan du titta i avsnittet för avancerad CSS och ställa in bredden med den selektorn: https://www.wpbeginner.com/glossary/css/
Admin
Nicole
Finns det något sätt att vertikalt centrera saker i en kolumn med nya block/Gutenberg-redigeraren? Som att jag skulle vilja ha en vertikalt centrerad bild till vänster och text till höger. Så säg 30 rader text och en bildhöjd på 200 px – finns det ett enklare sätt än att manuellt infoga och storleksanpassa avståndsblock?
WPBeginner Support
För det du verkar vilja ha, kanske du vill använda blocket media och text istället för columns-blocket.
Admin
Rob Tait
Hej
Hur skriver jag i 1 kolumn och sedan 2 kolumner för nästa stycke och sedan tillbaka till 1 kolumn för det tredje stycket?
All hjälp uppskattas mycket?
Tack
Rob
Ashish
Varför kan vi inte bara använda Elementor eller någon liknande sidbyggarplugin? Det är mycket enklare att använda med så många ytterligare funktioner.
dimiter kirov
Detta plugin har inte uppdaterats på 3 år och dessutom fungerar det inte med Gutenberg-pluginet
Jenny
Hej,
Jag försökte lägga till kolumner på en av mina sidor och knappen Avancerad kolumn dök inte upp. Jag kontrollerade mina plugins och det stod att det var installerat. Vet du vad problemet kan vara?
Tack!
Jenny
Rob Tait
Du behöver installera en avancerad visuell redigerare som TIny MCE för att se knappen. Den visas inte i standardinställningen för den visuella redigeraren. Jag hade precis samma problem men den visas nu efter att ha installerat ovanstående som är gratis.
Hoppas det hjälper
Rob
Dennis
Bra. Precis vad jag letade efter och äntligen någon som kan förklara allt steg för steg.
Heather
Jag installerade pluginet och aktiverade det. Det visas som "aktiverat". Ändå finns det ingen knapp. Hur felsöker jag detta? Jag vet redan hur man installerar ett plugin, så den lösningen är inte tillämplig.
Kirk
Installerade pluginet med ett grundläggande gratis tema, och kolumnknappen dök aldrig upp i min sidredigerare. Jag vet att du inte är skaparen av pluginet, ville bara dela med mig av vår erfarenhet
om zho
vid inklistring från textredigering är textavståndet konstigt eftersom det inte finns något "ren formatering" -val för avancerade WP-kolumner.. hur kan du fixa det?
Martine S.
Hej, det här låter bra! Men hur kommer det att se ut på telefoner? Jag använder ett liknande plugin för att ha två kolumner, en för norska och en för engelska. Men när folk läser min blogg via telefon kommer den andra kolumnen direkt efter den första kolumnen så det ser ut som en fullständig text – på två olika språk!
Joe Nelo
Vilket plugin använder du för att visa två kolumner med text? Jag försöker göra samma sak för engelska och esperanto.
Elizabeth
Hur aktiverar man pluginet??
WPBeginner Support
Hej Elizabeth,
Se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Admin
PB
Finns det ett sätt att säkerställa att texten i dessa kolumner visas som en lista, dvs. med hårda radbrytningar mellan objekten snarare än som ett enda block av löpande text?
Tack så mycket på förhand för dina råd
Steve Elliott
Finns det ett sätt att ge dessa kolumner en bakgrundsfärg?
Bhagyashree barlingay
Jag kan inte kopiera/klistra in material som jag redan har skrivit, i dessa kolumner.
Naveed
Jag använder wordpress version 4.5, men det här pluginet är inte kompatibelt med mitt tema. Kan jag använda det här pluginet för mitt tema??
ik
Kan du lägga till bilder i varje kolumn? Eller kan du lägga till handlingsknappar i varje kolumn?
WPBeginner Support
Ja.
Admin
Kate
Kolumner fungerar men när jag försöker bädda in VIDEO i kolumner visas bara texten från koden...
Daniel Speraw
Det ser bra ut när kolumner läggs till inlägget, men när jag tittar på det publicerat har det återgått till 1 centrerad kolumn. Jag har provat det flera gånger och i två webbläsare. Några tankar?
Det här är överlägset det enklaste pluginet. Jag VILL verklIGEN använda det.
Tack så mycket,
Daniel
Meshellklip
Kan du lägga till bilder i varje kolumn? Eller kan du lägga till åtgärdsknappar i varje kolumn?
Sri Harsha Chilakapati
Hej,
Min webbplats använder det responsiva temat Customizr, och jag vill inte förlora den responsiviteten. Kan jag lägga till responsiva kolumner med detta plugin?
Chris Xphstos
Ηι!
Finns det ett sätt att presentera en layout med kolumner men inte ett inlägg med 2-3-4 kolumner etc.?
Varje kolumn inom en sida kommer att vara ett separat inlägg. Något liknande Joomlas blogg-layout...
WPBeginner Support
För det skulle du vilja titta på ett WordPress-tema med flera kolumner, det finns gott om sådana teman.
Admin
Karen
Tack! Jag har velat lära mig hur man gör detta ett tag nu – allt är bra nu! xx
Debra Torres
Detta är precis vad jag behövde! Har försökt använda tabeller för kolumner och blivit så frustrerad. Tack, tack, tack!
Mark Corder
Jag måste säga – om du behöver använda flera kolumner regelbundet, ser detta ut som en utmärkt lösning även om du KAN HTML/CSS! Älskar att de inkluderade en brytpunkt i alternativen för att anpassa sig till responsiva designer...