Contenido 13 secciones
- ¿Qué es un slider de comercio electrónico?
- ¿Por qué es importante el slider?
- ¿Cuántas diapositivas debe tener un slider?
- ¿Qué tamaño debe tener la imagen del slider?
- ¿Por qué hace falta una imagen distinta para cada dispositivo?
- ¿Cómo se indica la dirección de destino del slider?
- ¿Cómo se configuran el cambio automático, el tiempo de espera y el efecto?
- ¿Cómo afecta el slider a la velocidad de la página?
- ¿Qué errores estropean un slider?
- Lista de verificación del slider
- ¿Cómo se gestiona el slider en Faprika?
- ¿Cómo se gestiona el escaparate de la página de inicio con Faprika?
- Preguntas frecuentes
Cuando un visitante llega a su página de inicio, lo primero que ve suele ser el slider. Un slider bien preparado presenta de un vistazo la campaña, la nueva temporada o la categoría más vendida. Uno mal preparado se recorta en el teléfono, ralentiza la página, lleva a una página de error al hacer clic y estropea la primera impresión.
En esta guía encontrará respuesta a estas preguntas: cómo preparar un slider de comercio electrónico, qué tamaño de imagen se necesita, por qué se suben imágenes distintas para escritorio, tableta y móvil, cómo elegir la duración de la transición y el efecto, cómo afecta el slider a la velocidad de la página y cómo se gestiona paso a paso el slider en Faprika. También incluye una herramienta que calcula la duración del ciclo del slider y una lista de verificación.
¿Qué es un slider de comercio electrónico?
El slider es un espacio de escaparate dinámico en la parte superior de la página de inicio donde se muestran varias imágenes de forma sucesiva o a medida que el usuario se desplaza. Cada imagen presenta una campaña, una categoría, un producto o un anuncio y, al hacer clic, lleva a la página correspondiente.
El slider presenta varios mensajes en un solo espacio de pantalla. Esa es su fuerza y también su riesgo: cada diapositiva compite con las demás por la atención y es posible que el visitante no las vea todas. Un buen slider se compone de pocas diapositivas claras.
¿Cuál es la diferencia entre un slider y un banner?
El banner es una única imagen fija; el slider es una estructura que muestra varios banners de forma sucesiva. Si quiere destacar una sola campaña, use un banner; si quiere transmitir varios mensajes distintos en el mismo espacio, use un slider.
| Función | Slider | Banner único |
|---|---|---|
| Número de imágenes | Varias | Una |
| Número de mensajes | Varios mensajes distintos | Un solo mensaje claro |
| Peso de la página | Aumenta según el número de diapositivas | Lo que pesa una sola imagen |
| Gestión | Requiere ajustes de orden, duración y transición | Solo imagen y dirección |
| Situación adecuada | Varias campañas de igual importancia | Una única campaña grande |
¿Por qué es importante el slider?
El slider ocupa el espacio más visible de la página de inicio; cómo lo use determina la primera impresión de la tienda. Es importante por cuatro motivos.
- Crea la primera impresión: el visitante entiende de un vistazo qué vende la tienda y qué se destaca.
- Hace visible la campaña: el descuento o el anuncio de nueva temporada aparece sin necesidad de buscarlo.
- Dirige el tráfico: cada diapositiva es una puerta que lleva al visitante a una categoría o a una página de producto.
- Influye en la velocidad de la página: como aquí están las imágenes más grandes, un slider mal preparado ralentiza la página.
Puede leer sobre el efecto de la velocidad de la página en las ventas en el artículo ¿Por qué es importante la velocidad del sitio en el comercio electrónico?.
¿Cuántas diapositivas debe tener un slider?
Para la mayoría de las tiendas bastan de tres a cinco diapositivas. Cuantas más diapositivas hay, más tarda en llegarse a las últimas, la mayoría de los visitantes sigue avanzando por la página sin verlas todas y el peso de la página aumenta. El principio general es este: el mensaje más importante debe ir en la primera diapositiva y cada diapositiva debe cumplir una sola función.
Puede pensar las diapositivas en este orden: primero la campaña más grande, luego la categoría más vendida, después las novedades y un mensaje que transmita confianza (como envío gratuito o devolución fácil, solo si realmente lo ofrece). Para cada diapositiva debe quedar clara la respuesta a “¿qué encontrará el visitante al hacer clic aquí?”.
Le recomendamos leerCalendario de campañas de comercio electrónico: cómo preparar un plan de campañas que genere ventas durante todo el año¿Qué tamaño debe tener la imagen del slider?
El tamaño de la imagen del slider depende del dispositivo en el que se mostrará y de la disposición del slider. En Faprika se recomiendan 1920×400 píxeles en escritorio, 1200×400 en tableta y 768×500 en móvil para el slider de pantalla completa, y 1100×550 píxeles para el slider alineado en el centro de la página. Una imagen preparada con la medida correcta no se recorta ni se ve borrosa.
| Tipo de slider | Dispositivo | Medida recomendada (píxeles) | Vista |
|---|---|---|---|
| Pantalla completa | Escritorio | 1920 × 400 | Horizontal y ancha |
| Pantalla completa | Tableta | 1200 × 400 | Horizontal y ancha |
| Móvil | Móvil | 768 × 500 | Más alta, adaptada a la pantalla |
| Centrado | Escritorio | 1100 × 550 | Alineado en el centro de la página |
Al preparar la imagen con estas medidas, mantenga el texto importante y el producto cerca del centro de la imagen. Las imágenes de pantalla completa pueden recortarse un poco por los bordes según el ancho de pantalla; una frase o un logotipo cerca del borde pueden perderse.
¿Qué debe incluir una buena imagen de slider?
Una buena imagen de slider lleva un solo mensaje, es legible e incluye una llamada a la acción. El visitante debe poder responder en un segundo: “¿qué se ofrece, qué beneficio tiene para mí, qué debo hacer?”.
- Un solo mensaje: una campaña o una idea por imagen.
- Texto corto y grande: escriba pocas palabras que se sigan leyendo al reducirse en el teléfono.
- Alto contraste: el texto debe distinguirse claramente del fondo.
- Acción clara: añada una expresión corta que invite al clic, como “Descúbralo ya”.
- Imagen de producto de calidad: una imagen borrosa o deformada reduce la confianza en la tienda.
¿Por qué hace falta una imagen distinta para cada dispositivo?
Una sola imagen horizontal, en el teléfono, o se reduce hasta volverse ilegible o se recorta y corta el mensaje. Subir una imagen distinta para cada dispositivo permite que se vea sin recortes y con la medida correcta en cada pantalla. Además, reduce el consumo de datos y el tiempo de carga al evitar que el teléfono descargue una imagen innecesariamente grande.
En Faprika puede elegir escritorio, tableta o móvil para cada imagen del slider. La imagen para la que solo elija “Escritorio” se verá únicamente en escritorio, y la que solo marque como “Móvil” se verá solo en dispositivos móviles. Así, el visitante de cada dispositivo ve la imagen preparada específicamente para él.
| Enfoque | Resultado | Riesgo |
|---|---|---|
| Una sola imagen horizontal | La misma imagen en todos los dispositivos | Pequeña o recortada en el teléfono |
| Imágenes específicas por dispositivo | Medida adecuada en cada pantalla | El esfuerzo de preparar varias imágenes |
Por qué la visualización en el teléfono es tan importante E-Ticaret Sitesinde Mobil Uyumun Önemi en este artículo.
¿Cómo se indica la dirección de destino del slider?
La dirección del slider determina la página a la que irá el cliente al hacer clic en la diapositiva. En Faprika, en este campo no hace falta escribir la dirección completa, basta con la parte posterior al nombre de dominio (lo que va después del signo “/”). Este campo no debe quedar vacío: si no se define la dirección, el cliente que haga clic en la diapositiva será redirigido a una página de error.
Dirija la diapositiva no a una página genérica, sino al lugar que promete el mensaje. Una diapositiva que dice “Descuento en vestidos” debe llevar directamente a la categoría de vestidos, y una que dice “nuevos zapatos” a la categoría correspondiente. Si el visitante no ve el producto prometido en el primer clic, el slider, aunque consiga clics, no consigue ventas.
¿Para qué sirve el nombre de la diapositiva?
En Faprika puede dar un nombre opcional a la diapositiva. Este campo no es obligatorio, pero sirve para distinguir las diapositivas en la lista. Nombres que describan la campaña, como “Apertura de la temporada de invierno” o “Anuncio de envío gratuito”, facilitan recordar dentro de unos meses qué diapositiva corresponde a qué campaña.
¿Cómo se configuran el cambio automático, el tiempo de espera y el efecto?
Los ajustes del slider determinan cuánto tiempo permanecen las diapositivas en pantalla, cómo se pasa de una a otra y con qué efecto cambian. En Faprika estos ajustes están en Configuración, Ajustes, Ajustes del slider, y los cambios guardados se aplican a todos los sliders.
| Ajuste | ¿Qué determina? | Aspecto a tener en cuenta |
|---|---|---|
| Ancho y alto de la diapositiva (píxeles) | El espacio que ocupa el slider en el sitio | Debe ser coherente con las medidas de las imágenes |
| Cambio automático | Las imágenes cambian por sí solas, una tras otra | Si está desactivado, el visitante se desplaza por su cuenta |
| Tiempo de espera de la diapositiva (milisegundos) | El tiempo que cada imagen permanece en pantalla | Si es demasiado corto, el texto no se puede leer |
| Duración de la transición (milisegundos) | La velocidad del paso de una imagen a otra | Una transición demasiado lenta genera impaciencia |
| Efecto de transición de la diapositiva | El aspecto de la transición (Slide, Fade, Cube, Coverflow, Flip) | Un efecto sobrio resulta más profesional para la tienda |
¿Cuánto debe durar el tiempo de espera?
El tiempo de espera debe ser lo bastante largo para que el mensaje de la imagen se lea con comodidad. Cuanto más largo sea el texto, más largo debe ser el tiempo; pero a medida que el tiempo aumenta, también aumenta el tiempo necesario para llegar a las últimas diapositivas. El tiempo y el número de diapositivas deben considerarse conjuntamente.
La herramienta siguiente calcula la duración de un ciclo, el tiempo hasta la última diapositiva y el peso total de las imágenes a partir del número de diapositivas, los tiempos de espera y transición y el tamaño de la imagen. Los tiempos de espera y transición se expresan en milisegundos, como en Faprika (1000 milisegundos son un segundo).
Interprete el resultado de la herramienta según el comportamiento de los visitantes de su tienda. Si sabe cuánto tiempo permanecen los visitantes en la página de inicio, no configure un ciclo más largo que ese tiempo para que se vea todo el slider. Si no lo sabe, poner la campaña más importante en la primera diapositiva es siempre la decisión correcta.
¿Qué efecto de transición elegir?
En Faprika puede elegirse uno de los efectos Slide, Fade, Cube, Coverflow y Flip. Para la mayoría de las tiendas, los efectos sobrios (deslizamiento o transición suave) son la mejor opción: el visitante se concentra en el mensaje y no en el efecto. Los efectos llamativos, como el cubo o el giro, pueden distraer y dar sensación de ralentización en dispositivos lentos.
| Efecto | Vista | ¿Cuándo es adecuado? |
|---|---|---|
| Slide | La imagen se desliza hacia un lado | Opción segura y sobria para la mayoría de las tiendas |
| Fade | La imagen aparece suavemente | Para un lenguaje de marca tranquilo y elegante |
| Cube, Coverflow, Flip | Transiciones tridimensionales | Diseños especiales en los que se busca lucimiento; riesgo de distraer |
¿Cómo afecta el slider a la velocidad de la página?
El slider contiene las imágenes más grandes de la página de inicio; por eso, si se prepara mal, es el primer elemento que ralentiza la página. Para la velocidad se aplican dos reglas: no suba la imagen más grande de lo necesario y utilice una imagen de medida adecuada para cada dispositivo.
- Mantenga pequeño el tamaño del archivo: comprima la imagen antes de subirla; una pérdida de calidad imperceptible a simple vista suele reducir el archivo de forma notable.
- Utilice una imagen adecuada al dispositivo: descargar en el teléfono una imagen del tamaño de escritorio consume datos innecesariamente; la imagen específica por dispositivo lo evita.
- Limite el número de diapositivas: la imagen de cada diapositiva se suma al peso total de la página.
- Prepare lo mejor posible la primera diapositiva: la primera imagen que aparece al abrirse la página determina la percepción de velocidad.
Para la compresión de imágenes y la elección del formato, consulte la guía ¿Cómo optimizar las imágenes de producto? Guía práctica de tamaño, formato (WebP), nombre de archivo y texto alternativo en el comercio electrónico.
¿Qué errores estropean un slider?
Los errores del slider suelen deberse a pequeños descuidos, pero sus efectos son grandes porque está en el lugar más visible de la página de inicio. Los errores más frecuentes son estos:
- Dejar vacía la dirección de destino: el cliente que hace clic en la diapositiva acaba en una página de error.
- Usar una sola imagen horizontal en todos los dispositivos: en el teléfono el mensaje se recorta o no se lee.
- Añadir demasiadas diapositivas: las últimas no se ven nunca y la página se vuelve más pesada.
- Dejar publicada una campaña finalizada: daña la confianza y genera decepción.
- Cargar la imagen con demasiado texto: no se lee en el teléfono y parece saturada.
- Eclipsar el mensaje con un efecto llamativo: el visitante se interesa por el efecto y no por la oferta.
Lista de verificación del slider
Antes de publicar el slider, repase la lista siguiente. Cuando todos los puntos sean “sí”, el slider está listo tanto para el visitante como para la velocidad de la página.
| Etapa | Comprobación | ¿Hecho? |
|---|---|---|
| Mensaje | Cada diapositiva lleva un solo mensaje y una sola acción | Sí / No |
| Imagen | Se han subido imágenes distintas y con la medida correcta para escritorio, tableta y móvil | Sí / No |
| Dirección | Cada diapositiva lleva a la página prometida, sin páginas de error | Sí / No |
| Texto | El texto dentro de la imagen es corto, grande y legible | Sí / No |
| Velocidad | Archivos comprimidos y número de diapositivas limitado | Sí / No |
| Duración | El tiempo de espera y de transición basta para leer el mensaje | Sí / No |
| Actualidad | Se retiran las diapositivas de las campañas finalizadas | Sí / No |
¿Cómo se gestiona el slider en Faprika?
En Faprika gestiona el slider desde el panel, sin escribir código. Las imágenes se suben en Gestión de contenido, Gestión de sliders; el aspecto y los ajustes de transición se definen en Configuración, Ajustes, Ajustes del slider.
- Subida arrastrando y soltando: puede subir muchas imágenes de una sola vez en cuestión de segundos.
- Imagen específica por dispositivo: para cada imagen puede elegir escritorio, tableta o móvil.
- Disposición de pantalla completa o centrada: según su preferencia de diseño, puede elegir un slider ancho o una estructura sencilla y centrada.
- Nombre de la diapositiva y dirección de destino: pone a la diapositiva un nombre opcional e introduce la dirección de la categoría o la página de producto a la que se irá al hacer clic.
- Ajustes del cambio automático: define el tiempo de espera, la duración de la transición y el efecto (Slide, Fade, Cube, Coverflow, Flip).
- Ancho y alto: ajusta en píxeles el espacio que ocupa el slider en el sitio.
Los ajustes del slider se aplican a todos los sliders; es decir, el tiempo de espera o el efecto no se definen diapositiva por diapositiva, sino para todo el slider. Por eso, después de cambiar un ajuste conviene abrir la página de inicio tanto en escritorio como en el teléfono para probarlo. Para todos los detalles del panel, consulte las páginas de formación Gestión de sliders y Gestión de ajustes del slider.
Le recomendamos leer¿Qué es la gestión de anuncios? ¿Cómo se comunican anuncios y campañas en un sitio de comercio electrónico?¿Cómo se gestiona el escaparate de la página de inicio con Faprika?
Faprika le permite gestionar desde el panel el escaparate de la página de inicio. El slider es solo una parte de ese escaparate; debe considerarse junto con las áreas de menú, anuncios, categorías y productos. Las opciones principales son estas:
- Gestión de sliders: sube arrastrando y soltando las imágenes del slider específicas por dispositivo e introduce sus direcciones.
- Ajustes del slider: define en un solo lugar la transición, el tiempo de espera, el efecto y el tamaño.
- Gestión de menús: edita los títulos del menú y las imágenes de campaña.
- Gestión de anuncios: muestra anuncios breves y programados en la parte superior de la página.
- Gestión de medios y contenido: gestiona desde el panel las imágenes y las páginas de contenido.
Puede ver qué funciones incluye cada plan en la comparación de planes de comercio electrónico.
Le recomendamos leer¿Cómo debe ser la estructura de menús de un sitio de comercio electrónico? Guía del menú principal, el megamenú y la organización de categoríasPreguntas frecuentes
¿Qué es un slider de comercio electrónico?
El slider es un espacio de escaparate dinámico en la parte superior de la página de inicio donde se muestran varias imágenes de forma sucesiva. Cada imagen presenta una campaña, una categoría o un anuncio y, al hacer clic, lleva a la página correspondiente.
¿Qué tamaño debe tener la imagen del slider?
En Faprika se recomiendan 1920×400 píxeles en escritorio, 1200×400 en tableta y 768×500 en móvil para el slider de pantalla completa, y 1100×550 píxeles para el slider centrado. La medida correcta evita que la imagen se recorte o se vea borrosa.
¿Por qué hace falta una imagen distinta para móvil en el slider?
Una imagen horizontal se reduce o se recorta en el teléfono. Subir una imagen aparte para móvil permite que el mensaje se lea en la pantalla pequeña y reduce el consumo de datos al evitar que el teléfono descargue un archivo innecesariamente grande.
¿Qué pasa si la dirección del slider queda vacía?
En Faprika, la dirección del slider debe definirse siempre. Si no se indica, el cliente que haga clic en la diapositiva será redirigido a una página de error. Al escribir la dirección basta con introducir la parte posterior al nombre de dominio (lo que va después de “/”).
¿Cuántas diapositivas debe tener un slider?
Para la mayoría de las tiendas bastan de tres a cinco diapositivas. A medida que aumentan, las últimas dejan de verse y la página se vuelve más pesada. Ponga el mensaje más importante en la primera diapositiva y reduzca cada una a un solo mensaje.
¿Cómo se elige el efecto de transición del slider en Faprika?
En Configuración, Ajustes, Ajustes del slider puede elegir uno de los efectos Slide, Fade, Cube, Coverflow o Flip. El tiempo de espera y de transición también se definen ahí, en milisegundos; el cambio se aplica a todos los sliders.
Artículos que pueden interesarle
- Diseño de la página de inicio y gestión del escaparate en el comercio electrónico: cómo organizar el escaparate de la página de inicio. Secciones, orden, móvil, velocidad y calendario de campañas. Guía práctica, calculadora de paso al producto y auditoría de la página de inicio
- Calendario de campañas de comercio electrónico: cómo preparar un plan de campañas que genere ventas durante todo el año
- ¿Cómo se optimizan las imágenes de producto? Guía práctica de tamaño, formato (WebP), nombre de archivo y texto alternativo en el comercio electrónico
- E-Ticaret Sitesinde Mobil Uyumun Önemi
