Trin for trin Guide til Gutenberg Builder til WordPress

Trin for trin Guide til Gutenberg Builder til WordPress

Jeg tror, ​​du er enig, når jeg siger: Hele Gutenberg-forretningen er forvirrende.


For det første, er den nye blokeditor svær at bruge, eller hvad? Jeg mener, du ved ikke, hvor alle dine yndlingsværktøjer gik. Nu har du sandsynligvis taget længere tid på at oprette et indlæg, højre?

Måske ved at tilføje et link (tilknyttet eller på anden måde) kastede du dig en kurv, og du følte dig skuffet. Måske havde du problemer med at tilføje et billede ved siden af ​​din tekst.

Måske prøvede du at tilføje flere kolonner, og ting fungerede ikke som forventet. Hvis det ikke er tilfældet, kan du måske ikke tilføje dine PDF-filer let, eller du kan se den frygtede “Opdatering mislykkedes” alvorligt.

Du skal ikke bekymre dig mere; Jeg var i din nøjagtige position for ikke længe siden, men nu finder jeg Gutenberg en spændende at bruge. Der er en læringskurve, ja, men i slutningen af ​​dagens indlæg tænker du på Gutenberg anderledes.

Hvad er Gutenberg Editor?

wordpress Gutenberg redaktør

Du ser på Gutenberg, standard WordPress-blokeditor

Hvis du bruger WordPress 5.0 og nyere, skal du være stødt på den nye og skinnende WordPress-editor, berømt kendt som Gutenberg.

Og ligesom mange andre brugere, vil du bruge den revolutionerende redaktør, men du er tøvende fordi Gutenberg er kompliceret.

Eller måske, da du først mødte Gutenberg, fungerede forskellige ting ikke. Når alt kommer til alt, var og gør udviklere stadig og stadig temaer og plugins kompatible med blokeditoren.

Så du vendte hurtigt tilbage til Klassisk redaktør, hvilket, BTW, er okay med os. Husk bare, at WordPress ikke understøtter Classic Editor efter 2022. Plus, du går glip af alle de ekstra godbidder, som Gutenberg tilbyder.

Med hensyn til funktionalitet gør Classic Editor og Gutenberg det samme; ved du, begge værktøjer hjælper dig med at oprette indhold uden kodning.

Vi er dog så vant til den gamle WYSIWYG-editor, at vi synes, at tilpasning til den nye Gutenberg UI er lidt fremmed, hvis ikke helt forvirrende. I det mindste er det, hvad jeg tror.

Men hvad er Gutenberg nøjagtigt?

Gutenberg er den nye standard WordPress-editor. Det er i modsætning til den traditionelle visuelle / teksteditor; Gutenberg bruger indholdsblokke meget som mange moderne sidebygere.

Det leveres med mere intuitive funktioner end Classic Editor, hvilket betyder, at du kan oprette rich media-indhold på farten. Nu kan du hurtigt piske ekstraordinære layouts uanset om du arbejder med WordPress-indlæg eller sider.

Og med et par tilføjelser kan Gutenberg med fordel konkurrere med etablerede WordPress-sidebygere som Brizy, Elementor og Divi.

Den eneste ulempe er, at sidebyggere ofte tilbyder flere funktioner, fordi de primært er sidebygere! På samme tid er Gutenberg stadig ganske ung, og du kan kun forvente, at blokredaktøren vokser i spring og grænser.

I dagens indlæg skal vi have en spændende tid med at oprette et WordPress-indlæg med Gutenberg-redaktøren. Jeg sigter mod at dække enhver lille detalje og funktion, så du kan bruge Gutenberg til at skabe indhold som profferne.

Er du klar? Hvis ja, lad os oprette det WordPress-indlæg.

Sådan opretter du et WordPress-indlæg med Gutenberg

Hvis du kører et WordPress-websted, opretter du sandsynligvis flere indlæg end sider. I det følgende afsnit opretter vi et WordPress-indlæg i Gutenberg fra bunden. Jeg håber, du vil have det så sjovt, som jeg gjorde, da jeg testede Gutenberg.

At ud af vejen, naviger til Indlæg> Tilføj nyt som vi fremhæver i skærmbilledet nedenfor.

skaber et nyt indlæg i Gutenberg

Dette fører dig direkte til Gutenberg-redaktøren vist nedenfor.

wordpress Gutenberg redaktør

Temmelig pæn, ikke? Lad os nu rulle disse ærmer op og komme i gang.

Tilføjelse af en titel

tilføjelse af en ny titel i Gutenberg

Du kan ikke skrive et indlæg uden en solid titel. Den gode ting er Gutenberg gør det utroligt let at tilføje en titel.

Den første blok, du ser, er Titel øverst i dokumentet, som vi detaljerede på billedet ovenfor. Hvis du vil oprette en titel til dit indlæg, skal du skrive inde i blokken. Enkelt som A, B, C.

Brug for at redigere permalink? Det kan du nemt gøre i Titel bloker ved at klikke på Redigere knappen som vist nedenfor.

rediger post-permalink i Gutenberg

Når du har tilføjet din titel, skal du trykke på GÅ IND for at starte en ny linje. Åh ja, Gutenberg bevarer den oprindelige navigation, du elskede i den klassiske WordPress-editor.

Tilføjelse af et nyt afsnit

ny afsnit blok i Gutenberg

Rammer GÅ IND nøgle opretter en ny Afsnit som vist ovenfor. Inden du skriver nogen tekst, viser blokken dig et par muligheder. Se det nummererede billede nedenfor for at få flere oplysninger.

nye afsnit blokere muligheder gutenberg

Noter. Du kan:

  1. Konverter den nye afsnitblok til enhver anden blok, f.eks. Billede, overskrift, omslag, galleri, WooCommerce, form osv..
  2. Brug genvejen til at ændre afsnitblokken til en billedblok
  3. Ændr afsnitblokken til en overskriftsblok, dvs. H2, H3 og H4
  4. Transform paragrafblokken til en dækningsblok

Til illustrationsformål vil jeg reservere det første afsnit til postindførelsen. Når du har tilføjet noget tekst, vises en formateringsværktøjslinje som vist nedenfor.

gutenberg afsnit formateringsværktøjslinje

Takket være formateringsværktøjslinjen kan du:

  • Konverter afsnittet til et vers, citat, overskrift, liste, kode og forformateret tekst
  • Fremhævet, kursiv, gennemstregning, og understrege indhold
  • Juster tekst til venstre, højre, center og retfærdiggør
  • Tilføj et link, der også kan åbnes i en ny fane
  • Indsæt et inline-billede (ja, det findes!)
  • Skjul blokindstillinger
  • Duplicerer blokken
  • Indsæt en blok før eller efter den aktuelle blok (i vores tilfælde er det det første afsnit, så var tilføjede ikke noget før, kun efter.) Du kan tilføje en coverbillede-blok før det første afsnit, hvis du ønsker det, fordi det ser sådan ud godt
  • Rediger blokken som HTML
  • Føj den aktuelle blok til genanvendelige blokke, så du kan bruge den i andre indlæg
  • Fjern blokken helt

Du kan yderligere tilpasse afsnitblokken med de tilgængelige indstillinger i Blok fanen findes i sidefeltmenuen som vist nedenfor.

gutenberg sidebar indstillinger for afsnit blok

Et par bemærkninger om ovenstående billede:

  1. Vælg Blok fane her for at se alle blokindstillinger og indstillinger
  2. Vælg skriftstørrelse, og aktiver Drop Cap her
  3. Føj baggrundsfarve til dit afsnit. Jeg indstiller den til blå til illustration. Du kan også tilpasse tekstfarven. I begge tilfælde kan du tilføje ubegrænsede tilpassede farver
  4. Du kan tilføje en tilpasset CSS-klasse her, hvilket betyder, at du kan tilføje yderligere CSS-stilarter til din blok
  5. Den blå baggrund og Drop Cap blev allerede anvendt i Gutenberg-redaktøren

Dokumentfanen i sidebjælken

Der er en anden fane i sidefeltmenuen; det Dokument fanen som vist nedenfor.

afsnit blokere sidebarens dokumentfane

Her bemærkningerne til ovenstående billede:

  1. Klik her for at skifte til Dokument fanen
  2. Her kan du planlægge et indlæg og indstille synlighed til enten Privat eller Offentlig, sæt et indlæg til Afventer anmeldelse status, vælg postformatet og opret et klistret indlæg
  3. Afsnittet giver dig mulighed for at redigere din permalink
  4. Du kan vælge eller oprette nye kategorier her
  5. Føj tags til dit indlæg
  6. Indstil featured billede
  7. Opret et manuelt uddrag
  8. Tillad kommentarer, pingbacks og trackbacks

Som du kan se, har du masser af muligheder for at designe en afsnitblok (og hele indlægget), uanset hvilken måde du ønsker det. For øvrig kommer forskellige blokke med forskellige indstillinger, som vi lærer om et minut.

Efter det første afsnit skal du trykke på GÅ IND tast igen for at oprette en ny linje (eller afsnit blok). Lad os nu tilføje et billede under det første afsnit.

Tilføjelse af billeder i Gutenberg

tilføjelse af et nyt billede i Gutenberg

De siger, at et billede taler tusind ord, og et blogindlæg uden billeder er, vel, trist. For at tilføje et billede i dit WordPress-indlæg ved hjælp af Gutenberg, har du et par muligheder.

Når du rammer GÅ IND for et øjeblik siden, udløste du en ny afsnitblok. Når Gutenberg er intuitivt, kan du tilføje et billede ved at klikke på plus (+), billede eller omslagsikoner, som vi fremhæver på billedet herunder.

tilføjelse af et nyt billede i gutenberg editor

Et par noter:

  1. Du kan tilføje et billede via plus (+) -ikonerne
  2. Her kan du nemt tilføje et billede
  3. Denne mulighed giver dig mulighed for at tilføje en dække over billede (Disse er normalt større end andre fotos. Plus, du kan tilføje tekst på forsidebilleder, BTW)

Gå videre og klik på et af plus (+) ikonerne. Klik derefter på Billede fanen, som vist nedenfor.

tilføjelse af billeder i Gutenberg

Klik på Billede fanen indlæser Billede blok vist i skærmbilledet nedenfor.

gutenberg billedblok

Det Billede blok giver dig mulighed for at uploade et billede eller tilføje et fra en URL eller mediebiblioteket. I processen kan du tilføje alt-tekst (vigtig for SEO), billedtekst og beskrivelse via medieskærmindstillingerne eller Blok sidebjælke som vist på de følgende billeder.

De sædvanlige medieindstillinger …

wordpress medieindstillinger

…og Billede blokeringsindstillinger.

gutenberg billedblokindstillinger

Lærer du noget her i dag? Det håber jeg. Lad os gå videre.

Efter at have tilføjet dit billede tilføjer Gutenberg en ny afsnitblok lige under det. Du kan tilføje hvad du vil, men til illustration har jeg tilføjet noget tekst og derefter en knap derunder.

Sådan tilføjes downloadbare filer, f.eks. PDF, billeder, videoer osv

Gutenberg gør det utroligt nemt at tilføje downloadbare filer til dit WordPress-indlæg eller -side.

I en ny Afsnit blokere, klik på plus (+) -ikonet, naviger til Almindelige blokke og ramte Fil som vi fremhæver nedenfor.

tilføjelse af downloadbare filer i Gutenberg

Dermed lanceres følgende blok:

gutenberg fil blokering

Fra Fil blokere, kan du uploade en ny fil eller tilføje en fra dit mediebibliotek. Efter at have tilføjet din fil tilføjer Gutenberg en sød Hent knappen automatisk som vist på billedet herunder.

tilføjelse af fil i Gutenberg

Du kan lege rundt med indstillingerne. For eksempel kan du redigere / slette “Gratis Gutenberg PDF-checkliste”Titel såvel som Hent knap. Du kan tilføje en CSS-klasse til blokken og style den, uanset hvilken måde du ønsker.

Tilføjelse af et tilbud i Gutenberg

Lad os derefter tilføje et tilbud, fordi de er charmerende, iørefaldende og hjælper dig med at køre punktet hjem. I en ny linje skal du klikke på tegnet plus (+) og navigere til Almindelige blokke og ramte Citere fanen som vist nedenfor.

tilføje tilbud i Gutenberg

Dette tilføjer tilføjet Citere bloker i dit indlæg, som vi fremhæver i screengrab nedenfor.

gutenberg citat blokindstillinger

Bemærk citatblokkens indstillinger i højre sidefelt ovenfor?

For at tilføje dit tilbud skal du indtaste inde i blokken. Her er mit resultat.

gutenberg citat

Ser utrolig ud, ret?

Tilføjelse af medieindlejringer i Gutenberg

Gutenberg kommer med flere blokke til indlejring af videoer og andre medier fra 30+ sider som YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare osv..

Hvis du vil integrere indhold, skal du klikke på plus (+) -ikonet, gå til indlejringer, og vælg stedet. For eksempel ønskede jeg YouTube, som vist nedenfor.

gutenberg youtube embed

Kopier og indsæt derefter YouTube-video-URL’en, og klik på Indlejre knappen som vist på billedet herunder.

gutenberg youtube integreret blok

Så snart du rammer Indlejre -knappen dækker Gutenberg linket ind i en video automatisk, som vi fremhæver nedenfor.

indlejret YouTube-video i Gutenberg

Glat sejlads hele vejen. Lad os nu tilføje en enkeltstående knap, der er perfekt til at oprette en opfordring til handling (CTA).

Sådan tilføjes en knap i Gutenberg

Du skulle ikke have svært ved at tilføje blokke på dette tidspunkt. Klik blot på plus (+), og vælg din blok. Det kan ikke blive lettere end det.

Så hvordan tilføjer vi en knap?

I en ny linje (eller blok) skal du klikke på ikonet plus (+) og gå til Layoutelementer og klik på Knap fanen som vist nedenfor.

tilføje knapper i Gutenberg editor

Dette fører dig til Knap blok som vi detaljerer nedenfor.

tilføje knapper i Gutenberg editor

Som du kan se fra billedet ovenfor, kan du redigere knappeteksten og tilføje et link. Derudover kan du tilpasse knappen via sidefeltmenuen til højre for skærmen.

Efter et par klik, her er hvad jeg fik.

gutenberg-knapeksempel

Forresten, hvis du bruger svære at læse farvekombinationer på dine knapper, Gutenberg vil straks fortælle dig det. Hvor fint?

Sådan tilføjes kolonner i Gutenberg

Lad os tilføje nogle kolonner med en smuk knap på plads. Jeg vil tilføje to kolonner, så følg nøje.

Her er hvad man skal gøre. Klik på plus (+) -ikonet, gå til Layoutelementer og klik på Kolonner fanen som vist på billedet herunder.

kolonner fanen Gutenberg redaktør

Gutenberg tilføjer to kolonner som standard. Se billedet herunder, og husk, at jeg allerede har tilføjet indhold i kolonnerne.

gutenbergsøjler i wordpress editor

Hvilket får mig:

gutenbergsøjler frontend

Ikke dårligt i et par sekunders arbejde. Men måske ønsker du ikke at oprette kolonner. Måske vil du vise et billede ved siden af ​​tekst.

Er der en blok for det? Ja der er!

Sådan tilføjes et billede ved siden af ​​tekst i Gutenberg

Leder du efter at tilføje et billede ved siden af ​​tekst? I så fald vil du elske det følgende afsnit.

Klik som normalt på plus (+) -ikonet, naviger til Layoutelementer og klik Medier & tekst som vist nedenfor.

medie- og tekstgutenbergblok

Du skulle se Medier & tekst som vist nedenfor.

medie og tekstblok i Gutenberg

Upload derefter dit billede / video / medie, eller tilføj et fra mediebiblioteket. Tilføj derefter din tekst ved siden af ​​medierne, som vist på billedet herunder.

Jeg spillede rundt med Medier & tekst blokere, og jeg kom med følgende. Husk dig; Jeg formåede også at presse en knap derinde ��

medie- og tekstblok i fuld handling

Åh, det er bagenden! Lad mig vise dig frontend. Her:

medietekstblok i Gutenberg

Ser meget professionel ud, ikke? Du kan helt sikkert forestille dig, hvor meget du kan opnå med Gutenberg-redaktøren.

Tredjeparts Gutenberg-blokke

WordPress-udviklere er ivrige efter at gøre temaer og plugins kompatible med Gutenberg-editoren. Et par eksempler inkluderer WooCommerce, Jetpack og Yoast SEO.

For eksempel kan du tilføje WooCommerce-blokke i dit WordPress-indlæg. For det første skal du installere og aktivere WooCommerce.

Klik derefter på et plus (+) ikon på en ny linje, naviger til WooCommerce og vælg hvilken blok du ønsker som vist nedenfor.

woocommerce gutenberg blokke

Ved du, hvad det betyder? Det betyder, at du kan oprette rich media og gode indlæg og sider i løbet af få minutter.

Andre bemærkelsesværdige blokke

Vi har allerede over 2.000 ord, og hvis vi holder det op, vil vi ende med at skrive en hel e-bog. Min bøn er, at du nu kan bruge Gutenberg uden nogen hikke.

Det her af vejen, her er en liste over de andre tilgængelige blokke.

  • Widgets – Du kan tilføje indhold fra dine widgets til blogindlæg
  • kortkoder – Du kan stadig bruge oprindelige WordPress-shortcodes
  • klassisk – En fantastisk blok, der indeholder dit gamle indhold
  • Mere – Blokken blev tidligere kendt som Læs mere tag
  • Sidepause, separatorer, mellemrum
  • Tilpasset HTML, Pullquote, tabel
  • Galleri og HTML5 lyd / video
  • Og så meget mere afhængigt af hvilke temaer og plugins du bruger

Bortset: Oprettelse af en WordPress-side svarer til at oprette et indlæg, der gemmes i nogle få minutters forskelle, så vi kommer ikke ind på det i dag.

Hurtige Gutenberghacks & tastaturgenveje

Gutenberg leveres med et par hacks og tastaturgenveje, der gør det endnu lettere at gøre. Hvis du f.eks. Skriver “/” inde i en afsnitblok, får den en liste med blokke.

Du kan endda vælge en bestemt blok ved at indtaste titlen på blokken efter tilbagegang (/), f.eks. Ved at skrive “/ image” vises billedblokken blandt andre billedrelaterede blokke. Se billedet nedenfor for flere detaljer.

gutenberg tilbageslag genvej

Tastaturgenveje: Tryk på for at se alle tilgængelige genveje SKIFT + ALT + H i Windows og OPT + CTRL + H i Mac.

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

Gutenberg-dokumentstruktur

Pæn. Ekstraordinært glat.

Åh, og for øvrig sker fejlen “Opdatering mislykkedes” som regel på grund af en gydelig internetforbindelse ��


Mellem dig og mig er Gutenberg en fantabuløs indholdsredaktør. Forudsat at du er villig til at lære rebene; du kan høste meget fra fremtidens WordPress-editor.

Gutenberg er stadig relativt ung, og du kan forvente, at den vokser med hensyn til brugervenlighed og funktionalitet. Det vil være en seriøs styrke at regne med i de kommende dage. Sidebyggerne skal være bedre opmærksomme, eller de løber tør for forretning ��

Vi håber, at vores trinvise guide til Gutenberg-redaktøren hjalp dig med at sætte tingene i perspektiv. Vi tror, ​​du nu kan bruge blokredigeringsprogrammet til at oprette indhold som en professionel.

Del dine bekymringer, tanker og spørgsmål i kommentarafsnittet nedenfor.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map