# AX - Diseño ## Resumen **AX - Diseño** es un componente de Experience Cloud que organiza otros componentes en filas y columnas estructuradas con tamaño y alineación flexibles en las páginas de Experience Sites. Úselo para crear diseños de varias columnas, rejillas responsivas o estructuras de página personalizadas arrastrando y soltando componentes en las secciones del diseño. Controle los anchos de columna, el espaciado, la alineación y el comportamiento responsivo para diferentes tamaños de pantalla en Experience Builder. Perfecto para diseños de paneles, secciones de formularios, rejillas de contenido, tablas comparativas o cualquier lugar donde su portal necesite organización de contenido estructurada en varias columnas que se adapte a móviles y escritorios. {% hint style="danger" %} Este componente [aprovecha los espacios (slots)](/experience-cloud/experience-cloud-es/primeros-pasos/aprendiendo-lo-basico.md#understanding-slots) para la 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/casos-de-uso/crear-un-diseno-de-cuadricula.md) | Aprenda a crear un diseño de rejilla dinámico con los componentes Avonni para mostrar productos o funciones. | | [**Configurar Avonni Layout para que sea responsable**](/experience-cloud/experience-cloud-es/tutoriales/componentes/diseno/configurar-el-diseno-para-que-sea-adaptable.md) | Aprenda a crear diseños responsivos y fáciles de usar con Avonni Layout en Experience Cloud en varios dispositivos. | ## Propiedades | Nombre | Descripción | Uso | | ---------------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Alineación horizontal** | Ajuste la alineación horizontal del contenido dentro del diseño | Utilice esta configuración para asegurar que el contenido se alinee de manera coherente, manteniendo una apariencia equilibrada y armoniosa en todo el diseño. | | **Alineación vertical** | Manipule la alineación vertical del contenido dentro del diseño. | Optimice la posición vertical del contenido, asegurando que se presente de manera visualmente atractiva y que resuene con los objetivos generales de diseño. | | **Extender hasta el límite** | Permitir que el contenido se extienda hacia los límites del diseño. | Utilice esta opción para crear diseños que maximicen el espacio, mejorando la visibilidad y la presentación de los elementos de contenido. | | **Múltiples filas** | Permitir la acomodación de contenido en varias filas. | Active esta función cuando su diseño requiera la distribución del contenido en una secuencia vertical, facilitando una presentación estructurada y organizada. | | **Mostrar como sección** | Configure el diseño para que se manifieste como una sección distintiva dentro de la página. | Configure el diseño para que se manifieste como una sección distintiva dentro de la página. | | **Diseño de columnas** | Determine la forma en que se muestra el contenido dentro de las columnas. | Personalice la configuración de columnas para establecer una estructura tipo rejilla, fomentando una disposición sistemática y ordenada del contenido para una mejor navegación visual. | ## Configuración del diseño de columnas La configuración del diseño de columnas ofrece flexibilidad para organizar el contenido de la página, asegurando que se adapte de forma responsiva a diferentes tamaños de pantalla y dispositivos mientras mantiene una apariencia limpia y estructurada. #### Tipo Determina la naturaleza del diseño de columnas. * **Opciones:** * **`Flexible`**: Las columnas en este tipo de diseño ajustan su tamaño dinámicamente según el contenido y el espacio de pantalla disponible. Esta opción es ideal para diseños responsivos donde el diseño necesita adaptarse a varios 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 consistente. * **Uso:** Elija **`Flexible`** para diseños fluidos que necesiten ajustarse a diferentes tamaños de pantalla, y **`Fijo`** para diseños que requieran consistencia en los anchos de columna. #### Tamaño Establece el ancho de las columnas dentro de la rejilla. El sistema de rejilla normalmente se basa en una estructura de 12 unidades. * **Rango:** 1 a 12, donde cada unidad representa una proporción del ancho total disponible. * **Uso:** Asigne un tamaño para definir cuánto espacio debe ocupar cada columna. Por ejemplo, establecer un tamaño de 4 en una rejilla de 12 unidades significaría que la columna ocupa un tercio del espacio horizontal disponible. #### Desplazamiento 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:** Use esta configuración para afinar la posición de las columnas en relación con 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:** Aplique relleno para crear espacio dentro de la columna, asegurando que el contenido no quede pegado a los bordes, mejorando la legibilidad y la estética visual. La configuración del diseño de columnas del componente Avonni Layout es esencial para crear diseños pulidos y funcionales en los sitios de Salesforce Experience Cloud. --- # Agent Instructions: 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-diseno.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.