PrestaShop: Personalización

Responsive design y PrestaShop

¡Prueba gratis durante 10 días

nuestros 1197 cursos !

Prueba gratis Mostrar modalidades de suscripción
Antes de continuar, explicaremos qué es el responsive web design y cómo podemos hacer pruebas en nuestra tienda de PrestaShop para asegurarnos que el tema que estamos instalando responda correctamente a este concepto.

Transcripción

No quiero continuar con la edición de los distintos bloques, como estos de la parte de abajo que voy a hacer modificaciones sobre ellos, sin antes explicar algo muy importante: es todo lo concerniente al "responsive design". Es muy importante que nuestros temas, que nuestra tienda se vea correctamente tanto en "tablets" como en teléfonos móviles. O sea, en todo tipo de dispositivos. Para saber si realmente un tema funciona correctamente en todos ellos, lo suyo es meterse dentro de los diferentes dispositivos y probarlo. Pero claro, mientras estamos trabajando en local o sobre todo teniendo en cuenta que no podemos tener acceso a todos los dispositivos posibles, necesitamos alguna herramienta que nos permita fácilmente ver el resultado del tema en todos ellos. Obviamente no podemos hacer simulaciones de cómo funciona al girar la pantalla, pero sí podemos hacer simulaciones de, por lo menos, cómo se adaptan los contenidos a los distintos tamaños, que básicamente es lo que vamos a necesitar dentro de nuestros temas. Para ello, todos los navegadores tienen alguna herramienta que nos permite visualizar el tema en los distintos tamaños. Dentro de los distintos navegadores, suele estar siempre en las opciones y en las herramientas para desarrollador. Aquí en desarrollador, en el caso de Firefox, tenemos una apartado que es Vista de diseño adaptable. Esa Vista de diseño adaptable me permite elegir entre tamaños preconfigurados, pero también me permite elegir entre tamaños que voy modificando yo simplemente pinchando y arrastrando. Eso me sirve para ver cómo responde este tema para los distintos tamaños de pantalla. Esta sería una versión móvil. Y vemos que ha cambiado la organización en rejilla por una organización completamente vertical. Es más, iremos viendo que algunos de los elementos que tenía, desaparecen. Puedo pinchar y arrastrar y entonces veríamos ahora ya más bien un tamaño "tablet" y cómo se iría adaptando con una rejilla de dos productos por cada fila. Y, sin embargo, pues vemos como los "banners" lo que hacen es intentar distribuirse en tres columnas o en una y otra doble. Bueno, pues es muy importante cuando estemos buscando el tema para nuestra tienda, utilizar esta Vista de diseño adaptable para hacer pruebas y experimentos para ver cómo funciona, qué elementos se mantienen, cuáles no, etc. Luego esto también es muy portante, porque el hecho de que haya algunos elementos que desaparecen de la vista, quiero decir, que cuando me paso a la vista móvil por ejemplo, bueno, pues no solamente ha cambiado este elemento de arriba, sino que por ejemplo en las categorías ahora se ha transformado en un menú. Esto es completamente distinto. E incluso, como digo, en algunos de los temas hay elementos que desaparecen directamente de la vista u otros que aparecen. Eso significará que habrá ganchos, habrá 'hooks' que sean específicos solo de la vista móvil. Para comprobarlo, pues puedo irme dentro de las Posiciones de los módulos y buscar un 'hook' con la palabra "mobile", por ejemplo. Y aquí vemos "displayMobileTopSiteMap". O sea que efectivamente algunos de los 'hooks' pueden depender también de solo la vista móvil. Como digo, todo los 'hooks' van a depender de los temas con los que estemos trabajando. Entonces, vamos a tener que investigar en cada uno de los temas esta opción.

PrestaShop: Personalización

Haz triunfar tu tienda Prestashop aprendiendo a crear ofertas, aplicar descuentos en los envíos, o a mejorar los motores de búsqueda para que todos vean tus productos.

2:13 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:3/10/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.