Como hacer una web profesional con Gutenberg y Kadence sin código

3 min 08/12/2019

Hace tiempo que me andaba rondando la cabeza crear un tutorial de como crear una página web profesional con el editor de bloques (Gutenberg) y Kadence Blocks sin escribir una sola línea de código. Pero tampoco me valía una página cualquiera, quería replicar una plantilla de las que trae Elementor prediseñadas y crearla con bloques. Por supuesto, lo hice. Primero se lo hice a clientes (aunque tengo que reconocer que a los clientes les meto algo de CSS), no por nada, sino porque me resulta más fácil. Pero luego en pruebas me puse manos a la obra con la idea de hacerlo sin escribir nada de CSS. Llegué a la conclusión que más que poner aquí toda la parrafada del proceso, lo mejor era grabarlo en vídeo y que vieseis todo el proceso.

Antes de nada. Lo que hice con Kadence se puede hacer con otras librerías de bloques que hay. Lo importante es entender la lógica y ver los pequeños trucos que voy usando durante la creación.

No os lío más, os dejo con el vídeo. Y si aguantas hasta el final, luego te muestro un par de apuntes que te harán plantearte usar el editor de bloques.

Ventajas de usar el editor de bloques

Seguro que te estás preguntando ahora, ¿qué ventajas tiene usar el editor de bloques si al final tienes que instalar un plugin a mayores?

1. El editor de bloques está integrado en el core de WordPress, por lo que va cargar los recursos que usa sí o sí. Optimizamos los tiempos de carga, y consumimos menos recursos en nuestro servidor.
2. Podemos trabajar con el manera visual, y si te fijas en los pequeños trucos que voy usando, la agilidad creando páginas es bastante rápida. (Vale, no tanto como los page builders, pero si mucho más que con el antiguo editor )
3. Aunque usemos un plugin que trae toda una colección de bloques, va a pesar menos que instalar un Page Builder (más abajo te muestro resultados ).
4. Todas estas colecciones están desarrolladas bajo una misma directiva, aprovechando recursos que ya trae WordPress por defecto. No te instala un monstruo con 1000 archivos y 2000 funcionalidades que no vas a usar.
5. Y os guste más o menos, el editor de bloques ha venido para quedarse. Es un software desarrollado por la comunidad WordPress de manera totalmente altruista. Dedicando tiempo tiempo libre a crear esta herramienta y sin ningún interés económico por medio. Ya solo por eso, se merece todo mi respeto y apoyo.

Comparativa de los tiempos de carga

Primero os voy explicar en que condiciones hice la comparativa de los tiempos de carga. Las dos páginas están alojadas en la misma instalación y tienen el mismo sistema de caché con exactamente la misma configuración. Usé las imágenes que descargó la plantilla de Elementor (poco optimizadas por cierto) en ambos casos. Y para el test de la página con Gutenberg desactivé Elementor para que no cargara sus dependencias. El theme usado es el mismo en ambos casos, Genesis con un childtheme desde donde cargo las fuentes de Google fonts. Ahora la comparativa.

Ohhh!! Que sorpresa!! Con Gutenberg la web pesa muchísimo menos (algo más de medio mega) y tarda 0,7seg menos en cargar. Y ya no os cuento en número de peticiones al servidor. Tiene más del doble con Elementor (aunque parte de culpa la tiene la plantilla en sí, ya que las fuentes las mete desde el propio constructor y hace una llamada por cada sitio que mete la fuente). Ahora descarga tu esa plantilla, la modificas tal y como está y se la vendes a un cliente.

No tengo nada en contra de Elementor, simplemente lo usé como ejemplo porque pude descargar su plantilla gratis. Con Divi Builder (con el constructor), los resultados serían similares a Elementor (palabrita de honor). Y lo sé de buena tinta que fue una plantilla que usé durante mucho tiempo.

Con este tutorial solo pretendo poner en valor el editor de bloques y demostrar sus capacidades. Y me gustaría que se le empezara a perder el miedo a construir páginas con él.

Conclusión

I love Gutenberg!! Y tu deberías empezar a cogerle algo de cariño también. ✌