Con contenido centrado

Resumen

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 botón estándar Avonni Button en la segunda columna para acciones externas. Ambos botones se centrarán horizontalmente dentro de sus respectivas columnas para lograr una apariencia limpia y simétrica.

Guía interactiva de configuración paso a paso

Arrastra el componente Avonni 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)

Preparando el diseño del contenido

1. Inserta el componente Avonni Layout:

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

Configuración de los botones

1. Añade 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.
   • Al igual que con el primer botón, establece la alineación horizontal en centrar, asegurando que coincida con el diseño de Button Dialog en la columna opuesta.

Consejos para ser eficaz

• Asegúrate de que ambos botones estén claramente etiquetados con llamadas a la acción directas y atractivas.
• El centrado horizontal de los botones proporciona un aspecto ordenado y profesional que resulta 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 invite 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, guiando a los usuarios hacia las acciones deseadas en la plataforma Salesforce Experience Cloud.