Hoy lanzamos un nuevo modo de posicionamiento para elementos en un diseño de cuadrícula: áreas de plantilla de cuadrícula. En resumen, las áreas de plantilla facilitan enormemente la reutilización de diseños de cuadrícula y ofrecen mucha más potencia para realizar cambios de diseño en todo el sitio con muchos menos clics.
¿Qué son las áreas de plantilla de cuadrícula?
Las áreas de plantilla de cuadrícula son una nueva forma de definir diseños y posicionar elementos dentro de un contenedor de cuadrícula. En esencia, te permiten definir regiones dentro de una cuadrícula que actúan como "zonas de colocación" para los elementos (piensa: aquí va mi región de encabezado, aquí mi barra lateral, etcétera).
Una vez que hayas definido un área de plantilla y añadido contenido, puedes reposicionar el área y ver cómo tus elementos se mueven automáticamente junto con ella.
Por último, a medida que defines estas áreas de plantilla, se convierten en parte de la clase del contenedor de cuadrícula principal, lo que, como veremos más adelante, te brinda un nuevo nivel de potencia al reutilizar diseños en todo tu sitio.
¿Por qué son útiles las áreas de plantilla de cuadrícula?
La utilidad de las áreas de plantilla de cuadrícula se divide en varios puntos clave:
- Reutilización de diseños. Las áreas de plantilla forman parte de la clase de cuadrícula principal, por lo que cada instancia de esa clase incluye las mismas áreas de plantilla predefinidas.
- Reestructuración de diseños. Al ajustar las áreas de plantilla en un contenedor de cuadrícula, esos cambios afectan a todas las instancias de esa clase principal, lo que permite realizar ajustes radicales de diseño y estructura para contenido estático en unos pocos clics. ¡Es como un símbolo exclusivo para diseños!
- Diseño adaptable. Ajustar las áreas de plantilla en diferentes dispositivos es una forma sencilla de reorganizar tu diseño para pantallas más pequeñas.
- Creación de diseños de página completa. Al igual que puedes definir el diseño para una sección recurrente de una página, también puedes definir y reutilizar el diseño de una página completa con áreas de plantilla para una única clase de cuadrícula principal.
Reutilización de diseños
Debido a que las áreas de plantilla que defines se convierten en parte de la clase de cuadrícula principal, cuando reutilizas esa clase, las áreas de plantilla definidas te acompañan.
Vamos a aclararlo con un ejemplo. Supongamos que estás diseñando una sección para tus páginas de marketing que incluye una cita de un cliente sobre lo fantástico que es tu producto o servicio. Para cada instancia de esta sección, el diseño será el mismo, pero el contenido será diferente.
Después de haber creado la primera instancia de este diseño con áreas de plantilla, puedes reutilizar la clase de cuadrícula principal y todas esas prácticas "zonas de colocación" vendrán incluidas.
A partir de ahí, es tan fácil como arrastrar el contenido correcto a la zona de plantilla adecuada y listo: ya tienes una segunda instancia de ese diseño.
Reestructuración del diseño
Llevando este ejemplo un paso más allá, una gran ventaja de crear diseños de cuadrícula con áreas de plantilla es la facilidad con la que puedes realizar cambios radicales en el diseño con mucho menos esfuerzo.
Considera nuestro ejemplo de una sección de testimonios: quieres que el diseño de esta sección sea el mismo en cada caso, pero como el contenido será diferente cada vez, un símbolo no servirá.
¡Aquí entran en juego las áreas de plantilla! Como tus elementos de contenido están vinculados a áreas de plantilla específicas, simplemente puedes reorganizar la posición de estas áreas y cada instancia de ese diseño de cuadrícula se ajustará automáticamente.
Diseño adaptable
Cuando se trata de adaptar tus diseños, ajustar los esquemas para cada dispositivo es igual de sencillo: solo tienes que reposicionar las áreas de plantilla y ajustar la cuadrícula según sea necesario. Estos cambios afectarán a todas las instancias donde se utilice la clase de cuadrícula principal (con cambios que se aplican en cascada a otros dispositivos, según el modelo de diseño responsivo de Webflow).
Creación de diseño de página completa
Del mismo modo que puedes definir áreas de plantilla de cuadrícula para una clase principal y reutilizar ese diseño para subsecciones o partes de una página, también puedes crear una clase de cuadrícula de página completa que utilice áreas de plantilla para definir el diseño de toda una página.
Considera el ejemplo anterior: un diseño de página de destino que utilizas para una serie de páginas en una campaña de marketing. Cada página tiene un encabezado, una sección con características relevantes y una sección que incluye una cita de un cliente. Si usas áreas de plantilla de cuadrícula para definir cada una de estas secciones, puedes reorganizarlas como quieras (por ejemplo, si tras hacer pruebas decides que prefieres mostrar la cita primero) y ver cómo ese cambio afecta a todas las demás páginas de destino que utilizan esa clase de cuadrícula principal.
Crea diseños con CSS grid, visualmente
Descubre la facilidad, velocidad y potencia sin precedentes de CSS grid en Webflow, ahora con nuevos controles directamente en el lienzo.
¿Para qué puedo usarlas?
Para ayudarte a entender mejor cómo aplicar las áreas de plantilla de cuadrícula en tus proyectos, hemos reunido una serie de miniproyectos clonables con ejemplos de diseños (y páginas) que puedes usar para lo que quieras. Echemos un vistazo a cada uno a continuación, con una breve explicación de por qué las áreas de plantilla de cuadrícula hacen que construir y mantener estos diseños sea mucho más fácil.
Cuadrículas de características de producto
Una cuadrícula de características de producto con iconos y texto es un patrón bastante común en páginas de productos y precios, donde cada unidad presenta una propuesta de valor diferente para el producto en cuestión. Sin embargo, una dificultad que pueden presentar estas cuadrículas es que, si quieres reestructurar el diseño de todas ellas, tienes que hacerlo una por una, ya que cada una está construida con contenido estático.*
Pero, si construyes cada una de estas unidades con áreas de plantilla de cuadrícula, puedes simplemente editar las áreas de plantilla de una de ellas y ver cómo ese cambio de diseño se aplica en todas las instancias.
*Ten en cuenta que podrías construir este diseño con contenido gestionado por CMS, pero puede que no siempre sea el enfoque más sencillo. Las áreas de plantilla de cuadrícula a veces pueden ser un método más simple.
Tablas de precios
Debido a su complejidad y a la gran cantidad de elementos que contienen, las tablas de precios son famosas por ser difíciles de crear y, a menudo, igual de complicadas de mantener o actualizar.
Pero con las áreas de plantilla de cuadrícula (grid template areas), puedes dividir cada parte repetitiva de una tabla de precios en su propio diseño de minicuadrícula. Luego, al asignar cada parte de ese diseño a un área de cuadrícula definida, puedes reestructurar una pieza y hacer que el cambio afecte a todas las instancias de ese diseño.
En el ejemplo a continuación (clona este diseño), esa parte repetitiva es la fila de la tabla de precios. Las ventajas de usar áreas de cuadrícula en este caso son evidentes al adaptar este diseño a pantallas más pequeñas, lo cual siempre es un reto en las tablas de precios.
¿Ves cómo, gracias a las áreas de plantilla de cuadrícula, puedes centrarte en reestructurar una sola fila con la tranquilidad de que todos tus cambios afectarán al resto de la misma manera? Una maravilla.
Secciones de testimonios
Como vimos en el ejemplo principal de este artículo, un diseño recurrente como una sección de testimonios es otro candidato ideal para utilizar áreas de plantilla.
Punto extra: anida el diseño de cuadrícula dentro de una cuadrícula principal a la que puedas cambiar el color de fondo con una clase combinada sencilla (como hemos mostrado en el ejemplo clonable).
Menú de restaurante
Otro ejemplo con el que hemos estado experimentando es un menú de restaurante, que, como podrás imaginar, se presta muy bien a un diseño basado en cuadrículas. Si vas a crear menús para varias comidas que utilizan la misma estructura, puedes usar áreas de plantilla de cuadrícula para reutilizar ese diseño y mantener la coherencia al actualizarlo.
¿Qué vas a construir con las áreas de plantilla de cuadrícula? Cuéntanoslo en los comentarios.
