Saltar al contenido

Constructor de diseño de cuadrículas: ¿el poder de un constructor de páginas dentro de Gutenberg?

19/02/2021

Grids Layout Builder es una extensión que le permitirá crear diseños sofisticados (diseño) dentro del editor de WordPress ( Gutenberg ).

En este artículo, le sugiero que descubra las características proporcionadas por Grids Layout Builder y verá que es una revolución.

Generador de diseño de cuadrículas

 

1 – ¿Qué es Grids Layout Builder para Gutenberg?

Como te dije, Grids Layout Builder es un plugin gratuito disponible en el directorio oficial de plugins de WordPress.

Esta extensión es muy joven, se lanzó a principios de 2019. Aunque su número de instalaciones activas (+1000) no es muy alto, no obstante es muy prometedor …

Además, Matt Mullenweg , fundador de la empresa Automattic que impulsa WordPress, entre otros, no dudó en citar este plugin y probarlo en vivo durante su conferencia en WordCamp Europe 2019

Entonces, si “nuestro amigo Matt” lo aprueba, solo podemos probar esta extensión 😉

 

2 – ¿Cómo funciona?

Para empezar, es muy sencillo, solo tienes que instalar la extensión como de costumbre. Si no sabe cómo, lea este artículo dedicado a instalar una extensión .

Extensión gratuita: Grids Layout Builder

O vaya a la pestaña Extensiones> Agregar y haga una búsqueda por palabra clave: «diseño de cuadrículas» . Haga clic en instalar y luego en activar .

Una vez hecho esto, no es necesario que busque una nueva pestaña de opciones de configuración. No, no es necesario configurar Grids Layout Builder para que funcione.

Una vez activado, el plugin agrega una nueva opción dentro del editor de WordPress Gutenberg , de manera bastante simple.

Así es como se ve:

Agregar una sección de cuadrículas

  1. Dentro de una página o un artículo, haga clic en el icono «+» como si quisiera agregar un nuevo bloque.
  2. Excepto que en lugar de agregar un bloque, elegirá «Sección» .
  3. Luego, una ventana le ofrecerá varios tipos de secciones, a saber:
  4. Una sección de 1/1,
  5. Una sección 2/2,
  6. Una sección de 3/3,
  7. Una sección de 4/4,
  8. Una sección gratuita.

 

Las secciones 1/1, 2/2, 3/3 y 4/4 funcionan de la misma manera, que la sección libre tiene algunas diferencias de uso.

Veremos esto en detalle en el resto de este artículo …

 

3 – Ejemplo de una sección de 4 columnas

Para empezar, le sugiero que descubra el uso de una sección clásica compuesta por 4 columnas (sección 4/4).

 

3.1 – Operación de áreas

Cada columna, ya sea única o en número de 2, 3 o 4 ofrece una o más AREA (s): es un “contenedor” o “contenedor” en el que puede colocar los bloques de Gutenberg que desee.

Opción de columnas de «área»

  1. Para este ejemplo, estoy insertando una sección que consta de 4 columnas.
  2. Dentro de cada columna, solo necesito agregar los bloques que me interesan. Para este ejemplo, inserté 4 botones idénticos, pero podrían haber sido texto, imágenes u otros. Cada botón está configurado normalmente (color de fondo, URL del enlace, etc.) pero son las características proporcionadas por Grids Layout Builder las que nos interesan aquí … Luego verá aparecer un pequeño menú relacionado (enmarcado en verde en esta captura de pantalla). Al seleccionarlo, la barra lateral confirmará que está en proceso de modificar esta columna, también llamada AREA (zona).
  3. La subsección «Estructura» le permite ver fácilmente qué «área» está modificando. Aquí también puede hacer clic en las otras áreas para seleccionarlas más rápidamente.
  4. La subsección “Pantalla” le permite definir una visibilidad de acuerdo con los tamaños de pantalla, ¡esto puede ser muy útil! Y sobre todo, esta funcionalidad no existe dentro de Gutenberg.
  5. La subsección «Orden de pila» le permite definir un valor para el índice z . ¡Aquí hay otra característica interesante! El índice Z se utiliza para definir la profundidad de las capas cuando se superponen. Podrá colocar ciertas áreas por encima o por debajo de otras.
  6. La subsección «Dimensión» le permite definir el margen y el relleno para cada área (columna) y para cada tipo de pantalla.

 

3.2 – Funcionamiento de las secciones

SECCIÓN es lo que engloba todas las áreas, no importa cuántas …

Opciones de sección de cuadrículas

  1. Cuando pase el mouse sobre la sección, verá un pequeño menú relacionado con un ícono tricolor. Al seleccionarlo, las opciones de la barra lateral derecha cambiarán y le permitirán:
  2. Agregue una imagen de fondo que se aplicará a toda la sección.
  3. Elija el tamaño y la visualización de su imagen de fondo.
  4. Seleccione, si es necesario, el «Punto Focal».
  5. Corrija la imagen de fondo para obtener un efecto deslizante.

Todas estas posibilidades proporcionadas por Grids Layout Builder no están disponibles desde el editor nativo de WordPress y esto le da una ventaja particular.

Pero eso no es lo único apreciable, el poder de esta extensión radica sobre todo en la creación de una sección gratuita

 

4 – Ejemplo de sección libre

Esta es la verdadera revolución: la posibilidad de crear un diseño que salga directamente de tu imaginación, ¡simplemente arrastrando y soltando !

Añadiendo una sección gratuita: ¡crea tu diseño!

Luego agregue una nueva sección y elija el diseño libre (extremo derecho) …

Cree el diseño en «arrastrar y soltar»

Aparece una pantalla:

  1. Seleccione el número deseado de cuadros haciendo clic y arrastrando el mouse (arrastrar y soltar).
  2. Con cada nueva Área creada, se colocará en la barra lateral derecha. Puede arrastrarlos hacia arriba y hacia abajo, lo que tendrá un efecto en la posición del índice Z si estas áreas se superponen. En la captura de pantalla anterior, la Zona # 2 cubrirá parte de la Zona # 1 y la Zona # 3 cubrirá parte de la Zona # 2.
  3. Termine con «Insertar en la página» .

 

Agregar bloques en el diseño

Una vez que se haya insertado el área libre dentro de su artículo o su página, todo lo que tiene que hacer es agregar bloques de Gutenberg según sus necesidades.

Para este ejemplo inserté 3 fotos y notas que las imágenes se superponen. Esto es obviamente imposible con el editor de WordPress: gracias Grids Layout Builder 😉

 

5 – Los puntos fuertes de Grids Layout Builder

Además de todas las características enumeradas hasta ahora, Grids Layout Builder ofrece muchas más interesantes:

 

Punto fuerte n ° 1: «ampliar el ancho del editor»

Opción de editor extendido

Al marcar el botón pequeño en la parte superior derecha, puede aprovechar un editor de WordPress más grande … ¡Por fin! ¿Te hace preguntarte por qué el editor nativo no es el predeterminado?

 

Fortaleza n ° 2: gestión receptiva avanzada

Desde la barra lateral de opciones, puede modificar fácilmente determinados valores (margen, relleno y altura) según 3 tipos de pantalla: Escritorio, Tableta y Móvil.

Opción de visibilidad y respuesta

 

Estos valores se pueden modificar en cada Área (columna) pero también en la propia sección.

 

Punto fuerte n ° 3: superposición de bloques

¡Esta es precisamente LA característica que nos hace apreciar Grids Layout Builder ! La posibilidad de superponer áreas o hacer que se superpongan es muy interesante y rara vez está disponible, incluso dentro de los creadores de páginas avanzados .

Punto fuerte: superposición de bloques

 

Punto fuerte n ° 4: enlace de anclaje

Otra opción más que traerá una verdadera comodidad: la posibilidad de agregar un enlace de ancla en una sección de Grids.

Agregar un enlace de ancla

Este ancla HTML le permitirá identificar una sección y hacer un enlace a ella desde otro artículo o incluso desde una tabla de contenido al principio del artículo (como en este artículo).

Con el editor nativo de WordPress, solo es posible agregar una clase CSS en bloques , pero no un ID de CSS .

Esto luego nos obliga a modificar el bloque en versión HTML . Es muy molesto y, sobre todo, no está al alcance de todos los usuarios… ¡Con Grids Layout Builder , es un juego de niños!

 

Punto fuerte n ° 5: cambiar la disposición de las columnas

Otro punto fuerte del constructor Grids Layout: la posibilidad de modificar el diseño de las columnas.

Cuando seleccione la estructura de su sección, verá aparecer opciones en la barra lateral derecha que le permitirán cambiar el ancho de las columnas:

Por ejemplo, para una sección de 3 columnas, puede hacer:

  • [1/3 + 1/3 + 1/3] o
  • [1/4 + 1/2 + 1/4] o
  • [1/4 + 1/4 + 1/2] o
  • [1/2 + 1/4 + 1/4].

Tenga en cuenta que esta opción solo está disponible en secciones de 2 y 3 columnas.

 

6 – Los puntos débiles de Grids Layout Builder

¡Vamos allí!

Obviamente, Grids Layout Builder no solo tiene ventajas, también tiene su parte de puntos débiles que, con suerte, mejorarán con el tiempo …

Primero que nada, esta extensión no es fácil de aprender. Mejorar la UX no sería un lujo …

Intentamos hacer clic en una Sección pero seleccionamos el Área, así que hacemos clic una y otra vez … en fin, si lo pruebas, ¡lo entenderás!

Luego, cuando insertes una sección libre y dependiendo de cómo hayas definido las áreas del bloque, verás que todo está superpuesto y no sabes dónde hacer clic para insertar el bloque en el lugar correcto. Aquí hay una pequeña vista previa de esta captura de pantalla:

Puntos débiles: legibilidad

Finalmente, una cosa más molesta: el renderizado del front-end no siempre se ajusta a lo que queríamos crear al principio, como puedes ver en la siguiente imagen:

Resultado no conforme

Traté de agregar márgenes, relleno y cualquier otro subterfugio no muy limpio a nivel de código , pero nada ayudó: mi cuadrado verde y mi cuadrado azul nunca superaron mi rectángulo gris, como lo hago yo, deseé durante su construcción. En vano…

 

7 – Conclusión y resultado en video …

¿Puede Grids Layout Builder realmente convertirse en un digno sucesor del Page Builder? En la actualidad, no realmente. PERO, ¡todavía es joven y muy prometedor!

Esta extensión trae muchas características de las que el editor Gutengberg carece mucho …

Incluso si este último evolucionará con la llegada de la versión 5.3 de WordPress , lamentablemente seguirán faltando algunas características y opciones .

En conclusión, podemos decir que usar Grids Layout Builder es una buena alternativa para construir diseños sofisticados sin tener que usar un Page Builder .

Por cierto, hice un pequeño video del diseño que construí durante mi prueba para este artículo:

 

Si ya usas Grids Layout Builder , no dudes en dar tu opinión en los comentarios o en agregar elementos que podría haber omitido …

Para ir más lejos :

  • Descargar Grids Layout Builder
  • Descubra el sitio web oficial
  • Descubra la documentación oficial