> 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 ## Descripción general **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. Úselo para agrupar contenido relacionado, crear secciones visuales, añadir colores o imágenes de fondo, o aplicar un espaciado uniforme alrededor de los componentes. Arrastre y suelte cualquier componente de Experience Cloud dentro del contenedor para crear diseños agrupados en Experience Builder. Perfecto para crear secciones visuales, agrupar campos de formulario, añadir fondos con marca, organizar widgets de panel o en cualquier lugar donde su portal necesite contenido envuelto en un contenedor con estilo. {% hint style="danger" %} Este componente [aprovecha los 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) | Aprenda a crear un diseño de cuadrícula dinámico para mostrar productos con botones interactivos de "Más información". | ## Maximice el potencial de su 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: 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 un toque especial a su contenido.
* La **`Box`** la variante brilla cuando se trata de destacar productos o características clave, haciéndolos resaltar.
* La **`Standard`** la variante ofrece un aspecto limpio y coherente para contenido más convencional, manteniendo la armonía en todo su sitio.
### Imágenes visuales dinámicas para elevar su sitio Con Avonni Container, puede dar vida a varias secciones mediante imágenes de fondo únicas. Imagine añadir fotos vibrantes del equipo a su sección "Sobre nosotros" o mostrar paisajes serenos para temas de sostenibilidad. Estas imágenes dinámicas mejoran el atractivo estético y ayudan a comunicar la historia de su marca de forma más eficaz. ### Legibilidad y estilo en armonía Garantizar que el contenido destaque sobre fondos recargados o coloridos es crucial en el diseño web. Avonni Container aborda este desafío con el uso de colores de superposición. Imagine una superposición oscura sobre un fondo festivo, haciendo que los detalles de su evento resalten, o un tinte sutil que añade profundidad a su contenido sin comprometer la legibilidad. ### Control total sobre la presentación Avonni Container ofrece un control amplio sobre el tamaño, el fondo y los bordes de cada sección. Esto significa que puede ajustar con precisión cómo su contenido ocupa el espacio, adaptar los colores o las imágenes de fondo para que encajen con su tema y configurar los bordes para dar mayor definición. Cada uno de estos elementos desempeña un papel fundamental en la mejora de la estructura visual de su página. ### Adaptabilidad para audiencias diversas En el panorama digital actual, atender las necesidades de diferentes audiencias es clave. Avonni Container está diseñado con esta adaptabilidad en mente. Ya sea utilizando 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 su contenido se vea y conecte con su 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 visualización de contenido lo hacen indispensable para cualquier sitio de Salesforce Experience Cloud. Tanto si busca cautivar, informar o involucrar, Avonni Container le permite hacerlo todo con estilo y eficiencia. ## Configuración {% tabs %} {% tab title="🎛️ Propiedades" %} | Nombre | Descripción | Uso | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Variante** |

Elija una variante de estilo para definir la apariencia general del contenedor.
Más información

| Seleccione una variante que se alinee con su visión de diseño, ya prefiera una presentación de su contenido sencilla, en caja o con aspecto de tarjeta. | | **Imagen de fondo** | Establezca una imagen de fondo para el contenedor. | Cargue o proporcione una URL de una imagen que mejore el atractivo visual del contenedor, contribuyendo al ambiente o tono temático que desea transmitir. | | **Color de superposición** | Aplique una superposición de color sobre la imagen de fondo. | Elija un color que se superponga sutilmente a la imagen de fondo, ayudando a mantener la visibilidad y 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. A continuación, se ofrece 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 extra.

Ejemplos de Standard

* **Uso:** Utilice la **`standard`** variante cuando necesite una presentación sencilla y limpia. Es perfecta para los casos en que el contenido debe destacar sin un estilo adicional del contenedor. Esta variante se adapta a bloques informativos, secciones con mucho texto o cuando quiere que la atención recaiga exclusivamente 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á "encuadrado". Esta variante crea una sensación de profundidad y énfasis, haciendo que destaque más claramente en la página.

Ejemplos de Box

* **Uso:** Opte por la **`box`** variante cuando quiera llamar más la atención sobre el contenedor, por ejemplo para contenido destacado o avisos importantes, o cuando quiera separar visualmente distintas secciones de la página. El estilo con caja resulta útil en diseños donde varios elementos de contenedor necesitan una separación clara o al crear una interfaz similar a un panel de control. **Tarjeta** * **Descripción:** La **`card`** la variante transforma el contenedor en un diseño tipo tarjeta, normalmente caracterizado por una sombra (que da un efecto flotante), esquinas redondeadas y, posiblemente, un borde más marcado.

Ejemplos de Card

* **Uso:** La **`card`** la variante es ideal para bloques discretos de contenido que necesitan un 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 parte 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 fluidez en distintos tamaños de pantalla. #### Resumen Elegir el **`Variante`** para Avonni Container consiste en combinar el estilo del contenedor con el propósito de su contenido y la estética general de su página. Tanto si opta por la sencillez sin adornos de **`standard`**, los límites definidos de **`box`**, o el atractivo moderno de **`card`**, cada opción ofrece una forma única de enmarcar y resaltar su contenido dentro del entorno de Salesforce Experience Cloud {% endtab %} {% tab title="🎨 Estilo" %} | Nombre | Descripción | Uso | | ------------- | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Relleno** | Ajuste el espaciado interno del contenedor. | Defina los valores de relleno para asegurar que el contenido del contenedor tenga un espaciado adecuado desde los bordes, mejorando la legibilidad y la estética. | | **Tamaño** | Configure las dimensiones del contenedor y el comportamiento del desbordamiento de su contenido. | Establezca valores específicos de ancho y alto y determine cómo debe manejar el contenedor el contenido que exceda sus dimensiones (desbordamiento). | | **Fondo** | Personalice el fondo estableciendo un color y ajustando el tamaño y la alineación de la imagen de fondo. | Configure estos ajustes para lograr el impacto visual y la alineación deseados del fondo con respecto al contenido del contenedor. | | **Borde** | Defina la apariencia del borde del contenedor. | Personalice el borde seleccionando su tamaño, estilo, color y radio de las esquinas, asegurándose 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-container.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.