Sådan laver du kolonner i WordPress uden plugin

Sådan laver du kolonner i WordPress uden plugin

Organisering af indhold i kolonner er en smal sag takket være WordPress Columns-blokken. Denne blok hører til de kerneblokke, der kan bruges i alle WP-temaer. Columns-blokken kan have op til 6 kolonner. Så du kan altså have 6 forskellige indhold side om side. I dag skal vi...

I dag vil vi vise dig, hvordan du laver kolonner i WordPress uden plugin - ved at bruge Columns-blokken. Vi giver dig også en oversigt over Nyeste funktioner fra WP 5.3-versionen opdatering.

I denne vejledning finder du information om:

Hvad er formålet med kolonner?

Kolonner på en hjemmeside kan bruges på flere måder. Først og fremmest kan de gøre indholdet overskueligt, mere læsbart og lettere at gennemse. Ved at organisere indhold i kolonner kan du fremhæve vigtige oplysninger eller parametre.

Du kan f.eks. bruge et layout med flere kolonner til at præsentere dine tjenester. Tilføj et illustrativt billede, en beskrivelse eller en knap. Du kan selvfølgelig gøre billedet klikbart.

Layout med flere kolonner og tjenester
Layout med flere kolonner og tjenester

På samme måde som med tjenester kan du bruge kolonner i WordPress til at vise produkter eller produktkategorier. Det er ideelt, hvis du har et simpelt forretningswebsted.

Layout med flere kolonner med produkter og kategorier
Kolonner, der bruges til at vise produkter og kategorier

I blogindlæg kan du bruge kolonner til at adskille indhold. Du kan placere tekst, punktopstillinger eller billeder side om side.

Adskilt indhold ved hjælp af kolonner
Brug kolonner til at adskille indhold

Sådan plejede kolonner at fungere i den gamle editor

Før WordPress 5+ var man nødt til at bruge tabeller, hvis man ville lave indhold i flere kolonner. Det var langt sværere end i den nyeste editor. Desuden var der som regel problemer med stilarter og visning af tabeller på mobile enheder. Hvordan plejede det at fungere?

Du har haft flere muligheder for at oprette kolonner på et WordPress-websted:

1. Indsæt manuelt HTML-kode i teksteditoren

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

Denne tilgang blev primært brugt af udviklere, som hurtigt kunne oprette tabeller eller kolonner baseret på deres behov. Ulempen var, at ikke alle WordPress-temaer kunne håndtere kolonner godt. Tabellerne var normalt ikke perfekte, og den gennemsnitlige bruger kunne ikke nemt løse alle mulige problemer.

2. Tillad tabeller i WordPress-editoren

Fordi WordPress brugte TinyMCE-editoren, var det muligt at give funktioner mulighed for at redigere tabeller. Hvis du er interesseret i at vide mere, kan du finde alle detaljerne i dette forum. Hvis du gør det samme med vores AIT-temaer, vil tabellerne fungere korrekt.

3. Brug af Columns-elementet i AIT-temaer

Hvis du bruger et af vores ældre WordPress-temaer, kender du helt sikkert vores Columns-element. Dette element kan bruges til at tilføje kolonner på sider. Det er et bestillingselement, hvilket betyder, at du kan placere det, hvor du har brug for det. Fordelen er, at det er variabelt inde på siderne.

Elementet Kolonner
Bestilbare elementkolonner - du kan bruge det i ethvert AIT-tema

4. Download tredjeparts plugin til at styre tabeller

En anden løsning på, hvordan man laver kolonner i WordPress-indlæg og -sider, var at downloade et af de tilgængelige plugins til oprettelse af tabeller. Disse plugins gør det muligt at tilføje kolonner/tabeller med få klik uden nogen form for kodning. Det var også muligt for mindre erfarne brugere at bruge dette.

Sådan laver du kolonner i WordPress uden plugin (i blokeditoren)

Takket være den nye blokeditor er det blevet ekstremt nemt at oprette kolonner. Hvis du stadig bruger gammel WordPress, er det nu det rigtige tidspunkt at opdatere til den nyeste version. Du vil kunne tilføje og administrere kolonner med få klik ved hjælp af Columns-blokken.

Denne blok er en velkommen ændring for alle, der ønsker at arbejde med indhold i flere kolonner, præsentere produkter eller skrive en blog, og som ikke har erfaring med programmering.

Lad os se på, hvordan du tilføjer Columns-blokken, og hvordan du opretter kolonner i WordPress uden plugin:

  • Den første mulighed er at klikke på "+" i den øverste bjælke og vælge Columns-blokken blandt de tilgængelige blokke.
  • Den anden mulighed er at klikke på "+" hvor som helst i editoren.
Tilføj kolonner i WordPress ved at klikke på "+"
Tilføjelse af kolonner i WordPress ved at klikke på "+"
Tilføj kolonneblok med skråstreg "/"
Tilføjelse af kolonner i WordPress ved hjælp af skråstreg "/"

Foruddefinerede layouts af WordPress Columns-blokken (NYT fra WP 5.3)

Den seneste version bragte store forbedringer i kolonneindstillingerne. Først og fremmest er der standardlayoutstile til rådighed. Hvad betyder det?

Brugerne kan vælge deres layout og justeringsstil i processen med at tilføje en ny blok til indholdsområdet. Foruddefinerede layouts kan være meget nyttige - især for de brugere, der ikke har avancerede WordPress-færdigheder. Denne funktion repræsenterer, hvordan vi forestiller os, at man kan lave kolonner i WordPress (uden plugin eller andre tilføjelser).

Foruddefinerede layouts i Columns-blokken
Indstillinger for prædefinerede layouts

 

Hvis du ikke ønsker at vælge et foruddefineret layout i WordPress Columns-blokken, skal du bare springe det over. Når du har sprunget dette trin over, vil indholdet blive opdelt i to ens dele/to individuelle kolonner, som kan redigeres.

Oprettet kolonneblok
Kolonneblok med 2 standardområder (kolonner), som du kan redigere

Grundlæggende indstillinger for Columns Block

Selve WordPress Columns-blokken har ikke mange muligheder. Hvorfor det er sådan, vil vi forklare senere. I den øverste bjælke kan du ændre justeringen til bred eller fuld bredde. Du kan ændre denne justering, hvis den understøttes af dit aktive tema.

Øverste værktøjslinje i Columns-blokken
Øverste værktøjslinje med justeringsmuligheder

Den vigtigste indstilling i Columns-blokken er antallet af kolonner i inspektørens sidebjælke i højre side. Som standard er der 2 kolonner, men du kan øge antallet til 6. Du kan ændre det med musen eller ved at indtaste et tal. Hvordan det ser ud, kan du se med det samme, når du har øget eller reduceret antallet af kolonner. Blokken ændrer sig dynamisk afhængigt af skyderen.

Ændring af antal kolonner
Flyt med skyderen for at ændre antallet af kolonner efter behov

Det er meget praktisk, fordi du kan ændre antallet af kolonner bogstaveligt talt på få sekunder uden at skulle ændre indstillinger eller kodning.

På samme måde som med andre blokke i WordPress-editoren kan du også indsætte en brugerdefineret CSS-klasse i Columns-blokken.

Blok-appender til nemmere arbejde med blokke

Columns-blokken er speciel, fordi du kan oprette flere blokke med den. Indtil den nye version blev udgivet, var det ret svært at arbejde med individuelle blokke. Når man ville tilføje en blok, vidste man ikke præcis, hvor man skulle klikke. Takket være Block appender (og dens differentiering efter baggrundsfarve) er det nemmere at indsætte indhold i den rigtige kolonne.

Bloker appender i WordPress Columns-blok
Bloker appender med baggrundsfarve

Sådan arbejder du med WordPress Columns Block

Det smukke ved Columns-blokken er, at hver kolonne kan indlejre andre blokke. Det kan være afsnit, billedblokke eller knapblokke. Det maksimale antal kolonner er 6, og du kan derfor skabe indhold med flere kolonner, som du har brug for. Som tidligere nævnt kan du tilføje produktbillede, navn, pris og knap side om side for at præsentere produkter.

Forskellige typer indhold i multikolonnelayout
Med Columns-blokken kan du præsentere forskellige typer indhold side om side

Du kan også bruge flere kolonneblokke under hinanden til at skabe et gitter. Du kan bruge det til at præsentere dine tjenester eller promovere vigtige funktioner.

Kolonneblokkens gittereffekt
Gittereffekt af Columns-blokke placeret under hinanden

Redigering af indlejrede blokke

Som vi allerede har nævnt, kan du indlejre andre blokke i kolonner. Hver indlejret blok har alle sine indstillinger tilgængelige. Det betyder, at hvis du tilføjer en billedblok i en kolonne, kan du redigere den på nøjagtig samme måde som i en selvstændig blok. Billedblok.

Redigering af billedblok som en indlejret blok
Tilgængelige indstillinger for Image-blok indlejret i Columns-blok

Konklusion: Fordele ved kolonneblokke

Frigivelsen af WordPress-blokeditoren og muligheden for at bruge kolonner på sider og i indlæg har forenklet den måde, brugerne kan arbejde med indhold på, betydeligt. Takket være WordPress Columns-blokken er det ikke længere vigtigt at bruge tredjepartsløsninger eller skrive HTML-kode. Det er muligt at tilføje eller slette kolonner med få klik. Alt er meget intuitivt og hurtigt, også for mindre tekniske brugere.

Dit indhold i et layout med flere kolonner vil blive pænt justeret i gitteret. Det vil også se godt ud i en responsiv version med det samme.

Vi har arbejdet hårdt på det nye Citadela WordPress-tema, som er specielt udviklet til WordPress' blokeditor. Få mere at vide om Citadela-temaet og de tilgængelige layoutpakker.

2 tænkte på "How to make columns in WordPress without plugin"

    1. Hej David,

      Tak fordi du skrev ind. Du skal aktivere Gutenberg-editoren, der giver mulighed for at vælge den enkelte kolonne, i sidebjælken Indstillinger (højre side) kan du justere dens bredde.

      Med venlig hilsen!
      Zlatko
      AIT-team

Kommentarer er lukket.