loading

09/05/2019
Gutenberg y sus bloques de diseño. (con ejemplos)

Gutenberg
y sus bloques
de diseño
(con ejemplos)

Gutenberg es el nuevo editor de WordPress. Fue lanzado junto con la versión 5.0 de WordPress y la verdad que tiene herramientas muy importantes para el diseño de nuestros contenidos.

En un artículo anterior decíamos que este producto de WordPress fue creado en colaboración con Yoast SEO, lo que permite inferir las ventajas que brinda al posicionamiento de nuestra web.

A pesar de que aún carece de algunas funcionalidades, lo cierto es que introdujo muchos elementos que nos facilitan el trabajo.

Vamos a ver los elementos de diseño de Gutenberg:

  • Espaciador
  • Medios y Texto
  • Columnas
  • Más
  • Botón
  • Separador
  • Salto de página
Copy Of Copy Of Allowed Fonts 1 Nico. Free Lance Web Developer

1. Bloque espaciador

Su función es dejar un espacio en blanco en el lugar que tú indiques. Por ejemplo entre títulos y parráfos, entre párrafo y párrafo, antes y después de imágenes, o en cualquier otro lugar del texto según el diseño que quieras imprimirle.

Nos brinda la posibilidad de variar su tamaño moviéndolo desde el punto azul. Y este bloque se transforma en reutilizable lo que sin duda es una gran ventaja.

Este no es precisamente uno de los bloques más funcionales. A mi entender vuelve muy complejo algo que debería lograrse con un enter y listo. Además en ocasiones mantiene el espaciador que viene por defecto a pesar de que variemos su tamaño.

2. Bloque de columnas

Las columnas es uno de los bloques más versátiles que trae Gutenberg. Puede ayudarnos a dejar de depender de algunos constructores como Visual Composer u otros.

Nos da la posibilidad de tener un bloque con las columnas necesarias variando su cantidad en la barra lateral.

También nos permite agregar imágenes y mejorar el aspecto visual de nuestro texto. La barra flotante habilita diferentes dimensiones y además contamos con las opciones generales de otros bloques.

Aquí te dejo un ejemplo:

Perros

Imagen1

Cuidados especiales. Atención las 24 horas.

Gatos

Imagen3

Cuidados especiales. Atención las 24 horas.

Aves

Imagen4

Cuidados especiales. Atención las 24 horas.

Es quizás un poco difícil de manejar al principio, pero con la práctica se vuelve muy sencillo de usar y los resultados son muy buenos

3. Bloque de medios y texto

Este bloque nos permite colocar un archivo multimedia que puede ser un video o una imagen. Además podemos agregar texto explicativo y editarlo para que se vea más atractivo.

De la misma forma que en el bloque de columnas, es muy sencillo aplicar diferentes dimensiones. Contiene las mismas opciones de los demás elementos.

Podemos cambiar el tamaño de fuente y ajustar el color de fondo y de texto en la barra lateral. También es posible agregar enlaces en el texto lo que resulta muy ventajoso a la hora de promocionar determinados productos.

Estos son algunos ejemplos:

Agencia de viajes

Torre Eiffel  París

París en otoño. Una experiencia inolvidable.

St Peters Basilica 2875093 1920

Roma y sus maravillas, ideal para tus vacaciones.

Real State

Architecture 1867187 1920

La casa de tus sueños en Inmobiliaria Dreams. Visítanos.

Residence 2219972 1920

Proyecto residencias en balneario La Costa. Quedan pocos unidades.

4. Bloque Más

El bloque Leer Más es el que señala el límite entre entre el contenido que se va a mostrar y el que requiere un clic del usuario para mostrarse. Es muy útil si tu estrategia de contenidos ha considerado este punto.

5. Bloque de botón

Se trata de un complemento que no se encontraba en el editor anterior. Antes debíamos insertar una imagen y enlazarla, todo esto ahora se resuelve con esta herramienta. Con la posibilidad de insertar el botón se nos facilitan mucho las tareas.

Sólo debes insertar el texto y agregar el link en la opción que aparece y listo. Para modificar el color de fondo y también el color del texto ta ofrece un panel con varios tonos. E incluso ofrece sugerencias sobre las combinaciones.

Si bien podemos cambiar el estilo que viene por defecto, las opciones son escasas. De igual manera es un recurso muy práctico.

6. Bloque separador

Se trata de una funcionalidad que nos permite incorporar una línea a nuestro texto, por ejemplo así:


7. Bloque salto de página

También este recurso es interesante ya que nos permite incluir la paginación de nuestra entrada. Por tanto, nosotros indicamos cuando dividir el texto y el lector para continuar deberá hacer clic en el número de pagina siguiente.

Los ejemplos anteriores son sólo una muestra de todo lo que podemos hacer con el editor Gutenberg. Además, si aplicamos un poco de creatividad y lo usamos bien puede transformarse en una herramienta muy importante para destacar tus publicaciones.

Anímate y verás los resultados.

Imágenes: Freepik, Pixabay

Traducción: Deepl

Generic placeholder image
Nicolás González

Diseñador & Desarrollador Web
Freelance

+598 98 398 010

nico@nicowebsite.com

Artículos
Relacionados

Biblioteca de
medios
de Wordpress:
el tesoro
de tu web

La Biblioteca de Medios de WordPress es el lugar donde almacenamos elementos multimedia para luego agregarlos en nuestro contenido. Es un espacio muy valioso, por ...

Plugins
para Wordpress:
Elije los mejores
en 2019.

Los Plugins para WordPress son herramientas fantásticas que nos permiten personalizar nuestra página web. La posibilidad de contar con estas aplicaciones es quizás el motivo ...

El proyecto web
de tu empresa.
¿Por dónde
empezar?

El proyecto web de tu empresa se traduce en la creación de una página web que te aporte visibilidad, tráfico y lo más importante: clientes. ...