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.

Este componente aprovecha los espacios (slots) para la personalización avanzada, lo que lo hace ideal para sitios LWR. Los sitios Aura no admiten este nivel de personalización.

🎥 Tutoriales

Nombre	Descripción
Crear un diseño de cuadrícula	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	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.