Con ilustración y botones
Resumen
La Banner de Avonni el componente está diseñado para captar la atención del usuario con elementos 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 activa un diálogo para ver un video y otro botón que redirige al usuario a otra página.
Guía interactiva de configuración paso a paso
Agregar el banner
Coloca el componente Banner:
En Experience Builder, arrastra el componente Avonni Banner a tu página, en el lugar donde quieras que aparezca el banner.
Configura el medio:
Busca la opción para agregar una imagen o ilustración dentro de la configuración del banner (CMS Media o URL de medios)
Carga o selecciona la ilustración que quieras usar y colócala en el lado izquierdo o derecho del banner (usando el atributo de posición de los medios)
Configuración de los botones
Agregar un botón para abrir un modal de video:
Arrastra Avonni Layout para crear un diseño de 2 columnas y agregar botones dentro de cada columna.
Arrastra el componente Avonni Button Dialog.
Ajusta la configuración del botón (Etiqueta, variante, alineación)
Etiqueta el botón de forma apropiada, como "Ver video".
Haz clic en el botón para abrir el modal.
Dentro del modal, arrastra el reproductor de video usando el componente Avonni Video (en la zona dialogContent)
Configura el componente Avonni Video.
Agregar un botón para redirigir a una página:
Incluye un botón adicional en la otra columna del banner de Avonni Layout creado previamente.
Etiqueta este botón con un llamado a la acción, como "Más información".
Configura la interacción de navegación en la sección 'Link To' especificando la página de destino para la redirección del usuario.
Ejemplo de implementación
Digamos que estás creando un banner promocional para el lanzamiento de un nuevo producto:
Ilustración:
Añades una ilustración llamativa del nuevo producto en el lado izquierdo del banner para llamar la atención.
Botón del modal de video:
El primer botón dice "Ver demostración". Está configurado para abrir un cuadro de diálogo modal en el que se incrusta un video de demostración del producto. Puedes usar el Avonni Button Dialog para eso.
Botón de redirección:
El segundo botón, "Detalles del producto", cuando se hace clic, navega a una página con más información sobre el producto.
Estilo y pruebas:
Da estilo al banner y a los botones para que coincidan con la marca de tu empresa.
Prueba ambos botones para asegurarte de que uno abre el video correctamente y el otro redirige como se espera.
Publicar:
Después de confirmar que todo funciona correctamente, publica tus cambios.
Consejos para ser eficaz
Asegúrate de que la ilustración sea relevante y refuerce el mensaje del banner.
El video debe ser breve, 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.
Última actualización
¿Te fue útil?