Selv om noe så enkelt som kolonner kan virke som det mest fotgjengere og, la oss være ærlige, kjedelige elementet på ethvert nettsted, er det virkelig ikke. Faktisk kan kolonner til og med være den viktigste komponenten når det gjelder å arrangere innholdet ditt til en harmonisk helhet. Uten dem ville det vært mye vanskeligere å organisere alle de andre elementene på nettstedet ditt, som knapper og bilder, eller til og med kortkoder og widgets, i logiske og fremfor alt estetisk tiltalende komposisjoner. Så i dag har vi bestemt oss for å vise deg hvordan du oppretter og bruker kolonner i fire av de mest populære WordPress-innholdsredigererne. Her er hva vi skal dekke:
For å legge til en kolonne i et innlegg ved hjelp av Gutenberg-editoren, åpne først innlegget og klikk på Plus logg inn i innleggets øvre venstre hjørne for å åpne blokkvelgeren. Velg nå kolonneblokken, som du finner i Layoutelementer fanen.
Det er flere kolonnevarianter, men vi vil bruke en layout med to like store kolonner for formålet med denne opplæringen.
Du vil se at raden din er delt inn i to like deler. Du vil også se blokkinnstillingene på høyre side. Det er her du kan redigere den relative bredden på kolonnene dine.
For å legge inn tekst i en kolonne, klikk på den Plus signer og velg a avsnitt blokker, og skriv eller lim inn teksten.
Akkurat som med tekst kan du legge til en hvilken som helst annen Gutenberg-blokk i kolonnen din: bilder, gallerier, videoer og alt annet – inkludert andre kolonner. La oss legge til et bilde i kolonnen på høyre side.
I dette tilfellet vil vi laste opp et bilde.
Klikk på Forhåndsvisningsknapp for å se hvordan innleggsinnholdet ditt ser ut ordnet i kolonner.
Hvis du bruker Elementor, fungerer det litt annerledes å legge til kolonner. Etter å ha åpnet innlegget ditt i Elementor, kan du introdusere kolonner til et område i Elementor ved å klikke på Legg til seksjon knapp.
Du kan nå velge strukturen til seksjonen din. Vi vil velge en tre-kolonne seksjon.
Som du kan se, er det aktive området delt inn i tre seksjoner. For å legge til tekst i delene dine, legg til Tekstredigerer widget til noen av underseksjonene.
For å legge til et bilde i en kolonne, dra ganske enkelt Bilde widget til underseksjonen.
For å fylle kolonnen med et bilde, klikk på Velg Bilde området i Rediger bilde fanen på venstre side…
…og last opp eller velg en fil fra mediebiblioteket ditt.
Fjern merket for kolonnen for å gå tilbake til elementmenyen.
For å legge til en video i kolonnen din, må du dra Video widget til den gjenværende kolonnen.
Husk å lime inn URL-en i det aktuelle feltet for å bygge inn videoen du ønsker.
Nå, for å redigere hele denne delen, må du gå til Rediger seksjon Meny.
De Rediger seksjon menyen på høyre side gir deg flere Oppsett alternativer som styrer utseendet til kolonnene på siden din. Dette avhenger virkelig av layoutpreferansene dine.
Vi vil bruke Innholdsbredde mulighet for å jevne ut teksten med bildekolonnen.
De Struktur seksjonen er der for å gjøre det enkelt for deg å endre breddeforholdet for kolonnene dine. Vi vil velge 50, 25, 25 layout og se hvordan det påvirker kolonnebredden.
Du kan formatere hver tekstblokk, legge til bakgrunner, knapper, bildetekster for bilder, lydwidgeter og utallige andre elementer til hvilken som helst av kolonnene dine.
Hvis din foretrukne WordPress-editor er WPBakery, kan du fortsatt lage og bruke kolonner ganske enkelt.
Først åpner du innlegget i WPBakery og klikker på Legg til element knapp.
Deretter velger du Rad-elementet.
For å dele dette elementet i to kolonner, hold musepekeren over kolonnefanen. Du trenger Kolonneoppsett for å dele inn elementene i kolonner. Vi vil velge to like kolonner (1/2 + 1/2).
Den tillagte raden er nå delt inn i to like kolonner.
For å legge til innhold i én kolonne, klikk på plusstegnet og velg det aktuelle elementet. For tekst er det Tekstblokk element, for bilder trenger du Enkelt bilde element, for en video, en YouTube (eller annet) element, og så videre. Vi vil legge til litt tekst til venstre kolonne, og et bilde til høyre. Vi har allerede diskutert tekst, og nå skal vi ta en titt på Enkelt bilde element.
Her ser du de ulike bildekonfigurasjonsalternativene. For å fylle ut bildeelementet, klikk på bildeknappen og velg et bilde. Hvis du ikke vil bruke mediebiblioteket, kan du velge andre bildekilder fra Bildekilde nedtrekksmenyen.
Siden vi allerede har et bilde i biblioteket vårt, vil vi gjenbruke det.
Når du har satt opp bildet ditt, klikker du på forhåndsvisningsknappen for å se hvordan innholdet ditt ser ut i innlegget.
Bildet ditt, slik det er konfigurert, vises i kolonnen til høyre.
Selvfølgelig kan du foretrekke den klassiske editoren. Det finnes også en kolonneløsning for det.
Til slutt, for å legge til kolonner i den klassiske editoren, trenger du en plugin. Vi anbefaler Kolonnekortkoder plugg inn. Hvis du ikke er sikker på hvordan du gjør det, har vi en veiledning om hvordan du installerer et WordPress-plugin.https://wordpress.org/plugins/column-shortcodes/
Denne plugin-en lar deg lage kolonnekortkoder – bittesmå kodebiter som lar deg omorganisere teksten og annet innhold.
Vi ønsker å dele opp innlegget vårt i to like store kolonner. Vi begynner med å bytte til tekst se før du kopierer de riktige kortkodene. Du finner kortkodene ved å klikke på parentesene ( [ ] )-knappen.
For å dele opp innlegget vårt i to like kolonner, vil vi først sette inn en halv kolonnekortkode ved å klikke på den. To tagger vil vises ved markørposisjonen vår. Disse representerer begynnelsen og slutten av kolonnen til venstre.
Si at vi ønsker å legge inn en tweet i innleggets venstre kolonne. Du må kopiere innbyggingskoden fra Twitter. Klikk på Embed Tweet-kommandoen i rullegardinmenyen på tweeten.
Twitter vil koble til en side med den nødvendige koden. For å kopiere innbyggingskoden, klikk ganske enkelt på Kopier kode knapp.
Deretter må vi lime den inn mellom åpningskoden for shortcode og den avsluttende taggen, noe som gjør tweeten til det eneste innholdet i kolonnen til venstre.
For å legge til kolonnen på høyre side, vil vi plassere markøren på slutten av innlegget vårt og velge riktig kortkode fra parentesene ( [ ] ) Meny. Vær oppmerksom på at denne plugin-en trenger kolonnen din lengst til høyre for å inneholde den (siste) kortkoden. Vi vil derfor velge en halvdel (siste) kommando, og lim inn litt tekst mellom åpnings- og avslutningstaggen.
I forhåndsvisningen vil innholdet ditt se slik ut.
Og det er slik du deler inn innholdet ditt i kolonner ved hjelp av en plugin og den klassiske editoren.
For å konkludere
Så, enten du bruker en redaktørs innebygde alternativer eller la plugin, er det ingen problemer å arrangere innholdet i kolonner. Det er opp til deg å se hvilken kolonneoppsett som passer best til ditt generelle nettsteddesign. Mens de besøkende er der for innholdet ditt, er det ting du kan gjøre for å gjøre innholdet mer attraktivt uten mye innsats eller teknisk dyktighet.
Enten du vil etterligne avispapir eller eksperimentere med bilder og andre innebygde elementer, bør du prøve et av forslagene våre til spalter. Med kolonner kan du enkelt få hvert og et av innleggene dine til å fremstå lettere lesbare, mer brukervennlige og mer profesjonelle med bare noen få klikk.
Støtt vårt arbeid ❤️
Hvis du likte denne artikkelen, vurder å gi en tips for å hjelpe oss med å fortsette å publisere kvalitetsinnhold.
