AX - Contenedor
Resumen
AX - Contenedor es un componente de Experience Cloud que envuelve otros componentes en un contenedor con estilo con bordes, fondos y relleno en las páginas de Experience Sites.
Úsalo para agrupar contenido relacionado, crear secciones visuales, añadir colores o imágenes de fondo, o aplicar espaciado coherente alrededor de los componentes. Arrastra y suelta cualquier componente de Experience Cloud dentro del contenedor para construir diseños agrupados en Experience Builder.
Perfecto para crear secciones visuales, agrupar campos de formularios, añadir fondos con la marca, organizar widgets de paneles o en cualquier lugar donde tu portal necesite contenido envuelto en un contenedor con estilo.
Este componente aprovecha los espacios (slots) para la personalización avanzada, lo que lo hace ideal para sitios LWR. Los sitios Aura no admiten este nivel de personalización.
Tutoriales
Aprende a crear un diseño de cuadrícula dinámico para mostrar productos con botones interactivos de 'Más información'.
Maximizando el potencial de tu sitio con Avonni Container
Opciones de diseño versátiles para cada necesidad
El componente Avonni Container destaca por su variedad de variantes de estilo: Tarjeta, Caja y Estándar, cada una diseñada para atender diferentes necesidades de contenido.
El
Tarjetala variante es perfecta para secciones llamativas como testimonios, añadiendo estilo a tu contenido.
El
Cajala variante brilla cuando se trata de enfatizar productos o características clave, haciéndolos destacar.
El
Estándarla variante ofrece un aspecto limpio y coherente para contenidos más convencionales, manteniendo la armonía en tu sitio.
Visuales dinámicos para elevar tu sitio
Con Avonni Container, puedes dar vida a diversas secciones mediante imágenes de fondo únicas. Imagina añadir fotos vibrantes del equipo a tu sección 'Sobre nosotros' o representar paisajes serenos para temas de sostenibilidad. Estos visuales dinámicos mejoran el atractivo estético y ayudan a comunicar la historia de tu marca de manera más efectiva.
Legibilidad y estilo
Asegurar que el contenido destaque frente a fondos ocupados o coloridos es crucial en el diseño web. Avonni Container aborda este desafío con el uso de colores de superposición. Imagina una superposición oscura sobre un fondo festivo, haciendo que los detalles de tu evento resalten, o un tinte sutil que añade profundidad a tu contenido mientras mantiene la legibilidad.
Control total sobre la presentación
Avonni Container proporciona un control extenso sobre el tamaño, el fondo y los bordes de cada sección. Esto significa que puedes ajustar cómo tu contenido ocupa el espacio, adaptar los colores o imágenes de fondo para que encajen con tu temática y modificar la configuración de los bordes para añadir definición. Cada uno de estos elementos juega un papel clave en mejorar la estructura visual de tu página.
Adaptabilidad para audiencias diversas
En el panorama digital actual, atender las necesidades de distintos públicos es clave. Avonni Container está diseñado con esta adaptabilidad en mente. Ya sea usando el estilo Tarjeta para secciones de noticias en portales de socios o el estilo Caja para resaltar ofertas especiales en hubs de clientes, este componente asegura que tu contenido sea visible y conecte con tu audiencia.
Resumen (recapitulación)
El componente Avonni Container es más que una herramienta; es un lienzo para la creatividad y una solución para diversos desafíos de diseño web al usar Experience Cloud. Su versatilidad, capacidades visuales dinámicas, mejoras de legibilidad y opciones adaptables de presentación de contenido lo convierten en imprescindible para cualquier sitio de Salesforce Experience Cloud. Ya sea que busques cautivar, informar o involucrar, Avonni Container te permite hacerlo todo con estilo y eficiencia.
Configuración
Variante
Elige una variante de estilo para definir la apariencia general del contenedor. Aprende más
Selecciona una variante que se alinee con tu visión de diseño, ya sea que prefieras una presentación directa, en caja o tipo tarjeta de tu contenido.
Imagen de fondo
Establece una imagen de fondo para el contenedor.
Sube o proporciona una URL de una imagen que realce el atractivo visual del contenedor, contribuyendo al ambiente o tono temático que deseas transmitir.
Color de superposición
Aplica una superposición de color encima de la imagen de fondo.
Elige un color que se superponga sutilmente sobre la imagen de fondo, ayudando a mantener la visibilidad y legibilidad del contenido dentro del contenedor.
El Variante la propiedad del componente Avonni Container es una característica crucial que define el estilo y la estructura fundamentales del contenedor, estableciendo la forma en que el contenido dentro de él se muestra e interactúa. Aquí tienes una explicación detallada de cada variante:
Estándar
Descripción: El
estándarla variante ofrece un estilo básico y minimalista. La configuración predeterminada proporciona un contenedor limpio y sencillo sin elementos estilísticos adicionales. Esta variante es ideal para contenido que requiere un diseño simple sin necesidad de énfasis visual extra.
Uso: Usa la
estándarvariante cuando necesites una presentación sencilla y limpia. Es perfecta para casos donde el contenido debe destacarse sin estilizado adicional del contenedor. Esta variante es adecuada para bloques informativos, secciones con mucho texto o cuando quieres que el enfoque sea puramente el contenido en lugar del contenedor.
Caja
Descripción: El
cajala variante añade más definición al contenedor, generalmente mediante bordes o un leve sombreado, dando la apariencia de que el contenido está 'encuadrado'. Esta variante crea una sensación de profundidad y énfasis, haciéndolo destacar más en la página.
Uso: Opta por la
cajavariante cuando quieras atraer más atención al contenedor, como para contenido destacado o avisos importantes, o cuando desees segregar visualmente diferentes secciones de la página. El estilo en caja es beneficioso en diseños donde múltiples elementos contenedores necesitan una separación distinta o al crear una interfaz tipo panel de control.
Tarjeta
Descripción: El
tarjetala variante transforma el contenedor en un diseño tipo tarjeta, típicamente caracterizado por sombreado (dando un efecto de flotación), esquinas redondeadas y posiblemente un borde más pronunciado.
Uso: El
tarjetala variante es ideal para bloques discretos de contenido que necesitan enfoque individual, como perfiles, descripciones de productos o elementos interactivos. Es una excelente opción para crear una cuadrícula visualmente atractiva de opciones o bloques de información, donde cada tarjeta contiene una pieza de contenido que forma parte de una colección más amplia. Esta variante es particularmente efectiva en diseños responsivos, ya que las tarjetas pueden reorganizarse de forma elegante en diferentes tamaños de pantalla.
Resumen
Elegir la Variante adecuada para el Avonni Container consiste en hacer coincidir el estilo del contenedor con el propósito de tu contenido y la estética general de tu página. Ya sea que optes por la simplicidad sin adornos de estándar, los límites definidos de caja, o el atractivo moderno de tarjeta, cada opción ofrece una forma única de enmarcar y enfatizar tu contenido dentro del entorno de Salesforce Experience Cloud
Relleno
Ajusta el espaciado interno del contenedor.
Define los valores de relleno para asegurar que el contenido del contenedor tenga un espaciado apropiado desde los bordes, mejorando la legibilidad y la estética.
Tamaño
Configura las dimensiones del contenedor y el comportamiento de desbordamiento de su contenido.
Establece valores específicos de ancho y alto y determina cómo debe manejar el contenedor el contenido que exceda sus dimensiones (desbordamiento).
Fondo
Personaliza el fondo estableciendo un color y ajustando el tamaño y la alineación de la imagen de fondo.
Configura estos ajustes para lograr el impacto visual deseado y la alineación del fondo con respecto al contenido del contenedor.
Borde
Define la apariencia del borde del contenedor.
Personaliza el borde seleccionando su tamaño, estilo, color y radio de las esquinas, asegurando que complemente el diseño general del contenedor.
Última actualización
¿Te fue útil?