Control de diseño de columnas
Biblioteca de componentes
Cómo utilizar este componente
El control de diseño de columna divide la página en secciones mediante una cuadrícula de 12 columnas, lo que permite a los autores colocar los componentes uno al lado del otro y asegurarse de que se escalan de forma receptiva en todos los dispositivos.
Utilice el componente Diseño de columna para organizar el contenido en paralelo.
Opciones de columna
Hay 12 opciones de control de columna donde los números siempre suman 12. Cuanto mayor sea el número, más espacio se asignará a esa sección.
Por ejemplo, con una configuración de 4 a 8 columnas, el lado izquierdo tiene menos espacio que el lado derecho.
Todas las opciones
Prácticas recomendadas
- Siga las configuraciones de columna para tipos específicos de páginas.
- Asegúrese de que todo el contenido quepa dentro de la cuadrícula de 12 columnas.
- Pruebe la capacidad de respuesta en dispositivos móviles y de escritorio.
- No deje columnas en blanco – Cada columna debe contener contenido.
- Evite los diseños de página demasiado específicos, ya que es posible que no se vean igual en diferentes dispositivos y tamaños de pantalla.
Colocación
- El control de diseño de columna es compatible con 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 ajusta o distribuye de manera desigual entre las columnas, considere un diseño diferente.
Ejemplos
3-3-3-3 Disposición de columnas
Mal ejemplo:
El componente de medios y el componente de cotización son demasiado anchos para este diseño.
Buen ejemplo:
Los componentes de la tarjeta de información y la tarjeta vertical encajan muy bien en este diseño.
6-6 Disposición de las columnas
Mal ejemplo:
Loscomponentes de objeto de medio y cita son demasiado anchos para este diseño.
8-4 Disposición de las columnas
Buen ejemplo:
Los componentes de objeto de medio y cita encajan mejor en una sección de 8 columnas o mayor.
Diseños comunes
Página secundaria con anclaje de navegación
9-3 Disposición de las columnas
Las páginas que utilizan el componente Anclaje de navegación para vincular a posiciones específicas dentro de la misma página deben usar el diseño 9-3, con enlaces de anclaje en la columna de la derecha.
Página secundaria con SideNav
3-9 Diseño de columnas
Las páginas que utilizan el componente SideNav para la navegación a páginas del mismo nivel deben utilizar el diseño 3-9, con enlaces a otras páginas en la columna de la izquierda.
Lista de verificación del coordinador web
- Vuelva a verificar las columnas en varios dispositivos y tamaños de pantalla.
- Utilice patrones establecidos de las plantillas de página principal, secundaria y secundaria.