Vodnik po korakih za Builder Gutenberg za WordPress

Vodnik po korakih za Builder Gutenberg za WordPress

Mislim, da se boste strinjali, ko bom rekel: Ves ta posel v Gutenbergu je zmeden.


Prvič, ali je nov urejevalnik blokov težko uporabljati ali kaj? Ne veste, kam so šla vsa vaša najljubša orodja. Zdaj ste verjetno ustvarili dlje časa za ustvarjanje objave, kajne?

Mogoče vam je dodajanje povezave (podružnične ali kako drugače) vrglo levo krivino in počutili ste se razočarano. Morda ste imeli težave pri dodajanju slike poleg besedila.

Morda ste poskusili dodati več stolpcev in stvari niso potekale po pričakovanjih. V nasprotnem primeru morda ne morete enostavno dodati datotek PDF ali pa večkrat vidite grozljivo sporočilo »Posodobitev ni uspela«..

No, ne skrbi več; Nedolgo nazaj sem bil na vašem natančnem položaju, zdaj pa se mi zdi Gutenberg navdušenje. Obstaja krivulja učenja, da, toda do konca današnje objave boste o Gutenbergu razmišljali drugače.

Kaj je urednik Gutenberga?

urejevalnik besedila gutenberg

Gledate Gutenberga, privzetega urejevalnika blokov WordPress

Če uporabljate WordPress 5.0 ali novejšo različico, ste zagotovo naleteli na nov in svetleč urejevalnik WordPress, znan kot Gutenberg.

Tako kot mnogi drugi uporabniki tudi vi želite uporabiti revolucionarni urejevalnik, vendar oklevate, ker je Gutenberg je zapleteno.

Ali morda, ko ste prvič spoznali Gutenberg, različne stvari niso delovale. Konec koncev, razvijalci so teme in vtičnike združili z urejevalnikom blokov.

Torej, hitro ste se vrnili na Klasični urejevalnik, kar je, BTW, v redu z nami. Ne pozabite, da WordPress ne bo podprl klasičnega urejevalnika po letu 2022. Poleg tega manjkate vsi dodatni dobroti, ki jih ponuja Gutenberg.

Glede funkcionalnosti klasični urejevalnik in Gutenberg počneta isto; veste, obe orodji vam pomagata ustvariti vsebino brez kodiranja.

Vendar smo na stari WYSIWYG urejevalnik tako navajeni, da se nam zdi prilagajanje novemu uporabniškemu vmesniku Gutenberg nekoliko tuj, če ne povsem zmedeno. Vsaj tako mislim.

Ampak, kaj točno je Gutenberg?

Gutenberg je novi privzeti urejevalnik WordPress-a. To ni v nasprotju s tradicionalnim urejevalnikom vizualnih besedil / besedila; Gutenberg uporablja vsebinske bloke podobno kot mnogi sodobni ustvarjalci strani.

Priložen je z bolj intuitivnimi funkcijami kot klasični urejevalnik, kar pomeni, da lahko ustvarite vsebino z bogatimi predstavnostmi na poti. Zdaj lahko hitro potegnete izjemne postavitve, ne glede na to, ali delate z objavami ali stranmi v WordPressu.

Z nekaj dodatki lahko Gutenberg ugodno konkurira uveljavljenim ustvarjalcem strani WordPress, kot so Brizy, Elementor in Divi.

Edina pomanjkljivost je, da ustvarjalci strani pogosto ponujajo več funkcij, saj so predvsem ustvarjalci strani! Obenem je Gutenberg še vedno precej mlad in pričakujete lahko le, da bo urejevalnik blokov naraščal v skokih in mejah.

V današnji objavi se bomo z urejevalnikom v Gutenbergu navdušili nad ustvarjanjem WordPress objave. Želim pokriti vsako drobno podrobnost in funkcijo, da lahko Gutenberg uporabite za ustvarjanje vsebine, kot so profesionalci.

Si pripravljen? Če je tako, ustvarimo to objavo v WordPressu.

Kako ustvariti WordPress objavo z Gutenbergom

Če imate spletno mesto WordPress, verjetno ustvarite več objav kot strani. V naslednjem razdelku ustvarimo WordPress objavo v Gutenbergu iz nič. Upam, da se boste imeli toliko zabave kot jaz, ko sem preizkusil Gutenberg.

Pojdite po poti Objave> Dodaj novo kot poudarimo na spodnjem posnetku zaslona.

ustvarjanje nove objave v gutenbergu

To vas vodi naravnost do spodnjega urejevalnika Gutenberg.

urejevalnik besedila gutenberg

Precej lepo, kaj? Zdaj zavihajmo rokave in se lotimo poslovanja.

Dodajanje naslova

doda nov naslov v gutenbergu

Objave ne morete napisati brez trdnega naslova. Dobra stvar je, da je Gutenbergu neverjetno enostavno dodati naslov.

Prvi blok, ki ga vidite, je Naslov na vrhu dokumenta, kot smo podrobno opisani na zgornji sliki. Če želite ustvariti naslov za svojo objavo, vnesite v blok. Enostavno kot A, B, C.

Morate urediti trajno povezavo? To lahko preprosto storite v Naslov blokirajte s klikom na Uredi gumb, kot je prikazano spodaj.

uredite objavo trajno povezavo v gutenbergu

Ko dodate svoj naslov, pritisnite VNOS tipko za začetek nove vrstice. O da, Gutenberg ohranja klasično navigacijo, ki ste jo imeli radi v klasičnem urejevalniku WordPress.

Dodajanje novega odstavka

nov blok odstavkov v gutenbergu

Udarci VNOS tipka ustvari novo Odstavek blok, kot je prikazano zgoraj. Preden vnesete katero koli besedilo, vam blok predstavi nekaj možnosti. Za podrobnosti glejte oštevilčeno sliko spodaj.

nove možnosti blok odstavkov gutenberg

Opombe. Ti lahko:

  1. Pretvorite nov blok odstavkov v kateri koli drug blok, npr. Sliko, naslov, naslovnico, galerijo, WooCommerce, obrazec itd..
  2. S pomočjo bližnjice spremenite blok odstavkov v blok slike
  3. Blok odstavkov spremenite v blok naslova, tj. H2, H3 in H4
  4. Preoblikujte odstavek blok v blok slike slike

Za ponazoritev bom rezerviral prvi odstavek za uvod v objavo. Ko dodate nekaj besedila, se prikaže orodna vrstica za oblikovanje, kot je prikazano spodaj.

gutenberg orodna vrstica za oblikovanje odstavkov

Zahvaljujoč orodni vrstici za oblikovanje lahko:

  • Odstavek pretvorite v verz, citat, naslov, seznam, kodo in predoblikovano besedilo
  • Drzno, Italicizirati, prečrtano, in podčrtaj vsebino
  • Poravnajte besedilo levo, desno, sredino in utemeljite
  • Dodajte povezavo, ki se lahko odpre tudi na novem zavihku
  • Vstavite vdelano sliko (ja, obstaja!)
  • Skrivanje nastavitev blokov
  • Podvoji blok
  • Blok vstavite pred ali za trenutnim blokom (v našem primeru je to prvi odstavek, zato prej ne dodajate ničesar, šele po.) Blok slike naslovne slike lahko dodate pred prvim odstavkom, če želite, ker je videti tako dobro
  • Uredite blok kot HTML
  • Dodajte trenutni blok blokom za večkratno uporabo, da ga boste lahko uporabljali v drugih objavah
  • Blok v celoti odstranite

Blok odstavka lahko še dodatno prilagodite z možnostmi, ki so na voljo v Blok zavihek v meniju stranske vrstice, kot je prikazano spodaj.

možnosti stranske vrstice gutenberg za blok odstavkov

Nekaj ​​opomb o zgornji sliki:

  1. Izberite Blok tukaj za ogled vseh možnosti in nastavitev blokov
  2. Izberite velikost pisave in tukaj aktivirajte Drop Cap
  3. Odstavku dodajte barvo ozadja. Za ilustracijo sem ga nastavil na modro. Barvo besedila lahko tudi prilagodite. V obeh primerih lahko dodate neomejene barve po meri
  4. Tu lahko dodate razred CSS po meri, kar pomeni, da lahko v svoj blok dodate dodatne sloge CSS
  5. V urejevalniku Gutenberg sta že uporabljena modra podlaga in kapica

Kartica Document v stranski vrstici

V meniju stranske vrstice je še en zavihek; the Dokument kot je prikazano spodaj.

jeziček dokument strani stranske vrstice bloka

Tu so opombe za zgornjo sliko:

  1. Kliknite tukaj, če želite preklopiti na Dokument zavihek
  2. Tu lahko načrtujete objavo in nastavite vidnost katerega koli Zasebno ali Javno, nastavite objavo na Čaka na pregled stanje, izberite obliko objave in ustvarite lepljivo objavo
  3. V razdelku lahko uredite svojo trajno povezavo
  4. Tu lahko izberete ali ustvarite nove kategorije
  5. V objavo dodajte oznake
  6. Nastavite predstavljeno sliko
  7. Ustvari ročni odlomek
  8. Dovoli komentarje, pingbake in povratne informacije

Kot lahko vidite, imate veliko možnosti, da oblikujete blok odstavkov (in celoten post), kamor koli želite. Mimogrede, različni bloki so opremljeni z različnimi nastavitvami, saj se bomo naučili v minuti.

Po prvem odstavku pritisnite na VNOS tipko znova, da ustvarite novo vrstico (ali blok odstavkov). Zdaj pa dodajmo sliko pod prvi odstavek.

Dodajanje slik v Gutenbergu

dodajanje nove slike v gutenbergu

Pravijo, da slika govori tisoč besed, objava na spletnem dnevniku brez slik pa je dobro. Če želite s pomočjo Gutenberga dodati sliko v svoj WordPress post, imate na voljo nekaj možnosti.

Ko zadeneš VNOS tipko pred nekaj trenutki ste sprožili nov blok odstavkov. Če je Gutenberg intuitiven, lahko sliko dodate s klikom na ikone plus (+), slike ali platnice, kot poudarimo na spodnji sliki.

dodajanje nove slike v urejevalnik gutenberg

Nekaj ​​opomb:

  1. Sliko lahko dodate prek ikon plus (+)
  2. Tukaj lahko preprosto dodate sliko
  3. Ta možnost vam omogoča, da dodate ovitek slika (ponavadi so večje od drugih fotografij. Poleg tega lahko besedilu dodate slike na naslovnicah, BTW)

Pojdite naprej in kliknite katero od plus (+) ikon. Nato kliknite na Slika kot je prikazano spodaj.

dodajanje slik v gutenbergu

S klikom na Slika zavihek naloži Slika blok prikazan na spodnjem posnetku zaslona.

gutenberški slikovni blok

The Slika blok vam omogoča, da naložite sliko ali jo dodate z naslova URL ali predstavnostne knjižnice. V tem postopku lahko z nastavitvami medijskega zaslona dodate besedilo alt (pomembno za SEO), napis in opis, ali Blok stranska vrstica, kot je prikazano na naslednjih slikah.

Običajne nastavitve medijev …

nastavitve medija za WordPress

…in Slika blok nastavitve.

nastavitve blokov slik gutenberga

Se danes tukaj kaj naučite? Upam. Gremo naprej.

Po dodajanju vaše slike Gutenberg doda nov blok odstavkov tik pod njim. Lahko dodate, kar želite, vendar sem za ponazoritev dodal nekaj besedila in nato gumb pod tem.

Kako dodati datoteke za prenos, npr. PDF, slike, videoposnetki itd

Gutenberg neverjetno enostavno dodaja datoteke, ki jih lahko naložite v svojo WordPress objavo ali stran.

V novem Odstavek blok, kliknite ikono plus (+), pomaknite se do Skupni bloki in zadel mapa zavihek, kot smo poudarili spodaj.

dodajanje datotek za prenos v gutenberg

S tem zažene naslednji blok:

blok datotek gutenberg

Iz mapa blok, lahko naložite novo datoteko ali jo dodate iz svoje predstavnostne knjižnice. Po dodajanju datoteke Gutenberg doda luštno Prenesi gumb samodejno, kot je prikazano na spodnji sliki.

dodajanje datoteke v gutenbergu

Z možnostmi se lahko igrate naokoli. Na primer, lahko uredite / izbrišete »Prosti seznam za Gutenberg PDF“Naslov in Prenesi gumb. V blok lahko dodate razred CSS in ga oblikujete po želji.

Dodajanje navedbe v Gutenbergu

Nato dodajmo ponudbo, ker so očarljivi, privlačni in vam pomagajo odpeljati točko domov. V novi vrstici kliknite znak plus (+), pomaknite se do Skupni bloki in zadel Kvota kot je prikazano spodaj.

dodajanje citatov v gutenbergu

To dodaja Kvota blokirajte v svoji objavi, kot smo poudarili v spodnji sliki zaslona.

nastavitve blokov citiranja gutenberga

Na desni stranski vrstici opazite nastavitve bloka citatov?

Če želite dodati ponudbo, vnesite v blok. Tu je moj rezultat.

gutenbergov citat

Izgleda neverjetno, kajne?

Dodajanje vdelanih medijev v Gutenberg

Gutenberg ima več blokov za vdelavo videoposnetkov in drugih medijev s 30+ mest, kot so YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare itd..

Če želite vdelati vsebino, kliknite ikono plus (+), pomaknite se do Vdelava, in izberite spletno mesto. Na primer, želel sem YouTube, kot je prikazano spodaj.

gutenberg youtube vdelati

Nato kopirajte YouTube video URL in kliknite Vdelati gumb, kot je prikazano na spodnji sliki.

gutenberg youtube vdelati blok

Takoj ko zadenete Vdelati Gutenberg samodejno prekrije povezavo v video, kot smo poudarili spodaj.

vdelani youtube video v gutenbergu

Gladko jadranje vse do konca. Zdaj pa dodamo samostojni gumb, ki je kot nalašč za ustvarjanje poziva k dejanju (CTA).

Kako dodati gumb v Gutenbergu

Na tem mestu vam ne bi smelo biti težko dodajati blokov. Samo kliknite plus (+) in izberite svoj blok. Nič lažjega od tega.

Kako torej dodamo gumb?

V novi vrstici (ali bloku) kliknite ikono plus (+), pomaknite se do Elementi postavitve in kliknite na Gumb kot je prikazano spodaj.

dodajanje gumbov v urejevalniku gutenberga

S tem vas pripelje do Gumb blok, kot smo podrobneje opisali spodaj.

dodajanje gumbov v urejevalniku gutenberga

Kot je razvidno iz zgornje slike, lahko uredite besedilo gumba in dodate povezavo. Poleg tega lahko gumb prilagodite prek menija stranske vrstice na desni strani zaslona.

Po nekaj klikih je tukaj nekaj, kar imam.

Primer gumba gutenberg

Mimogrede, če na svojih gumbih uporabljate težko berljive kombinacije barv, Gutenberg vas bo nemudoma sporočil. Kako lepo?

Kako dodati stolpce v Gutenbergu

Z lepim gumbom na mestu dodajmo nekaj stolpcev. Dodala bom dva stolpca, zato natančno sledite.

Tukaj je treba storiti Kliknite ikono plus (+), pomaknite se do Elementi postavitve in kliknite na Stolpci zavihek, kot je prikazano na spodnji sliki.

stolpec urednik gutenberg

Gutenberg privzeto doda dva stolpca. Glej sliko spodaj in ne pozabite, da sem že dodal vsebino v stolpce.

gutenbergov stolpce v urejevalniku wordpressa

Kar me dobi:

frontend stolpcev gutenberga

Ni slabo za nekaj sekund dela. Morda pa nočete ustvarjati stolpcev. Mogoče želite prikazati sliko zraven besedila.

Ali obstaja blok za to? Da, obstaja!

Kako dodati sliko poleg besedila v Gutenbergu

Ali želite dodati sliko zraven besedila? Če je tako, vam bo všeč naslednji razdelek.

Kot običajno kliknite ikono plus (+), pomaknite se do Elementi postavitve in kliknite Mediji in besedilo kot je prikazano spodaj.

blok medijev in besedila gutenberg

Morali bi videti Mediji in besedilo blok, kot je prikazano spodaj.

medijski in besedilni blok v gutenbergu

Nato naložite svojo sliko / video / medij ali dodajte iz knjižnice predstavnosti. Po tem dodajte besedilo poleg medija, kot je prikazano na spodnji sliki.

Igral sem se z Mediji in besedilo blok, in prišel sem do naslednjega. Pazite; Tudi tam sem uspel stisniti gumb ��

medijski in besedilni blok v polni akciji

Oh, to je zadnji del! Naj vam pokažem sprednji del. Tukaj:

blok medijskega besedila v gutenbergu

Izgleda zelo profesionalno, kajne? Zagotovo si lahko predstavljate, koliko lahko z urednikom Gutenberg dosežete.

Gutenberški bloki tretjih strank

Razvijalci WordPressa si prizadevajo, da bi teme in vtičniki postali kompatibilni z Gutenbergovim urejevalnikom. Nekaj ​​primerov vključuje WooCommerce, Jetpack in Yoast SEO.

V objavo v programu WordPress lahko na primer dodate bloke WooCommerce. Najprej morate namestiti in aktivirati WooCommerce.

Nato v novi vrstici kliknite ikono plus (+) in se pomaknite do WooCommerce in izberite poljuben blok, kot je prikazano spodaj.

woocommerce gutenberški bloki

Veste, kaj to pomeni? To pomeni, da lahko v nekaj minutah ustvarite obogatene medije in odlične objave in strani.

Drugi pomembni bloki

Že imamo več kot 2000 besed in če bomo tako nadaljevali, bomo na koncu napisali celotno e-knjigo. Moja molitev je, da lahko zdaj uporabljate Gutenberg brez kolcanja.

To je nenavadno, tukaj je seznam drugih razpoložljivih blokov.

  • Gradniki – V objave na spletnem dnevniku lahko dodate vsebino iz svojih pripomočkov
  • Kratke kode – Še vedno lahko uporabljate izvorne kode za WordPress
  • Klasična – Odličen blok, ki hrani vašo staro vsebino
  • Več – Blok je bil prej znan kot Preberi več oznaka
  • Prelom strani, ločilniki, distančniki
  • HTML po meri, Pullquote, Tabela
  • Galerija in Avdio / video HTML5
  • In toliko več, odvisno od tem in vtičnikov, ki jih uporabljate

Na stran: Ustvarjanje strani WordPress je podobno ustvarjanju objave, razen nekajminutnih razlik, zato se danes ne bomo s tem ukvarjali..

Hitre Gutenbergove bližnjice in tipkovnice

Gutenberg ima nekaj hekerjev in bližnjic na tipkovnici, ki jih še olajšajo. Na primer, če vnesete »/« v blok odstavkov, se prikaže seznam blokov.

Določen blok lahko celo izberete tako, da po poševnici (/) vtipkate naslov bloka (/), npr. Če tipkate “/ image”, se blok slike prikaže med drugimi bloki, povezanimi s sliko. Za podrobnosti si oglejte spodnjo sliko.

bližnjica za vtičnico gutenberg

Bližnjice na tipkovnici: Če si želite ogledati vse razpoložljive bližnjice, pritisnite SHIFT + ALT + H v operacijskem sistemu Windows in OPT + CTRL + H v Macu.

Na vrhu dokumenta lahko vidite strukturo dokumenta s klikom na ikono (i), kot je prikazano spodaj.

gutenberška struktura dokumentov

Lepo. Izredno gladko.

Oh, in mimogrede, napaka »Posodobitev ni uspela« se ponavadi zgodi zaradi sunkovite internetne povezave ��


Med vami je Gutenberg fantastičen urejevalnik vsebin. Pod pogojem, da ste se pripravljeni naučiti vrvi; lahko v prihodnosti uredite WordPress urejevalce veliko.

Gutenberg je še vedno razmeroma mlad in pričakujete lahko, da bo zrasel po uporabnosti in funkcionalnosti. Resno se bomo morali spoprijeti v prihodnjih dneh. Ustvarjalci strani bolje pazijo, ali jim bo zmanjkalo podjetij business

Upamo, da vam je vodnik po Gutenbergu po korakih pomagal, da stvari postavite v perspektivo. Verjamemo, da lahko zdaj urejevalnik blokov ustvarite vsebino, kot je profesionalec.

Skrbe, misli in vprašanja delite v spodnjem razdelku za komentarje.

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