Vil du legge til flerkolonneinnhold til WordPress-innleggene dine?

Kolonner kan brukes til å lage Attraktive oppsett for publikasjoner og sider.

Tradisjonelle trykte medier, som aviser og magasiner, har brukt en flersøyleoppsett siden de første dagene med utskrift. Målet deres var å gjøre det mulig utilisateurs lettere å lese en mindre tekst mens du bruker ledig plass økonomisk.

Hvis du ennå ikke har opprettet et nettsted eller en blogg på WordPress, inviterer vi deg til å konsultere Hvordan installere en WordPress-blogg i 7 trinn neste, Hvordan finne, installere og aktivere en WordPress tema på bloggen din

Enkeltkolonneoppsett er oftere brukt på nettet. Imidlertid, den nett med flere kolonner er fremdeles nyttige for å markere innhold og legge til rette for lesing og analyse.

I denne opplæringen viser vi deg hvordan du enkelt kan legge til innhold med flere kolonner i WordPress-innleggene dine uten å skrive noen HTML-kode.

Legg til innhold i flere wordpress-kolonner e1565264744355

Legge til innhold med flere kolonner i WordPress - den enkle løsningen

Å lage innhold med flere kolonner, også kjent som rutenettinnhold i WordPress, er nå enkelt fordi det er en standardfunksjon. De ny WordPress Gutenberg-blokkereditor foreslår en blokk med kolonner.

For å legge til flere kolonnelayout, må du opprette et nytt innlegg eller redigere et. Når du er i redigeringsområdet, klikker du på " Legg On Øverst for å legge til en blokk.

Så må du velge blokken kolonner "Ligger under" Layoutelementer "-fanen.

Legg til wordpress-kolonner

Du vil se musepekeren hoppe i venstre kolonne og en plassholder for teksten vises i høyre kolonne.

Kolonner på wordpress gutenbeg

Som du kan se på skjermbildet ovenfor, blokken Kolonne synes først å være et tomt område. Hvis du holder musen til venstre, kan du se rammen til den uthevede blokken.

Du vil også kunne se blokkparametrene i høyre kolonne på skjermen.

Eksempel på gutenbergsøylerSom standard legger kolonneblokken til to kolonner. Du kan øke antall kolonner du vil legge til fra blokkinnstillingene til høyre. Dette lar deg legge til opptil seks kolonner på en enkelt rad.

Rediger gutenberg wordpress-kolonnerBare klikk på en kolonne og begynn å skrive for å legge til innhold. Du kan bruke Tab-tasten på tastaturet for å gå til neste kolonne.

Gå til neste wordpress-kolonneLegge til multimedia og annet innhold i kolonnene dine

I tillegg til tekstinnhold kan du også legge til bilder og legge inn videoer i WordPress-kolonner.

Kolonneblokk lar deg legge til blokker i hver kolonne. Bare hold musen over en kolonne, og du vil merke "Legg til en ny blokk"Inside. Du kan også legge til en blokk ved å skrive inn navnet på blokken.

Legg til et bilde i en kolonne

Den valgte blokken vises i kolonnen. Du kan dra dit og legge til innhold.

For å laste opp - laste opp - media, oppdag artikkelen vår på Slik laster du opp massemedia på WordPress

Gutenberg kolonnebilde

Slik kan den nye kolonnen din se ut i WordPress tema standard Twenty Nineteen. I dette eksemplet bruker vi tre kolonner og den siste kolonnen inneholder et bilde.

Bilde legge til gutenberg kolonne

Hvis du bare vil legge til et bilde og tekst til siden, kan du også bruke blokken Media og tekst I stedet for kolonner. Denne blokken er spesielt designet for å vise medier som bilder og videoer ved siden av teksten.

Wordpress blokkerer tekstmedier

Tillegg av flere kolonner i den klassiske redaktøren av WordPress

Hvis du ikke har oppgradert WordPress til Gutenberg og fortsatt brukerklassisk redaktørmå du installere en egen plugin for å opprette et rutenettoppsett av kolonner.

Start med å installere og aktivere pluginet Lettnettet gridkolonner

For detaljerte instruksjoner, følg vår trinnvise guide om hvordan å installere en plugin i WordPress.

Ved aktivering kan du opprette en ny melding eller åpne en gammel melding for å redigere. Klikk deretter på " Legg til kolonner I verktøylinjen for visuell redigering.

Legg til kolonner wordpress classic editorDu vil nå se et popup-vindu som lar deg legge til din første kolonne. Du kan velge hvor mye område kolonnen din kan dekke, på stasjonære datamaskiner, nettbrett og mobile enheter annerledes.

Gå videre ved å oppdage Hvordan lage en full bredde side på WordPress

Hvis du for eksempel angir 50% skrivebordsnettprosent, vil kolonnen dekke halvparten av linjen.

Definer prosentandelen av kolonner

Det har mange alternativer for å angi bredden på kolonnen din, fra 5% til 100% med et 5-intervall. Du kan velge en ved å klikke på rullegardinmenyen.

Kolonnebredde alternativ

Deretter må du legge til innholdet i kolonnen din i "Innhold" -området, og deretter klikke på "OK" -knappen for å sette det inn i publikasjonen din.

Innholdet i divikolonnen

Plugin vil generere den nødvendige kortkoden med innholdet ditt og legge det til innleggsredigereren din.

Oppdag i denne opplæringen Hvordan installere og konfigurere WP Super Cache plugin for å forbedre resultatene til bloggen din.

Kolonne lagt til på klassisk wordpress editor

Nå som den første kolonnen er lagt til, kan du gjenta prosessen for å legge til flere kolonner. For den siste kolonnen, ikke glem å merke av i boksen 'Siste kolonne på linjen'.

Legg til en ny kolonne på den klassiske Wordpress-redigereren

Etter det vil du kunne lagre forhåndsvisningen og forhåndsvise den. Slik ser det ut på Twenty Seventeen testnettsted.

Kolonne lagt til wordpress demo

Hvis du også vil finne WordPress-temaer som kan hjelpe deg med å lage kolonner på sidene eller publikasjonen din, her er 3 WordPress-temaer premium perfekt for denne oppgaven.

1. TheGem

Det er mange av WordPress-temaer som kan hevde å tilby en OnePage-layout, men ingen kan tilby det vell av alternativer og funksjoner som TheGem WordPress-malen har. 

Themem multifunksjons wordpress temaer oppretter nettsted

Alle designelementene du forbinder med et godt OnePage-nettsted er tilstede i dette WordPress tema : en glidebryter i full skjerm (som kan opprettes ved hjelp av Revolution Slider-pluginen som leveres med WordPress tema), et utvalg av seks overskriftsstiler og muligheten til å lage seksjoner i full bredde ved å bruke Visual Composer-pluginen som er inkludert i pakken.

I tillegg har den en rekke tilpasningsalternativer for elementer som skrifter, farger og ikoner. Det er en sjelden ting, men det er også detaljer vi ikke liker med TheGem. Men i utgangspunktet er det et WordPress-tema som selvfølgelig passer deg, gitt antall positive poeng det har. Det er en sterk konkurrent, som vil lette opprettelsen av et OnePage-nettsted.

Last neddEMO | Webhotell

2. Stockholm

Stockholm er et WordPress-tema designet for å hjelpe deg med å lage nettsiden til et byggefirma, sivilingeniør eller et hvilket som helst selskap relatert til bygningsrenovering. Dette WordPress-mal er rettet mot fagfolk som bryr seg om kvalitet og detaljer.

stockholm-temaer-wordpress-multipurpose-allsidig-create-site-internett

Leveres med et alternativspanel og en brukervennlig backend, de lar deg enkelt administrere innholdet ditt. Det er omtrent 20 demoer av denne malen som presenterer et bredt spekter av aktiviteter som dette WordPress-temaet kan brukes på. Og disse kan også brukes som grunnlag for fremtidig tilpasning, slik at nettstedet ditt har et unikt utseende.

Veldig responsiv, den vises perfekt på alle typer skjermbilder. Hvis du opplever vanskeligheter under tilpasningen eller installasjonen av denne malen, kan den komplette dokumentasjonen som er inkludert i pakken fungere som en guide. Og hvis du fremdeles ikke kan det, forblir støtte dedikert til dette temaet WordPress til din disposisjon.

Last neddEMO | Webhotell

3. Jupiter

Jupiter er et annet veldig populært WordPress-tema. Den har 25-demoer som dekker 6 fra våre kategorier - byrå, kreativ, utdanning, mat, helse og e-handel - og mer vil bli lagt til det i fremtidige oppdateringer. De fleste av utformingene har et minimalistisk design, med en hyggelig typografi.

Jupiter-tema-wordpress-multipurpose-allsidig-create-site-internett

Et av Jupiters viktigste salgspunkter er Creative Header Customizer, som lar deg raskt og enkelt tilpasse overskriftenes design på nettstedet ditt. Visual Composer, 3-glidebrytere (Layer, Revolution og iCarousel), 10 nye snarvekoder, mer enn 1800-ikoner og 10 tilpassede innleggstyper er alle inkludert ved levering.

Sidens lastetider er også utmerket. Dette er et ypperlig produkt, og du vil bli hardt presset for å finne så mange WordPress-temaer har sine egenskaper.

Last neddEMO | Webhotell

Andre anbefalte ressurser

For å gå videre med å optimalisere bloggen eller nettstedet ditt, foreslår vi også at du konsulterer noen lenker som vil fordype deg i Gutenbergs verden.

konklusjonen

Her! Det er det for denne opplæringen. Vi håper denne artikkelen har hjulpet deg med å lære hvordan du legger til kolonner i WordPress-innleggene og -sidene dine. Føl deg fri til å del denne opplæringen med vennene dine på sosiale nettverk.

Hvis du har forslag eller kommentarer, er de velkomne. Men hvis du er nybegynner, inviterer vi deg til å konsultere vår ressources.

...