> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-container.md). # 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. {% hint style="danger" %} Este componente [aprovecha slots](/experience-cloud/experience-cloud-es/primeros-pasos/learning-the-basics.md#understanding-slots) para una personalización avanzada, lo que lo hace ideal para sitios LWR. Los sitios Aura no admiten este nivel de personalización. {% endhint %} ## Tutoriales | Nombre | Descripción | | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | [**Crear un diseño de cuadrícula**](/experience-cloud/experience-cloud-es/tutoriales/use-cases/creating-a-grid-layout.md) | 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 **`Tarjeta`** la variante es perfecta para secciones llamativas como testimonios, aportando estilo a tu contenido.
* La **`Box`** la variante brilla cuando se trata de enfatizar productos o características clave, haciéndolos destacar.
* La **`Standard`** la 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 {% tabs %} {% tab title="🎛️ Propiedades" %} | Nombre | Descripción | Uso | | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **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. | | {% endtab %} | | | {% tab title="Definición de la variante" %} 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 **`standard`** la 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.

Ejemplos de Standard

* **Uso:** Usa la **`standard`** variante 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 **`box`** la 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.

Ejemplos de Box

* **Uso:** Opta por la **`box`** variante 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 **`card`** la 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.

Ejemplos de Card

* **Uso:** La **`card`** la 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 {% endtab %} {% tab title="🎨 Estilo" %} | Nombre | Descripción | Uso | | ------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **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. | | {% endtab %} | | | | {% endtabs %} | | | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-container.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.