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.

Este componente aprovecha slots para una 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	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	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.