> 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-layout.md). # AX - Diseño ## Resumen **AX - Diseño** es un componente de Experience Cloud que organiza otros componentes en filas y columnas estructuradas con un tamaño y alineación flexibles en las páginas de Experience Sites. Úsalo para crear diseños de varias columnas, cuadrículas adaptables o estructuras de página personalizadas arrastrando y soltando componentes en secciones del diseño. Controla el ancho de las columnas, el espaciado, la alineación y el comportamiento adaptable para distintos tamaños de pantalla en Experience Builder. Perfecto para diseños de paneles, secciones de formularios, cuadrículas de contenido, tablas comparativas o cualquier lugar donde tu portal necesite una organización estructurada de contenido de varias columnas que se adapte a dispositivos móviles y de escritorio. {% 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 con Avonni Components para mostrar productos o funciones. | | [**Configuración de Avonni Layout para que sea adaptable**](/experience-cloud/experience-cloud-es/tutoriales/components/layout/configuring-the-layout-to-be-responsive.md) | Aprende a crear diseños adaptables y fáciles de usar con Avonni Layout en Experience Cloud en distintos dispositivos. | ## Propiedades | Nombre | Descripción | Uso | | ------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Alineación horizontal** | Ajusta la alineación horizontal del contenido dentro del diseño | Utiliza este ajuste para garantizar que el contenido se alinee de forma coherente, manteniendo una apariencia equilibrada y armonizada en todo el diseño. | | **Alineación vertical** | Manipula la alineación vertical del contenido dentro del diseño. | Optimiza la posición vertical del contenido, asegurando que se presente de una manera visualmente atractiva que se ajuste a los objetivos generales del diseño. | | **Ajustar al borde** | Permite que el contenido se extienda hacia los límites del diseño. | Utiliza esta opción para crear diseños que maximicen el espacio, mejorando la visibilidad y la presentación de los elementos de contenido. | | **Varias filas** | Permite alojar contenido en varias filas. | Activa esta función cuando tu diseño requiera distribuir el contenido en una secuencia vertical, facilitando una presentación estructurada y organizada. | | **Mostrar como sección** | Configura el diseño para que se muestre como una sección distinta dentro de la página. | Configura el diseño para que se muestre como una sección distinta dentro de la página. | | **Diseño de columnas** | Determina la manera en que se muestra el contenido dentro de las columnas. | Personaliza la configuración de columnas para establecer una estructura similar a una cuadrícula, fomentando una disposición sistemática y ordenada del contenido para mejorar la navegación visual. | ## Ajustes del diseño de columnas Los ajustes del diseño de columnas ofrecen flexibilidad para organizar el contenido de la página, asegurando que se adapte de forma responsive a distintos tamaños de pantalla y dispositivos, manteniendo al mismo tiempo una apariencia limpia y estructurada. #### Tipo Determina la naturaleza del diseño de columnas. * **Opciones:** * **`Flexible`**: Las columnas de este tipo de diseño ajustan su tamaño dinámicamente en función del contenido y del espacio disponible en la pantalla. Esta opción es ideal para diseños adaptables en los que el diseño debe ajustarse a distintos tamaños de dispositivo. * **`Fijo`**: Esta opción mantiene un tamaño constante para las columnas, independientemente del tamaño de la pantalla o del volumen de contenido. Las columnas fijas son útiles cuando se requiere un diseño uniforme y coherente. * **Uso:** Elige **`Flexible`** para diseños fluidos que necesitan ajustarse a distintos tamaños de pantalla, y **`Fijo`** para diseños que requieren coherencia en el ancho de las columnas. #### Tamaño Establece el ancho de las columnas dentro de la cuadrícula. El sistema de cuadrícula suele basarse en una estructura de 12 unidades. * **Rango:** 1 a 12, donde cada unidad representa una proporción del ancho total disponible. * **Uso:** Asigna un tamaño para definir cuánto espacio debe ocupar cada columna. Por ejemplo, establecer un tamaño de 4 en una cuadrícula de 12 unidades significaría que la columna ocupa un tercio del espacio horizontal disponible. #### Ajuste de alineación Ajusta la posición de la columna dentro de su contenedor. * **Opciones:** * **`Izquierda`**: Desplaza la columna hacia el borde izquierdo del contenedor. * **`Derecha`**: Mueve la columna hacia el borde derecho. * **`Arriba`**: Alinea la columna más cerca de la parte superior del contenedor. * **`Inferior`**: Posiciona la columna cerca de la parte inferior del contenedor. * **Uso:** Utiliza este ajuste para afinar la posición de las columnas con respecto a su entorno, mejorando el atractivo visual y el equilibrio espacial del diseño. #### Relleno Controla el espaciado interno de la columna. * **Opciones:** * **`Horizontal`**: Ajusta el relleno en los lados izquierdo y derecho de la columna. * **`Alrededor`**: Añade relleno en todos los lados de la columna. * **Uso:** Aplica relleno para crear espacio dentro de la columna, asegurando que el contenido no quede pegado a los bordes y mejorando la legibilidad y la estética visual. Los ajustes de diseño de columnas del componente Avonni Layout son esenciales para crear diseños pulidos y funcionales en los sitios de Salesforce Experience Cloud. --- # 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-layout.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.