• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
Pampua

Pampua

Diseño web y marketing online

  • Servicios
    • Diseño web
    • Marketing digital
    • Mantenimiento web
  • Portfolio
  • Sobre mi
  • Blog
  • Contacto

Mejora tu web con los bloques de Gutenberg

En el episodio de hoy te recomiendo los 9 plugins que puedes usar para aumentar los bloques de formato del editor de Gutenberg. Súper recomendable!

07/11/2019 Por Ramón Deja un comentario

https://roptex.com/podcast/podcast75.mp3

Apple Podcasts | Google Podcasts | Spotify | Pandora | 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

Hoy te voy a contar:

  • ¿Que es Gutenberg?
  • Los bloques de Gutenberg
  • Los 9 plugins que te recomiendo
    • 1.- Gutenberg Blocks
    • 2.- Atomic Blocks
    • 3.- Kadence Blocks
    • 4.- Advanced Gutenberg Blocks
    • 5.- Block Gallery
    • 6.- Bokez
    • 7.- Advanced Gutenberg
    • 8.- CoBlocks
    • 9.- Stackable
  • Conclusión

¿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:

Bloques comunes del editor Gutenberg

Luego, los bloques que te permiten crear formatos distintos:

Bloques de formatos

Bloques para crear elementos de diseño:

Elementos de diseño

Bloques para crear widgets:

Bloques de widgets

Y finalmente, los bloques para incrustar elementos externos:

Algunos de los bloques para incrustrar elementos externos, pero hay muchos más…

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:

Selección de formato de una fila o bloque

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

Algunos formatos ya pre-diseñados disponibles en la librería de Kadenze Blocks.

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.

Bloques del plugin de Block Gallery

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!

Quizá te interese:

La importancia de una web para tu negocio
La importancia de una web en tu negocio
Análisis web de un e-commerce de vídeos
Análisis web empresa constructora

Publicado en: Podcast Etiquetado como: editor, gutenberg, wordpress

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Contacta conmigo

De L a V de 9:00 – 21:00
Av. Maisonnave, 5, 8D, 03003 Alicante
Aviso legal - Privacidad
© 2002–2023 Ramón Prats

Podcast

En los 122 episodios del podcast "Diseño Web" he ido compartiendo un montón de consejos para que puedas optimizar tu web fácilmente.

Newsletter

Apúntate y accede a contenido exclusivo gratis con el que quincenalmente te ayudaré a mejorar tu presencia online.

Blog

Lee las últimas publicaciones del blog o mejor aún, suscríbete por RSS. Dicen que de vez en cuando publico algo interesante ;-)

Uso las dichosas cookies para darte una mejor experiencia en esta web.

Puedes informarte más sobre qué cookies uso o desactivarlas en los AJUSTES.

Powered by  GDPR Cookie Compliance
Resumen de privacidad

Utilizo las cookies en mi web para poder ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a visitar la web o ayudarme a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!