Hoy nos centramos de nuevo en Prestashop 1.7, ya que esta última versión del famoso CMS tiene algunas detalles de diseño que no nos gustan demasiado, como es el caso del carrusel de imágenes o slider de la página principal. Como ya habéis notado no ocupa toda el ancho de pantalla, pues en este post os vamos a enseñar como conseguirlo.
Para hacver que nuestro slider ocupe todo el ancho de la pantalla tenemos que seguir unos sencillos pasos, sin necesidad de tocar código.
Lo primero es ir a la sección de Posiciones de los módulos, que se encuentra dentro de Diseño.
Ahora clicamos en Subir un módulo en la esquina superior derecha y añadimos el módulo carrusel de imágenes en el hook displayNavFullWidth.
Tras realizar este cambio el slider aparecerá en todas las páginas de nuestra tienda online, si queremos que esto no ocurra debemos volver a la sección de Posición de los módulos, buscar el hook displayNavFullWidth y clicar en modificar el módulo Carrusel de imágenes. El siguiente paso es dejar solo marcado la página index en excepciones.
Ya hemos con seguido tener el slider de nuestra home a pantalla completa en prestashop 1.7. Para rematar el asunto debemos eliminar el módulo carrusel de imágenes del hook displayHome para que no aparezca el slider original en la home.
El siguiente paso es conseguir que la imagen de nuestro slider tenga la altura que deseamos (por defecto es 340px).
Cambir altura del slider en Prestashop 1.7
Os daremos varias opciones;
1.- Podríamos ir al fichero:
/themes/classic/assets/css/theme.css
y modificar directamente la línea:
.carousel .carousel-inner {
height: 340px;
}
2.- O añadir una nueva línea en el fichero;
/themes/classic/assets/css/custom.css
.carousel .carousel-inner {
height: nueva_alturapx;
}
En nueva_altura, definimos el número de pixeles que queremos definir para la altura del slider en Prestashop 1.7.
3.- O añadir una nueva línea en el fichero;
/themes/classic/assets/css/custom.css
.carousel .carousel-inner{
height:auto!important;
}
Si os fijáis bien queda una línea blanca poco estética debajo del slider, pues vamos a ver como hacerlo.
Eliminar línea blanca debajo del slider en Prestashop 1.7
Para eliminarla debemos editar el archivo homeslider.css, que se encuentra en la ruta;
/modules/ps_imageslider/css/homeslider.css
Solo debemos eliminar;
margin-bottom: 50px;
o cambiarlo a;
margin-bottom: 0px;
Otra opción es añadir el siguiente código al archivo custom.css
/themes/classic/assets/css/custom.css
.carousel .carousel-inner{
height:auto!important;
margin-bottom: 0px!important;
}
Y si este sistema no os funciona os recomiendo leer estudiar los siguientes enlaces;
https://belvg.com/blog/custom-hooks-in-prestashop-1-7.html
https://belvg.com/blog/theme-yml-file-the-heart-of-prestashop-1-7.html
21 comments to “Homeslider en pantalla completa Prestashop 1.7”
You can leave a reply or Trackback this post.
jose - 28 febrero, 2018 at 20:54
Hola.
La imagen me aparece recortada al verse en pantalla completa. ¿Sabes si se puede hacer algo para que se vaya auto-ajustando al tamaño de la ventana del explorador?
Gracias!
jose - 28 febrero, 2018 at 21:18
Ya está solucionado. Gracias!
admin - 1 marzo, 2018 at 9:36
hola Jose, ¿podrías contarnos cuál era exactamente el problema y la solución que encontraste?
Gracias
Jose - 3 marzo, 2018 at 11:38
Hola.
Era una tontería… Al hacer el cambio por: displayNavFullWidth la imagen queda alargada y se recorta.
Al añadir el código que comentas:
.carousel .carousel-inner{
height:auto!important;
}
Dentro del archivo: /themes/classic/assets/css/custom.css, esto se soluciona pero en mi caso estaba cargando la página de la caché.
Al eliminar el historial y al volver a cargar la página, ya se ve de forma correcta.
Gracias por preguntar!
admin - 6 marzo, 2018 at 12:18
Genial!!!
Francisco - 11 abril, 2018 at 21:01
Hola, me encanta tu post. Es justo lo que buscaba
Ahora solo tengo una duda. Como puedo hacer paaa que el slider se deslize hacia abajo o hacía arriba en vez de hacia la derecha o la izquierda.
Un saludo y mil gracias
Franky Martin (ADMIN) - 12 abril, 2018 at 11:28
Hola Francisco, con el módulo slider que viene por defecto en Prestashop no es posible hacerlo. Para conseguir lo que comentas tendrás que buscar un módulo slider que lo permita, y seguramente será de pago.
Lo sentimos!!
Jose Maria - 22 mayo, 2018 at 8:25
Buenos días, yo he intentado con todo lo que has comentado sin lograr cambiar nada de nada, sigue exactamente igual el slider, eh borrado cache y el historial de navegador y nada, no he conseguido ningún cambio.
Franky Martin (ADMIN) - 22 mayo, 2018 at 10:48
Hola Jose María, ¿podrías pasarnos enlace a tu web?
Maria - 4 julio, 2018 at 14:44
Hola, funciona perfecto. ¿Pero como puedo hacer para que solamente aparezca en la home? Me aparece en todas las páginas de producto.
Muchas gracias.
Franky Martin (ADMIN) - 4 julio, 2018 at 17:13
Hola María, en el psot explicamos la duda que tienes; Tras realizar este cambio el slider aparecerá en todas las páginas de nuestra tienda online, si queremos que esto no ocurra debemos volver a la sección de Posición de los módulos, buscar el hook displayNavFullWidth y clicar en modificar el módulo Carrusel de imágenes. El siguiente paso es dejar solo marcado la página index en excepciones.
María - 6 julio, 2018 at 13:38
¡Perfecto!
Muchas gracias.
Sara - 31 julio, 2018 at 10:26
Buenos días,
Me ha encantado el post y funciona a la perfección. Hay un tema que no encuentro solución en Prestashop 1.7: ¿sabrían cómo se podría poner el banner rectangular que aparece abajo en la parte superior (encima de “Contacte con nosotros”) y que aparezca a pantalla completa?
Mil gracias.
Franky Martin (ADMIN) - 31 julio, 2018 at 11:14
Hola Sara, si quieres colocar un banner en la parte superior de tu tienda te recomendamos probar con algún módulo que te permita hacerlo. Hay alguno gratuito como el desarrollado por mypresta, que puedes descargar en https://mypresta.eu/modules/front-office-features/html-box.html.
Sara - 1 agosto, 2018 at 13:50
Buenos días,
Pero no se puede adaptar a cada pantalla, ¿verdad? El problema que tengo es que quiero que me ocupe todo el ancho de pantalla, y no averiguo localizar como.
Gracias.
Franky Martin (ADMIN) - 2 agosto, 2018 at 13:09
Hola Sara, prueba con estas ideas del foro oficial de prestashop
https://www.prestashop.com/forums/topic/330123-solved-block-banner-with-full-width/
Mónica - 16 septiembre, 2018 at 9:55
Muchas gracias por el aporte. Me ha sido muy útil.
Eduardo - 26 septiembre, 2018 at 17:21
Buenas tardes,
Gracias por vuestros aportes, ya he entrado un par de veces en vuestra web y me ha servido de gran ayuda.
Es mas fácil cambiar de hook el módulo que meterse en código. Lo extraño, aunque no tanto viendo como nos “engaña´´ prestashop, es que en el hook displaynavfullwidth no haya ningún modulo enganchado, entiendo que el banner, por ejemplo, si queremos que se vea a pantalla completa, bastaría con engancharlo en este hook, igual me equivoco,
Mi duda es, por qué no desaparece la dichosa linea blanca de debajo del slider, he probado con los códigos que indica en el post, pero no he obtenido resultado.
Parece que nadie a tenido este problema.
Muchas gracias de nuevo, un saludo!!
Franky Martin (ADMIN) - 26 septiembre, 2018 at 17:29
Hola Eduardo, me alegro de que te sirvan de ayuda estos aportes. Vemos que en tu web sigue apareciendo la línea blanca debajo del slider. Prueba a crear un override con el mismo código y cuéntanos si lo solucionas. Un saludo
Marta - 11 enero, 2019 at 10:25
Hola,
El banner funciona perfectamente a pantalla completa, pero el texto que se incluye desde el modulo del Back office para que aparezca en las diferentes imágenes del slider no es responsive. ¿Cómo se podría poner responsive el texto?
Muchísimas Gracias.
Franky Martin (ADMIN) - 15 enero, 2019 at 17:01
SOLUCIÓN A LÍNEA BLANCA DEBAJO DEL SLIDER: hemos editado el post para comentaros como eliminar el espacio en blanco (margin-bottom) que algunos no podían eliminar.