runningaroundnormal.com
  • Home
  • WordPress
  • WordPress-tutorials
  • WordPress-plugins
  • Blogging

Bloques de Gutenberg: qué son y cómo usarlos en WordPress

Tutoriales de WordPress

Se lanzará el 6 de diciembre de 2018., WordPress 5.0 trae consigo una actualización importante: el nuevo editor de Gutenberg. Si desea aprovechar al máximo esta herramienta, deberá aprender sobre el sistema de bloques de Gutenberg.

Gutenberg te ayuda a crear contenido de una manera más visual que el editor TinyMCE anterior. Para hacer esto, proporciona una biblioteca de elementos preconstruidos, o “bloques”. Cada bloque puede agregarse a una página o publicación y personalizarse. Hay bloques para manejar componentes básicos como texto e imágenes, así como algunos que proporcionan funciones avanzadas (como botones y tablas).

En esta guía, presentaremos el sistema de bloques Gutenberg y le mostraremos cómo usarlo. En el camino, le presentaremos algunos de los bloques más útiles incluidos en el nuevo editor. Pongámonos a trabajar!

Contents

  • 1 Cómo usar los bloques de Gutenberg para crear una publicación de WordPress (en 3 pasos)
    • 1.1 Paso 1: agrega un bloque a tu publicación
    • 1.2 Paso 2: personaliza tu bloque
    • 1.3 Paso 3: da los toques finales a tu publicación
  • 2 También puedes usar complementos para agregar nuevos bloques
  • 3 Conclusión

Cómo usar los bloques de Gutenberg para crear una publicación de WordPress (en 3 pasos)

Si todavía no está seguro de qué es el editor de Gutenberg, consulte nuestro “¿Qué es Gutenberg?” enviar.

Suponiendo que haya actualizado su sitio a WordPress 5.0, su sitio debería usar el nuevo editor Gutenberg de forma predeterminada.

Todo lo que queda es aprender cómo aplicar el nuevo sistema de bloques Gutenberg.!

Vamos a ilustrar las características clave del editor guiándote por lo que es crear una publicación básica de WordPress, pero puedes usar el mismo enfoque sin importar qué tipo de contenido estés creando con Gutenberg.

Paso 1: agrega un bloque a tu publicación

Lo primero que querrás hacer es darle un título a tu publicación, usando el campo dedicado en la parte superior del editor:

Agregar un título en Gutenberg.

Esto funciona exactamente de la misma manera que en el editor clásico. Después de eso, sin embargo, las cosas comienzan a cambiar..

Si pasa el cursor sobre el área directamente debajo del título de su publicación, verá algunos iconos:

Iconos en el editor Gutenberg.

los Más El icono le permite seleccionar bloques de Gutenberg y agregarlos a su publicación. A la derecha, también hay opciones para agregar rápidamente los bloques más utilizados: las opciones de texto, imagen y galería..

Por ahora, haga clic en el Más icono, y verá un nuevo menú:

Una selección de bloques de Gutenberg.

Este menú enumera todos los bloques de Gutenberg que el editor incluye actualmente. Hay una sección en la parte superior con la tuya Más usado opciones, una serie de categorías organizadas debajo e incluso una barra de búsqueda para ayudarlo a encontrar lo que necesita rápidamente.

Para agregar un bloque a su publicación, solo tiene que encontrarla y hacer clic en ella. Comencemos simple, con un Párrafo bloquear. Coloque el bloque en su publicación, luego continúe con el siguiente paso (También puede crear un bloque de párrafo simplemente escribiendo en el editor).

Paso 2: personaliza tu bloque

Cuando agrega un bloque de párrafo, no parece mucho de inmediato. Sin embargo, una vez que comience a escribir en el campo, aparecerán nuevas opciones:

Un bloque de párrafos de Gutenberg.

Verá algunas configuraciones básicas de formato, como alineación, negrita y cursiva. Además, consulte la barra lateral derecha de la pantalla del editor:

Configuración para un bloque de párrafo de Gutenberg.

Allí, encontrarás más opciones específicas de bloque. En este caso, puede cambiar el tamaño y el color de la fuente del texto, agregar un capitular e incluso incluir algunos CSS personalizados (en Avanzado menú). Cualquier cambio que realice, ya sea aquí o en el bloque, será visible de inmediato..

Cada uno de los bloques de Gutenberg en oferta viene con su propia configuración única.

Por ejemplo, si golpeas Entrar, agregará un nuevo bloque debajo del bloque de párrafo. Sin embargo, esta vez puede intentar agregar un bloque de imagen usando ese mismo Más firmar:

Un bloque de imagen de Gutenberg.

Como puede ver, puede cargar una imagen o agregar una que ya esté en su Biblioteca multimedia. Puede editar la imagen, alterar su alineación y agregar CSS en la barra lateral.

Consejo de productividad: Como alternativa a golpear el Más signo, puede escribir un “/” en un bloque vacío seguido del nombre del bloque que desea insertar. Una vez que sepa qué bloques están disponibles, esta es una forma mucho más rápida de agregar nuevos bloques..

No hay duda de que usará muchos bloques de párrafos e imágenes. Sin embargo, Gutenberg tiene más para ofrecer. También hay una serie de bloques de Gutenberg que ofrecen nuevas opciones que no están disponibles en el editor clásico.

Por ejemplo, puede agregar un Botón bloquear a tu publicación:

Un bloque de botones Gutenberg.

Esto crea un botón en el que se puede hacer clic para que los visitantes interactúen. Puede editar el texto del botón e incluir la URL a la que se vinculará a continuación:

Edición de un bloque de botones de Gutenberg.

Al seleccionar el icono en la esquina superior izquierda del bloque, puede cambiar el estilo de su botón:

Cambiar el estilo de su botón Gutenberg.

Además, puede modificar los colores de fondo y de texto en la barra lateral. Si bien esta no es una gran variedad de opciones, es suficiente para crear un práctico botón personalizado, que puede usar para alentar a los visitantes a registrarse en una lista de correo electrónico, comprar un producto o cualquier otra cosa que desee..

Paso 3: da los toques finales a tu publicación

Una vez que haya agregado algunos bloques, es posible que desee realizar algunos cambios. Afortunadamente, el editor Gutenberg es bastante flexible al permitirte modificar el diseño de tu contenido.

Si desea eliminar un bloque, por ejemplo, puede seleccionar el Opciones icono arriba y haga clic en Eliminar bloque:

Eliminar un bloque en Gutenberg.

Al pasar el cursor sobre un bloque, puede usar las flechas hacia arriba y hacia abajo para reorganizar sus bloques a voluntad. O también puede hacer clic en el seis puntos entre las flechas para usar arrastrar y soltar para mover un bloque:

Reorganizar bloques en Gutenberg.

Consejo de productividad: Gutenberg incluye una serie de métodos abreviados de teclado que pueden ayudarlo a eliminar rápidamente bloques o insertar nuevos bloques. Tipo  Shift + Alt + H para ver todos los atajos de teclado de Gutenberg.

También vale la pena señalar que puede crear diseños de varias columnas. Esta es una característica emocionante, aunque todavía está en versión beta en el momento de escribir este artículo. Puedes acceder colocando un Columnas bloquear en tu publicación:

Usando columnas en Gutenberg.

Esto le permite crear hasta seis columnas una al lado de la otra y colocar los bloques que desee dentro de cada una. Es una opción que ofrece mucho potencial para crear diseños únicos.

Finalmente, es importante tener en cuenta que todavía tiene acceso a la configuración posterior (o de toda la página) también. En la barra lateral derecha, haga clic en el Documento pestaña para encontrarlos:

Configuración de la página de Gutenberg.

Aquí, encontrará la mayoría de las opciones con las que está familiarizado. Puede publicar la publicación, establecer un autor, elegir categorías y etiquetas, agregar una imagen destacada, etc. Incluso puede modificar la configuración de comentarios en el Discusión menú. Sin embargo, no necesitará guardar su contenido, ya que se guardará automáticamente a intervalos frecuentes mientras trabaja..

¡Esto es todo lo que necesita saber para usar el sistema de bloques Gutenberg! Es rápido de aprender, pero hay muchas más opciones de las que hemos cubierto aquí. Le recomendamos que continúe experimentando con los diversos bloques de Gutenberg disponibles y se sienta cómodo con las opciones que se ofrecen (para que esté listo cuando el editor se lance de verdad).

También puedes usar complementos para agregar nuevos bloques

Una de las cosas más poderosas sobre Gutenberg es que usa complementos para agregar todo tipo de nuevos bloques al editor. De hecho, algunos de sus complementos favoritos ya podrían haber agregado sus propios bloques.

Por ejemplo, algunos complementos de la galería ahora le permiten insertar una galería utilizando un bloque, en lugar del antiguo método de código corto que usaban muchos complementos.

Más allá de eso, también puede encontrar toneladas de complementos que se centran únicamente en agregar nuevos bloques. Por ejemplo, el complemento Otter Blocks le ofrece bloques para:

  • Tablas de precios
  • Testimonios
  • Compartir iconos con llamadas a la acción
  • Mucho más
Bloques de Gutenberg y biblioteca de plantillas de Otter Bloques de Gutenberg y biblioteca de plantillas de Otter

Autor (es): ThemeIsle

Versión actual: 1.5.3

Última actualización: 10 de abril de 2020

otter-blocks.zip

98%Calificaciones 60,000+Instala WP 5.2+Requiere

También hay muchos otros complementos de bloques de Gutenberg que puedes encontrar en WordPress.org.

Otro complemento que vale la pena mencionar es el complemento Cloud Blocks. Si bien aún está en versión beta, ofrece un enfoque interesante que le permite instalar bloques Gutenberg de desarrolladores externos “desde la nube”.

Bloques de nubes Bloques de nubes

Autor (es): Frontkom

Versión actual: 1.1.8

Última actualización: 10 de octubre de 2019

cloud-blocks.1.1.8.zip

72%Calificaciones 100+Instala 4.9.8Requiere

Conclusión

Con el lanzamiento de WordPress 5.0, Gutenberg se convertirá en el editor predeterminado para todos los sitios de WordPress (a menos que esté utilizando el complemento Editor clásico).

Afortunadamente, crear contenido en Gutenberg es muy simple. Sólo tienes que:

  1. Agregue los bloques de Gutenberg que desee a su publicación o página.
  2. Personaliza la configuración individual de cada bloque.
  3. Reorganice los bloques, elimínelos e incluso organícelos en columnas si lo desea.

Y si desea usar aún más bloques en sus diseños, considere agregar uno de los muchos complementos de bloques de Gutenberg.

Si desea tutoriales más completos de Gutenberg, hemos escrito una publicación más general de Gutenberg para novatos, así como un tutorial detallado del editor de Gutenberg con algunos consejos avanzados de productividad.

¿Tiene alguna pregunta sobre cómo funcionan los bloques de Gutenberg o hay alguna opción que le gustaría ver agregada? Comparte tus pensamientos en la sección de comentarios a continuación!
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Farebné schémy pre webové stránky: Ako si vybrať jednu pre váš web WordPress Kuidas luua oma ajaveebi jaoks videoõpetusi (täielik juhend)

    Related Posts

    Tutoriales de WordPress

    Cómo usar Typeform con WordPress (Formularios fáciles de conversación)

    Tutoriales de WordPress

    Cómo hacer un sitio web de WordPress: guía paso a paso para principiantes

    Follow Us

    • Facebook
    • Twitter
    Tweets by DB Tech Society

    Promo

    banner

    Recent Posts

    • Why-build-business-websites-with-WordPress-1920x768[1]Sådan importeres fra Google Dokumenter til WordPress (Brug af Jetpack)
    • best-wordpress-quiz-plugins[1]Hvad er det bedste WordPress Quiz-plugin? 5 indstillinger sammenlignet
    • your-company-needs-a-blog-05[1]20 måder at tænke op blogindlæg til dine WordPress-blog
    • Crear un nuevo formulario Typeform.Cómo usar Typeform con WordPress (Formularios fáciles de conversación)
    • WordPressの最高のイベント/会議テーマ:Neve2020年のWordPressの20以上の最高のイベント/会議テーマ

    Promo

    banner

    Related Posts

    1. Cómo usar Typeform con WordPress (Formularios fáciles de conversación)
    2. Cómo configurar Google AMP para WordPress (y por qué debería hacerlo)
    3. Editor de blocs de Gutenberg vs Elementor vs Divi Builder: una comparació
    4. Mis on Gutenberg? Tutvustus uue WordPressi blokeerijaga
    5. So deaktivieren Sie den Blockeditor (auch bekannt als Gutenberg) und verwenden den vorherigen WordPress-Editor
    6. Cómo hacer un sitio web de WordPress: guía paso a paso para principiantes


    runningaroundnormal.com