Creación de plantillas de diseño sensibles

Puede crear plantillas de diseño sensibles para que las páginas y los elementos de la tienda se optimicen para navegadores web en el escritorio, la tableta y en dispositivo móviles.

Procedimiento

  • Si crea páginas de la tienda utilizando las plantillas de diseño predeterminadas existentes en Commerce Composer, el contenedor ya es sensible de forma predeterminada. Es decir, las plantillas de diseño predeterminadas utilizando un sistema de cuadrícula fluido.

    Para obtener una lista completa de plantillas sensibles en la herramienta de Commerce Composer, consulte Plantillas de diseño adaptativo.

  • Si utiliza su propio contenedor o su propia plantilla partiendo de cero, piense en revisar las siguientes directrices.

    Antes de empezar, asegúrese de que ha creado la plantilla de diseño de Commerce Composer

    Si elige utilizar un sistema de cuadrícula fluido, las directrices siguientes contribuyen a que el diseño sea sensible:

    1. Asegúrese de que la plantilla es sensible. Por ejemplo, mediante un sistema de cuadrícula fluido. Es decir, divida el contenedor en filas y columnas mediante las clases CSS que se proporcionan con el sistema de cuadrícula fluido. Para obtener más información sobre el sistema de cuadrícula fluido, consulte Infraestructura de diseño web sensible (RWD) de : Diseños y cuadrículas fluidos.
    2. Una vez que se han creado las filas y las columnas, codifique algunas de las celdas como ranuras utilizando Commerce Composer Tag Library (taglib).
    3. Añada comportamientos sensibles a las ranuras utilizando las clases CSS que se proporcionan con el sistema de cuadrícula fluido. Por ejemplo, habilitando el apilamiento de columnas. Para obtener más información sobre el apilamiento de columnas, consulte Infraestructura de diseño web sensible (RWD) de : Apilamiento de columnas.
    4. Opcional: Si es necesario, personalice los comportamientos sensibles de las ranuras mediante las reglas CSS con consultas de medios personalizadas.
    5. Pruebe y depura la plantilla de diseño sensible para asegurarse de que la plantilla de diseño funciona en diferentes anchuras de pantalla y con diferentes widgets.