# 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)](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/primeros-pasos/aprender-lo-basico#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**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/tutoriales/casos-de-uso/creacion-de-un-diseno-de-cuadricula) | 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**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/tutoriales/componentes/diseno/configurar-el-diseno-para-que-sea-adaptable) | 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.