Los Elementos de Diseño de Gutenberg

  1. Inicio
  2. WordPress
  3. Gutenberg
  4. Los Elementos de Diseño de Gutenberg

WordPress es Mejor con Divi

Los bloques de elementos de diseño de Gutenberg son los que nos permiten insertar distintos elementos especiales como tablas, botones, espacios, etc. Vayamos a verlos.

El bloque de Tabla

El bloque de tabla de Gutenberg te permite insertar una tabla para organizar los contenidos dentro de una entrada de WordPress. Es útil para mostrar listas de productos, de integrantes de un grupo, características, y lo que se te ocurra que pudieras mostrar en forma de tabla.

Bloque de tabla de gutenberg

Por el momento este bloque no cuenta con muchas opciones de configuración. Lo único que nos permite es agregar filas y columnas y darle formato al texto.

También podemos elegir que ocupe el ancho completo o bien solo la mitad izquierda o derecha del contenido, según la alineación que queramos. Pero no se puede definir el estilo de los bordes o un color de fondo por ejemplo, con lo cual estamos bastante limitados en lo que a diseño se refiere.

De todas maneras el editor clásico no contaba con esta función, así que igualmente es un pequeño avance y,  seguramente irá incorporando opciones de diseño con el tiempo.

El bloque de Botón

El bloque de botón de WordPress es una novedad total que aporta el proyecto Gutenberg. Los botones son elementos muy utilizados en sitios web y WordPress no contaba con una forma nativa de hacerlos.

Bloque de boton de Gutenberg

Sí podíamos hacer botones insertando una imagen y enlazándola, pero ésto implicaba tener que crear la imagen con otro programa. Ahora podemos crear cualquier botón que se nos ocurra directamente desde el editor de WordPress.

? Cómo usar el bloque de botón

✦ Cuando insertamos un nuevo botón lo primero que tenemos que hacer es escribir el texto que va a ir adentro del botón. Ésto lo hacemos escribiendo directamente sobre él.

✦ También tenemos que insertar la URL a donde queremos que apunte el botón en una caja que aparece justo debajo.

? Cómo configurar el botón de WordPress

Dentro de las posibilidades de configuración de un botón de WordPress tenemos básicamente dos:

✦ El estilo.
✦ Los colores.

Estilo del botón

Una de las cosas que podemos configurar en un botón de WordPress es el estilo de botón. Esto lo que cambia es la forma de las esquinas y bordes: Redondeadas, cuadradas o contorno.

Estilos del botón de Gutenberg

La vista previa te va mostrando cómo quedaría el botón, aunque reconozco que es algo rudimentaria todavía. Por ejemplo, si elegimos la opción Contorno, no se muestra correctamente en la pre-visualización.

Colores del botón

Cambiar colores de un botón de GutenbergÉsto funciona de forma muy similar a los bloques de párrafo de Gutenberg que ya vimos.

Mediante dos paletas de colores podemos elegir tanto el color del texto como el color del fondo.

Así, con un par de clics podemos probar cuál es la mejor combinación de colores para nuestro flamante botón.

El botón trae una sombra de color negro que aparece cuando pasamos por encima de él. Esta sombra aún no hay manera de que se pueda quitar ni tampoco cambiarle el color.

Insertar un Salto de página

El bloque de salto de página la verdad que me sorprendió la primera vez que lo vi. ¿Insertar un salto de página en WordPress…?

Insertar un salto de página en WordPress

Conozco perfectamente los saltos de página en Word, e incluso en Excel, ya que sirven para poder decidir en qué lugar del documento pasar a la siguiente página. Pero es algo de los documentos que están pensados para imprimirse en papel. ¿Qué tienen que ver los saltos de página con una página web?

Lo que hace este bloque es literalmente dividir un artículo en dos partes (o las partes que queramos). Y nos pone debajo unos enlaces para pasar a la página siguiente. Como se ve a continuación:

Cómo funciona el salto de página en WordPress

Automáticamente crea una segunda página con su propia URL (le añade un /2/ al final), como si fuera una entrada aparte. Por ejemplo así:

https://www.aventura.digital/wordpress/gutenberg/
https://www.aventura.digital/wordpress/gutenberg/2/
https://www.aventura.digital/wordpress/gutenberg/3/

La verdad que si lo pensamos bien es bastante práctico cuando tenemos un artículo muy largo que queremos dividir en partes más chicas. En lugar de crear una nueva entrada para cada parte, insertamos un salto de página y WordPress hace todo el trabajo.

Y lo mejor de todo es que, cuando necesitemos actualizarlo, lo vamos a tener todo junto en el mismo lugar.

¡Mis aplausos para el bloque de salto de página de Gutenberg!

Insertar un Separador

El bloque separador inserta una línea horizontal en medio del contenido. Es algo que ya se podía hacer con el editor clásico, con la diferencia de que ahora nos permite elegir entre tres tipos de separador.

El bloque separador de Gutenberg

Las tres opciones que tenemos son: línea corta, línea ancha y puntos. Sin embargo en las pruebas que hice con el tema Twenty Seventeen la línea corta sale igualmente ancha.

El bloque Leer Más

El bloque leer más es el reemplazante de la clásica etiqueta leer más, la que define qué parte del documento se muestra en la vista de blog.

Bloque leer más de Gutenberg.

El bloque Espaciador

Cuántas veces necesitamos dejar espacio entre un párrafo y otro, o entre un texto y una imagen, y lo resolvimos dándole Enter varias veces. Pero después nos queda demasiado lejos, y es difícil dar con la separación justa…

Si estás pensando que soy un obsesivo, estás en lo cierto.

Si en cambio te sentiste identificado con esta situación, vas a amar el espaciador de Gutenberg.

El bloque espaciador de Gutenberg

Un bloque que lo único que hace es dejar un espacio en blanco de la altura exacta que nosotros queramos. Y es tan fácil de ajustar como arrastrarlo desde el borde inferior.

¡Mis aplausos para el bloque espaciador!

¿Te sirvió esta guía sobre los elementos de diseño de Gutenberg? Entonces dame una mano para ayudar a más gente compartiéndola en las redes sociales. ¡Gracias! 

Jorge B.

Jorge B.

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Curso Gratis de WordPress con Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *