Con contenido centrado

Descripción general

En el componente Avonni Banner, puedes crear una experiencia visualmente atractiva e interactiva incorporando un diseño de dos columnas dentro de la sección de contenido. Este diseño albergará dos botones distintos — un Avonni Button Dialog en la primera columna para interacciones modales y un Avonni Button en la segunda columna para acciones externas. Ambos botones estarán centrados horizontalmente dentro de sus respectivas columnas para una apariencia limpia y simétrica.

Guía interactiva de configuración paso a paso

Arrastra el componente Avonni Banner,

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

• 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)

Preparando el diseño de contenido

1. Inserta el componente Avonni Layout:

   • En la sección de contenido del Avonni Banner, coloca un componente Avonni Layout configurado en dos columnas.

Configuración de los botones

1. Agrega Avonni Button Dialog a la primera columna:

   • Arrastra un componente Avonni Button Dialog a la primera columna del diseño.

   • Ajusta la configuración del botón para centrarlo horizontalmente dentro de la columna.

2. Inserta Avonni Button en la segunda columna:

   • Coloca un componente Avonni Button en la segunda columna.

   • Como el primer botón, establece la alineación horizontal en centro, asegurando que coincida con el diseño del Button Dialog en la columna opuesta.

Consejos para la efectividad

• Asegúrate de que ambos botones estén claramente etiquetados con llamadas a la acción que sean directas y atractivas.

• El centrado horizontal de los botones proporciona un aspecto ordenado y profesional que es visualmente atractivo y fácil de navegar.

• El diseño de dos columnas con botones centrados permite un diseño equilibrado, fomentando la interacción del usuario con ambas opciones.

Conclusión

Al utilizar un Avonni Layout con dos columnas y botones alineados al centro dentro del componente Avonni Banner, puedes crear una sección enfocada e interactiva que incite a los usuarios a interactuar con tu contenido. Esta disposición no solo mejora el atractivo visual, sino que también cumple funciones prácticas, dirigiendo a los usuarios hacia las acciones deseadas en la plataforma Salesforce Experience Cloud.