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 un espaciado uniforme alrededor de los componentes. Arrastra y suelta cualquier componente de Experience Cloud dentro del contenedor para crear diseños agrupados en Experience Builder.
Perfecto para crear secciones visuales, agrupar campos de formularios, añadir fondos con la marca, organizar widgets del panel o en cualquier lugar donde tu portal necesite contenido envuelto en un contenedor con estilo.
Este componente aprovecha slots para una 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 «Más información».
Maximiza el potencial de tu sitio con Avonni Container
Opciones de diseño versátiles para cada necesidad
El componente Avonni Container destaca por su conjunto de variantes de estilo: Card, Box y Standard, cada una diseñada para satisfacer diferentes necesidades de contenido.
La
Tarjetala variante es perfecta para secciones llamativas como testimonios, aportando estilo a tu contenido.
La
Boxla variante brilla cuando se trata de enfatizar productos o características clave, haciéndolos destacar.
La
Standardla variante ofrece un aspecto limpio y cohesivo para contenido más convencional, manteniendo la armonía en todo tu sitio.
Elementos visuales dinámicos para elevar tu sitio
Con Avonni Container, puedes dar vida a varias 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 elementos visuales dinámicos mejoran el atractivo estético y ayudan a comunicar la historia de tu marca de forma más eficaz.
La legibilidad se une al estilo
Asegurarse de que el contenido destaque sobre fondos recargados o coloridos es crucial en el diseño web. Avonni Container aborda este desafío mediante 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 tono sutil que añade profundidad a tu contenido sin perder legibilidad.
Control total sobre la presentación
Avonni Container proporciona un control exhaustivo sobre el tamaño, el fondo y los bordes de cada sección. Esto significa que puedes ajustar con precisión cómo ocupa espacio tu contenido, adaptar los colores o imágenes de fondo para que encajen con tu tema y ajustar la configuración de los bordes para añadir más definición. Cada uno de estos elementos desempeña un papel fundamental en la mejora de 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 teniendo en cuenta esta adaptabilidad. Ya sea usando el estilo Card para secciones de noticias en portales de socios o el estilo Box para destacar ofertas especiales en centros de clientes, este componente garantiza que tu contenido se vea y conecte con tu audiencia.
Resumen
El componente Avonni Container es más que una simple 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, sus capacidades visuales dinámicas, sus mejoras de legibilidad y sus opciones adaptables de presentación de contenido lo hacen indispensable para cualquier sitio de Salesforce Experience Cloud. Tanto si buscas captar la atención, informar o generar interacción, Avonni Container te permite hacerlo todo con estilo y eficiencia.
Configuración
Variante
Elige una variante de estilo para definir el aspecto general del contenedor. Más información
Selecciona una variante que se alinee con tu visión de diseño, ya sea que prefieras una presentación sencilla, en caja o similar a una tarjeta de tu contenido.
Imagen de fondo
Establece una imagen de fondo para el contenedor.
Sube o proporciona una URL para una imagen que mejore 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 sobre la imagen de fondo.
Elige un color que se superponga sutilmente a la imagen de fondo, ayudando a mantener la visibilidad y la legibilidad del contenido dentro del contenedor.
La Variante la propiedad del componente Avonni Container es una característica crucial que define el estilo y la estructura fundamentales del contenedor, sentando las bases de cómo se muestra e interactúa con el contenido en su interior. Aquí tienes una explicación detallada de cada variante:
Standard
Descripción: La
standardla 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 un énfasis visual adicional.
Uso: Usa la
standardvariante cuando necesites una presentación sencilla y limpia. Es perfecta para casos en los que el contenido necesita destacar sin estilos adicionales del contenedor. Esta variante se adapta a bloques informativos, secciones con mucho texto o cuando quieres que la atención se centre únicamente en el contenido y no en el contenedor.
Box
Descripción: La
boxla variante añade más definición al contenedor, normalmente mediante bordes o una ligera sombra, dando la apariencia de que el contenido está «encajonado». Esta variante crea una sensación de profundidad y énfasis, haciendo que destaque más prominentemente en la página.
Uso: Opta por la
boxvariante cuando quieras llamar más la atención sobre el contenedor, como para contenido destacado o avisos importantes, o cuando quieras separar visualmente distintas secciones de la página. El estilo en caja es útil en diseños donde varios elementos del contenedor necesitan una separación clara o al crear una interfaz similar a un panel.
Tarjeta
Descripción: La
cardla variante transforma el contenedor en un diseño estilo tarjeta, normalmente caracterizado por sombras (que le dan un efecto flotante), esquinas redondeadas y posiblemente un borde más marcado.
Uso: La
cardla variante es ideal para bloques de contenido discretos que necesitan atención 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 especialmente eficaz en diseños adaptables, ya que las tarjetas pueden reorganizarse con elegancia en diferentes tamaños de pantalla.
Resumen
Elegir la Variante variante adecuada para Avonni Container consiste en alinear el estilo del contenedor con el propósito de tu contenido y la estética general de tu página. Tanto si optas por la sencillez sin adornos de standard, los límites definidos de box, o el atractivo moderno de card, cada opción proporciona una forma única de enmarcar y resaltar tu contenido dentro del entorno de Salesforce Experience Cloud
Relleno
Ajusta el espaciado interno del contenedor.
Define los valores de relleno para garantizar que el contenido del contenedor tenga un espaciado adecuado respecto a los bordes, mejorando la legibilidad y la estética.
Tamaño
Configura las dimensiones del contenedor y el comportamiento del desbordamiento de su contenido.
Establece valores específicos de ancho y alto, y determina cómo debe gestionar 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 y la alineación deseados del fondo con respecto al contenido del contenedor.
Borde
Define el aspecto del borde del contenedor.
Personaliza el borde seleccionando su tamaño, estilo, color y radio de las esquinas, asegurándote de que complemente el diseño general del contenedor.
Última actualización
¿Te fue útil?