Guía paso a paso del generador de Gutenberg para WordPress

Guía paso a paso del generador de Gutenberg para WordPress

Creo que estará de acuerdo cuando diga: Todo este asunto de Gutenberg es confuso..


En primer lugar, ¿es difícil usar el nuevo editor de bloques o qué? Quiero decir, no sabes a dónde fueron todas tus herramientas favoritas. Ahora, probablemente te tomó más tiempo crear una publicación, ¿verdad??

Tal vez agregar un enlace (afiliado o de otro tipo) le arrojó una gran curva y se sintió decepcionado. Tal vez tuvo problemas para agregar una imagen al lado de su texto.

Quizás intentaste agregar varias columnas y las cosas no funcionaron como se esperaba. Si ese no es el caso, tal vez no pueda agregar sus archivos PDF fácilmente o vea el temido mensaje “Error de actualización”..

Bueno, no te preocupes más; Estaba en su posición exacta no hace mucho, pero ahora encuentro que Gutenberg es emocionante de usar. Hay una curva de aprendizaje, sí, pero al final de la publicación de hoy, pensarás en Gutenberg de manera diferente.

¿Qué es el editor Gutenberg??

editor de wordpress gutenberg

Estás viendo Gutenberg, el editor de bloques predeterminado de WordPress

Si está utilizando WordPress 5.0 y superior, debe haberse encontrado con el nuevo y brillante editor de WordPress, conocido como Gutenberg.

Y al igual que muchos otros usuarios, desea utilizar el editor revolucionario, pero duda si Gutenberg es complicado.

O tal vez cuando conociste a Gutenberg, varias cosas no funcionaron. Después de todo, los desarrolladores hicieron y siguen haciendo que los temas y complementos sean compatibles con el editor de bloques.

Entonces, rápidamente volviste al Editor clásico, lo cual, por cierto, está bien con nosotros. Solo tenga en cuenta que WordPress no admitirá el Editor clásico después de 2022. Además, se está perdiendo todas las ventajas adicionales que Gutenberg ofrece.

En términos de funcionalidad, el Editor clásico y Gutenberg hacen lo mismo; ya sabes, ambas herramientas te ayudan a crear contenido sin codificar.

Sin embargo, estamos tan acostumbrados al antiguo editor WYSIWYG que la adaptación a la nueva interfaz de usuario de Gutenberg es un poco extraña, si no completamente confusa. Al menos eso creo..

Pero, ¿qué es exactamente Gutenberg??

Gutenberg es el nuevo editor predeterminado de WordPress. Es diferente al editor visual / de texto tradicional; Gutenberg usa bloques de contenido como muchos creadores de páginas modernos.

Se entrega con características más intuitivas que el Editor clásico, lo que significa que puede crear contenido de medios enriquecidos sobre la marcha. Ahora, puede crear diseños extraordinarios rápidamente si está trabajando con publicaciones o páginas de WordPress.

Y con un par de complementos, Gutenberg puede competir favorablemente con los creadores de páginas de WordPress establecidos como Brizy, Elementor y Divi..

¡El único inconveniente es que los creadores de páginas a menudo ofrecen más funciones porque son principalmente constructores de páginas! Al mismo tiempo, Gutenberg todavía es bastante joven, y solo puede esperar que el editor de bloques crezca a pasos agigantados..

En la publicación de hoy, nos divertiremos creando una publicación de WordPress con el editor Gutenberg. Mi objetivo es cubrir cada pequeño detalle y característica para que pueda usar Gutenberg para crear contenido como los profesionales.

¿Estás listo? Si es así, creemos esa publicación de WordPress.

Cómo crear una publicación de WordPress con Gutenberg

Si ejecuta un sitio web de WordPress, probablemente cree más publicaciones que páginas. En la siguiente sección, creamos una publicación de WordPress en Gutenberg desde cero. Espero que te diviertas tanto como yo cuando probé Gutenberg.

Que fuera del camino, navegue a Publicaciones> Agregar nuevo como destacamos en la captura de pantalla a continuación.

creando una nueva publicación en gutenberg

Hacerlo te lleva directamente al editor de Gutenberg que se muestra a continuación.

editor de WordPress Gutenberg

Bastante ordenado, ¿eh? Ahora, arremanguemos esas mangas y empecemos a trabajar.

Agregar un título

agregando un nuevo título en gutenberg

No puedes escribir una publicación sin un título sólido. Lo bueno es que Gutenberg hace que sea increíblemente fácil agregar un título.

El primer bloque que ves es el Título en la parte superior del documento como detallamos en la imagen de arriba. Para crear un título para su publicación, escriba dentro del bloque. Simple como A, B, C.

¿Necesita editar el enlace permanente? Puedes hacerlo fácilmente en el Título bloquear haciendo clic en el Editar botón como se muestra a continuación.

editar post enlace permanente en gutenberg

Después de agregar su título, presione el ENTRAR clave para comenzar una nueva línea. Ah, sí, Gutenberg conserva la navegación nativa que amabas en el clásico editor de WordPress.

Agregar un nuevo párrafo

nuevo bloque de párrafos en gutenberg

Golpear el ENTRAR clave crea una nueva Párrafo bloque, como se muestra arriba. Antes de escribir cualquier texto, el bloque le presenta un par de opciones. Vea la imagen numerada a continuación para más detalles..

nuevas opciones de bloque de párrafo gutenberg

Notas Usted puede:

  1. Convierta el nuevo bloque de párrafo en cualquier otro bloque, por ejemplo, imagen, encabezado, portada, galería, WooCommerce, formulario, etc..
  2. Use el acceso directo para cambiar el bloque de párrafo en un bloque de imagen
  3. Cambie el bloque de párrafo en un bloque de encabezado, es decir, H2, H3 y H4
  4. Transforma el bloque de párrafo en un bloque de imagen de portada

Con fines ilustrativos, reservaré el primer párrafo para la introducción posterior. Una vez que agrega texto, aparece una barra de herramientas de formato como se muestra a continuación.

barra de herramientas de formato de párrafo gutenberg

Gracias a la barra de herramientas de formato, puede:

  • Convierta el párrafo en un verso, cita, encabezado, lista, código y texto preformateado
  • Negrita, Escribir en cursiva, tachado, y subrayar contenido
  • Alinear texto a la izquierda, derecha, centro y justificar
  • Agregue un enlace que también se puede abrir en una pestaña nueva
  • Insertar una imagen en línea (sí, ¡existe!)
  • Ocultar configuración de bloque
  • Duplicar el bloque
  • Inserte un bloque antes o después del bloque actual (en nuestro caso, ese es el primer párrafo, por lo que no estamos agregando nada antes, solo después). Si lo desea, puede agregar un bloque de imagen de portada antes del primer párrafo porque así lo parece bueno
  • Edite el bloque como HTML
  • Agregue el bloque actual a los bloques reutilizables para que pueda usarlo en otras publicaciones
  • Eliminar el bloque por completo

Puede personalizar aún más el bloque de párrafo con las opciones disponibles en el Bloquear pestaña que se encuentra en el menú de la barra lateral como se muestra a continuación.

Opciones de la barra lateral de Gutenberg para el bloque de párrafo

Algunas notas sobre la imagen de arriba:

  1. Elegir la Bloquear pestaña aquí para ver todas las opciones y configuraciones de bloqueo
  2. Seleccione el tamaño de fuente y active Drop Cap aquí
  3. Agregue color de fondo a su párrafo. Lo configuré en azul con fines ilustrativos. También puede personalizar el color del texto. En ambos casos, puede agregar colores personalizados ilimitados
  4. Puede agregar una clase CSS personalizada aquí, lo que significa que puede agregar estilos CSS adicionales a su bloque
  5. El fondo azul y Drop Cap ya aplicados en el editor Gutenberg

La pestaña de documento en la barra lateral

Hay otra pestaña en el menú de la barra lateral; la Documento pestaña como se muestra a continuación.

pestaña de documento de barra lateral de bloque de párrafo

Aquí, las notas para la imagen de arriba:

  1. Haga clic aquí para alternar a Documento lengüeta
  2. Aquí puedes programar una publicación, configurar la visibilidad para PrivadoPúblico, establecer una publicación para Revisión pendiente estado, elija el formato de publicación y cree una publicación fija
  3. La sección te permite editar tu enlace permanente
  4. Puedes seleccionar o crear nuevas categorías aquí
  5. Agrega etiquetas a tu publicación
  6. Establecer imagen destacada
  7. Crear un extracto manual
  8. Permitir comentarios, pingbacks y trackbacks

Como puede ver, tiene muchas opciones para diseñar un bloque de párrafo (y toda la publicación) de la forma que desee. Por cierto, diferentes bloques vienen con diferentes configuraciones como aprenderemos en un minuto.

Después del primer párrafo, presione el ENTRAR tecla nuevamente para crear una nueva línea (o bloque de párrafo). Ahora, agreguemos una imagen debajo del primer párrafo.

Agregar imágenes en Gutenberg

Agregar una nueva imagen en Gutenberg

Dicen que una imagen dice más que mil palabras, y una publicación de blog sin imágenes es, sin embargo, monótona. Para agregar una imagen en su publicación de WordPress usando Gutenberg, tiene un par de opciones.

Cuando golpeas el ENTRAR clave hace unos momentos, activó un nuevo bloque de párrafo. Como Gutenberg es intuitivo, puede agregar una imagen haciendo clic en los íconos más (+), imagen o portada como resaltamos en la imagen a continuación.

Agregar una nueva imagen en el editor Gutenberg

Un par de notas:

  1. Puede agregar una imagen a través de los iconos más (+)
  2. Aquí, puedes agregar una imagen fácilmente
  3. Esta opción le permite agregar un cubrir imagen (por lo general, son más grandes que otras fotos. Además, puede agregar texto en las imágenes de portada, por cierto)

Continúe y haga clic en cualquiera de los iconos más (+). A continuación, haga clic en el Imagen pestaña, como se muestra a continuación.

agregar imágenes en gutenberg

Al hacer clic en el Imagen pestaña carga el Imagen bloque que se muestra en la captura de pantalla a continuación.

bloque de imagen de gutenberg

los Imagen El bloque le permite cargar una imagen o agregar una desde una URL o la biblioteca de medios. En el proceso, puede agregar texto alternativo (importante para SEO), subtítulos y descripción a través de la configuración de la pantalla de medios, o el Bloquear barra lateral como se muestra en las siguientes imágenes.

La configuración de medios habitual …

ajustes de medios de wordpress

…y el Imagen configuración de bloque.

configuración de bloqueo de imagen de gutenberg

¿Estás aprendiendo algo aquí hoy? Yo espero que sí. Vamonos.

Después de agregar su imagen, Gutenberg agrega un nuevo bloque de párrafo justo debajo de él. Puedes agregar lo que quieras, pero con fines ilustrativos, agregué texto y luego un botón debajo de ese.

Cómo agregar archivos descargables, p. PDF, imágenes, videos, etc.

Gutenberg hace que sea increíblemente fácil agregar archivos descargables a su publicación o página de WordPress.

En un nuevo Párrafo bloque, haga clic en el ícono más (+), navegue hasta Bloques comunes y golpear el Expediente pestaña como destacamos a continuación.

Agregar archivos descargables en Gutenberg

Al hacerlo, se inicia el siguiente bloque:

bloque de archivo gutenberg

Desde el Expediente bloque, puede cargar un nuevo archivo o agregar uno desde su biblioteca de medios. Después de agregar su archivo, Gutenberg agrega un lindo Descargar botón automáticamente como se ve en la imagen a continuación.

agregar archivo en gutenberg

Puedes jugar con las opciones. Por ejemplo, puede editar / eliminar el “Lista de verificación PDF gratuita de Gutenberg“Título, así como el Descargar botón. Puede agregar una clase CSS al bloque y aplicarle el estilo que desee.

Agregar una cotización en Gutenberg

A continuación, agreguemos una cotización porque son encantadores, pegadizos y te ayudan a llevar el punto a casa. En una nueva línea, haga clic en el signo más (+), navegue hasta Bloques comunes y golpear el Citar pestaña como se muestra a continuación.

agregando citas en gutenberg

Hacerlo agrega el Citar bloquee su publicación como destacamos en la captura de pantalla a continuación.

configuración de bloque de cotización de gutenberg

Observe la configuración del bloque de comillas en la barra lateral derecha arriba?

Para agregar su presupuesto, escriba dentro del bloque. Aquí está mi resultado.

cita de Gutenberg

Se ve increíble, cierto?

Agregar incrustaciones de medios en Gutenberg

Gutenberg viene con varios bloques para insertar videos y otros medios de más de 30 sitios como YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, etc..

Para insertar contenido, haga clic en el ícono más (+), vaya a Embebidos, y elige el sitio. Por ejemplo, quería YouTube, como se muestra a continuación..

gutenberg youtube incrustar

A continuación, copie y pegue la URL del video de YouTube y haga clic en Empotrar botón como se muestra en la imagen a continuación.

bloque de inserción gutenberg youtube

Tan pronto como golpeas el Empotrar botón, Gutenberg convierte el enlace en un video automáticamente como destacamos a continuación.

video de youtube incrustado en gutenberg

Navegación suave hasta el final. Ahora, agreguemos un botón independiente que sea perfecto para crear una llamada a la acción (CTA).

Cómo agregar un botón en Gutenberg

No debería tener dificultades para agregar bloques en este momento. Simplemente haga clic en el signo más (+) y elija su bloque. No puede ser más fácil que eso.

Entonces, ¿cómo agregamos un botón??

En una nueva línea (o bloque), haga clic en el ícono más (+), navegue hasta Elementos de diseño y haga clic en Botón pestaña como se muestra a continuación.

agregar botones en el editor de gutenberg

Hacerlo te lleva a la Botón bloquear como detallamos a continuación.

agregar botones en el editor de gutenberg

Como puede ver en la imagen de arriba, puede editar el texto del botón y agregar un enlace. Además, puede personalizar el botón a través del menú de la barra lateral a la derecha de la pantalla.

Después de un par de clics, esto es lo que obtuve.

ejemplo de botón de gutenberg

Por cierto, si usa combinaciones de colores difíciles de leer en sus botones, Gutenberg te avisará de inmediato. Que agradable?

Cómo agregar columnas en Gutenberg

Con un hermoso botón en su lugar, agreguemos algunas columnas. Agregaré dos columnas, así que sigue con cuidado.

Esto es lo que debes hacer. Haga clic en el ícono más (+), navegue hasta Elementos de diseño y haga clic en Columnas pestaña como se ve en la imagen a continuación.

pestaña columnas editor gutenberg

Gutenberg agrega dos columnas por defecto. Vea la imagen a continuación y recuerde que ya he agregado contenido a las columnas..

columnas de gutenberg en editor de wordpress

Lo que me atrapa:

interfaz de columnas de gutenberg

No está mal por unos segundos de trabajo. Pero tal vez no desee crear columnas. Tal vez quieras mostrar una imagen junto a algún texto.

¿Hay un bloque para eso? Sí hay!

Cómo agregar una imagen junto al texto en Gutenberg

¿Estás buscando agregar una imagen junto a algún texto? Si es así, te encantará la siguiente sección.

Como de costumbre, haga clic en el ícono más (+), navegue hasta Elementos de diseño y haga clic Medios y texto Como se muestra abajo.

bloque de gutenberg de medios y texto

Deberías ver el Medios y texto bloque, como se muestra a continuación.

bloque de medios y texto en gutenberg

Luego, cargue su imagen / video / medios o agregue uno de la biblioteca de medios. Después de eso, agregue su texto al lado de los medios, como se muestra en la imagen a continuación.

Jugué con el Medios y texto bloque, y se me ocurrió lo siguiente. Cuidate Me las arreglé para apretar un botón allí también ��

bloque de medios y texto en plena acción

¡Oh, ese es el back-end! Déjame mostrarte el front-end. Aquí:

bloque de texto de medios en gutenberg

Se ve muy profesional, ¿verdad? Ciertamente puede imaginar cuánto puede lograr con el editor Gutenberg.

Bloques de Gutenberg de terceros

Los desarrolladores de WordPress están interesados ​​en hacer que los temas y complementos sean compatibles con el editor Gutenberg. Algunos ejemplos incluyen WooCommerce, Jetpack y Yoast SEO.

Por ejemplo, puede agregar bloques WooCommerce en su publicación de WordPress. En primer lugar, debes instalar y activar WooCommerce.

Luego, en una nueva línea, haga clic en el ícono más (+), navegue hasta WooCommerce y elija el bloque que desee como se muestra a continuación.

bloques de gutenberg woocommerce

¿Sabes qué significa esto? Significa que puede crear medios enriquecidos y excelentes publicaciones y páginas en cuestión de minutos.

Otros bloques notables

Ya tenemos más de 2.000 palabras, y si seguimos así, terminaremos escribiendo un libro electrónico completo. Mi oración es que ahora puedes usar Gutenberg sin ningún problema.

Fuera del camino, aquí hay una lista de los otros bloques disponibles.

  • Widgets – Puedes agregar contenido de tus widgets en publicaciones de blog
  • Shortcodes – Todavía puede usar códigos cortos nativos de WordPress
  • Clásico – Un gran bloque que contiene tu contenido anterior
  • Más – El bloque se conocía anteriormente como el Lee mas etiqueta
  • Salto de página, separadores, espaciadores
  • HTML personalizado, Pullquote, Tabla
  • Galería y HTML5 audio / video
  • Y mucho más dependiendo de los temas y complementos que uses

Aparte: Crear una página de WordPress es similar a crear una publicación guardada por algunas diferencias de minutos, por lo que no profundizaremos en eso hoy.

Hacks rápidos de Gutenberg y atajos de teclado

Gutenberg viene con un par de trucos y atajos de teclado que lo hacen aún más fácil. Por ejemplo, si escribe “/” dentro de un bloque de párrafo, aparece una lista de bloques.

Incluso puede seleccionar un bloque específico escribiendo el título del bloque después de la barra diagonal inversa (/), por ejemplo, al escribir “/ image” aparece el bloque de imagen entre otros bloques relacionados con la imagen. Ver imagen a continuación para más detalles.

Atajo de reacción violenta de Gutenberg

Atajos de teclado: Para ver todos los atajos disponibles, presione MAYÚS + ALT + H en Windows y OPT + CTRL + H en Mac.

En la parte superior del documento, puede ver la estructura del documento haciendo clic en el icono (i), como se muestra a continuación.

estructura del documento de gutenberg

Agradable. Extraordinariamente suave.

Ah, y por cierto, el error “Error de actualización” generalmente ocurre debido a una conexión a Internet inestable ��


Entre usted y yo, Gutenberg es un editor de contenido fantástico. Siempre que estés dispuesto a aprender las cuerdas; puedes cosechar mucho del editor de WordPress del futuro.

Gutenberg todavía es relativamente joven, y puede esperar que crezca en términos de usabilidad y funcionalidad. Será una fuerza seria a tener en cuenta en los próximos días. Los constructores de páginas deben tener cuidado, o se quedarán sin negocio ��

Esperamos que nuestra guía paso a paso del editor Gutenberg lo haya ayudado a poner las cosas en perspectiva. Creemos que ahora puede usar el editor de bloques para crear contenido como un profesional.

Comparta sus inquietudes, pensamientos y preguntas en la sección de comentarios a continuación..

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