Control de la disposición de columnas
Biblioteca de componentes
Cómo usar este componente
El control de diseño de columnas divide la página en secciones usando una cuadrícula de 12 columnas, lo que permite a los autores colocar los componentes uno al lado del otro y asegurarse de que escalen de forma responsiva entre dispositivos.
Utiliza el componente Layout de Columna para organizar el contenido lado a lado.
Opciones de columna
Hay opciones de control de 12 columnas donde los números siempre suman 12. Cuanto mayor es el número, más espacio se asigna a esa sección.
Por ejemplo, con una configuración de 4-8 columnas, el lado izquierdo tiene menos espacio que el derecho.
Todas las opciones
Las opciones de disposición de columnas en una cuadrícula de 12 partes incluyen: 4-8; 8-4; 4-4-4; 3-3-3-3; 3-9, 9-3; 3-3-6; 6-3-3; 3-6-3
Mejores prácticas
- Sigue configuraciones de columnas para tipos específicos de páginas.
- Asegúrate de que todo el contenido encaje dentro de la cuadrícula de 12 columnas.
- Prueba la capacidad de respuesta tanto en móvil como en escritorio.
- No dejes columnas en blanco – Cada columna debe contener contenido.
- Evita diseños de página demasiado específicos, ya que pueden no verse igual en diferentes dispositivos y tamaños de pantalla.
Ubicación
- El Control de Disposición de Columnas soporta casi todos los componentes de AEM.
- El espacio será limitado en comparación con una página de ancho completo.
- Selecciona el mejor diseño para tu contenido. Si el contenido se envuelve o distribuye de forma desigual entre columnas, considera un diseño diferente.
Ejemplos
3-3-3-3 Distribución de columnas
Mal ejemplo:
El componente de medios y el componente de citas son demasiado anchos para este diseño.
Buen ejemplo:
Los componentes de la tarjeta de información y la tarjeta vertical encajan perfectamente en esta disposición.
Distribución de 6-6 columnas
Mal ejemplo:
Los componentes del objeto y de la cita del medio son demasiado anchos para esta disposición.
Distribución de columnas 8-4
Buen ejemplo:
Los componentes de objeto multimedia y cita encajan mejor en una sección de 8 columnas o más grande.
Disposiciones comunes
Página hija con ancla de navegación
Distribución de columnas 9-3
Las páginas que usan el componente Ancla de Navegación para enlazar a posiciones específicas dentro de la misma página deben usar el diseño 9-3, con enlaces de ancla en la columna derecha.
Página infantil con SideNav
Distribución de 3-9 columnas
Las páginas que usan el componente SideNav para navegar a páginas hermanas deben usar un diseño de 3 a 9 páginas, con enlaces a otras páginas en la columna izquierda.
Lista de verificación para coordinador web
- Revisa dos veces las columnas de varios dispositivos y tamaños de pantalla.
- Utiliza patrones establecidos de las plantillas de página primaria, secundaria e hija.