Comercio electrónico con PrestaShop: Personalización

Editando el slider principal

¡Prueba gratis durante 10 días

nuestros 1144 cursos !

Prueba gratis Mostrar modalidades de suscripción
Aunque no es imprescindible, un buen slider ayuda a mostrar información de manera dinámica y atractiva, así que vamos a reconfigurar el slider de la portada, añadiendo unos pocos contenidos que tenemos ya preparados.

Transcripción

El éxito de nuestra tienda va a depender de los "banners"que ponga al principio, de la forma que tenga de animar al cliente. Y una de las maneras que tenemos de avisarle de que tengo nuevas ofertas, que tengo nuevas líneas de camisetas, etc., es también trabajar con los típicos "sliders" que se ponen en la portada. Vamos a configurar el "slider" que ya tengo, porque de hecho se puede ver que no tiene nada que ver lo que ofrece con el tipo de contenidos que realmente voy a vender mi tienda. En realidad, encontrar este "slider" va a ser bastante fácil. Cuando estamos buscando Módulos y servicios, muchas veces se trata de utilizar la lógica, sin necesidad de buscar dónde está colocado en las posiciones ni nada parecido. Simplemente buscando con un filtro "slider", pues nos encontramos con Diapositivas de imágenes para tu página web. Y es exactamente esto lo que tengo que modificar. Pulsamos en Configurar, y dentro de las opciones que tenemos, pues se ve que están por un lado las diapositivas y por otro lado también están los tamaños máximos de imagen, la velocidad a la que se tiene que mover y el tiempo que tiene que estar parada una imagen. Si yo sobre estas imágenes voy a poner algo de texto, pues lo suyo debería de ser que haga que la pausa sea mayor. Voy a dejar, por ejemplo, ocho segundos de pausa. Como se contabiliza en milisegundos, pues entonces tengo que poner 8.000. La velocidad a la que se mueve es correcta, a mi gusto. Voy a esperar un momento a que realice el paso. Ssí que voy a mantener ese 500. Y luego, el ancho máximo de la imagen me parece un poco corto, me gustaría que el ancho máximo de la imagen se corresponda con el tamaño de los "sliders" que tengo, que es de 900 x 400. Así que cambiaré este 779 por un valor de 900. No hay que poner un valor mayor aquí que el ancho que tienen las imágenes, porque entonces empiezan a distorsionarse y empieza a aparecer la imagen pixelada. Hay que respetar el tamaño máximo de la imagen que he subido. Pulso en Guardar y continúo. En la lista de diapositivas, voy hacer modificaciones. Puedo pinchar y arrastrar para cambiar el orden. Pero como voy a utilizar tres, no necesito eliminarlas tampoco, simplemente modificarlas. Pulso en Modificar a la primera de ellas, dentro de ellas voy a elegir un nuevo fichero, que va a ser el 'slider 1'. Ese título de la diapositiva, en realidad, sirve para efectos prácticos, quiero decir no es algo visual. Entonces aquí puedo poner "diapo base". La URL de destino debería de conectarse con la URL de los productos que voy a vender o de la categoría que voy a vender. Añado un título y luego aquí es el contenido HTML que aparece superpuesto sobre esa diapositiva. Estas diapositivas que yo he creado tienen una configuración horizontal, quiero decir, voy a poner esto como imagen para verlo. He hecho que todas las diapositivas tengan un fondo blanco colocado a la izquierda. Con lo cual, en la configuración de este texto, lo que debería de buscar es precisamente que ocurra lo mismo. Hay varias formas de hacerlo. En principio, ya está alineado todo a la izquierda. Lo que puedo hacer es poner "línea" y con Mayús + Intro creo una nueva línea, que mantiene las propiedades de párrafo. Aquí tendría un texto en latín, pero en vez de ponerlo así lo que voy hacer es seguir manteniendo ese Mayús + Intro, Mayús + Intro y Mayús + Intro. Y luego por último, también quiero modificar esto. Esto que aparece aquí es un botón y puedo hacer cambios sobre él. Lo que pasa es que a veces hacer cambios sobre este botón puede ser complicado, porque si yo lo selecciono entero y ahora escribo, me sustituye el contenido por ese botón. Así que tengo que buscar alguna otra forma distinta de hacerlo. Simplemente haciendo una pequeña selección y dándole a Borrar, ahora ya me permitiría escribir pues, por ejemplo, "conócela". A veces es un poco difícil hacer esa selección. Estaría listo. Lo guardaré y ahora al recargarlo, pues aquí tenemos esa línea base con todos estos textos. Me aparecen un poco largos, bueno, pues puedo ir haciendo modificaciones hasta que se adapten exactamente a lo que yo quiero. Tendría que venir de nuevo a Modificar, lo pondría en menos líneas, lo guardaría. Y esto mismo lo voy a repetir también con las otras diapositivas. Es tan fácil como modificar, elegir ficheros, sustituir la imagen por el segundo "slide", cambiar el texto por el título de la segunda diapositiva, cambiaría la URL, cambiaría también el texto de nuevo. Aquí podemos poner otro texto diferente y luego, pues, de nuevo aquí tendría que cambiar utilizando los cursores. Guardaré. Y modifico también el tercero. Esto sería "mujer". "Chica" también podría haber puesto. Puedo formatear los textos de diferentes maneras también. Por ejemplo, igual que puedo hacer que uno tenga un encabezamiento más grande, pues otro puedo hacer que por ejemplo tenga un color rosa. Aunque esto a veces no se ve reflejado directamente, porque puede ocurrir que haya algún estilo CSS que esté interfiriendo, depende un poco del tema. Vale, pues hago que sea "text color", selecciono Text Color, así me cambia ese color. Pondría otro texto, lo guardaré, y ahora al recargar ya tendré este "slider" en el que me parecen los textos, o por lo menos deberían de aparecerme. Uno, otro y otro. Tendría que hacer ahí un ajuste un poco más fino, hacer que este texto fuese un poco más grande, jugar un poco con ello. Pero la idea básicamente es la misma. También hay que ver que el tamaño en realidad de ese "slider", si es la ventana muy grande, vemos que llega hasta 900 y no ocupa el resto. Si se vuelve más pequeño, pues se va adaptando correctamente. Entonces también tendré que tener en cuenta esto a la hora de poner estos textos. Tendré que buscar la forma de que se adapten correctamente al tamaño de esa ventana. Tendré que hacer que cuando se vea en la vista móvil, pues se vean bien, exactamente igual que se ven en la vista de ordenador. Y por otro lado, también conseguir que se centren. Todo esto lo puedo conseguir utilizando estilos CSS, pero de momento, como configuración básica, nos va a servir.

Comercio electrónico con 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.