Hur man skapar kolumner i WordPress utan plugin

Hur man skapar kolumner i WordPress utan plugin

Att organisera innehåll i kolumner är en bit av kakan tack vare WordPress Columns-blocket. Detta block tillhör de kärnblock som kan användas i alla WP-teman. Columns-blocket kan ha upp till 6 kolumner. Du kan alltså ha 6 olika innehåll sida vid sida.

Idag visar vi dig hur du skapar kolumner i WordPress utan plugin - genom att använda Columns-blocket. Vi ger dig också en sammanfattning av de senaste funktionerna från WP 5.3-versionen uppdatering.

I denna handledning hittar du information om:

Vad är syftet med kolumner

Kolumner på en webbplats kan ha flera användningsområden. Först och främst kan de göra innehållet överskådligt, mer läsbart och lättare att bläddra i. Genom att organisera innehållet i kolumner kan du lyfta fram viktig information eller parametrar.

Du kan t.ex. använda en layout med flera kolumner för att presentera dina tjänster. Lägg till en illustrativ bild, beskrivning eller knapp. Du kan naturligtvis göra bilden klickbar.

Layout med flera kolumner och tjänster
Layout med flera kolumner och tjänster

På samma sätt som med tjänster kan du använda kolumner i WordPress för att visa produkter eller produktkategorier. Det är perfekt om du har en enkel företagswebbplats.

Layout med flera kolumner med produkter och kategorier
Kolumner som används för att visa produkter och kategorier

I blogginlägg kan du använda kolumner för att separera innehåll. Du kan placera text, punktlistor eller bilder sida vid sida.

Separerat innehåll med hjälp av kolumner
Använda kolumner för att separera innehåll

Hur kolumnerna brukade fungera i den gamla redaktören

Före WordPress 5+ var du tvungen att använda tabeller om du ville skapa innehåll med flera kolumner. Det var betydligt svårare än i den senaste editorn. Dessutom var det ofta problem med stilar och visning av tabeller på mobila enheter. Hur brukade det fungera?

Du har haft flera alternativ för hur du skapar kolumner på WordPress-webbplatsen:

1. Infoga HTML-kod manuellt i textredigeraren

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Detta tillvägagångssätt användes främst av utvecklare, som snabbt kunde skapa tabeller eller kolumner baserat på deras krav. Nackdelen var att inte alla WordPress-teman kunde hantera kolumner på ett bra sätt. Tabellerna var oftast inte perfekta och en genomsnittlig användare kunde inte enkelt lösa alla problem.

2. Tillåtande av tabeller i WordPress-redigeraren

Eftersom WordPress använder TinyMCE-redigeraren var det möjligt att tillåta funktioner för att redigera tabeller. Om du är intresserad av att lära dig mer kan du hitta alla detaljer i detta forum. Om du gör samma sak för våra AIT-teman kommer tabellerna att fungera korrekt.

3. Använda Columns-element i AIT-teman

Om du använder något av våra äldre WordPress-teman känner du säkert till vårt Columns-element. Det här elementet kan användas för att lägga till kolumner på sidor. Det är ett beställningsbart element, vilket innebär att du kan placera det var du än behöver det. Fördelen är att det är variabelt inuti sidor.

Kolumner element
Kolumner med beställningsbara element - du kan använda dem i alla AIT-teman

4. Ladda ner plugin från tredje part för att hantera tabeller

En annan lösning på hur man skapar kolumner i WordPress-inlägg och sidor var att ladda ner ett av de tillgängliga insticksprogrammen för att skapa tabeller. Dessa plugins gör det möjligt att lägga till kolumner/tabeller med några få klick utan någon kodning. Det var också möjligt att använda detta av mindre erfarna användare.

Så här skapar du kolumner i WordPress utan plugin (i blockredigeraren)

Tack vare den nya blockeditorn är det mycket enkelt att skapa kolumner. Om du fortfarande använder gamla WordPress är det nu dags att uppdatera till den senaste versionen. Du kommer att kunna lägga till och hantera kolumner enkelt, med några få klick med hjälp av Columns-blocket.

Det här blocket är en välkommen förändring för alla som vill arbeta med innehåll i flera kolumner, presentera produkter eller skriva blogg och inte har erfarenhet av programmering.

Låt oss ta en titt på hur du lägger till Columns-blocket och hur du skapar kolumner i WordPress utan plugin:

  • Första alternativet är att klicka på "+" i det övre fältet och välja Columns-block från tillgängliga block.
  • Det andra alternativet är att klicka på "+" var som helst i redigeraren.
Lägg till kolumner i WordPress genom att klicka på "+"
Lägga till kolumner i WordPress genom att klicka på "+"
Lägg till kolumnblock med snedstreck "/"
Lägga till kolumner i WordPress med hjälp av snedstreck "/"

Fördefinierade layouter för WordPress Columns-block (NYHET från WP 5.3)

Den senaste versionen innebar stora förbättringar i kolumninställningarna. Först och främst finns det standardlayoutstilar tillgängliga. Vad innebär detta?

Användarna kan välja layout och justeringsstil när de lägger till ett nytt block i innehållsområdet. Fördefinierade layouter kan vara till stor hjälp - särskilt för de användare som inte har avancerade kunskaper om WordPress. Den här funktionen representerar hur vi föreställer oss att man kan skapa kolumner i WordPress (utan plugin eller andra tillägg).

Fördefinierade layouter i kolumnblocket
Fördefinierade alternativ för layouter

 

Om du inte vill välja fördefinierad layout i WordPress Columns-blocket, hoppa bara över det. När du har hoppat över det här steget kommer innehållet att delas upp i två likadana delar/ två individuella kolumner som kan redigeras.

Skapat kolumnblock
Kolumnblock med 2 standardområden (kolumner) som du kan redigera

Grundläggande inställningar för Columns Block

WordPress Columns-blocket i sig har inte många alternativ. Varför det är så kommer vi att förklara senare. I det övre fältet kan du ändra inriktningen till bred eller full bredd. Du kan ändra denna inriktning om det stöds av ditt aktiva tema.

Översta verktygsfältet i kolumnblocket
Översta verktygsfältet med justeringsalternativ

Den viktigaste inställningen för Columns-blocket är antalet kolumner i inspektörens sidofält på höger sida. Som standard finns det 2 kolumner, men du kan öka antalet till 6. Du kan ändra det med hjälp av musen eller ange ett nummer. Hur det ser ut kommer du att se direkt efter att du har ökat eller minskat kolumnerna. Blocket ändrar sig dynamiskt beroende på skjutreglaget.

Ändra antalet kolumner
Flytta med skjutreglaget för att ändra antalet kolumner efter behov

Det är mycket praktiskt eftersom du ändrar antalet kolumner bokstavligen på några sekunder utan några svåra ändringar av inställningar eller kodning.

På samma sätt som andra block i WordPress-redigeraren kan du infoga anpassad CSS-klass även i Columns-blocket.

Blockappender för smidigare arbete med block

Columns-blocket är speciellt eftersom du kan skapa flera block med det. Fram till att den nya versionen släpptes var det ganska svårt att arbeta med enskilda block. När du ville lägga till något block visste du inte exakt var du skulle klicka. Tack vare Block appender (och dess differentiering genom bakgrundsfärg) är det lättare att infoga innehåll i rätt kolumn.

Blockera appender i WordPress Kolumnblock
Blockera appender med bakgrundsfärg

Så här arbetar du med WordPress Columns Block

Det fina med Columns-blocket är att varje kolumn kan hysa andra block. Det kan vara stycke, bildblock eller knappblock. Maximalt antal kolumner är 6, du kan därför skapa innehåll med flera kolumner efter behov. Som tidigare nämnts kan du lägga till produktbild, namn, pris och knapp sida vid sida för att presentera produkter.

Olika typer av innehåll i en layout med flera kolumner
Med blocket Columns kan du presentera olika typer av innehåll sida vid sida

Du kan också använda flera kolumnblock under varandra för att skapa ett rutnät. Du kan använda det för att presentera dina tjänster eller marknadsföra viktiga funktioner.

Kolumnblockets rutnätseffekt
Rutnätseffekt av kolumnblock placerade under varandra

Redigera nästlade block

Som vi redan nämnt kan du kapsla in andra block i kolumner. Varje nästlat block har alla sina inställningar tillgängliga. Det innebär att om du lägger till ett bildblock i en kolumn kan du redigera det på exakt samma sätt som i ett fristående block Bildblock.

Redigera bildblock som ett nästlat block
Tillgängliga inställningar för Image-block som är inbäddat i Columns-block

Slutsats: Fördelar med kolumnblock

När WordPress blockredigerare släpptes och det blev möjligt att använda kolumner på sidor och i inlägg förenklades användarnas sätt att arbeta med innehåll avsevärt. Tack vare WordPress Columns-blocket är det inte längre viktigt att använda tredjepartslösningar eller skriva HTML-kod. Att lägga till eller ta bort kolumner är möjligt med några få klick. Allt är mycket intuitivt och snabbt även för mindre tekniskt kunniga användare.

Ditt innehåll i en layout med flera kolumner kommer att vara snyggt anpassat till rutnätet. Det kommer också att se bra ut i den responsiva versionen direkt.

Vi har arbetat hårt med det nya WordPress-temat Citadela, som är speciellt utvecklat för WordPress blockredigerare. Läs mer om temat Citadela och tillgängliga layoutpaket.

2 svar på ”How to make columns in WordPress without plugin

    1. Hej, David,

      tack för att du skrev in. Du bör aktivera Gutenberg-redigeraren som erbjuder möjligheten att välja den enskilda kolumnen, i sidofältet Inställningar (höger sida) kan du justera dess bredd.

      Bästa hälsningar!
      Zlatko
      AIT-team

Kommentarer är stängda.