Innholdsfortegnelse
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
- Slik fungerte kolonnene i den gamle editoren
- Hvordan lage kolonner i WordPress uten plugin (i blokkredigering)
- Grunnleggende innstillinger for kolonneblokken
- Slik jobber du med WordPress Columns-blokken
- Slik redigerer du nestede blokker
- Fordeler med kolonneblokker
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.
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.
I blogginnlegg kan du bruke kolonner til å skille innhold fra hverandre. Du kan plassere tekst, kulepunkter eller bilder side om side.
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.
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.
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).
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.
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.
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.
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.
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.
Du kan også bruke flere kolonneblokker under hverandre for å lage rutenett. Du kan bruke det til å presentere tjenestene dine eller markedsføre viktige funksjoner.
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.
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.
Hvordan kan jeg endre bredden på kolonnene?
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