¿Es Gutenberg el editor WordPress que sustituirá a los Page Builders?

¿Es Gutenberg el editor WordPress que sustituirá a los Page Builders?

Si te gusta, comparte!! No cuesta nada!!

Gutenberg es el nuevo editor que trae WordPress por defecto (por si queda alguien en el mundo que no lo sepa). Es un editor muy criticado por la mayoría y amado por unos pocos. El motivo de tanta crítica, desde mi punto de vista, es el gran cambio tanto a nivel visual como a hora de trabajar con él.

Su funcionamiento se basa en bloques. Un bloque no deja de ser código ya formateado y empaquetado que se edita de manera visual. Otra ventaja de los bloques es que puedes organizarlos muy fácil con la función arrastre o pulsando en las flechas de subir y bajar que tiene cada bloque. La idea de estos bloques es poder hacer una página de manera visual sin programar.

De ahí mi pregunta, ¿es posible diseñar una página web atractiva con Gutenberg? ¿Es Gutenberg el editor WordPress que sustituirá a los Page Builders como Divi o Elementor?

Para responder a estas preguntas decidí diseñar mi propia página web con Gutenberg, que estaba hecha con Divi Builder, manteniendo exactamente el mismo diseño. Te cuento mi experiencia.

Kadence Blocks – Un kit de bloques para Gutenberg

La idea principal era usar solo los bloques que trae Gutenberg. Una vez que trae un bloque de columnas ya solucionaba muchas de las dificultades de maquetación que tenía el antiguo editor. Pero no fue posible. El motivo fundamental es que crear un una sección con una imagen de fondo con un color en transparencia (un overlay) era muy difícil. Habría que poner un div dentro de las columnas y maquetarlo para que creara el overlay y no acababa de conseguir los resultados esperados.

Buscando por Google encontré varias soluciones para crear columnas con un diseño atractivo. Yo me quede con Kadence Block que es un plugin que te añade varios bloques a Gutemberg muy interesantes para realizar un diseño profesional. Bloques tan atractivos como:

  • Row Layout. Para crear filas con varias columnas. Le puedes dar estilo a cada columna desde los ajustes del bloque sin necesidad de CSS.
  • Icon. Un bloque muy interesante que te permite elegir entre más de 1500 iconos.
  • Advanced Button. Permite crear botones modificando el estilo fácilmente desde los ajustes.
  • Spacer/Divider. Un interesante bloque para crear atractivos separadores.
  • Advanced Heading. Permite crear cabeceras dándoles estilo desde los ajustes del propio bloque.
  • Tabs. Permite crear las típicas pestañas tanto verticales como horizontales.
  • Info Box. Crea una caja con un icono o imagen, título y texto. Es el típico módulo de anuncio en forma de resumen de ciertas características.
  • Accordion. Crea una lista en formato acordeón. Idónea para la típica sección de FAQs.
  • Icon List. Haz una increíble lista con iconos de manera fácil.
  • Testimonials. Un bloque para testimonios. Clarito, no?

Recalcar, todos estos bloques los puedes personalizar desde los propios ajustes del bloque en cuestión que aparecen en el lado derecho. Con estos bloques y con un poco de imaginación puedes crear una página web profesional y creativa de manera visual (lo que venden los principales Page Builders).

Pero volviendo a mi caso particular, usé muchos de estos bloques, pero como quería hacer un diseño igual que el que tenía con Divi, tuve que recurrir a CSS, mucho CSS. Aunque esto ya me lo esperaba.

El tiempo de diseño de una página web con Gutenberg

Gracias a Kadence Blocks y a mucho CSS conseguí exactamente el mismo diseño, pero eso me llevó muchísimo más tiempo que con Divi. Un 30% o 40% por ponerle una cifra.

La principal razón, las facilidades que da Divi para duplicar contenido (ya sea copiar y pegar, duplicar, copiar estilos, etc). Y si, Elementor también tiene todas esas facilidades.

Otro motivo que ahorra mucho tiempo es la posibilidad de añadir código CSS en el propio módulo, cosa que en Gutenberg no se puede. Ni se puede dar mucho estilo en los bloques nativos, todo hay que decirlo.

Hablando de tiempos de ejecución, Divi o Elementor ganan por goleada.

Tiempos de carga de una página web con Gutenberg

Aquí si que tengo que decir que con Gutenberg bajaron los tiempos de carga de mi web bastante. Realmente ya la tenía muy optimizada. Midiendo en GTmetrix, desde Londres, me daba tiempos de entre 1 seg y 1,5 seg. Pero con Gutenberg esos tiempos bajaron al rango entre 0,5 seg y 0,8 seg. Aquí os dejo captura de los tiempos más bajos conseguidos con Divi y Gutenberg.

Pero más importante que los tiempos de carga, es la gran reducción del peso de la página y el número de consultas consiguiendo mejorar los resultados también en PageSpeed.

El mantenimiento de una página web con Gutenberg

Yo, como diseñador web, no tengo problema a la hora de modificar una web con Gutenberg. Pero de cara a que esas modificaciones las hagan mis clientes finales y sin conocimientos de programación, ya tengo más dudas. Tanto con Divi como con Elementor todo se realiza de manera visual. El resultado final después de aplicar los cambios es mínimo o ninguno. Con Gutenberg no pasa eso. Más aun si para maquetar hubo que meterle mucho CSS.

Mis conclusiones

Lo primero que tengo que decir es que pasé toda mi web a Gutenberg. Pero por una razón de ego personal!!! No por otra cosa.

Gutenberg tiene mucho potencial y puede llegar a mirar de tu a tu a grandes Page Builders. Pero tiene mucho camino por delante todavía. Y dudo que llegue a alcanzarlos siquiera por la simple lógica de que Gutenberg es código abierto desarrollado por una comunidad de voluntarios. No hay inversión en este proyecto. Divi y Elementor son de empresas privadas que de una manera u otra rentabilizan sus productos, pudiendo invertir mucho tiempo y dinero en mejorar sus productos.

Así que a la pregunta inicial ¿es Gutenberg el editor WordPress que sustituirá a los Page Builders?, mi respuesta es: a día de hoy NO.

Yo en mis diseños web seguiré usando Divi Builder, más aun si el presupuesto es bajo y la posterior administración la va realizar el cliente. Y si eres de los que haces tu propia web y no tienes conocimientos de programación, Gutemberg no es una solución, desde mi punto de vista. Creo que a los Page Builders aun les queda una larga y próspera vida!!!!

Si te gusta, comparte!! No cuesta nada!!

6 puntos imprescindibles para diseñar tu web

Consigue GRATIS este ebook que te ayudará a enterder conceptos básicos para tener una web profesional

Quiero mi ebook!!

Si te gusta, comparte!! No cuesta nada!!

Deja un comentario

1. Responsable de los datos: David Viña Castro.
2. Finalidad de los datos: Gestión de los comentarios de las publicaciones
3. Almacenamiento de los datos: Los datos son almacenados en Raiola Networks, mi proveedor de email y hosting, que también cumple con el RGPD.
4. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.