Diseñar una página web con Gutenberg y Kadence Blocks

El editor de bloques de WordPress, más conocido como Gutenberg, es el nuevo editor que trae WordPress en su núcleo. La diferencia con respecto al editor clásico es muy grande. Amado por pocos y odiado por muchos, lo ciertos es que ha venido para quedarse.

La gran ventaja de este nuevo editor es la posibilidad de usar bloques. Todo son bloques. Un párrafo es un bloque, pero también una imagen. Pero la gran ventaja es la posibilidad de crear bloques personalizados distintos a los que vienen en el core. Con un simple plugin como Kadence Block, te amplia el catálogo de bloques mucho, hasta tal punto que puedes diseñar una página web profesional a la altura de grandes page builders.

Esto tiene una ventaja evidente, estamos usando un sistema que viene en el núcleo de WordPress y, aunque añadamos más bloques mediante plugins, siguen siendo un sistema que viene en el núcleo de WordPress. El rendimiento es superior al uso de otros page builders. Aunque siendo sinceros, aun queda camino para llegar a la altura de page builders como Divi a nivel de usabilidad!!

Por el momento, puedes diseñar una página web con Gutenberg y Kadence Blocks obteniendo un resultado profesional. Kadence Blocks te añade una serie de bloques prediseñados que traen cierta personalización y que te permiten diseñar una página web sin escribir una sola línea de código.

Kadence Blocks, un plugin que añade bloques para diseñar tu web

Kadence Blocks te añade una serie de bloques prediseñados que puedes personalizar fácilmente desde las opciones que aparecen en cada bloque desde la zona de la derecha desde la opción bloque. Tienes los bloques más usados que hay dentro del diseño web y que en este post te voy a enumerar en detalle. Y si con ellos no te llega, tiene una opción premium con la que te añade interesantes opciones que te harán tu página web más pro.

Row Layout – Para crear columnas o secciones

Aunque el editor de bloques trae uno para crear columnas, es bastante pobre la verdad. Pero con este bloque puedes hacer autenticas maravillas. Puedes crear secciones con imágenes de fondo, puedes crear varias columnas o crear secciones dentro de tu página donde ir metiendo tus otros bloques. Incluso puedes meter otro bloque de columnas dentro del bloque en si.

Pongamos un ejemplo. Quieres crear una sección con un fondo, un título, un separador, un subtítulo y tres opciones en formatos columna (las típicas cajas de imagen o icono, texto y botón). Con Kadence Blocks lo podemos hacer creando una sección con Row Layout y una columna a ancho completo con la imagen o colores de fondo que hayamos seleccionado. Luego añadimos un Advanced Heading, el Spacer, un párrafo y luego añadimos otro Row Layout con 3 columnas y en cada columna un Info Box. Y ya tienes tu sección personalizada. ¡Así de fácil!

Advanced Gallery

Con este bloque puedes crear maravillosas galerías de fotos y personalizarlas a tu gusto desde las opciones de ajustes del bloque. Puedes crear una galería Masonry, Grid, Carousel, Fluid Carousel o slider. Las opciones de personalización son muy grandes.

Advanced Heading – Crea títulos crativos

Este bloque te permite crear título con mucha más personalización que el bloque clásico de Encabezado. Te permite elegir la etiqueta que vas usar, el color de la fuente, el tamaño, el alto de línea, opciones avanzadas de tipografía, resaltado (Highlight) de ciertas partes del texto dónde puedes darle color de fondo, distinto tamaño, distinto color y muchas otra opciones.

Advanced Button – Personaliza tus botones

Con Advanced Button puedes crear desde un simple botón a varios botones dentro del mismo bloque. Lo interesante es que puedes darle el estilo personalizado que tu quieras. Con color de fondo personalizado, texto, shadow y distinto color cuando haces hover sobre el botón.

Tabs – Crea pestañas personalizadas

Con este bloque podrás crear pestañas de información personalizando el estilo y dándole un toque atractivo. Podrás elegir si quieres un estilo horizontal o vertical, personalizar los estilos del título, los bordes, fondos, iconos en los títulos y muchas otras opciones interesantes.

Accordion – El famoso sistema de acordeón idóneo para preguntas frecuentes

Crea un sistema de acordeón donde cada panel se pueda desplegar con un simple toque en el título. Puedes configurarlo para que al abrir uno se cierren los otros, que la página cargue con uno abierto o todos cerrados, y por supuesto, puedes personalizar títulos, colores de los títulos, fondos, iconos, etc. Dentro de cada panel puedes meter el bloque que quieras de todos los disponibles.

Testimonials – Para poner testimonios de tus clientes en tu página

Un completo bloque que te permite introducir testimonios de tus clientes con interesantes diseños personalizables y la opción a elegir entre mostrar en formato grid (o columnas) o carousel.

Cada elemento del testimonio (título, foto, cargo, etc) lo puedes activa o desactivar y personalizarlo a tu gusto.

Icon – Un simple bloque para poner un icono

Puedes poner un icono o varios dentro del mismo bloque. Puedes seleccionar el icono que quieras dentro de los 81 iconos que trae por defecto. Cambia el tamaño, color, fondo, y muchas opciones más.

Spacer/Divider

Un interesante bloque que te permite crear simplemente un espacio entre bloques o puede ponerle una línea divisoria personalizando color, altura o ancho.

Info Box – Crea cajas de información o anuncios de tus servicios

Este bloque es el típico que puedes usar para mostrar un servicio con una imagen, el título de dicho servicio y la descripción. También le puedes poner un botón. Y puedes poner todo el bloque enlazable a otra página o solo el botón. ¡Podrías crear una bonita llamada a la acción con una de sus opciones predefinidas!

Inicialmente puedes elegir entre alguno de los diseños que trae predefinidos y luego personalizarlos a tu gusto. Puedes activar o desactivar alguno de los elementos que te carga, y por supuesto darle un estilo acorde a tus gustos.

Icon List – Crea lista con iconos llamativos

Este es un bloque muy interesante donde puedes crear una lista con iconos a elegir entre los 81 que vienen por defecto. La gran ventaja que te ofrece es que puedes personalizar cada uno de los iconos de la lista de manera individual. Cambiar tamaños, colores, etc.

Más personalización para diseñar tu web

Otra opción super interesante, aunque ya debes controlar un poco de CSS y controlar bien el inspector de código de Chrome, es poder asignarle una clase a cada uno de los bloques o incluso elementos que tiene cada bloque para añadirle más personalización con CSS. Esta opción la tienes en cada bloque al final de todo en Avanzado clase CSS adicional. Una vez le pongas la clase, vas al inspector de código y miras bien la estructura para llegar exactamente al elemento que quieres personalizar.

Conclusión

Como puedes ver, con este plugin que se integra en el con el sistema de bloques añadiendo nuevos bloques a tu WordPress puedes diseñar una página web profesional, y sin gastar un solo euro (salvo que compres la versión PRO).

Gutenberg ha venido para quedarse, yo voy empezar a darle el uso que se merece. ¿Y tú?

David Viña

Soy Desarrollador Web freelance especializado en WordPress. Me gusta hacer páginas web que cargan muy rápido y estén lo más optimizadas posibles sin perder calidad ni diseño. I ❤️ Gutenberg!!