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-item figure{
margin:0 0 0!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
7 comentarios a “Homeslider en pantalla completa Prestashop 1.7”
PuedesDeja una Respuesta o Rastrear esta publicación.
jose - 28 febrero, 2018 en 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 en 21:18
Ya está solucionado. Gracias!
admin - 1 marzo, 2018 en 9:36
hola Jose, ¿podrías contarnos cuál era exactamente el problema y la solución que encontraste?
Gracias
Jose - 3 marzo, 2018 en 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 en 12:18
Genial!!!
Francisco - 11 abril, 2018 en 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 en 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!!