DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

Vamos a ver cómo configurar el slider Prestashop. Es decir, el slider que aparece en la página principal de una tienda Prestashop que utiliza la plantilla por defecto.

Vamos a ver el slider de la plantilla por defecto, tanto en Prestashop 1.7 como en Prestashop 1.6

 

 

 

1.- Gestión del Slider en la Plantilla por defecto de Prestashop 1.7

 

El módulo encargado de la gestión de imágenes del slider en Prestashop 1.7, es el módulo: “Carrusel de imágenes”. El nombre original del módulo es: “imageslider”.

 

carrusel de imagenes prestashop 1.7

Slider de imágenes en la plantilla por defecto de Prestashop 1.7

 

 

1.1.- Acceso a configuración del módulo Carrusel de imágenes en Prestashop 1.7

 

Para acceder a la gestión del módulo “Carrusel de imágenes” iremos a: “PERSONALIZAR > Módulos > Módulos y Servicios”.

A continuación, haremos clic en la pestaña: “Módulos Instalados”.

Para buscar el módulo “Carrusel de Imágenes” podemos:

 

  • i.- Barra búsqueda módulos: en la parte superior de la pantalla verás una barra de búsqueda. Puedes introducir la palabra “Carrusel” y hacer clic el botón de “Buscar” y te aparecerá el módulo.
  • ii.- Buscador del navegador: Si hacemos clic en las teclas CTRL + F, aparecerá una barra de búsqueda en el navegador. Podemos introducir en la barra el nombre “Carrusel de imágenes”, y el navegador nos llevará directamente al módulo.

 

Una vez visualices el módulo haz clic en el botón “Configurar” que aparece a la derecha.

 

configurar slider prestashop 1.7, módulo carrusel de imágenes

Configurar el módulo Carrusel de imágenes de Prestashop 1.7

 

 

1.2.- Configurar el Módulo Carrusel de imágenes Prestashop 1.7

 

En la pantalla de configuración tenemos dos bloques: Ajustes y Lista de diapositivas

 

bloque de ajustes y lista de diapositivas slider prestashop 1.7

Ajustes y Lista de diapositivas, Módulo Carrusel de imágenes Prestashop 1.7

 

En el bloque de “Ajustes” podremos configurar algunos aspectos del funcionamiento del slider. Mientras que desde “Lista de diapositivas” podremos editar imágenes del slider, añadir nuevas imágenes y cambiar el orden en que se muestran en el slider.

 

 

1.2.1.- Ajustes

 

Desde ajustes podremos personalizar los siguientes aspectos del funcionamiento del slider en Prestashop 1.7:

i.- Velocidad: tiempo durante el que se muestra cada una de las imágenes en el slider. El tiempo lo podremos en milisegundos. Por ejemplo, 3000 milisegundos equivalen a 3 segundos.

 

ii.- Pausar al posicionar el ratón por encima: Si ponemos el selector en “SI”, cuando se pose el puntero del ratón sobre una imagen del slider, ésta quedará fija y no se cambiará por la siguiente hasta que se quite el puntero del ratón.

 

iii.- Repetir indefinidamente: Si ponemos el selector en “SI” el slider no se detendrá. En caso contrario, la última imagen de la lista del slider quedará fija.

 

Si realizas algún cambio no olvides hacer clic en el botón de “Guardar” del bloque “Ajustes”.

 

 

1.2.2.- Lista de Diapositivas

 

Desde el bloque de lista de diapositivas podremos realizar las siguientes acciones:

 

i.- Cambiar la posición de las imágenes: para cambiar la posición de las imágenes en el slider, sitúa el cursor del ratón sobre alguna de las diapositivas y verás que el cursor se transforma en un icono en forma de “cruz”.

Haz clic con el botón izquierdo del ratón sobre la diapositiva que quieras desplazar, arrástrala sin soltar el botón izquierdo del ratón y suelta el botón cuando esté en la posición deseada.

 

cambiar posición slides slider, carrusel de imágenes Prestashop 1.7

Cambiar de posición imágenes slider Prestashop 1.7

 

ii.- Desactivar una imagen: Para desactivar una imagen del slider deberás hacer clic con el ratón sobre el botón de color verde “Activado”.

La página se recargará y te mostrará un botón con el texto “Desactivado”.

Una imagen desactivada no se mostrará en el slider. Pero podremos recuperarla en cualquier momento volviendo a activarla.

 

Aprende a editar la plantilla que viene por defecto con Prestashop 1.7 y 1.6: Guía plantillas Prestashop 1.7 y 1.6

 

iii.- Modificar una imagen del slider: Para editar una imagen del slider haremos clic en el botón “Modificar” que aparece en la parte derecha de la imagen.

 

iv.- Eliminar una imagen del slider: Para eliminar una imagen del slider, haremos clic en el botón “Eliminar” que aparece en la parte derecha de la imagen que queremos borrar.

 

v.- Añadir una nueva imagen o diapositiva al slider: Para añadir una nueva imagen al slider, haremos clic en el botón con el icono en forma de “+” que aparece a la derecha del bloque de “Lista de diapositivas”.

 

Añadir una imagen al slider plantilla por defecto de Prestashop 1.7

Añadir imagen al Slider Prestashop 1.7

 

Al añadir una nueva imagen tendrás las siguientes opciones:

a.- Imagen: haciendo clic en “Selecciona un archivo” subiremos la imagen de la diapositiva. En la última versión de Prestashop 1.7 en el momento de escribir este post, se utilizan unas dimensiones de imágenes de 1.110 px x 340 px

b.- Tratamiento: el texto que aquí pongamos aparecerá a tamaño grande (como título), en el lateral izquierdo de la imagen.

c.- URL de destino: aquí estableceremos la url de destino, en caso de que el visitante haga clic sobre la imagen. Si queremos no poner URL de destino tendremos que poner el signo almohadilla en el interior del campo-> #

 

¿Aún no conoces la plantilla Warehouse?, la mejor plantilla para Prestashop: Mega Guía Warehouse

 

d.- Leyenda: el texto que aquí pongamos será el que se muestre en la etiqueta Alt asociada a la imagen (Alt, es una etiqueta para el SEO)

e.- Descripción: El texto que aquí pongamos aparecerá en el lateral izquierdo de la imagen.

f.- Activado: esta opción sirve para activar o desactivar la imagen. Si la imagen está desactivada, no se mostrará en el slider.