Cómo diseñar una página con Gutenberg, GeneratePress y GenerateBlocks

Por , actualizado en

Diseñar una página en Gutenberg es algo que ya no es lo mismo que hace relativamente poco; ¿está listo Gutenberg para suplantar a builders para los sitios que hacemos frecuentemente? hace poco seguía una discusión que terminó en que si Gutenberg está o no listo para hacerle frente a builders más maduros como Elementor Pro; algunos decían que si, otros dicen que “no le llega ni a los talones” a aquel famoso builder. Habiendo trabajado últimamente de manera exclusiva con Gutenberg, yo creo firmemente que se puede hacer mucho con el, por ello me di a la tarea de escribir este post para ver que tanto podemos hacer con el tan vilipendiado “nuevo” editor de WordPress, amado y odiado por partes iguales. El gancho aquí es que el hecho de diseñar con Gutenberg puede tener como consecuencia crear sitios muy, muy rápidos, cosa que con Elementor Pro te costará mucho trabajo.

Seguro estás pensando “Oh no, otro post de links de afiliado” y en parte si, habrán links de afiliado incrustados pero esa no es la razón de existir de esta publicación. Lo que te quiero mostrar en este post es que puedes crear un sitio rápido, moderno, bonito y rápido como el diablo, con las mejores puntuaciones en las Core Web Vitals, usando nada más que WordPress, GeneratePress y GenerateBlocks (ambos gratuitos).

Pero primero, lo más importante para contar con un sitio rápido

Lo he dicho antes y lo seguiré mencionando; para poder tener un sitio rápido, hace falta pararlo sobre buenos cimientos, entiéndase un buen hosting; de nuevo aquí mi recomendación va para HawkHost, un magnífico hosting con uptime del 100%, entre los más rápidos en la actualidad, con servidores LiteSpeed, PHP actualizado hasta la versión 8.0, discos SSD y muchas más características, con precios muy decentes siempre y no sólo el primer año para después sorprenderte con los precios de renovación por las nubes como hacen muchos (ejem *coff*Siteground*coff*).

Temas, plugins y recursos que necesitarás

Como mencioné en el título, estrictamente hablando del sitio usaré GeneratePress y GenerateBlocks (versiones gratuitas) para construir, un plugin más llamado WE Blocks para una sección de testimoniales, todo sobre Gutenberg claro está, no hace falta más. Es de hacer notar que las versiones Premium de GeneratePress y GenerateBlocks traen muchos más templates y varias características más que esta gratuita, por lo que tendrás más flexibilidad a la hora de crear tus diseños.

También te dejo un archivo ZIP con todas las imágenes usadas:

Instala el tema GeneratePress

Para aquellos que no lo conocen, GeneratePress es en realidad un tema (gratuito) y un plugin que añade funciones de paga (la parte Premium). El tema lo puedes obtener directamente del repositorio de WordPress visitando el menú Apariencia > Temas y haciendo una búsqueda por “GeneratePress“; y para instalar GeneratePress Premium primero tienes que obtener una licencia, la cual adquieres haciendo clic en los links del final de esta página y es de pago anual, pero que vale cada centavo. Cuando hayas realizado la compra, se te otorgará un número de licencia y la descarga del plugin con las funciones Premium, que tienes que instalar usando la opción de cargar un plugin a través de la interfaz:

  1. Ir a Plugins > Nuevo
  2. Clic en Subir, buscar el archivo que acabas de descargar
  3. Instalar y activar

Al terminar ve a Apariencia > GeneratePress y en la barra de la derecha ubica la caja titulada “Actualizaciones”, y ahí en ese campo deberás pegar tu licencia para poder recibir actualizaciones del software, así como soporte.

Escenario para nuestro sitio ficticio

Para este ejemplo vamos a hacer un sitio genérico para un negocio; sólo trabajaremos en la página frontal, pero es más que suficiente para ver la dinámica de trabajo con GenerateBlocks. Para empezar, crea una página titulada “Inicio”.

Establecer la página de inicio

Siendo que no va a ser un blog, vamos a cambiar la página principal de estilo blog a página estática:

  1. Ve a Ajustes > Lectura.
  2. En la sección “Tu página de inicio muestra“, haz clic en el radio “Una página estática (seleccionar abajo)“, y en el selector elige la página “Inicio” como tu portada.
  3. Haz clic en el botón azul que dice Guardar cambios.

Vale la pena mencionar que también se puede ajustar desde el Personalizador (Ajustes > Personalizar) en “Ajustes de la página de inicio“.

Configurar GeneratePress para mejor desempeño

Ve a Apariencia > Personalizar y cuando habra el Personalizador ve a General; establece los siguientes valores:

  • (sólo Premium) Método de impresión CSS dinámico: elige “Archivo externo“. Este método ofrece mejor desempeño que incrustar directamente el CSS.
  • Estructura: elige “Flexbox“. Este es un modelo de diseño para la estructura del sitio que es más eficiente.
  • Tipo de icono: elige “SVG“. Permite que GeneratePress use íconos en vector (mucho más eficientes) que los de fuente, más pesados y problemáticos.

Diseñar en Gutenberg usando GenerateBlocks

Abre la página de Inicio; procede a insertar los siguientes bloques, replicando la estructura; los encontrarás en el grupo GenerateBlocks de tu listado de bloques disponibles:

Esquema de diseño para Gutenberg de la primera sección
Esquema del bloque de cabecera

Configura el contenedor #1 de la siguiente manera:

  • Bloque/Diseño/Contenedor: elige “Anchura completa” o bien hacer clic en el botón de “Ancho completo” en la barra de herramientas en controles de alineación.
  • Bloque/Fondos: clic en “Usar gradiente” establecer color 1 a #0051ff, opacidad 1; color 2 a #00dafc, opacidad 1
  • Bloque/Fondos: en “URL de la imagen”, cargar y seleccionar BG-HomePage-High.png, poner opacidad a 0.3

Al insertar el componente #2, la cuadrícula, recuerda que debes elegir el patrón de dos columnas; eso creará automáticamente los contenedores #3 y #4:

Muestra como elegir una estructura de dos columnas en GenerateBlocks

Haz clic sobre la columna izquierda, cambia Bloque/Alineación vertical a “Centro”.

Tip: ¿cómo seleccionar un control anidado en Gutenberg?

Cuando tengas problemas para seleccionar un control en Gutenberg, haz clic en cualquier componente que esté anidado y luego haz clic en la barra de herramientas en “Contorno” o presiona Shift + Control + O, y podrás elegir cualquier componente desde el padre hasta cualquier anidado en ese grupo.

La columna de la izquierda van los bloques que viste en el esquema 1, y que son dos bloques GenerateBlocks/Titular, un párrafo normal, y un bloque GenerateBlocks/Botones. En orden, cada uno debe ir configurado como sigue:

  • Primer titular:
    • Cambiar Bloque/Nombre de la etiqueta a “H4”.
  • Ambos titulares:
    • Cambiar Bloque/Colores/Color del texto a blanco, llenar con el texto que se lee o con el que gustes.
  • Párrafo:
    • Cambiar Bloque/Ajustes de color a blanco.
  • Botones:
    • Cambiar Bloque/Espaciado/Radio del borde todos a 25.
    • Cambiar Bloque/Colores, estado “Normal”, poner “Color de fondo” a #00fff2, opacidad 1.
    • Cambiar Bloque/Colores, estado “Al pasar el cursor”, poner “Color de fondo” a #2200ff, opacidad 1.

Para la columna de la derecha, configura sus valores de la siguiente manera:

  • Establecer Bloque/Fondos/URL de la imagen a Hero-Home-page-new.png.
  • Establecer Bloque/Espaciado/Altura mínima a 23vw (las unidades se muestra arriba y al final de las cajas de edición)
  • Establecer Bloque/Margen “Superior” a 160;
  • Establecer Bloque/Radio del borde a 50, 15, 15 y 15, respectivamente.

Después de todo esto, deberías tener algo similar a lo siguiente:

Muestra como quedó el diseño de la cabecera en Gutenberg

Cómo diseñar en Gutenberg la sección de CTA con GenerateBlocks

Nuestra siguiente sección a diseñar en Gutenberg es muy similar a la primera, sólo que invertimos el contenido de las columnas como se ve a continuación:

Esquema de la sección de CTA para diseñar en Gutenberg
Esquema de la sección de CTA

El contenedor #1 se configura de la siguiente manera:

  • Bloque/Diseño/Contenedor: “Anchura completa”
  • Bloque/Espaciado/Altura mínima: 100vh
  • Bloque/Fondos/URL de la imagen: BG-home-new4.png

Para ambas columnas, cambia Bloque/Alineación vertical a “Centro”; debes hacer el cambio por cada una.

Para la columna de la izquierda, configura sus valores de la siguiente manera:

  • Establecer Bloque/Fondos/URL de la imagen a BG-home-new4.png.
  • Establecer Bloque/Espaciado/Altura mínima a 23vw (las unidades se muestra arriba y al final de las cajas de edición)
  • Establecer Bloque/Radio del borde a 50, 15, 15 y 15, respectivamente.

El contenido de la columna de la derecha es básicamente lo mismo de la sección anterior y sólo cambiar el contenido como tu gustes, y los colores también tendrás que usar tonos oscuros que contrasten con el blanco de fondo. Si quieres usar los del template original, son #3d4459, #e6f9fe, #3d4459, y para el botón #00dafc en estado normal y #4632da para el estado hover. La sección terminada se vería así:

Muestra el resultado final del diseño en Gutenberg de la sección de CTA

Diseño de la sección de oferta de servicios con GenerateBlocks

La siguiente sección es más interesante; el esquema de esta podría quedar como sigue:

Esquema de la sección de servicios para diseñar en Gutenberg
Esquema de la sección de oferta de servicios

El contenedor más externo (#1) se configura como sigue:

  • Bloque/Diseño/Contenedor: “Anchura completa”; puede que tengas que seleccionar el bloque y en su barra de herramientas también hacer clic en el botón de “Ancho completo”.
  • Bloque/Espaciado/Altura mínima: 100vh
  • Bloque/Fondos/URL de la imagen: Shapes-icons.png

Ahora, añade un bloque GenerateBlocks/Cuadrícula y selecciona el patrón de 3 columnas. La receta para cada cuadro que representa un servicio es la siguiente:

  1. Configurar el Contenedor:
    • Bloque/Espaciado/Relleno: 15, 25, 15, 25 (px todos).
    • Bloque/Espaciado/Radio del borde:
    • Bloque/Colores/Color de fondo: blanco
  2. Añadir una imagen y configurar con el ícono que desees, de preferencia que sea cuadrado, y ajusta el tamaño.
  3. Añadir un bloque GenerateBlocks/Titular, poner contenido al gusto.
  4. Añadir un bloque de párrafo, poner contenido al gusto.
  5. Añadir un bloque de párrafo, añadir enlace a un ancla vacía (#).

Después debes replicar esto en cada uno de los cuadros hasta terminar con los seis cuadros del diseño original. Te habrás percatado que son dos renglones; sólo tienes que añadir debajo otro control GenerateBlocks/Cuadrícula y volver a elegir el template de tres columnas y continuar. Seguro estás pensando “qué flojera hacer lo mismo seis veces” y si, te comprendo. Pero recuerda que existe la magia de los patrones de bloques en Gutenberg, y mejor aún, si tienes GeneratePress Premium puedes añadir fácilmente esto con un Elemento de bloque. Les dejo ambos como un ejercicio.

La sección terminada queda así:

Resultado del diseño en Gutenberg de la sección de servicios

¿Cómo añadir la sombra de las cajas?

Te habrás percatado que el diseño original muestra una sombra en algunos elementos, lo que ayuda a darle profundidad a la página y que no se vea tan plana. Añadir el efecto es fácil; ve al Personalizador y en la sección de CSS Personalizado, añade lo siguiente:

.gb-container.box-shadow {
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 10%);
}

Después de ello, en el elemento que quieres que tenga sombra de caja, ve y sus propiedades de bloque ve a la sección Avanzado y en “Clase(s) CSS adicional(es)” escribe box-shadow, y eso es todo lo necesario. No verás la sombra en modo de edición, pero si la verás en el preview.

Cómo diseñar en Gutenberg la sección de equipo de trabajo

Esta pudiera estar difícil, pero vamos a intentarlo; el esquema de la sección va así:

Esquema de diseño para Gutenberg de sección de equipo de trabajo
Esquema de la sección de equipo de trabajo

Una vez que hayas conseguido armarla, vamos a configurar los bloques como sigue:

  • Contenedor exterior:
    • Anchura: completa (usar el botón de la barra de herramientas del bloque)
    • Bloque/Fondos/URL de la imagen: subir y elegir BG-TEAN-Home.png
    • Bloque/Espaciado/Altura mínima: 100vh
    • Bloque/Espaciado/Alineación vertical: elegir “Centro”
    • Bloque/Espaciado/Relleno: todos a 40px.
  • Cuadrícula #1
    • El patrón a elegir debe ser de una columna
    • Bloque/Fondos/URL de la imagen: subir y elegir Team-5.png
    • Bloque/Espaciado/Altura mínima: 246px
    • Bloque/Espaciado/Radio del borde: superior izquierda y superior derecha a 25px ambos
  • Cuadrícula #2
    • Bloque/Espaciado/Relleno: 0px todos
    • Bloque/Espaciado/Radio del borde: inferior izquierda e inferior derecha a 25px
    • Bloque GenerateBlocks/Titular:
      • Bloque/Espaciado/Relleno: superior a 10px
      • Bloque/Espaciado/Margen: inferior a 0px
      • Bloque/Colores/Color de texto: azul cielo (#8ed1fc)
    • Bloque Párrafo se queda con valores por default

Como puedes ver, eso hace un cuadro de un miembro; necesitarás duplicarlo para el otro miembro, sólo cambia la imagen mostrada, puedes usar la que gustes o bien Team-8.png de archivo de recursos. El último bloque es trivial como te podrás imaginar, pues ya lo hemos hecho en otras secciones, siendo el mecanismo el mismo: el primer GenerateBlocks/Titular es un h4, el segundo GenerateBlocks/Titular se queda como está, y el botón es nada más cambiar el mensaje e ícono como ya lo hemos realizado:

Resultado de implementar el diseño en Gutenberg de la seccón de equipo

¡Otra sección más que muerde el polvo!

Diseñando la sección de testimoniales

Para la sección de testimoniales seguimos con nuestro mismo modus operandi, sólo que esta vez echaremos guante de los componentes de WE Blocks, que tiene uno para mostrar un carrousel de testimoniales. El esquema de la sección queda así:

Esquema de la sección de testimoniales para diseñar en Gutenberg
Esquema de la sección de testimoniales

Como puedes ver, más de lo mismo; un contenedor grande para tener control del fondo de la sección, una cuadrícula que almacena las columnas, cada columna vive dentro de un contenedo a su vez. Sólo que esta vez los contenedores no son simétricos, sino que una tiene 33% y la otra 66% de ancho, lo que se hace cambiando los valores en del bloque en Bloque/Diseño/Ancho del contenedor. Del lado izquierdo el contenido es trivial, puedes copiarlo o poner el que gustes.

Los testimoniales son igual de sencillos de almacenar, pero requieren una explicación sólo por si acaso. En su estado por default (muy parecido a como se muestra en el esquema), es un signo de “+”; cada que lo presionas es como crear un testimonial nuevo, y para cada uno necesitas el texto del mismo, una foto, el nombre y un cargo o posición. Si quieres usar las mismas fotos que el diseño, son testimonial-1.png, testimonial-2.png y testimonial-3-1.png, todas en el archivo de recursos.

Ahora lo único que falta es configurar el bloque de testimoniales para imitar al original; para hacerlo, sigue estos pasos con el bloque seleccionado:

  • Bloque/Testimonial style: elegir “Style 2”
  • Bloque/Slides to show: elegir “1”

Y básicamente eso es todo para la sección, que queda así en el editor Gutenberg:

Resultado de como quedó la sección de testimoniales basada en el diseño para gutenberg

Diseño de las secciones faltantes

Quedan dos secciones del diseño original: un sampler de clientes y lo que podría ser un footer con CTA (call to action); ambas las dejaré para que tu las diseñes como ejercicio, pero te daré algunos apuntes.

La primera sección (de clientes) es bastante sencilla; sólo necesitas un contenedor de 100vh de alto, dentro un titular (h4), otro titular, un párrafo y por último una cuadrícula de 5 columnas, en cada una va un bloque de imagen con la imagen correspondiente; pon el contenido tal como se indica y queda idéntica:

Sección de clientes ya terminada de diseñar en Gutenberg

Por último, la última sección es idéntica a la primera, sólo tienes que cambiar el margen de la imagen de la derecha, quitar la forma de abajo y ponerla arriba y…quitar elementos de la izquierda. En el editor Gutenberg el diseño final de la sección quedaría así:

Sección de footer diseñada en Gutenberg

Ajustes finales

Faltan algunos ajustes menores; como te podrás percatar, hay algunas separaciones no deseadas, y tiene un scroll horizontal, lo cual es bastante feo, así que vamos a añadir un poco de CSS en el personalizador. Añade lo siguiente:

.site-main {
	margin: 0px !important;
}

.inside-article {
	padding: 0px !important;
}

body {
	overflow-x: hidden !important;
}

Esto elimina unos espacios en la cabecera y footer, y la última regla oculta el scroll horizontal. Valga la pena mencionar que esto último es un error en el cálculo del ancho horizontal en Gutenberg, no en el tema GeneratePress.

¿Te percataste de lo que acabas de hacer?

En caso que no te hayas dado cuenta, lo que para ti fue diseñar en Guteberg en realidad fue clonar la página frontal de un template de Elementor Pro en Gutenberg, usando poco más que GeneratePress Premium y GenerateBlocks. Adelante, ve a revisar los templates que ofrece ese builder, encontrarás este que acabas de hacer, sólo que tu creación va mucho más rápido que la contraparte del builder; estás por encima de 90% en móvil, fácilmente 100% en desktop, y eso sin optimizaciones agresivas, ni Cloudflare. La medición en mi sitio de prueba:

Y de nuevo, es un sitio sin optimizar a fondo.

Ahora bien, no todo es miel sobre hojuelas, pero podría serlo pronto; hay cosas que todavía no se pueden controlar tan bien como en Elementor Pro u otros builders, por ejemplo, las páginas de archivo. En GeneratePress Premium hay bastante control sobre ellas, pero en otros temas podría no haberlo. Eso se terminará cuando esté lista la edición de sitio completa, cuya primera iteración viene en WordPress 5.8 que ya está a la vuelta de la esquina.

Así que, ¿sigues pensando que Gutenberg está muy limitado y que aún no está listo?

Palabras finales

No quisiera que se malentienda este post; la única finalidad es demostrar que puedes hacer muchísimo con las herramientas que ya tenemos, que puedes diseñar en Gutenberg sin problemas. En mi caso, GeneratePress y GenerateBlocks son las herramientas adicionales que yo elegí, y vale la pena mencionar que si las usas en su versión Premium obtienes mucho más control para trabajar de forma más ordenada; pero ya vieron lo que se puede hacer con la versión gratuita.

Y quiero ser muy enfático que si la solución completa es un hosting de calidad (como el que recomiendo), GeneratePress, GenerateBlocks y alguno que otro plugin, puedes producir no solamente cosas muy decentes, sino que puedes producir sitios rápidos, con excelentes puntuaciones en Core Web Vitals y sin mucho esfuerzo – estimo a ojo de buen cubero que para sitios sencillos a medianos alcanzas un 90%/98% respectivamente en móvil y escritorio, algo impensable para un sitio con Elementor Pro y sin optimizar.

Como he venido diciendo, el ecosistema de Gutenberg está creciendo a pasos agigantados; hoy en día hay plugins verdaderamente interesantes que nos permiten hacer muchísimo más de lo que podíamos hace apenas un año. Si aún no empiezas con Gutenberg, ahora es tan buen momento como cualquiera. Puede que te sorprendas.

Créditos de imagen de cabecera

Foto por Kelly Sikkema en Unsplash

Antes que te vayas…

Los siguientes son enlaces de afiliado a hosting, herramientas y temas que uso en este sitio. Son el único apoyo económico del sitio, que notarás no tiene anuncios de ningún tipo ni molestos popups. Si necesitas alguno de estos productos, te pido los adquieras haciendo clic en las imágenes que se muestran a continuación. ¡Gracias de antemano!

¡El mejor tema para WordPress, y el tema más rápido también! GeneratePress Premium es el mejor tema para tu WordPress

¡Comprime tus imágenes y mejora la velocidad de su sitio con el CDN gratuito de ShortPixel!

Deja un comentario

Hazlo con WordPress

Centro de preferencias de privacidad

Necessary

Advertising

Analytics

Other