Mejora tu web con los bloques de Gutenberg

iTunes | Google Podcasts | Spotify | iVoox | RSS

Hoy tenemos un programa super interesante, en el que te voy a contar como puedes mejorar el diseño de tu web de una forma muy sencilla, pero antes te recomiendo que te apuntes a mi newsletter, dicen que de vez en cuando comparto algo interesante…¡Qué sabe la gente! Aunque si no te apuntas nunca lo sabrás… pampua.es/regalo

¿Que es Gutenberg?

Como ya sabrás, y si no, yo te lo cuento, a finales de 2018 se lanzó WordPress 5.0 que trajo consigo el editor Gutenberg, basado en bloques. Con el nuevo editor, cada trocito de contenido es un bloque. Un párrafo, una imagen, un vídeo de YouTube, una tabla, etc., es un bloque separado. Este nuevo paradigma de edición nos abre nuevas posibilidades de diseño para la creación de páginas y entradas.

Los bloques de Gutenberg

De fábrica, Gutenberg te viene con un conjunto de bloques bastante completo que los podríamos dividir en:

• Bloques de texto para crear párrafos, listas, encabezados, tablas y botones.
• Bloques multimedia para insertar imágenes, galerías de imágenes, audios, vídeos, objetos incrustados y shortcodes.
• Bloques para insertar citas y versos.
• Bloques de creación de código y HTML.
• Bloques de formato de columnas, separadores, espaciadores…

Pero Gutenberg no los agrupa por las categorías que te he comentado. Lo que hace es que primero te muestra los que considera bloques comunes:

Luego, los bloques que te permiten crear formatos distintos:

Bloques para crear elementos de diseño:

Bloques para crear widgets:

Y finalmente, los bloques para incrustar elementos externos:

De partida te parece que tienes un montón de bloques, pero enseguida te das cuenta de que te gustaría incluso tener más posibilidades. Y es por este motivo que han aparecido plugins para WordPress que te proporcionan nuevos bloques que te facilitan el diseño del contenido de entradas y páginas. Estos son los que te recomiendo (pero no te los instales todos de golpe; mira a ver cuál se ajusta mejor a tus necesidades):

Los 9 plugins que te recomiendo

1.- Gutenberg Blocks

Este es uno de los que más me gusta, te proporciona 22 nuevos bloques que vas a poder personalizar de manera muy sencilla. No tiene nada que envidiar a Elementor o otros constructores visuales.

1. Encabezado Avanzado: El bloque Encabezado Avanzado le permite agregar una combinación de un encabezado y un subencabezado con un separador en medio. Puede seleccionar la etiqueta de encabezado para el encabezado y administrar otras configuraciones y personalizaciones también.
2. Columnas Avanzadas: Este bloque Columnas avanzadas ofrece opciones avanzadas para insertar varias columnas en una sola fila. Dispone de varias opciones de personalización para gestionar el aspecto de todo el bloque y las columnas individuales de la página con divisores de forma avanzados, anchos variables, etc.
3. Cita: Este bloque de cita le permite mostrar el texto de la tabla de citas en un formato de moda y de diseño con muchas opciones de personalización.
4. Llamada a la acción: El bloque Llamada a la acción le ayuda a crear una llamada a la acción atractiva con un título, una descripción y un botón de moda que potencia las conversiones en su sitio web.
5. Contact Form 7 Styler: El Contact Form 7 Styler es un bloque de Gutenberg fácil de usar que permite personalizar y diseñar los formularios de Contact Form 7 existentes en su sitio web.
6. Línea de tiempo del contenido: el bloque de línea de tiempo le permite crear líneas de tiempo hermosas en su sitio web. Esto puede ser útil para mostrar la historia o el progreso de la empresa, listar sus logros personales, el mapa de ruta o el ciclo de lanzamiento de productos, etc.
7. Mapa de Google: el bloque Google Maps le permite mostrar ubicaciones con opciones de zoom que le encantará probar.
8. Gravity Forms Styler: Personalice su Gravity Form predeterminado con el Gravity Form Styler para mostrar formas más atractivas que convierten.
9. Lista de Iconos: El bloque Lista de Iconos le permite colocar una imagen o icono en un formato de lista. Puede elegir su icono o imagen favorita que se adapte a una lista para que actúe como una viñeta para cada elemento de la lista.
10. Cuadro de información : El cuadro de información le permite colocar una imagen o icono junto con un encabezado y una descripción dentro de un solo bloque. Se puede seleccionar la imagen o icono y personalizar el contenido dentro del bloque.
11. Botón de Marketing: El bloque de Botón de Marketing le permite crear CTAs de moda que tienen como objetivo atraer a la audiencia con texto orientado a la conversión y un botón impresionante con mucha personalización.
12. Botones múltiples: Este bloque de Gutenberg le permite añadir múltiples botones dentro de un mismo bloque. Puede añadir hasta 1 a 5 botones con un bloque de varios botones. Además, le ofrece ajustes adicionales para cada botón y le permite gestionar el espaciado y los ajustes de respuesta también.
13. Carrusel de mensajes: ¿Desea crear un control deslizante de mensajes en el que los mensajes de su blog aparezcan dentro de un carrusel? El bloque Post Carousel le permite mostrar los mensajes en un carrusel y gestionar su configuración y el contenido que desea mostrar en ellos.
14. Cuadrícula de Mensajes: El bloque de la Cuadrícula de Mensajes recupera los mensajes que puede tener en su sitio web y los muestra en un diseño de cuadrícula. Puedes personalizar el orden de tus mensajes y administrar configuraciones como la imagen, el contenido, etc.
15. Posts Masonry: El bloque Posts masonry recupera las entradas del blog en su sitio web y las muestra en un diseño de cómo Pinterest. Puedes personalizar la apariencia de tus mensajes y administrar configuraciones como la imagen destacada, el contenido que deseas mostrar, etc.
16. Posts Timeline : El bloque Posts Timeline le ayuda a mostrar las entradas del blog en su sitio web en una lista ordenada de acuerdo a las fechas en las que se publican. Puedes personalizar el contenido visto para cada entrada del blog y gestionar la fecha, la imagen destacada, etc.
17. Lista de Precios: Este bloque le permite diseñar una Lista de Precios para su sitio web que se vea bien y sea fácil de manejar.
18. Sección: Esta es una sección de envoltura externa que le permite agregar otros bloques dentro de ella. Puede administrar el diseño de esta sección y personalizarlo utilizando opciones como el espaciado, el fondo, el borde y la configuración avanzada.
19. Compartir en redes: El bloque Social Share le permite a los usuarios compartir su contenido a través de varios sitios de redes sociales.
20. Tabla de Contenidos: El bloque Tabla de contenido le permite mostrar un índice o una lista de encabezados incluidos en una entrada o página larga. Esto ofrece a los usuarios una visión general del contenido y enlaces a las secciones específicas de la página o publicación.
21. Equipo: El bloque Equipo le permite mostrar su equipo. Añade su foto, nombre, lo que hacen y enlaces a sus perfiles sociales.
22. Testimonio: El bloque Testimonio le ayuda a mostrar algunos de los comentarios de los clientes dentro de su sitio web en el diseño de carrusel.

2.- Atomic Blocks

El plugin Atomic Blocks te proporciona 15 bloques adicionales a los que ya tienes por defecto:

1. Section & Layout Block – Demo
2. Bloque de columnas avanzadas – Demo
3. Bloque de boletín – Demo
4. Bloque de precios – Demo
5. Post Grid Block – Demo
6. Bloque de contenedor – Demo
7. Testimonial Block – Demo
8. Inline Notice Block –  Demo
9. Accordion Block –  Demo
10. Share Icons Block – Demo
11. Call-To-Action Block – Demo
12. Customizable Button Block – Demo
13. Spacer & Divider Block – Demo
14. Bloque de perfil de autor – Demo
15. Drop Cap Block – Demo

3.- Kadence Blocks

Kadence blocks te proporciona 12 bloques de diseños en los que puedes crear tu propio diseño, pero también incluye una librería de variaciones prediseñadas:

1. Row Layout – demo
2. Advanced Gallery – demo
3. Form – demo
4. Advanced Heading – demo
5. Advanced Button – demo
6. Tabs – demo
7. Accordion – demo
8. Testimonials – demo
9. Icon – demo
10. Spacer / Divider – demo
11. Info Box – demo
12. Icon List – demo

Así, por ejemplo si echamos una ojeada al formato de fila (Row Layout) puedes definir el formato de fila que quieres crear:

Pero también puedes ir a la librería de formatos prediseñados y seleccionar el que más te guste.

4.- Advanced Gutenberg Blocks

El plugin Advanced Gutenberg Blocks ha sido desarrollado por Maxime Bernard-Jacquet e incluye 15 bloques adicionales muy chulos. Son estos:

1. Avisos: Para mostrar alertas, consejos, cosas a evitar…
2. Post: Para mostrar una previsualización de un post de forma elegante
3. Muestra un producto de WooCommerce
4. Botón para añadir al carrito de WooCommerce
5. Insertar banners
6. Anuncio de texto y rectángulo
7. Mostrar plugins del repositorio
8. Mostrar previsualizaciones de webs tipo wildcard (como hacer Facebook y twitter)
9. Testimonios
10. Google Maps
11. Click para twittear
12. Tabla de contenidos
13. Introducción (maqueta de forma distinta el primer párrafo)
14. Giphy (para añadir GIFs de forma sencilla)
15. Unsplash (para añdir fotos libres de derechos)

5.- Block Gallery

El plugin Block Gallery te da tres nuevos bloques con los que puedes crear tres maneras distintas de visualizar galerías de imágenes.

De forma muy fácil (tan sólo tienes que seleccionar las imágenes) puedes crear una galería carrusel, en formato Masonry (estructurado de forma óptima como cuando estás en Pinterest) o poner las imágenes apiladas una debajo de la otra.

Este plugin fue el ganador en la categoría de Best Solution en los premios de diseño en la WordCamp US 2018

6.- Bokez

Bokez es un plugin que te proporciona 15 bloques nuevos con los que puedes crear fácilmente una tabla de precios, mostrar fácilmente tus últimas entradas, compartir en redes sociales, etc.

1. Secciones y columnas: Demo
2. Video Popup: Demo
3. Tabla de precios: Demo
4. Cuadrícula de Posts: Demo
5. Testimonios : Demo
6. Acordeon / FAQ  : Demo
7. Perfil : Demo
8. Portada : Demo
9. Iconos de compartir : Demo
10. Botón : Demo
11. Notificacion : Demo
12. Cita : Demo
13. Divisor : Demo
14. Barra de progreso : Demo
15. Separador con encabezado : Demo

7.- Advanced Gutenberg

El plugin Advanced Gutenberg, incluye 24 bloques adicionales a tu editor. Además también incluye la posibilidad de controlar a nivel de usuario o perfil de usuario a qué bloques se puede acceder.

1. Gestor de columnas con disposiciones predefinidas
2. El último control deslizante de la publicación y el último control deslizante de la publicación
3. Último slider de productos WooCommerce y último slider de productos
4. Bloque de botones avanzado: crea botones con toneladas de estilos
5. Bloque del formulario de contacto: obtener mensajes de usuario y exportar mensajes
6. Bloque de lista avanzada: crear una lista con el icono de la lista, color del icono
7. Bloque Mapa: carga una posición de mapa de Google con zoom, icono, tooltip, color….
8. Bloque de tabla avanzado: crear tablas con estilo como color, borde
9. Bloque de acordeón: muestra el contenido en un acordeón totalmente configurable
10. Bloque de pestañas: muestra el contenido en una UX con pestañas con bloques anidados dentro.
11. Bloque de testimonio: definir avatar, título, texto, deslizador o estático
12. Bloque del formulario de contacto: recibir correo electrónico y exportar datos del formulario de contacto
13. Bloque Email Opt-In: recibir correo electrónico y exportar datos
14. Bloque de inicio de sesión de WordPress
15. Bloque de registro de WordPress
16. Bloque de contador: muestra los números de una manera dinámica, divertida y atractiva
17. Bloque de imágenes avanzado: texto, superposición, colores, enlace y más.
18. Bloque de imágenes avanzado: carga y visualización de vídeo local y remoto
19. Bloque de vídeo avanzado: carga y visualización de vídeo local y remoto
20. Sobrecargue la herramienta de separación con tamaño, color, espacios
21. Bloque de enlaces sociales: icono personalizado y enlaces a cualquier red social
22. Activar el efecto lightbox en las galerías de imágenes de Gutenberg
23. Mostrar información de la imagen como leyenda de lightbox en las galerías
24. Resumen de la publicación de Gutenberg basado en las cabeceras de contenido

8.- CoBlocks

El plugin CoBlocks incluye 26 nuevos bloques en Gutenberg para profesionales del marketing de contenidos. Está desarrollado por GoDaddy y seguramente es el que más bloques extra te proporciona.

1. Bloque de acordeón
2. Bloque de alertas
3. Bloque de perfil de autor
4. Bloque de botones
5. Bloque Galería Carrusel
6. Bloque para compartir Tweet
7. Bloque separador dinámico
8. Bloque de características
9. Bloque de Alimentos y Bebidas
10. Bloque de formulario
11. Bloque Gif
12. Bloque GitHub Gist
13. Bloque de imagen “hero”
14. Bloque de destacar
15. Bloque de iconos
16. Bloque de logotipos e insignias
17. Bloque del mapa
18. Bloque de la galería tipo Pinterest
19. Bloque de tarjetas multimedia
20. Bloque de tabla de precios
21. Bloques de líneas/columnas redimensionables
22. Bloque de servicios
23. Bloque divisor de forma
24. Bloque de Perfiles Sociales
25. Bloque de Compartir Social
26. Bloque de galería apilada

9.- Stackable

El plugin Stackable te ofrece 23 nuevos bloques ni más ni menos

1. Bloque de Contenedor – El Contenedor es un bloque robusto y flexible que le permite combinar diferentes bloques en una sola fila. Puede cambiar la disposición y el tamaño de los contenedores a diferentes configuraciones para lograr la máxima flexibilidad.
2. Bloque separador – el bloque separador le permite agregar magníficas transiciones entre las secciones de su página. Elija entre los diferentes divisores de forma para llamar la atención sobre las secciones importantes.
3. Bloque de Entradas – El bloque de entradas le permite presentar sus últimos artículos de blog usando grandes diseños. También puede seleccionar los diferentes detalles y la información que desea visualizar.
4. Bloque de cuadrícula de características – El bloque de cuadrícula de características le permite mostrar varias características en un diseño estilizado. Utilice la cuadrícula para resaltar su creciente cartera de productos y mucho más.
5. Bloque de acordeón – El bloque de acordeón le permite mostrar información en filas plegables. Esto se puede utilizar para mostrar contenido pesado de texto, como las preguntas frecuentes, o para administrar la visualización de diferentes contenidos en su página.
6. Bloque de cuadro de imagen – El bloque de cuadro de imagen le permite crear un collage de imágenes. Esto puede funcionar como una galería y es perfecto para mostrar su portafolio, fotos de sus productos, servicios y más.
7. Bloque de características – El bloque de características le permite mostrar una sección grande con una foto, título, descripción y botón. Usa este bloque para dar énfasis fácilmente a los mensajes notables que quieras resaltar en tu página.
8. Bloqueo de lista de iconos – El bloqueo de lista de iconos le permite crear listas con viñetas utilizando diferentes iconos. Utilice la lista de iconos para que su diseño sea menos desordenado y muestre los elementos de la lista de forma más eficaz. Cree listas de comprobación, listas de características y similares.
9. Bloque de Llamada a la Acción – El bloque de Llamada a la Acción puede ser utilizado para persuadir a sus visitantes a realizar una acción. Puede pedirles que aprendan más, que descarguen, que compren y mucho más.
10. Bloque de tarjeta – El bloque de tarjeta es un bloque completo para mostrar el contenido en un diseño nítido. Utilice este bloque para mostrar de forma elegante información y fotos para mostrar su portafolio, fotos de equipo, servicios y mucho más.
11. Bloque de encabezado – El bloque de encabezado se puede utilizar para crear un encabezado llamativo para captar la atención de sus visitantes mientras muestra de qué se trata su página. También puede incluir una breve descripción y un llamado a la acción para asegurarse de que se anime a la gente a seguir explorando.
12. Bloque contador – El bloque contador es ideal para mostrar estadísticas interesantes y notables en su página. El contador contará desde 0 hasta su número designado cuando se visite la página.
13. Bloque de ventanas emergentes de vídeo – El bloque de ventanas emergentes de vídeo le permite mostrar una miniatura para reproducir un vídeo a pantalla completa de YouTube de Vimeo. Esto permite a los usuarios ver el vídeo en una ventana emergente.
14. Bloque de cajas de precios – El bloque de cajas de precios le permite mostrar opciones de precios detallando planes, precios, inclusiones y más. Esto es perfecto para comparar diferentes niveles y promociones de productos.
15. Bloque de Testimonios – El Bloque de Testimonios le permite compartir fácilmente su prueba social al permitir que los visitantes de su sitio sepan lo que otras personas dicen de usted. También puede resaltar los comentarios de los actores notables de la industria.
16. Bloque de miembros del equipo – El Bloque de miembros del equipo tiene por objeto presentar a las personas de su equipo. Presentar información relevante e interesante sobre cada miembro del equipo, como su cargo, funciones y especialidades.
17. Bloque de notificaciones – El bloque de notificaciones muestra avisos, advertencias o banners informativos temporales y fácilmente desestimables para resaltar fácilmente avisos y anuncios.
18. Bloque de caja de números – El bloque de caja de números le permite mostrar la información que mejor se muestra con cifras numéricas. Esto es ideal para mostrar los pasos de un proceso, diferentes opciones de producto, diferentes planes de servicio, diferentes características del producto y más.
19. Bloque de Citas – El bloque de Citas puede ser usado para resaltar partes significativas de un mensaje. Utilice diferentes estilos de cita para maximizar la visibilidad.
20. Bloque de botones – El bloque de botones le permite añadir buenos botones, pero mejores. Añada varios botones por fila y elija entre diferentes tipos de botones: normal, fantasma, texto sin formato y enlace.
21. Expandir / Mostrar más bloque – El bloque Expandir / Mostrar más le permite mostrar un pequeño fragmento antes de mostrar el texto completo para no bombardear a sus visitantes con información.
22. Bloque divisor – El bloque divisor es un bloque simple pero flexible para diferenciar entre secciones u otros elementos del sitio.
23. Bloque espaciador – El bloque de espaciador es una gran herramienta para hacer que tu sitio se vea menos desordenado. Agrega espacios entre dos bloques cualesquiera para asegurarse de que tu diseño se vea bien.
    

Conclusión

Cómo has visto hay un montón de plugins que te añaden bloques muy útiles para mejorar la maquinación de las páginas de tu web.

Te recomiendo que les eches un vistazo e instales el que mejor se adapte a tu proyecto. Puedes instalar varios, pero además de que algunos repiten bloques, ya sabes que cuantos menos plugins instales, mejor irá tu WordPress.

Antes de irte, recuerda entrar en pampua.es/regalo (igual te encuentras algo interesante)

Y esto ha sido todo por hoy. Si tienes cualquier pregunta sobre los bloques de Gutenberg, genesis o sobre diseño web en general, mándamela a través del formulario https://pampua.es/contacto o si lo prefieres en los comentarios de iVoox, o por telegram o twitter como @pampua y te la responderé por privado y en el próximo programa de preguntas y respuestas. 

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spotify, Youtube y desde la web de pampua.es/podcast.

Estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Y si tienes Spotify, aunque me escuches por otras vías, suscríbete en Spotify a este podcast; así Spotify sabrá que hay más gente que lo escucha.

El próximo jueves 21 de noviembre nos espera un análisis web muy interesante, seguro que hay algo que puedes aplicar en tu proyecto. Suscríbete y no te lo pierdas!

Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos la quincena que viene, llueva, nieve o truene!