Plantillas de diseño adaptativo

Todas las plantillas de diseño en la biblioteca de Commerce Composer son sensibles y ordenan ranuras en función del tamaño de la pantalla. Una plantilla seleccionada no tiene una anchura fija que permita una visualización óptima entre dispositivos.

Las plantillas de diseño predeterminado demuestran los métodos recomendados en el diseño web sensible y contienen las funciones siguientes:
  • Se construyen mediante el sistema de cuadrícula fluido predeterminado, donde la mayoría de las ranuras tienen anchuras de porcentaje que se ajustan a varias resoluciones de pantalla.
  • Contienen tres puntos de interrupción claves que se basan en la anchura de la zona de observación:
    Puntos de interrupción del rango de páginas de la tienda de inicio Aurora
    Dispositivo Punto de interrupción de rango Rango de la página
    Escritorio RWD-C 1281 píxeles CSS y superior
    Tableta RWD-B 601 - 1280 píxeles CSS
    Mobile RWD-A 600 CSS píxeles y superior
Las páginas de la tienda apilan columnas verticalmente en el punto de interrupción del rango RWD-A de forma predeterminada.

Plantillas de diseño sensible de Commerce Composer

HCL Commerce proporciona las plantillas de diseño sensible siguientes de forma predeterminada que puede utilizar en la herramienta de Commerce Composer para crear páginas de la tienda predeterminadas:
Plantillas sensibles de Commerce Composer
Nombre de plantilla de diseño Número de ranuras Mapa esquemático
Cualquier página, 8 ranuras, separadores 8
Mapa esquemático de cualquier página, 8 ranuras, pestañas
Cualquier página, 5 ranuras, barra lateral derecha 5
Mapa esquemático de cualquier página, 5 ranuras, barra lateral derecha
Cualquier página, una ranura 1
Mapa esquemático de cualquier página, una ranura
Cualquier página, 6 ranuras 6
Mapa esquemático de cualquier página, 6 ranuras
Cualquier página, 6 ranuras, barra lateral izquierda 6
Mapa esquemático de cualquier página, 6 ranuras, barra lateral izquierda
Página Entrada de catálogo 8
Mapa esquemático de la página de entrada de catálogo
Página de entrada de catálogo (2) 7 Mapa esquemático de página de entrada de catálogo

página Departamento 8
Mapa esquemático de la página de departamento
Página de inicio 8
Mapa esquemático de la página de inicio