Creación de un diseño de cuadrícula

Resumen

Este tutorial te guiará en la creación de un diseño de cuadrícula dinámico y visualmente atractivo utilizando varios componentes disponibles. El diseño de cuadrícula es ideal para mostrar funciones, productos o soluciones, cada uno con un botón dedicado de "Más información".

Usaremos el Avonni Layout, Contenedor Avonni, Avonni Icon, Bloque de texto, y Avonni Button componentes.

¿Por qué usar estos componentes?

1. Avonni Layout: Esta es la base de nuestro diseño de cuadrícula. Nos permite estructurar nuestro contenido en un formato organizado basado en cuadrículas, lo que facilita a los usuarios navegar por varios elementos.
2. Avonni Container: Cada elemento de la cuadrícula se encapsulará dentro de un Avonni Container. Esto ayuda a segmentar diferentes productos o funciones, proporcionando un espacio limpio y aislado para cada elemento.
3. Avonni Icon: Los iconos son una excelente manera de representar visualmente las funciones o productos. Añaden un elemento gráfico al contenido, haciéndolo más atractivo y más fácil de interpretar.
4. Bloque de texto: Aquí es donde añadirás el texto descriptivo para cada función o producto. El componente de bloque de texto permite ofrecer información de forma clara y concisa.
5. Avonni Button: Un botón de "Más información" debajo de cada elemento de la cuadrícula guía a los usuarios hacia información adicional. Este llamado a la acción impulsa la participación del usuario y proporciona contenido más detallado.

Resultado final

Guía interactiva de configuración paso a paso