Innehållsförteckning
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
- Hur kolumnerna brukade fungera i den gamla redaktören
- Så här skapar du kolumner i WordPress utan plugin (i blockredigeraren)
- Inställningar för Basic Columns-blocket
- Så här arbetar du med WordPress Columns-block
- Hur man redigerar nästlade block
- Fördelar med kolumnblock
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.
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.
I blogginlägg kan du använda kolumner för att separera innehåll. Du kan placera text, punktlistor eller bilder sida vid sida.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
Hur kan jag ändra bredden på kolumnerna?
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