Con ilustración y botones

Descripción general

El Avonni Banner el componente está diseñado para captar la atención del usuario con visuales atractivos y botones interactivos.

Aquí se explica cómo configurar un banner con una ilustración alineada a la izquierda o a la derecha, un botón que abre un diálogo para ver un video y otro botón que redirige al usuario a otra página.

Resultado en vivo

Guía interactiva de configuración paso a paso

Agregar el Banner

1. Colocar el Componente Banner:

   • En el Experience Builder, arrastra el componente Avonni Banner a tu página donde quieras que aparezca el banner.

2. Configura el medio:

   • Encuentra la opción para agregar una imagen o ilustración dentro de la configuración del banner (CMS Media O Media URL)

   • Sube o selecciona la ilustración que quieras usar y colócala en el lado izquierdo o derecho del banner (usando el atributo Media Position)

Configuración de los botones

1. Agregar un Botón para Abrir un Modal de Video:

   • Arrastre el Avonni Layout para crear un diseño de 2 columnas y agregar botones dentro de cada columna.

   • Arrastre el componente Avonni Button Dialog.

   • Ajuste la configuración del Botón (Etiqueta, Variante, Alineación)

   • Etiquete el botón de forma apropiada, por ejemplo "Ver Video".

   • Haga clic en el Botón para abrir el Modal.

   • Dentro del modal, arrastre el reproductor de video usando el componente Avonni Video (en la zona dialogContent)

   • Configure el componente Avonni Video.

2. Agregar un Botón para Redirigir a una Página:

   • Incluya un botón adicional en la otra columna del banner Avonni Layout creado previamente.

   • Etiquete este botón con un llamado a la acción, como "Más información".

   • Configure la interacción Navegar del botón en la sección 'Enlace a' especificando la página de destino para la redirección del usuario.

Implementación de ejemplo

Supongamos que está creando un banner promocional para el lanzamiento de un nuevo producto:

1. Ilustración:

   • Agregue una ilustración llamativa del nuevo producto en el lado izquierdo del banner para atraer la atención.

2. Botón de Modal de Video:

   • El primer botón dice "Ver demostración". Está configurado para abrir un diálogo modal donde se inserta un video de demostración del producto. Puede usar el Avonni Button Dialog para eso.

3. Botón de redirección:

   • El segundo botón, "Detalles del producto", al hacer clic, navega a una página con más información sobre el producto.

4. Estilo y pruebas:

   • Estilice el banner y los botones para que coincidan con la identidad de su empresa.

   • Pruebe ambos botones para asegurarse de que uno abra el video correctamente y el otro redirija como se espera.

5. Publicar:

   • Después de confirmar que todo funciona correctamente, publique sus cambios.

Consejos para la efectividad

• Asegúrese de que la ilustración sea relevante y mejore el mensaje del banner.

• El video debe ser corto, atractivo e informativo.

• El botón "Más información" debe dirigir a los usuarios a una página que continúe la narrativa del banner.