¿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.
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.
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.
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.
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.
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.
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.
Mapa de Google: el bloque Google Maps le permite mostrar ubicaciones con opciones de zoom que le encantará probar.
Gravity Forms Styler: Personalice su Gravity Form predeterminado con el Gravity Form Styler para mostrar formas más atractivas que convierten.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Compartir en redes: El bloque Social Share le permite a los usuarios compartir su contenido a través de varios sitios de redes sociales.
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.
Equipo: El bloque Equipo le permite mostrar su equipo. Añade su foto, nombre, lo que hacen y enlaces a sus perfiles sociales.
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:
Section & Layout Block – Demo
Bloque de columnas avanzadas – Demo
Bloque de boletín – Demo
Bloque de precios – Demo
Post Grid Block – Demo
Bloque de contenedor – Demo
Testimonial Block – Demo
Inline Notice Block – Demo
Accordion Block – Demo
Share Icons Block – Demo
Call-To-Action Block – Demo
Customizable Button Block – Demo
Spacer & Divider Block – Demo
Bloque de perfil de autor – Demo
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:
Row Layout – demo
Advanced Gallery – demo
Form – demo
Advanced Heading – demo
Advanced Button – demo
Tabs – demo
Accordion – demo
Testimonials – demo
Icon – demo
Spacer / Divider – demo
Info Box – demo
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:
Avisos: Para mostrar alertas, consejos, cosas a evitar…
Post: Para mostrar una previsualización de un post de forma elegante
Muestra un producto de WooCommerce
Botón para añadir al carrito de WooCommerce
Insertar banners
Anuncio de texto y rectángulo
Mostrar plugins del repositorio
Mostrar previsualizaciones de webs tipo wildcard (como hacer Facebook y twitter)
Testimonios
Google Maps
Click para twittear
Tabla de contenidos
Introducción (maqueta de forma distinta el primer párrafo)
Giphy (para añadir GIFs de forma sencilla)
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.
Secciones y columnas: Demo
Video Popup: Demo
Tabla de precios: Demo
Cuadrícula de Posts: Demo
Testimonios : Demo
Acordeon / FAQ : Demo
Perfil : Demo
Portada : Demo
Iconos de compartir : Demo
Botón : Demo
Notificacion : Demo
Cita : Demo
Divisor : Demo
Barra de progreso : Demo
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.
Gestor de columnas con disposiciones predefinidas
El último control deslizante de la publicación y el último control deslizante de la publicación
Último slider de productos WooCommerce y último slider de productos
Bloque de botones avanzado: crea botones con toneladas de estilos
Bloque del formulario de contacto: obtener mensajes de usuario y exportar mensajes
Bloque de lista avanzada: crear una lista con el icono de la lista, color del icono
Bloque Mapa: carga una posición de mapa de Google con zoom, icono, tooltip, color….
Bloque de tabla avanzado: crear tablas con estilo como color, borde
Bloque de acordeón: muestra el contenido en un acordeón totalmente configurable
Bloque de pestañas: muestra el contenido en una UX con pestañas con bloques anidados dentro.
Bloque de testimonio: definir avatar, título, texto, deslizador o estático
Bloque del formulario de contacto: recibir correo electrónico y exportar datos del formulario de contacto
Bloque Email Opt-In: recibir correo electrónico y exportar datos
Bloque de inicio de sesión de WordPress
Bloque de registro de WordPress
Bloque de contador: muestra los números de una manera dinámica, divertida y atractiva
Bloque de imágenes avanzado: texto, superposición, colores, enlace y más.
Bloque de imágenes avanzado: carga y visualización de vídeo local y remoto
Bloque de vídeo avanzado: carga y visualización de vídeo local y remoto
Sobrecargue la herramienta de separación con tamaño, color, espacios
Bloque de enlaces sociales: icono personalizado y enlaces a cualquier red social
Activar el efecto lightbox en las galerías de imágenes de Gutenberg
Mostrar información de la imagen como leyenda de lightbox en las galerías
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.
Bloque de acordeón
Bloque de alertas
Bloque de perfil de autor
Bloque de botones
Bloque Galería Carrusel
Bloque para compartir Tweet
Bloque separador dinámico
Bloque de características
Bloque de Alimentos y Bebidas
Bloque de formulario
Bloque Gif
Bloque GitHub Gist
Bloque de imagen “hero”
Bloque de destacar
Bloque de iconos
Bloque de logotipos e insignias
Bloque del mapa
Bloque de la galería tipo Pinterest
Bloque de tarjetas multimedia
Bloque de tabla de precios
Bloques de líneas/columnas redimensionables
Bloque de servicios
Bloque divisor de forma
Bloque de Perfiles Sociales
Bloque de Compartir Social
Bloque de galería apilada
9.- Stackable
El plugin Stackable te ofrece 23 nuevos bloques ni más ni menos
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Bloque divisor – El bloque divisor es un bloque simple pero flexible para diferenciar entre secciones u otros elementos del sitio.
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!
Premium
Plus
Comentarios