Guia pas a pas del constructor de Gutenberg per a WordPress

Guia pas a pas del constructor de Gutenberg per a WordPress

Crec que hi estareu d’acord quan dic: tot aquest negoci de Gutenberg és confús.


En primer lloc, és difícil utilitzar el nou editor de blocs o què? Vull dir, no sabeu cap a on van anar totes les vostres eines preferides. Ara, probablement heu trigat més a crear una publicació, no?

Potser si afegint un enllaç (afiliació o altrament) us va causar una corba i us sentireu decebuts. Potser teníeu problemes en afegir una imatge al costat del text.

Potser heu intentat afegir diverses columnes i les coses no han funcionat com s’esperava. Si no és així, potser no podeu afegir els fitxers PDF amb facilitat o veureu el temut “Actualització fallida” del missatge diverses.

Bé, no et preocupis més; Jo no feia gaire temps que estava en la seva posició exacta, però ara em sembla una emoció a Gutenberg. Hi ha una corba d’aprenentatge, sí, però al final de la publicació d’avui, pensareu en Gutenberg d’una altra manera.

Què és l’editor de Gutenberg?

editor de wordpress gutenberg

Esteu veient Gutenberg, l’editor predeterminat de blocs de WordPress

Si utilitzeu WordPress 5.0 i versions posteriors, heu d’haver topat amb el nou i brillant editor de WordPress, conegut cèlebrement com a Gutenberg.

Igual que molts altres usuaris, voleu fer servir l’editor revolucionari, però no dubteu perquè Gutenberg és complicat.

Potser quan vau conèixer Gutenberg per primera vegada, diverses coses no funcionaven. Al cap i a la fi, els desenvolupadors han sigut i segueixen compatibilitzant els temes i complements amb l’editor de blocs.

Així, vau tornar ràpidament a la secció Editor clàssic, cosa que, BTW, està bé amb nosaltres. Tingueu en compte que WordPress no admetrà l’editor clàssic després del 2022. A més, us en perdreu totes les bondats addicionals que ofereix Gutenberg..

En termes de funcionalitat, l’editor clàssic i Gutenberg fan el mateix; ja sabeu, totes dues eines us ajuden a crear contingut sense codificar.

Tanmateix, estem tan acostumats a l’antic editor de WYSIWYG que ens sembla adaptar-nos a la nova interfície d’usuari de Gutenberg una mica aliena, si no totalment confusa. Almenys això és el que crec.

Però, què és exactament Gutenberg?

Gutenberg és el nou editor de WordPress per defecte. No és diferent al tradicional editor de visual / text; Gutenberg utilitza blocs de contingut com molts creadors de pàgines actuals.

S’ofereix amb funcions més intuïtives que l’editor clàssic, cosa que significa que podeu crear contingut multimèdia sobre la marxa. Ara, podeu esborrar disposicions extraordinàries ràpidament tant si treballeu amb publicacions o pàgines de WordPress.

I amb un parell de complements, Gutenberg pot competir favorablement amb constructors de pàgines de WordPress consolidats com Brizy, Elementor i Divi.

L’únic inconvenient és que els creadors de pàgines solen oferir més funcions perquè són principalment constructors de pàgines. Al mateix temps, Gutenberg encara és força jove i només podeu esperar que l’editor de blocs creixi de manera continuada.

A la publicació d’avui passarem un moment emocionant creant una publicació de WordPress amb l’editor de Gutenberg. Vull cobrir tots els detalls i característiques possibles per tal que pugueu utilitzar Gutenberg per crear contingut com els professionals.

Estàs preparat? En cas afirmatiu, creem aquesta publicació de WordPress.

Com crear una publicació de WordPress amb Gutenberg

Si teniu un lloc web de WordPress, probablement creeu més publicacions que pàgines. A la següent secció, creem des de zero una publicació de WordPress a Gutenberg. Espero que us divertireu tant com jo quan vaig provar Gutenberg.

Per això, navegueu cap a Publicacions> Afegir novetat com ressaltem a la captura de pantalla següent.

crear una publicació nova a gutenberg

Si ho feu, us dirigireu directament a l’editor de Gutenberg que es mostra a continuació.

editor de wordpress gutenberg

Bastant ordenat, eh? Ara, anem a enrotllar aquestes mànigues i ens posem al negoci.

Afegir un títol

afegint un nou títol a gutenberg

No podeu escriure una publicació sense un títol sòlid. El bo és que Gutenberg fa molt fàcil afegir un títol.

El primer bloc que veieu és el Títol a la part superior del document tal i com es detalla a la imatge superior. Per crear un títol per a la publicació, escriviu el bloc. Senzill com A, B, C.

Cal editar el enllaç permanent? Podeu fer-ho fàcilment al directori Títol feu clic a la tecla Edita com es mostra a continuació.

edita la publicació enllaç permanent a Gutenberg

Després d’afegir el títol, toqueu el botó ENTRAR per iniciar una nova línia. Oh, sí, Gutenberg conserva la navegació nativa que us agradava en el clàssic editor de WordPress.

Afegir un paràgraf nou

nou bloc de paràgrafs a Gutenberg

Colpejant la ENTRAR la clau crea una nova Paràgraf com es pot veure, Abans d’escriure qualsevol text, el bloc us ofereix un parell d’opcions. Vegeu la imatge numerada a continuació per obtenir més detalls.

Opcions de bloc de paràgraf nou gutenberg

Notes. Tu pots:

  1. Convertiu el bloc de paràgrafs nou en qualsevol altre bloc, per exemple, imatge, encapçalament, portada, galeria, WooCommerce, formulari, etc..
  2. Utilitzeu la drecera per canviar el bloc de paràgrafs en un bloc d’imatges
  3. Canvieu el bloc de paràgrafs en un bloc d’encapçalament, és a dir, H2, H3 i H4
  4. Transformar el bloc de paràgrafs en un bloc d’imatges de portada

A títol il·lustrador, reservaré el primer paràgraf per a la introducció del post. Un cop afegiu algun text, apareix una barra d’eines de format com es mostra a continuació.

barra d’eines de format de paràgraf de Gutenberg

Gràcies a la barra d’eines de format, podeu:

  • Cobriu el paràgraf en un vers, cita, rúbrica, llista, codi i text preformatat
  • Negre, Itàlica, discreta, i subratllar contingut
  • Alineeu el text a l’esquerra, a la dreta, al centre i justifiqueu
  • Afegiu un enllaç que també es pot obrir en una pestanya nova
  • Inseriu una imatge en línia (sí, existeix!)
  • Amagueu la configuració del bloc
  • Duplicar el bloc
  • Inseriu un bloc abans o després del bloc actual (en el nostre cas, aquest és el primer paràgraf, de manera que no s’afegeix res abans, només després.) Podeu afegir un bloc d’imatges de portada abans del primer paràgraf si així ho voleu, perquè sembla bé
  • Editeu el bloc com a HTML
  • Afegiu el bloc actual als blocs reutilitzables perquè pugueu utilitzar-lo en altres publicacions
  • Traieu el bloc completament

Podeu personalitzar més el bloc de paràgrafs amb les opcions disponibles a la secció Bloc fitxa que es troba al menú de la barra lateral com es mostra a continuació.

Opcions de la barra lateral de gutenberg per al bloc de paràgrafs

Algunes notes sobre la imatge anterior:

  1. Escull el Bloc pestanya aquí per veure totes les opcions i configuracions del bloc
  2. Seleccioneu la mida del tipus de lletra i activeu el casquet
  3. Afegiu color de fons al vostre paràgraf. Ho vaig posar a blau amb finalitats il·lustradores. També podeu personalitzar el color del text. En ambdós casos, podeu afegir colors personalitzats il·limitats
  4. Podeu afegir una classe CSS personalitzada aquí, és a dir, podeu afegir estils CSS addicionals al bloc
  5. El fons blau i el casquet de gota ja s’han aplicat a l’editor de Gutenberg

La pestanya Document a la barra lateral

Hi ha una altra pestanya al menú de la barra lateral; el Document fitxa com es mostra a continuació.

fitxa de document de la barra lateral del bloc de paràgrafs

Aquí, les notes de la imatge anterior:

  1. Feu clic aquí per canviar a Document fitxa
  2. Aquí podeu programar una publicació, definir-ne la visibilitat PrivatPúblic, estableix una publicació a Revisió pendent estat, escolliu el format de la publicació i creeu una publicació enganxosa
  3. La secció us permet editar el vostre enllaç permanent
  4. Podeu seleccionar o crear noves categories aquí
  5. Afegiu etiquetes a la publicació
  6. Estableix la imatge destacada
  7. Creeu un extracte manual
  8. Permet comentaris, pingbacks i trackbacks

Com podeu veure, tens moltes opcions per dissenyar un bloc de paràgrafs (i tota la publicació) segons la forma que desitgis. Per cert, els diferents blocs tenen configuració diferent, ja que aprendrem en un minut.

Després del primer paràgraf, premeu el botó ENTRAR torna a crear la tecla (o bloc de paràgrafs). Ara, afegim una imatge per sota del primer paràgraf.

Afegir imatges a Gutenberg

afegint una nova imatge a gutenberg

Diuen que una imatge parla de mil paraules i que una publicació al bloc sense imatges és, bé, tènue. Per afegir una imatge a la publicació de WordPress mitjançant Gutenberg, teniu un parell d’opcions.

Quan toqueu el botó ENTRAR clau fa uns instants, heu activat un nou bloc de paràgrafs. Si veieu que Gutenberg és intuïtiu, podeu afegir una imatge fent clic a les icones més (+), imatge o portada tal com destaquem a la imatge següent.

afegint una nova imatge a l'editor de gutenberg

Un parell de notes:

  1. Podeu afegir una imatge mitjançant les icones més (+)
  2. Aquí, podeu afegir una imatge fàcilment
  3. Aquesta opció us permet afegir una coberta imatge (normalment són més grans que altres fotos. A més, podeu afegir text a les imatges de portada, BTW)

Endavant i feu clic a qualsevol de les icones més (+). A continuació, feu clic a la tecla Imatge , tal com es mostra a continuació.

afegint imatges a gutenberg

Feu clic a la Imatge la pestanya carrega la Imatge que es mostra a la captura de pantalla següent.

bloc d’imatges de gutenberg

El Imatge bloc us permet penjar una imatge o afegir-ne una des d’un URL o de la mediateca. En el procés, podeu afegir text alt (important per a SEO), subtítols i descripció a través de la configuració de la pantalla de suports o Bloc barra lateral com es mostra a les imatges següents.

La configuració habitual dels suports …

Configuració dels suports de text

…i la Imatge configuració del bloc.

Configuració del bloc d’imatges de gutenberg

Estàs aprenent alguna cosa aquí avui? Això espero. Posem-nos en marxa.

Després d’afegir la vostra imatge, Gutenberg afegeix un bloc de paràgrafs just a sota seu. Podeu afegir el que vulgueu, però amb finalitats il·lustradores, he afegit un text i un botó per sota.

Com afegir fitxers descarregables, per exemple, PDF, Imatges, Vídeos, etc

Gutenberg fa que sigui molt fàcil afegir fitxers descarregables a la vostra pàgina o pàgina de WordPress.

En una novetat Paràgraf , feu clic a la icona més (+) i aneu a Blocs comuns i toqueu el botó Dossier fitxa com ressaltem a continuació.

afegint fitxers descarregables a gutenberg

En fer-ho, llança el següent bloc:

bloc de fitxers gutenberg

Des del Dossier , podeu pujar un fitxer nou o afegir-ne un de la biblioteca de suports. Després d’afegir el vostre fitxer, Gutenberg afegeix un valent descarregar botó automàticament com es pot veure a la imatge de sota.

afegir fitxer a gutenberg

Podeu jugar amb les opcions. Per exemple, podeu editar / eliminar el “Llista de comprovació PDF gratuïta de Gutenberg”, Així com el títol descarregar botó. Podeu afegir una classe CSS al bloc i estilar-la com vulgueu.

Afegir un pressupost a Gutenberg

A continuació, afegim un pressupost perquè són encantadors, atractius i us ajudaran a conduir cap a casa. En una nova línia, feu clic al signe plus (+) i aneu a Blocs comuns i toqueu el botó Citar fitxa com es mostra a continuació.

afegint pressupostos a gutenberg

Si ho fa, afegeix la secció Citar bloquegeu-lo a la publicació, tal com ressaltem a la pantalla de sota.

Configuració del bloc de cotitzacions de Gutenberg

Observeu la configuració del bloc de cotitzacions a la barra lateral dreta de dalt?

Per afegir la vostra cotització, escriviu dins del bloc. Aquí està el meu resultat.

cita de Gutenberg

Sembla increïble, no?

Afegint incrustacions multimèdia a Gutenberg

Gutenberg inclou diversos blocs per incrustar vídeos i altres suports de més de 30 llocs com YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, etc..

Per incorporar contingut, feu clic a la icona més (+), aneu a Incrustacions, i escolliu el lloc. Per exemple, volia YouTube, com es mostra a continuació.

gutenberg youtube embed

A continuació, copieu i enganxeu l’URL de vídeo de YouTube i feu clic a Incrustar com es mostra a la imatge de sota.

bloc de incorporació de gutenberg youtube

Tan aviat com toqueu el botó Incrustar botó, Gutenberg encobrir l’enllaç en un vídeo automàticament com ressaltem a continuació.

vídeo de YouTube incrustat a gutenberg

Navegació llisa tot el camí. Afegim ara un botó autònom perfecte per crear una crida a l’acció (CTA).

Com afegir un botó a Gutenberg

En aquest moment no us hauria de passar gaire problemes per afegir blocs. Feu clic a plus (+) i trieu el vostre bloc. No pot ser més fàcil que això.

Per tant, com afegir un botó?

En una nova línia (o bloc), feu clic a la icona més (+), aneu a Elements de disseny i feu clic a Botó fitxa com es mostra a continuació.

afegir botons a l’editor de gutenberg

Si ho fas, et condueix a la secció Botó com es detalla a continuació.

afegir botons a l’editor de gutenberg

Com es pot veure a la imatge superior, podeu editar el text del botó i afegir-hi un enllaç. A més, podeu personalitzar el botó mitjançant el menú de la barra lateral a la dreta de la pantalla.

Després de dos clics, aquí teniu el que tinc.

exemple del botó gutenberg

Per cert, si feu servir combinacions de colors difícils de llegir als vostres botons, Gutenberg us informarà ràpidament. Que bonic?

Com afegir columnes a Gutenberg

Amb un botó preciós al seu lloc, afegim algunes columnes. Afegiré dues columnes, així que seguiu amb atenció.

Aquí teniu què fer. Feu clic a la icona més (+) i aneu a Elements de disseny i feu clic a Columnes fitxa tal com es pot veure a la imatge de sota.

editor de columnes gutenberg

De forma predeterminada, Gutenberg afegeix dues columnes. Mireu la imatge següent i recordeu que ja he afegit contingut a les columnes.

columnes gutenberg a l'editor de wordpress

El que em fa arribar:

columnes gutenberg frontend

No està malament durant uns segons de feina. Però potser no voleu crear columnes. Potser voleu mostrar una imatge al costat d’algun text.

Hi ha un bloc per això? Si aquí està!

Com afegir una imatge al costat de text a Gutenberg

Voleu afegir una imatge al costat d’algun text? Si és així, us encantarà la següent secció.

Com de costum, feu clic a la icona més (+) i aneu a Elements de disseny i feu clic Mitjans de comunicació i text com es mostra a continuació.

mitjans de comunicació i bloc de text gutenberg

Hauríeu de veure la Mitjans de comunicació i text com es mostra a continuació.

bloc de suports i textos de gutenberg

A continuació, pengeu la vostra imatge / vídeo / suports o afegiu-ne una de la biblioteca de suports. Després d’això, afegiu el vostre text al costat dels suports, tal com es mostra a la imatge següent.

Vaig jugar al voltant Mitjans de comunicació i text bloc, i vaig sortir amb el següent. Preocupa’t per tu; També vaig arreglar un botó allà there

els suports i els blocs de text en plena acció

Ah, això és el punt de mira! Permeteu-me que us mostri el front-end. Aquí:

bloc de text multimèdia a Gutenberg

Es veu molt professional, oi? Sens dubte, podeu imaginar quant podeu aconseguir amb l’editor de Gutenberg.

Blocs de tercers Gutenberg

Els desenvolupadors de WordPress són molt interessats a compatibilitzar temes i complements amb l’editor de Gutenberg. Alguns exemples inclouen WooCommerce, Jetpack i Yoast SEO.

Per exemple, podeu afegir blocs WooCommerce a la publicació de WordPress. En primer lloc, heu d’instal·lar i activar WooCommerce.

A continuació, en una nova línia, feu clic a la icona més (+) i aneu a WooCommerce i trieu el bloc que desitgeu tal com es mostra a continuació.

blocs de gutenberg

Sabeu què vol dir això? Significa que podeu crear publicacions i pàgines de suports enriquits i grans en qüestió de minuts.

Altres blocs destacables

Ja tenim més de 2.000 paraules i, si seguim, acabarem escrivint un llibre electrònic complet. La meva pregària és que ara podeu fer servir Gutenberg sense hipo.

Per descomptat, aquí teniu una llista dels altres blocs disponibles.

  • Ginys – Podeu afegir contingut dels vostres widgets a publicacions de bloc
  • Dreceres – Encara podeu utilitzar dreceres de WordPress natives
  • Clàssic – Un gran bloc que conté el vostre contingut antic
  • Més – El bloc antigament era conegut com el Llegeix més etiqueta
  • Salts de pàgina, separadors, espaciadors
  • HTML personalitzat, Pullquote, taula
  • Galeria i Àudio / vídeo HTML5
  • I molt més en funció dels temes i dels complements que utilitzeu

A part: Crear una pàgina de WordPress és semblant a crear una publicació d’estalvi per a diferències d’uns minuts, de manera que avui no s’hi aprofundirà.

Racks ràpids de Gutenberg i dreceres de teclat

Gutenberg inclou un parell de dreceres de teclat i accessoris que fan que sigui encara més fàcil. Per exemple, si escriviu “/” dins d’un bloc de paràgrafs, apareixerà una llista de blocs.

Fins i tot podeu seleccionar un bloc específic escrivint el títol del bloc després del retrocés (/), per exemple, escrivint “/ image” apareix el bloc d’imatges entre altres blocs relacionats amb la imatge. Vegeu la imatge a continuació per obtenir més detalls.

drecera de gutenberg

Dreceres de teclat: Per veure totes les dreceres disponibles, premeu MAJÚS + ALT + H a Windows i OPT + CTRL + H a Mac.

A la part superior del document, podeu veure l’estructura del document fent clic a la icona (i), com es mostra a continuació.

estructura de documents de Gutenberg

Agradable. Extraordinàriament suau.

Ah, i, per cert, l’error “Actualització fallida” sol ocórrer a causa d’una tremenda connexió a Internet ��


Entre tu i jo, Gutenberg és un editor de continguts fantàstic. Sempre que esteu disposats a aprendre les cordes; podeu aprofitar molt des de l’editor de WordPress del futur.

Gutenberg és encara relativament jove i pot esperar que creixi en termes d’usabilitat i funcionalitat. Serà una força seriosa a tenir en compte en els propers dies. Els creadors de pàgines tenen un millor compte o es quedaran sense negoci ��

Esperem que la nostra guia pas a pas per l’editor de Gutenberg us ajudés a posar les coses en perspectiva. Creiem que ara podeu utilitzar l’editor de blocs per crear contingut com un professional.

Compartiu les vostres preocupacions, pensaments i preguntes a la secció de comentaris que hi ha a continuació.

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