Hvordan lage kolonner i WordPress uten plugin

Hvordan lage kolonner i WordPress uten plugin

Organisering av innhold i kolonner er et stykke kake takket være WordPress Columns-blokken. Denne blokken tilhører kjerneblokkene som kan brukes i alle WP-temaer. Columns-blokken kan ha opptil 6 kolonner. Du kan derfor ha 6 forskjellige innhold side om side.

I dag vil vi vise deg hvordan du lager kolonner i WordPress uten plugin - ved å bruke Columns-blokken. Vi gir deg også et sammendrag av nyeste funksjoner fra WP 5.3-versjonen oppdatering.

I denne veiledningen finner du informasjon om:

Hva er hensikten med kolonnene

Kolonner på nettstedet kan ha flere bruksområder. Først og fremst kan de gjøre innholdet mer oversiktlig, mer lesbart og lettere å navigere i. Ved å organisere innholdet i kolonner kan du fremheve viktig informasjon eller parametere.

Du kan for eksempel bruke flerkolonneoppsett for å presentere tjenestene dine. Legg til illustrasjonsbilder, beskrivelser eller knapper. Du kan selvfølgelig gjøre bildet klikkbart.

Flerspalteoppsett med tjenester
Flerkolonneoppsett med tjenester

På samme måte som for tjenester kan du bruke kolonner i WordPress til å vise produkter eller produktkategorier. Det er ideelt hvis du har et enkelt bedriftsnettsted.

Flerspalteoppsett med produkter og kategorier
Kolonner som brukes til å vise produkter og kategorier

I blogginnlegg kan du bruke kolonner til å skille innhold fra hverandre. Du kan plassere tekst, kulepunkter eller bilder side om side.

Separert innhold ved hjelp av kolonner
Bruke kolonner for å skille innhold

Slik fungerte kolonnene i den gamle editoren

Før WordPress 5+ måtte du bruke tabeller hvis du ville lage innhold med flere kolonner. Det var mye vanskeligere enn i den nyeste editoren. I tillegg var det vanligvis problemer med stiler og visning av tabeller på mobile enheter. Hvordan det pleide å fungere?

Du har hatt flere alternativer for hvordan du oppretter kolonner på WordPress-nettstedet:

1. Sett inn HTML-kode manuelt i tekstredigeringsprogrammet

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

Denne tilnærmingen ble hovedsakelig brukt av utviklere, som raskt kunne opprette tabeller eller kolonner basert på egne behov. Ulempen var at ikke alle WordPress-temaer kunne håndtere kolonner på en god måte. Tabellene var vanligvis ikke perfekte, og den gjennomsnittlige brukeren kunne ikke enkelt løse alle mulige problemer.

2. Tillate tabeller i WordPress-redigeringsprogrammet

Fordi WordPress brukte TinyMCE-editor, var det mulig å tillate funksjoner for å redigere tabeller. Hvis du er interessert i å lære mer, kan du finne alle detaljer i dette forumet. Hvis du gjør det samme for AIT-temaene våre, vil tabellene fungere korrekt.

3. Bruke Columns-elementet i AIT-temaer

Hvis du bruker et av våre eldre WordPress-temaer, kjenner du sikkert til Columns-elementet vårt. Dette elementet kan brukes til å legge til kolonner på sider. Det er et bestillbart element, noe som betyr at du kan plassere det hvor som helst du trenger det. Fordelen er at det er variabelt inne på sidene.

Elementet Kolonner
Bestillbare elementkolonner - du kan bruke det i alle AIT-temaer

4. Last ned tredjeparts plugin for å administrere tabeller

En annen løsning på hvordan du lager kolonner i WordPress-innlegg og -sider var å laste ned en av de tilgjengelige pluginene for å lage tabeller. Disse pluginene gjør det mulig å legge til kolonner/tabeller ved hjelp av noen få klikk uten koding. Det var også mulig å bruke dette av mindre erfarne brukere.

Hvordan lage kolonner i WordPress uten plugin (i blokkredigering)

Takket være den nye blokkeredigereren er det blitt ekstremt enkelt å lage kolonner. Hvis du fortsatt bruker gamle WordPress, er det nå på tide å oppdatere til den nyeste versjonen. Du vil kunne legge til og administrere kolonner enkelt, med få klikk ved hjelp av Columns-blokken.

Denne blokken er en kjærkommen endring for alle som ønsker å jobbe med innhold i flere kolonner, presentere produkter eller skrive blogg, og som ikke har erfaring med programmering.

La oss ta en titt på hvordan du legger til Columns-blokken og hvordan du oppretter kolonner i WordPress uten plugin:

  • Det første alternativet er å klikke på "+" i den øverste linjen og velge Columns-blokken fra tilgjengelige blokker.
  • Det andre alternativet er å klikke på "+" hvor som helst i redigeringsprogrammet.
Legg til kolonner i WordPress ved å klikke på "+"
Legge til kolonner i WordPress ved å klikke på "+"
Legg til kolonneblokk med skråstrek "/"
Legge til kolonner i WordPress ved hjelp av skråstrek "/"

Forhåndsdefinerte oppsett av WordPress Columns-blokken (NY fra WP 5.3)

Den nyeste versjonen har gitt store forbedringer i kolonneinnstillingene. Først og fremst er det standard layoutstiler tilgjengelig. Hva betyr dette?

Brukerne kan velge layout og justeringsstil når de legger til en ny blokk i innholdsområdet. Forhåndsdefinerte oppsett kan være svært nyttige - spesielt for brukere som ikke har avanserte WordPress-ferdigheter. Denne funksjonen representerer hvordan vi ser for oss hvordan man kan lage kolonner i WordPress (uten plugin eller andre tillegg).

Forhåndsdefinerte oppsett i Columns-blokken
Forhåndsdefinerte oppsettalternativer

 

Hvis du ikke vil velge forhåndsdefinert layout i WordPress Columns-blokken, er det bare å hoppe over den. Etter at du har hoppet over dette trinnet, vil innholdet bli delt inn i to like deler / to individuelle kolonner som kan redigeres.

Opprettet kolonneblokk
Kolonneblokk med 2 standardområder (kolonner) du kan redigere

Grunnleggende innstillinger for Columns Block

WordPress Columns-blokken i seg selv har ikke mange alternativer. Hvorfor det er slik, vil vi forklare senere. I den øverste linjen kan du endre justering til bred eller full bredde. Du kan endre denne justeringen hvis den støttes av det aktive temaet ditt.

Øverste verktøylinje i Columns-blokken
Øverste verktøylinje med justeringsalternativer

Den viktigste innstillingen i Columns-blokken er antall kolonner i inspektørens sidefelt på høyre side. Som standard er det 2 kolonner, men du kan øke antallet til 6. Du kan endre det med musen eller ved å skrive inn et tall. Hvordan det ser ut, vil du se med en gang du har økt eller redusert antall kolonner. Blokken endrer seg dynamisk avhengig av glidebryteren.

Endring av antall kolonner
Flytt med glidebryteren for å endre antall kolonner etter behov

Det er veldig praktisk fordi du kan endre antall kolonner bokstavelig talt på sekunder uten å måtte gjøre noen vanskelige endringer i innstillinger eller koding.

På samme måte som andre blokker i WordPress-editoren, kan du også sette inn egendefinert CSS-klasse i Columns-blokken.

Blokk-appender for smidigere arbeid med blokker

Kolonneblokken er spesiell fordi du kan opprette flere blokker med den. Før den nye versjonen ble utgitt, var det ganske vanskelig å jobbe med individuelle blokker. Når du ville legge til en blokk, visste du ikke nøyaktig hvor du skulle klikke. Takket være Block appender (og dens differensiering etter bakgrunnsfarge) er det lettere å sette inn innhold i riktig kolonne.

Blokker appender i WordPress Columns-blokken
Blokker appender med bakgrunnsfarge

Slik jobber du med WordPress Columns Block

Det fine med Columns-blokken er at hver kolonne kan hekke andre blokker. Det kan være avsnitt, bildeblokk eller knappeblokk. Maksimalt antall kolonner er 6, og du kan derfor opprette innhold med flere kolonner etter behov. Som nevnt tidligere kan du legge til produktbilde, navn, pris og knapp side om side for å presentere produkter.

Ulike typer innhold i flerkolonneoppsett
Med Columns-blokken kan du presentere ulike typer innhold side om side

Du kan også bruke flere kolonneblokker under hverandre for å lage rutenett. Du kan bruke det til å presentere tjenestene dine eller markedsføre viktige funksjoner.

Kolonneblokkens rutenetteffekt
Rasteffekt av Columns-blokker plassert under hverandre

Redigering av nestede blokker

Som vi allerede har nevnt, kan du nestle andre blokker inne i kolonnene. Alle innstillingene for hver nestet blokk er tilgjengelige. Det betyr at hvis du legger til en bildeblokk i en kolonne, kan du redigere den på nøyaktig samme måte som i en frittstående Bildeblokk.

Redigere bildeblokk som en nestet blokk
Tilgjengelige innstillinger for bildeblokk nestet i kolonneblokk

Konklusjon: Fordeler med kolonneblokker

Lanseringen av WordPress Block Editor og muligheten til å bruke kolonner på sider og i innlegg har forenklet måten brukerne kan jobbe med innhold på. Takket være WordPress Columns-blokken er det ikke lenger viktig å bruke tredjepartsløsninger eller skrive HTML-kode. Det er mulig å legge til eller slette kolonner ved hjelp av noen få klikk. Alt er veldig intuitivt og raskt, også for mindre tekniske brukere.

Innholdet ditt i flerkolonneoppsettet vil bli pent justert i rutenettet. Det vil også se bra ut i responsiv versjon med en gang.

Vi har jobbet hardt med det nye Citadela WordPress-temaet, som er spesielt utviklet for WordPress-blokkeredigereren. Lær mer om Citadela-temaet og tilgjengelige layoutpakker.

2 tenkte på «How to make columns in WordPress without plugin»

    1. Hei, David,

      Takk for at du skrev inn. Du bør aktivere Gutenberg-editoren som tilbyr muligheten til å velge den enkelte kolonnen, i Innstillinger Sidebar (høyre side) kan du justere bredden.

      Med vennlig hilsen!
      Zlatko
      AIT-team

Kommentarer er stengt.