Paso por guía de paso para Gutenberg Builder para WordPress

Creo que estarás de acuerdo cuando digo: todo el negocio de Gutenberg está confundido. Primero, ¿es difícil usar el nuevo editor de bloque o qué? Quiero decir, no sabes a dónde fueron todas tus herramientas favoritas. Ahora, probablemente te tomaste más tiempo para crear una publicación, ¿verdad? Tal vez agregar un enlace (afiliado o algo más) ha arrojado una curva y se sintió decepcionado. Tal vez tuvo problemas para agregar una imagen al lado de su texto. Es posible que haya intentado agregar más columnas y las cosas no funcionaron como se esperaba. Si no es el caso, es posible que no pueda agregar sus archivos PDF fácilmente o ver el mensaje “fallido” temido por separado.
Bueno, no te preocupes más; Estaba en tu posición exacta no hace mucho, pero ahora creo que Gutenberg es un fior para usar. Hay una curva de aprendizaje, sí, pero al final de la publicación de hoy, pensarás en Gutenberg. ¿Qué es el editor de Gutenberg?

Miras a Gutenberg, el editor de bloques de WordPress predeterminado
Si está utilizando WordPress 5.0 y las versiones posteriores, debe haber encontrado el nuevo y brillante editor de WordPress, conocido como Gutenberg. Y, como muchos otros usuarios, desea usar el editor revolucionario, pero dudas, porque Gutenberg es complicado.
O tal vez cuando conociste a Gutenberg, varias cosas no funcionaron. Después de todo, los desarrolladores han hecho y aún hacen temas y complementos compatibles con el editor de bloques. Entonces, rápidamente regresaste al editor clásico, quien, por cierto, está de acuerdo con nosotros. Tenga en cuenta que WordPress no aceptará el editor clásico después de 2022. Además, perderá todas las golosinas adicionales ofrecidas por Gutenberg. En cuanto a la 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 de Wysiwyg que encontramos que adaptarse a la nueva interfaz Gutenberg es un poco extraña, si ni siquiera confundida. Al menos eso es lo que pienso. Pero, ¿qué es exactamente Gutenberg? Gutenberg es el nuevo editor de WordPress predeterminado. Es diferente del editor visual / texto tradicional; Gutenberg utiliza bloques de contenido como muchas páginas modernas. Se entrega con funciones más intuitivas que el editor clásico, lo que significa que puede crear contenido de medios ricos. Ahora, puede verificar rápidamente los aspectos extraordinarios, ya sea que trabaje con publicaciones o páginas de WordPress. Y con algunos suplementos, Gutenberg puede competir favorablemente con páginas dedicadas de WordPress, como Brizy, Elementor y Div. La única desventaja es que los constructores de páginas a menudo ofrecen más funciones, ¡porque son principalmente páginas! Al mismo tiempo, Gutenberg sigue siendo bastante joven y solo puede esperar que el editor de bloques crezca con grandes pasos.
En la publicación de hoy, tendremos un momento interesante para crear una publicación de WordPress con el editor de Gutenberg. Tengo el propósito de cubrir cada detalle y característica pequeña, para que pueda usar Gutenberg para crear contenido como profesionales. ¿Estás listo? Si es así, creemos esta 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 probé en Gutenberg. Además de esto, explore publicaciones> Agregar mientras destacamos en la captura de pantalla a continuación.
Esto lo lleva directamente al editor de Gutenberg presentado a continuación.
Bastante cuidado, ¿verdad? Ahora, cultivemos esas mangas y pongamos a trabajar. Agregar un título

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 ve es el título en la parte superior del documento, como detallé en la imagen de arriba. Para crear un título para su publicación, escriba dentro del bloque. Simple como A, B, C.

¿Tienes que editar el enlace permanente? Puede hacerlo fácilmente en el bloque de título haciendo clic en el botón Editar, como se muestra a continuación.

Después de agregar el título, presione la tecla ENTER para iniciar una nueva línea. Sí, Gutenberg mantiene a la navegación nativa que amó en el clásico editor de WordPress. Agregar un nuevo párrafo
Al presionar la tecla ENTER, se crea un nuevo bloque de párrafo, como se muestra arriba. Antes de ingresar cualquier texto, el bloque le presenta algunas opciones. Vea la imagen numerada a continuación para obtener más detalles. Puedes:

Convierta el nuevo bloque de párrafo en cualquier otro bloque, por ejemplo, imagen, título, portada, galería, wooCommerce, forma, etc.

Use el orden de velocidad para cambiar el bloque de párrafo en un bloque de imágenes

Cambie el bloque de párrafo a un bloque de título, es decir, H2, H3 y H4
Convierta el bloque de párrafo en un bloque de imagen de portada
Para fines ilustrativos, reservaré el primer párrafo para la introducción de la publicación. Después de agregar texto, aparece una barra de herramientas de formato como se muestra a continuación.
Debido a la barra de herramientas de formato, puede:
Ocultar el párrafo en un versículo, citado, título, lista, código y texto preformados
Audaz, cursiva, corta y subraye contenido

Alinear el texto a la izquierda, a la derecha, al centro y justificar
Agregue un enlace que pueda abrir y en una nueva pestaña
Ingrese una imagen en la fila (¡sí, lo hay!)
Ocultar la configuración del bloque
Duplicar el bloque
Ingrese un bloque antes o después del bloque actual (en nuestro caso, este es el primer párrafo, así que no agregue nada antes, solo después). Puede agregar una cubierta de la cubierta antes del primer párrafo, si lo desea, porque parece tan bueno
Editar el bloque como html
Agregue el bloque actual a bloques reutilizables para que pueda usarlo en otras publicaciones
Retire el bloque en su totalidad
Puede continuar personalizando el bloque de párrafo con las opciones disponibles en la pestaña Lock en el menú de la barra lateral, como se muestra a continuación.
Algunas notas sobre la imagen de arriba:
Elija la pestaña Bloqueo aquí para ver todas las opciones y la configuración de bloqueo
Seleccione el tamaño de la fuente y active la tapa de caída aquí

Agregue el 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
Puede agregar una clase CSS personalizada aquí, lo que significa que puede agregar estilos CSS adicionales a su bloque.
El fondo azul y la caída de la cabeza ya se han aplicado al editor de Gutenberg
La pestaña del documento de la barra lateral es otra pestaña en el menú de la barra lateral; Pestaña Documento como se muestra a continuación.
Aquí, las notas de la imagen de arriba:
Haga clic aquí para cambiar a la pestaña del documento
Aquí puede programar una publicación, establecer la visibilidad en privado o público, establecer una publicación en el estado de vista, puede elegir el formato de publicación y puede crear una publicación pegajosa.

La sección le permite cambiar el vínculo permanente
Puede seleccionar o crear nuevas categorías aquí
Agregue etiquetas a su publicación.
Establecer la imagen presentada
Crear un extracto manual
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 cualquier manera que desee. Por cierto, diferentes bloques vienen con diferentes configuraciones, como aprenderemos en un minuto.
Después del primer párrafo, presione la tecla ENTER nuevamente para crear una nueva línea (o bloque de párrafo). Ahora agregemos una imagen en el primer párrafo. Agregar imágenes en Gutenberg
Se dice que una imagen habla mil palabras, y una publicación de blog sin imágenes es, bueno, agotador. Para agregar una imagen a su publicación de WordPress usando Gutenberg, tiene algunas opciones. Al presionar la tecla ENTER hace unos momentos, lanzó un nuevo bloque de párrafo. Al ver que Gutenberg es intuitivo, puede agregar una imagen haciendo clic en los iconos, imagen o cubierta más (+) como se resalta en la imagen a continuación. Cuántas notas:
Puede agregar una imagen a través del icono más (+)
Aquí puedes agregar una imagen fácilmente

Esta opción le permite agregar una imagen de portada (generalmente son más grandes que otras fotos. Además, puede agregar texto en imágenes de portada, por cierto)

Continúe y haga clic en cualquiera de los iconos más (+). Luego haga clic en la pestaña Imagen, como se muestra a continuación.
Si hace clic en la pestaña Imagen, cargue el bloque de imágenes que se muestra en la captura de pantalla a continuación.
El bloque de imágenes le permite cargar una imagen o agregar una de una URL o biblioteca de medios. En este proceso, puede agregar texto alternativo (importante para SEO), subtítulos y descripción por la configuración de la pantalla del medio o por la barra lateral como se muestra en las siguientes imágenes. La configuración de medios habitual …
… y la configuración del bloque de imágenes.
¿Aprendes algo aquí hoy? Eso espero. Vamos más lejos. Después de agregar la imagen, Gutenberg agrega un nuevo bloque de párrafo justo debajo de ella. Puede agregar lo que desee, pero para fines ilustrativos, agregué un texto y luego un botón debajo de él. Cómo agregar archivos descargables, p. PDF, fotos, 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 bloque de párrafo, haga clic en el icono más (+), navegue por los bloques comunes y presione la pestaña Archivo como resaltamos a continuación. Por lo tanto, se inicia el siguiente bloque:

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

Puedes jugar con las opciones. Por ejemplo, puede editar / eliminar el título “Lista de verificación PDF Gutenberg gratuita”, así como el botón de descarga. Puede agregar una clase CSS al bloque y puede estilizarla de la manera que desee. Agregar una cita en Gutenberg para agregar una cotización porque son encantadores, atractivos y lo ayuda a regresar a casa. En una nueva línea, haga clic en el signo más (+), navegue por los bloques ordinarios y presione la pestaña citada como se muestra a continuación.


Al hacerlo, agregue el bloque citado en su publicación, ya que destacamos en la pantalla a continuación.

¿Observe la configuración del bloque de cotización en la barra del lado derecho anterior? Para agregar su oferta, escriba dentro del bloque. Aquí está mi resultado.

Parece increíble, ¿verdad? La adición de la incorporación de medios en Gutenberg Gutenberg viene con varios bloques para incorporar videos y otros medios de más de 30 sitios como YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, etc. Para incorporar el contenido, haga clic en el icono más (+), navegue por la incorporación y elija el sitio. Por ejemplo, quería YouTube, como se muestra a continuación. Luego copie su URL del video de YouTube y haga clic en el botón Incorpate como se muestra en la imagen a continuación.

Tan pronto como presione el botón Incorporar, Gutenberg oculta automáticamente el enlace en un video como destacamos a continuación.

Navegación suave hasta el final. Ahora, agregemos un botón independiente y perfecto para crear una exhortació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 Plus (+) y elija el 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 icono más (+), navegue por los elementos de apariencia y haga clic en el botón como se muestra a continuación.

Si hace esto, va al bloque de botones, como presentamos a continuación.

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 unos clics, esto es lo que recibí.

Por cierto, si usa combinaciones de colores difíciles de leer en los botones, Gutenberg le informará de inmediato. ¿Que lindo? Cómo agregar columnas a Gutenberg con un buen botón, agregue algunas columnas. Agregaré dos columnas, así que siga con cuidado. Esto es lo que debe hacer. Haga clic en el icono más (+), navegue por los elementos de apariencia y haga clic en la pestaña Columnas, como se muestra en la imagen a continuación. Gotenberg agrega dos columnas de forma predeterminada. Vea la imagen a continuación y recuerde que ya hemos agregado contenido en columnas.

Lo que me atrae:

No está mal por unos segundos de trabajo. Pero es posible que no desee crear columnas. Es posible que desee mostrar una imagen junto a un texto. ¿Hay un bloque para eso? ¡Sí, lo es! ¿Cómo agregar una imagen al lado del texto en Gutenberg busca agregar una imagen junto al texto? Si es así, le gustará la siguiente sección. Como de costumbre, haga clic en el icono Plus (+), explore los elementos de apariencia y haga clic en los medios y el texto como se muestra a continuación.

Debería ver los medios y el bloque de texto, como se muestra a continuación.

Luego cargue la imagen / video / medios o agregue una de la biblioteca de medios. Después de eso, agregue el texto junto al soporte, como se muestra en la imagen a continuación. Jugué con Media & Text Block y se me ocurrió lo siguiente. Atención a ti; Logré apretar un botón allí

¡Oh, este es el back-end! Permítame mostrarte el front-end. Aquí:

Se ve muy profesional, ¿verdad? Definitivamente puedes imaginar cuánto puedes obtener con el editor de Gutenberg. Los desarrolladores de WordPress de Gutenberg Third Blocks están ansiosos por hacer temas y complementos compatibles con el editor de Gutenberg. Algunos ejemplos incluyen WooCommerce, Jetpack y Yoast SEO. Por ejemplo, puede agregar bloques de WooCommerce a su publicación de WordPress. En primer lugar, debe instalar y activar WooCommerce. Luego, en una nueva línea, haga clic en el icono más (+), navegue por el WoCommerce y elija cualquier bloque que desee, como se muestra a continuación. ¿Qué significa? Significa que puede crear contenido multimedia rico y excelentes publicaciones y páginas en unos minutos. Otros bloques notables ya tienen más de 2,000 palabras y, si continuamos, podremos escribir un libro electrónico completo. Mi oración es que ahora puedes usar Gutenberg sin una succión. Además de eso, aquí hay una lista de los otros bloques disponibles.

Widgets: puede agregar contenido de sus widgets a publicaciones de blog

Códigos cortos: aún puede usar códigos cortos de WordPress cortos

Classic: un excelente bloque que sostiene su contenido anterior

Más: el bloque se sabía anteriormente que la etiqueta lee más

Descanso de página, separadores, espaciadores

HTML personalizado, Pullquote, mesa

Galería y audio / video html5

Y muchos más, dependiendo de los temas y complementos que use
Aparte de esto: crear una página de WordPress es similar a la creación de una publicación de rescate para las diferencias durante varios minutos, por lo que no profundizaremos hoy. Gutenberg hacks y accesos directos del teclado Gutenberg vienen con algunos trucos y atajos de teclado que lo hacen aún más fácil. Por ejemplo, si escribe “/” en un bloque de párrafo, muestra una lista de bloques. Incluso puede seleccionar un determinado bloque escribiendo el título del bloque después de la barra de inversa (/), por ejemplo, la escritura “/ imagen” aparece el bloque de imágenes entre otros bloques relacionados con la imagen. Consulte la imagen a continuación para obtener más detalles. Controles rápidos del teclado: para ver todos los comandos rápidos disponibles, presione el cambio + Al + 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.
Eso es genial. Extraordinariamente suave. O, y por cierto, el error de “actualización fallida” generalmente ocurre debido a una conexión a Internet poco clara