Trinnvis guide til Gutenberg Builder for WordPress

Jeg tror du vil være enig når jeg sier: Hele Gutenberg-virksomheten er forvirrende.


For det første, er den nye blokkredigereren vanskelig å bruke eller hva? Jeg mener, du vet ikke hvor alle favorittverktøyene dine gikk. Nå tok du sannsynligvis lengre tid å opprette et innlegg, ikke sant?

Kanskje du la en lenke (tilknyttet eller på annen måte) kastet deg en pokker for en kurve, og du følte deg skuffet. Kanskje hadde du problemer med å legge til et bilde ved siden av teksten din.

Kanskje prøvde du å legge til flere kolonner, og ting fungerte ikke som forventet. Hvis det ikke er tilfelle, kan du kanskje ikke legge til PDF-filene dine enkelt, eller du ser den fryktede “Oppdater mislyktes” -meldingen alvorlig.

Vel, ikke bekymre deg lenger; Jeg var i din nøyaktige posisjon for ikke lenge siden, men nå synes jeg Gutenberg er en spennende å bruke. Det er en læringskurve, ja, men mot slutten av dagens innlegg, vil du tenke på Gutenberg annerledes.

Hva er Gutenberg Editor?

wordpress Gutenberg-redaktør

Du ser på Gutenberg, standard WordPress-blokkereditor

Hvis du bruker WordPress 5.0 og nyere, må du ha kommet over den nye og skinnende WordPress-redaktøren, kjent som Gutenberg.

Og akkurat som mange andre brukere, vil du bruke den revolusjonerende redaktøren, men du er nølende fordi Gutenberg det er komplisert.

Eller kanskje da du møtte Gutenberg første gang, fungerte ikke forskjellige ting. Tross alt, var og er fremdeles utviklere å gjøre temaer og plugins kompatible med blokkredigereren.

Så du raskt gikk tilbake til Klassisk redaktør, som, BTW, er bra med oss. Bare husk at WordPress ikke støtter Classic Editor etter 2022. Pluss at du går glipp av alle de ekstra godsakene Gutenberg tilbyr.

Når det gjelder funksjonalitet, gjør Classic Editor og Gutenberg det samme; du vet, begge verktøyene hjelper deg å lage innhold uten koding.

Vi er imidlertid så vant til den gamle WYSIWYG-redaktøren at vi synes at tilpasning til den nye Gutenberg UI er litt fremmed, om ikke helt forvirrende. Det er i det minste det jeg tror.

Men hva er egentlig Gutenberg?

Gutenberg er den nye standard WordPress-redaktøren. Det er i motsetning til den tradisjonelle visuelle / teksteditoren; Gutenberg bruker innholdsblokker omtrent som mange moderne sidebyggere.

Det leveres med mer intuitive funksjoner enn Classic Editor, noe som betyr at du kan lage innhold med medier på farten. Nå kan du piske opp ekstraordinære oppsett uansett om du jobber med WordPress-innlegg eller sider.

Og med et par tilleggsprogrammer, kan Gutenberg gunstig konkurrere med etablerte WordPress-sidebyggere som Brizy, Elementor og Divi.

Den eneste ulempen er at sidebygger ofte tilbyr flere funksjoner fordi de først og fremst er sidebygger! Samtidig er Gutenberg fremdeles ganske ung, og du kan bare forvente at blokkredaktøren vil vokse i store sprang.

I dagens innlegg skal vi ha en spennende tid med å lage et WordPress-innlegg med Gutenberg-redaktøren. Jeg tar sikte på å dekke alle ørsmå detaljer og funksjoner slik at du kan bruke Gutenberg til å lage innhold som proffene.

Er du klar? La oss i så fall lage det WordPress-innlegget.

Hvordan lage et WordPress-innlegg med Gutenberg

Hvis du driver et WordPress-nettsted, oppretter du sannsynligvis flere innlegg enn sider. I den følgende delen oppretter vi et WordPress-innlegg i Gutenberg fra bunnen av. Jeg håper du vil ha det like gøy som jeg gjorde da jeg testet ut Gutenberg.

Som ut av veien, naviger til Innlegg> Legg til nytt som vi fremhever i skjermdumpen nedenfor.

opprette et nytt innlegg i Gutenberg

Ved å gjøre det fører du rett til Gutenberg-redaktøren som er vist nedenfor.

wordpress Gutenberg-redaktør

Ganske pent, ikke sant? La oss nå rulle opp ermene og komme i gang.

Legge til en tittel

legge til en ny tittel i gutenberg

Du kan ikke skrive et innlegg uten en solid tittel. Den gode tingen er at Gutenberg gjør det utrolig enkelt å legge til en tittel.

Den første blokken du ser er Tittel øverst i dokumentet slik vi detaljerte på bildet over. Hvis du vil opprette en tittel for innlegget ditt, skriver du inne i blokken. Enkelt som A, B, C.

Trenger du å redigere permalink? Du kan enkelt gjøre det i Tittel blokkerer ved å klikke på Redigere knappen som vist nedenfor.

rediger innlegg permalink i Gutenberg

Etter å ha lagt til tittelen, trykker du på TAST INN for å starte en ny linje. Å ja, Gutenberg bevarer den innfødte navigasjonen du elsket i den klassiske WordPress-redaktøren.

Legge til et nytt avsnitt

ny paragrafblokk i Gutenberg

Slår den TAST INN nøkkel oppretter en ny Avsnitt som vist over. Før du skriver inn tekst, presenterer blokken et par alternativer. Se nummerert bilde nedenfor for mer informasjon.

nye avsnitt blokkerer alternativer gutenberg

Notater. Du kan:

  1. Konverter den nye avsnittsblokken til en hvilken som helst annen blokk, for eksempel bilde, overskrift, omslag, galleri, WooCommerce, form osv..
  2. Bruk snarveien til å endre avsnittsblokken til en bildeblokk
  3. Endre avsnittsblokken til en overskriftsblokk, dvs. H2, H3 og H4
  4. Transformer avsnittblokken til en omslagsbilde

For illustrasjonsformål vil jeg reservere første ledd for innføringen etter innlegg. Når du har lagt til litt tekst, vises en formateringsverktøylinje som vist nedenfor.

gutenberg-avsnittet verktøylinje

Takket være formateringsverktøylinjen kan du:

  • Gjør avsnittet om til et vers, sitat, overskrift, liste, kode og forhåndsformatert tekst
  • Modig, kursiv, gjennomstreking, og understreking innhold
  • Juster tekst til venstre, høyre, midt og rettferdiggjør
  • Legg til en kobling som også kan åpnes i en ny fane
  • Sett inn et inline-bilde (ja, det finnes!)
  • Skjul blokkeringsinnstillinger
  • Dupliser blokken
  • Sett inn en blokk før eller etter den gjeldende blokken (i vårt tilfelle, det er første ledd, så var ikke å legge til noe før, bare etter.) Du kan legge til en omslagsbilde før første ledd hvis du ønsker det fordi det ser slik ut flink
  • Rediger blokken som HTML
  • Legg til den gjeldende blokken i gjenbrukbare blokker, slik at du kan bruke den i andre innlegg
  • Fjern blokken helt

Du kan tilpasse avsnittsblokken ytterligere med alternativene som er tilgjengelige i Blokkere fanen du finner i sidefeltmenyen som vist nedenfor.

gutenberg sidefeltalternativer for avsnittsblokk

Noen få merknader om bildet over:

  1. Velg Blokkere kategorien her for å se alle blokkeringsalternativer og innstillinger
  2. Velg skriftstørrelse og aktiver Drop Drop her
  3. Legg til bakgrunnsfarge i avsnittet. Jeg satte den til blå for illustrasjonsformål. Du kan også tilpasse tekstfargen. I begge tilfeller kan du legge til ubegrensede tilpassede farger
  4. Du kan legge til en tilpasset CSS-klasse her, noe som betyr at du kan legge til flere CSS-stiler i blokken
  5. Den blå bakgrunnen og Drop Cap gjaldt allerede i Gutenberg-redaktøren

Dokumentfanen i sidefeltet

Det er en annen fane i sidefeltmenyen; de Dokument som vist nedenfor.

avsnitt blokker sidefelt dokumentfane

Her notatene for bildet over:

  1. Klikk her for å veksle til Dokument tab
  2. Her kan du planlegge et innlegg, angi synlighet til enten Privat eller Offentlig, sett et innlegg til Avventer vurdering status, velg innleggformat og opprett et klissete innlegg
  3. Avsnittet lar deg redigere permalink
  4. Du kan velge eller opprette nye kategorier her
  5. Legg til koder i innlegget ditt
  6. Angi kjennetegnet bilde
  7. Lag et manuelt utdrag
  8. Tillat kommentarer, pingbacks og trackbacks

Som du kan se, har du mange muligheter til å designe en avsnittsblokk (og hele innlegget) uansett hvilken måte du måtte ønske. Forresten, forskjellige blokker har forskjellige innstillinger slik vi lærer om et minutt.

Etter første ledd, trykk på TAST INN tasten igjen for å opprette en ny linje (eller avsnittsblokk). La oss nå legge til et bilde under første ledd.

Legge til bilder i Gutenberg

legge til et nytt bilde i Gutenberg

De sier at et bilde snakker tusen ord, og et blogginnlegg uten bilder er, vel, trist. For å legge til et bilde i WordPress-innlegget ditt ved hjelp av Gutenberg, har du et par alternativer.

Når du treffer TAST INN for noen øyeblikk siden, utløste du en ny avsnittsblokk. Ser du som Gutenberg er intuitivt, kan du legge til et bilde ved å klikke på pluss- (+), bilde- eller omslagsikonene slik vi fremhever i bildet nedenfor.

legge til et nytt bilde i Gutenberg-redaktøren

Et par notater:

  1. Du kan legge til et bilde via pluss-ikonene
  2. Her kan du legge til et bilde enkelt
  3. Dette alternativet lar deg legge til en dekke image (Disse er vanligvis større enn andre bilder. I tillegg kan du legge til tekst på omslagsbilder, BTW)

Gå videre og klikk på et av plussikonene (+). Deretter klikker du på Bilde , som vist nedenfor.

legge til bilder i Gutenberg

Klikk på Bilde fanen laster inn Bilde blokken vist på skjermdumpen nedenfor.

gutenberg bildeblokk

De Bilde blokkering lar deg laste opp et bilde eller legge til et fra en URL eller mediebiblioteket. I prosessen kan du legge til alt-tekst (viktig for SEO), bildetekst og beskrivelse via innstillingene for medieskjermen, eller Blokkere sidefelt som vist på følgende bilder.

De vanlige medieinnstillingene …

wordpress media innstillinger

…og Bilde blokker innstillinger.

innstillinger for gutenberg image block

Lærer du noe her i dag? Jeg håper det. La oss gå videre.

Etter å ha lagt til bildet ditt, legger Gutenberg til en ny avsnittsblokk rett under det. Du kan legge til hva du vil, men for illustrasjonsformål la jeg til litt tekst og deretter en knapp under det.

Hvordan legge til nedlastbare filer, f.eks. PDF, bilder, videoer osv

Gutenberg gjør det utrolig enkelt å legge ned nedlastbare filer til WordPress-innlegget eller siden din.

I en ny Avsnitt blokkering, klikk på pluss-ikonet, naviger til Vanlige blokker og traff Fil som vi markerer nedenfor.

legge til nedlastbare filer i Gutenberg

Hvis du gjør det, lanseres følgende blokkering:

gutenberg filblokk

Fra Fil blokkere, kan du laste opp en ny fil eller legge til en fra mediebiblioteket. Etter å ha lagt til filen din, legger Gutenberg til en søt nedlasting knappen automatisk som vist på bildet nedenfor.

legge til fil i Gutenberg

Du kan leke med alternativene. For eksempel kan du redigere / slette “Gratis Gutenberg PDF-sjekkliste”Tittel så vel som nedlasting knapp. Du kan legge til en CSS-klasse i blokken og style den uansett hva du ønsker.

Legger til et sitat i Gutenberg

La oss deretter legge til et pristilbud fordi de er sjarmerende, fengende og hjelper deg å kjøre poenget hjem. I en ny linje, klikk på pluss-tegnet (+), naviger til Vanlige blokker og traff Sitat som vist nedenfor.

legge til sitater i Gutenberg

Hvis du gjør det, legger du til Sitat blokker i innlegget ditt som vi fremhever i screengrab nedenfor.

gutenberg sitatblokkinnstillinger

Legg merke til sitatblokkinnstillingene i høyre sidefelt over?

For å legge til pristilbud, skriv inn blokken. Her er resultatet.

gutenberg sitat

Ser utrolig ut, ikke sant?

Legge til medieinnsatser i Gutenberg

Gutenberg kommer med flere blokker for å legge inn videoer og andre medier fra over 30 nettsteder som YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, og så videre.

Hvis du vil legge til innhold, klikker du på pluss-ikonet, naviger til innbygging, og velg nettstedet. For eksempel ønsket jeg YouTube, som vist nedenfor.

gutenberg youtube embed

Deretter kopierer du inn YouTube-nettadressen og klikker på embed knappen som vist på bildet nedenfor.

gutenberg youtube embed block

Så snart du treffer embed -knappen dekker Gutenberg lenken til en video automatisk slik vi fremhever nedenfor.

innebygd YouTube-video i Gutenberg

Jevn seiling hele veien. La oss nå legge til en frittstående knapp som er perfekt for å lage en oppfordring til handling (CTA).

Hvordan legge til en knapp i Gutenberg

Du bør ikke ha vanskelig for å legge til blokker på dette tidspunktet. Bare klikk på pluss (+), og velg blokkering. Det kan ikke bli noe enklere enn det.

Så, hvordan legger vi til en knapp?

I en ny linje (eller blokkering), klikk på plussikonet (+), naviger til Oppsettelementer og klikk på Knapp som vist nedenfor.

legge til knapper i Gutenberg editor

Å gjøre det fører deg til Knapp blokker som vi detaljer nedenfor.

legge til knapper i Gutenberg editor

Som du ser fra bildet over, kan du redigere knappeteksten og legge til en lenke. I tillegg kan du tilpasse knappen via sidefeltmenyen til høyre på skjermen.

Etter et par klikk, her er hva jeg fikk.

gutenberg-knappeksempel

Forresten, hvis du bruker vanskelig å lese fargekombinasjoner på knappene dine, Gutenberg vil omgående gi deg beskjed. Så fint?

Hvordan legge til kolonner i Gutenberg

La oss legge til noen kolonner med en vakker knapp på plass. Jeg vil legge til to kolonner, så følg nøye.

Dette er hva du skal gjøre. Klikk på pluss-ikonet, naviger til Oppsettelementer og klikk på kolonner fanen som vist på bildet nedenfor.

kolonner fane Gutenberg redaktør

Gutenberg legger til to kolonner som standard. Se bildet nedenfor, og husk at jeg allerede har lagt til innhold i kolonnene.

gutenbergsøyler i wordpress editor

Som får meg:

gutenbergsøyler frontend

Ikke verst i noen sekunder arbeid. Men kanskje du ikke ønsker å lage kolonner. Kanskje du vil vise et bilde ved siden av tekst.

Er det en blokk for det? Ja det er!

Hvordan legge til et bilde ved siden av tekst i Gutenberg

Ønsker du å legge til et bilde ved siden av tekst? I så fall vil du elske følgende avsnitt.

Klikk som vanlig på plussikonet (+), naviger til Oppsettelementer og klikk Media og tekst som vist under.

media- og tekstgutenbergblokk

Du bør se Media og tekst blokkering, som vist nedenfor.

media og tekstblokk i Gutenberg

Last deretter opp bilde / video / media eller legg til et fra mediebiblioteket. Deretter legger du til teksten ved siden av mediet, som vist på bildet nedenfor.

Jeg lekte med Media og tekst blokkerer, og jeg kom med følgende. Husk deg; Jeg klarte å presse en knapp der også ��

media og tekstblokk i full handling

Å, det er back-enden! La meg vise deg grensen. Her:

medietekstblokk i Gutenberg

Ser veldig profesjonell ut, ikke sant? Du kan absolutt forestille deg hvor mye du kan oppnå med Gutenberg-redaktøren.

Tredjeparts Gutenbergblokker

WordPress-utviklere er opptatt av å gjøre temaer og plugins kompatible med Gutenberg-redaktøren. Noen få eksempler inkluderer WooCommerce, Jetpack og Yoast SEO.

For eksempel kan du legge til WooCommerce-blokker i WordPress-innlegget ditt. For det første må du installere og aktivere WooCommerce.

I en ny linje klikker du på pluss-ikonet (+), naviger til WooCommerce og velg hvilken blokkering du ønsker som vist nedenfor.

woocommerce gutenberg blokker

Vet du hva dette betyr? Det betyr at du kan lage rich media og gode innlegg og sider i løpet av minutter.

Andre bemerkelsesverdige blokker

Vi har over 2000 ord allerede, og hvis vi holder dette oppe, vil vi ende opp med å skrive en hel eBok. Min bønn er at du nå kan bruke Gutenberg uten hikke.

Det er en liste over andre tilgjengelige blokker her.

  • widgets – Du kan legge til innhold fra widgetene dine i blogginnlegg
  • kortkoder – Du kan fremdeles bruke opprinnelige WordPress-kortkoder
  • Classic – En flott blokk som rommer det gamle innholdet ditt
  • Mer – Blokken ble tidligere kjent som Les mer stikkord
  • Sideskift, separatorer, mellomrom
  • Tilpasset HTML, Pullquote, Tabell
  • Galleri og HTML5 lyd / video
  • Og så mye mer avhengig av temaer og plugins du bruker

Bortsett: Å lage en WordPress-side ligner på å lage et innlegg som er lagret for noen få minutters forskjeller, så vi kommer ikke inn på det i dag.

Rask Gutenberghacks og tastatursnarveier

Gutenberg kommer med et par hacks og snarveier som gjør det enda enklere å gjøre. Hvis du for eksempel skriver “/” inne i en avsnittsblokk, kommer det opp en liste over blokker.

Du kan til og med velge en spesifikk blokk ved å skrive tittelen på blokken etter tilbakeskrittet (/), for eksempel hvis du skriver “/ image” får opp bildeblokken blant andre bilderelaterte blokker. Se bildet nedenfor for mer informasjon.

snarvei for gutenberg-tilbakeslag

Tastatursnarveier: Trykk på for å se alle tilgjengelige snarveier SKIFT + ALT + H i Windows og OPT + CTRL + H i Mac.

Øverst i dokumentet kan du se dokumentstrukturen ved å klikke på (i) ikonet, som vist nedenfor.

gutenberg dokumentstruktur

Hyggelig. Ekstraordinært glatt.

Åh, og forresten, “Update Failed” -feilen skjer vanligvis på grunn av en skjelven internettforbindelse ��


Mellom deg og meg er Gutenberg en fantabuløs innholdsredaktør. Forutsatt at du er villig til å lære tauene; du kan høste mye av fremtidens WordPress-redaktør.

Gutenberg er fremdeles relativt ung, og du kan forvente at den vil vokse når det gjelder brukervennlighet og funksjonalitet. Det vil være en seriøs styrke å regne med de kommende dagene. Sidebyggere passer bedre på, ellers går de tom for business

Vi håper vår trinnvise guide til Gutenberg-redaktøren hjalp deg med å sette ting i perspektiv. Vi tror du nå kan bruke blokkereditoren til å lage innhold som en proff.

Del dine bekymringer, tanker og spørsmål i kommentarfeltet nedenfor.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me