Creando un diseño en cuadrícula

Descripción general

Este tutorial le guiará para crear un diseño de cuadrícula dinámico y visualmente atractivo usando 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, facilitando a los usuarios navegar por los distintos elementos.

2. Avonni Container: Cada elemento en la cuadrícula estará encapsulado 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á el texto descriptivo para cada función o producto. El componente de bloque de texto permite una entrega de información clara y concisa.

5. Avonni Button: Un botón de "Más información" debajo de cada elemento en 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