¿Cómo utilizar Sliders de imágenes en el Editor de bloques de Waclis?
Los Sliders de imágenes del Editor de bloques de Waclis permiten presentar una secuencia de imágenes con gran protagonismo visual dentro de la Página web.
Puedes utilizarlos para mostrar:
promociones;
campañas;
productos destacados;
categorías principales;
lanzamientos;
novedades;
servicios;
proyectos;
mensajes institucionales;
diferentes propuestas comerciales.
Dentro del Editor de bloques encontrarás diseños prediseñados en:
Secciones → Sliders de imágenes
También existe un componente:
Componentes → Elementos → Slider
para construir composiciones más personalizadas.
¿Qué es un Slider de imágenes?
Un Slider muestra diferentes imágenes dentro de una misma área, normalmente presentando una imagen principal por vez o dando protagonismo a una composición reducida.
Conceptualmente:
← [ IMAGEN 1 ] →
← [ IMAGEN 2 ] →
← [ IMAGEN 3 ] →
El visitante puede recorrer las diferentes imágenes mediante los controles disponibles en el diseño.
Dependiendo de la composición, cada Slide puede incluir además:
Heading;
Paragraph;
Button;
Link;
Overlay;
otros elementos.
Ejemplo
┌─────────────────────────────────────────┐
│ │
│ NUEVA COLECCIÓN │
│ │
│ Conoce nuestros últimos productos │
│ │
│ [ VER PRODUCTOS ] │
│ │
└─────────────────────────────────────────┘
Después:
┌─────────────────────────────────────────┐
│ │
│ ENVÍOS A TODO EL PAÍS │
│ │
│ Consulta las alternativas disponibles │
│ │
│ [ CONOCER MÁS ] │
│ │
└─────────────────────────────────────────┘
Todo dentro de la misma posición visual.
Slider, Carrusel y Banner no son lo mismo
Estas tres secciones pueden parecer similares, pero tienen objetivos diferentes.
Slider de imágenes
Está pensado principalmente para recorrer imágenes protagonistas.
Por ejemplo:
← [ PROMOCIÓN 1 ] →
y luego:
← [ PROMOCIÓN 2 ] →
Carrusel
Está más orientado a recorrer varios elementos o Cards.
Por ejemplo:
← [ Categoría ] [ Categoría ] [ Categoría ] →
Puede haber varias unidades visibles al mismo tiempo.
Banner
Generalmente representa una pieza visual o comercial concreta.
Por ejemplo:
┌───────────────────────────────────────┐
│ ENVÍO GRATIS │
│ [ COMPRAR AHORA ] │
└───────────────────────────────────────┘
No necesariamente existe una secuencia de varias piezas.
Regla práctica para elegir
Quiero una única pieza promocional
Banner
Quiero varias imágenes grandes que se alternen
Slider de imágenes
Quiero varias Cards o elementos desplazables
Carrusel
Ejemplo
Si tienes:
Promoción verano
Promoción cuotas
Nuevos productos
y cada una utiliza una imagen grande:
Slider puede ser adecuado.
Si tienes:
Botellas
Mochilas
Textil
Tecnología
Bazar
como Cards:
Carrusel probablemente resulte más apropiado.
¿Cómo agregar un Slider de imágenes?
Ingresa al Editor de bloques de la página o área editable donde quieras incorporarlo.
Después abre:
Secciones
y selecciona:
Sliders de imágenes
Paso 1: elige una composición
Waclis mostrará los diseños disponibles.
Elige principalmente según:
tamaño de las imágenes;
cantidad de contenido superpuesto;
posición del texto;
presencia de Buttons;
estilo general;
protagonismo que quieres darle.
No es necesario mantener las fotografías, textos ni colores de ejemplo.
Paso 2: agrega el Slider
Selecciona el diseño elegido.
Después podrás editar individualmente los elementos que forman parte de la composición.
Paso 3: utiliza Navigator
Los Sliders pueden contener varios elementos anidados.
Conceptualmente puedes encontrar una estructura semejante a:
Slider
├── Slide
│ ├── Image / Background
│ └── Content
│ ├── Heading
│ ├── Paragraph
│ └── Button
│
├── Slide
│ └── ...
│
└── Slide
└── ...
La estructura exacta dependerá del diseño utilizado.
Por eso es recomendable utilizar Navigator antes de:
clonar;
eliminar;
mover;
modificar una estructura completa.
No confundas la imagen con el Slide completo
Visualmente puedes hacer clic sobre una fotografía y seleccionar solamente:
Image
Pero si quieres duplicar toda la pieza:
Imagen
+
Título
+
Texto
+
Botón
necesitas identificar el contenedor completo correspondiente al Slide.
Ejemplo
Tienes:
Slide 1
├── Image
├── Heading
└── Button
Si clonas solamente:
Image
puedes terminar con:
Slide 1
├── Image
├── Image
├── Heading
└── Button
No habrás creado un nuevo Slide.
Clona la unidad completa
Para agregar una nueva pieza:
utiliza Navigator;
identifica el Slide;
selecciona la unidad completa;
utiliza Clonar elemento;
reemplaza su contenido.
Paso 4: reemplaza las imágenes
Selecciona Image cuando corresponda y utiliza:
Contenido → Set Image
para sustituir la imagen de ejemplo.
Si el diseño utiliza una imagen configurada como fondo de Section o contenedor, selecciona ese elemento y revisa sus opciones correspondientes.
Imagen como elemento vs imagen de fondo
Un Slider puede resolver visualmente sus fotografías de diferentes maneras.
Puedes encontrarte con una:
Image
como componente.
O con una configuración de:
Background Image
sobre un contenedor.
Por eso no asumas que todas las imágenes se cambian desde el mismo lugar.
Si haces clic y no aparece Set Image
Utiliza Navigator y comprueba si la fotografía pertenece a:
Section;
Slide;
contenedor;
Background Image.
Imágenes de Slider: uno de los puntos más importantes
Una fotografía que funciona perfectamente en desktop puede verse muy diferente en celular.
Por ejemplo:
Desktop
┌────────────────────────────────────────────┐
│ PERSONA PRODUCTO TEXTO │
└────────────────────────────────────────────┘
Celular
┌───────────────┐
│ PRODUCTO │
│ │
└───────────────┘
Parte de la imagen original puede dejar de verse debido al cambio de proporción.
Cover suele ser habitual en imágenes protagonistas
Cuando una fotografía debe llenar completamente un área, puede utilizarse un comportamiento equivalente a:
object-fit: cover;
o una configuración equivalente para Background Image.
Esto permite cubrir todo el espacio.
Pero Cover puede recortar
Por ejemplo, una imagen original:
┌──────────────────────────────────────┐
│ PERSONA PRODUCTO TEXTO IMPRESO │
└──────────────────────────────────────┘
puede convertirse en móvil en:
┌───────────────┐
│ PRODUCTO │
└───────────────┘
La persona y el texto de los extremos pueden desaparecer.
Este recorte es normal
No significa necesariamente que el Slider esté roto.
Significa que una imagen horizontal está siendo adaptada a una proporción mucho más vertical.
Por eso la composición de la fotografía original es fundamental.
Evita colocar información importante dentro de la propia imagen cerca de los bordes
Por ejemplo, una creatividad que contiene:
LOGO 50% OFF
en sus extremos puede verse bien en desktop y perder ambos elementos en móvil.
Mantén una zona segura
Cuando prepares imágenes para Slider, intenta concentrar la información visual importante cerca del centro.
Conceptualmente:
┌──────────────────────────────────────────┐
│ zona que puede zona que puede │
│ recortarse recortarse │
│ │
│ ┌────────────────────┐ │
│ │ ZONA SEGURA │ │
│ │ producto/persona │ │
│ └────────────────────┘ │
│ │
└──────────────────────────────────────────┘
Esto ayuda a que la fotografía funcione en distintas proporciones.
Mejor todavía: utiliza texto editable cuando sea posible
En lugar de incrustar dentro de la imagen:
20% DE DESCUENTO
COMPRAR AHORA
puede ser preferible que la imagen sea principalmente visual y colocar:
Heading;
Paragraph;
Button;
como elementos del Editor de bloques.
¿Por qué?
Porque el texto editable:
puede adaptarse responsive;
puede cambiarse sin volver a diseñar la imagen;
puede mantener mayor legibilidad;
puede ubicarse independientemente de la fotografía.
Ejemplo recomendado
Imagen:
[ fotografía del producto ]
Elementos superpuestos:
NUEVA COLECCIÓN
Conoce todos los modelos disponibles.
[ VER PRODUCTOS ]
Esto suele ser más flexible que tener todos los textos incorporados dentro del archivo de imagen.
Texto sobre una fotografía
Cuando colocas texto encima de una imagen debes prestar especial atención al contraste.
Por ejemplo:
Texto blanco sobre una zona muy clara:
FONDO BLANCO
TEXTO BLANCO
puede resultar prácticamente invisible.
Overlay
Una solución habitual consiste en utilizar un Overlay.
Conceptualmente:
FOTOGRAFÍA
+
CAPA OSCURA SEMITRANSPARENTE
+
TEXTO CLARO
Esto ayuda a mantener el contraste.
Ejemplo
Sin Overlay:
[ fotografía con muchas luces ]
NUEVA COLECCIÓN
El texto puede perderse.
Con Overlay:
[ fotografía ]
[ capa oscura suave ]
NUEVA COLECCIÓN
la lectura mejora.
Waclis permite Overlay en Section
Cuando la estructura seleccionada lo permita, dentro de las configuraciones de Section puedes encontrar:
Overlay
Utilízalo cuando necesites mejorar el contraste entre fondo y contenido.
No oscurezcas la imagen más de lo necesario
El objetivo es mejorar la lectura, no ocultar la fotografía.
Busca un equilibrio entre:
imagen;
texto;
identidad visual.
Texto oscuro sobre imagen clara
También puede funcionar.
No todos los Sliders necesitan Overlay oscuro.
Por ejemplo:
Imagen clara
+
texto negro
puede ser perfectamente legible.
Comprueba cada Slide individualmente
Una configuración que funciona sobre:
Slide 1 → foto oscura
puede fallar sobre:
Slide 2 → foto clara
si ambos utilizan el mismo color de texto.
Mantén una lógica visual
Si todos los Slides comparten:
texto blanco;
mismo Overlay;
la experiencia suele ser más consistente.
Si cada fotografía necesita un tratamiento completamente distinto
Evalúa si puedes:
cambiar la imagen;
ajustar su composición;
utilizar diferentes fondos;
aplicar una excepción específica.
No conviertas el Slider en una colección de reglas difíciles de mantener.
Paso 5: modifica el Heading
Selecciona el título correspondiente.
Ejemplos:
Nueva colección
Hasta 6 cuotas
Productos personalizados
Soluciones para tu empresa
Mantén el título principal relativamente breve.
Evita títulos demasiado largos
Un Slider tiene un fuerte componente visual.
Por ejemplo:
Conoce todas las nuevas soluciones que nuestra empresa ha desarrollado especialmente para acompañar a organizaciones de diferentes sectores
puede resultar demasiado extenso.
Es preferible:
Soluciones para tu empresa
y ampliar debajo.
Paso 6: modifica el texto secundario
Utiliza un Paragraph cuando quieras agregar contexto.
Por ejemplo:
Conoce nuestras últimas incorporaciones y encuentra la opción ideal para tu proyecto.
Mantén la explicación relativamente breve.
No conviertas cada Slide en un artículo
El visitante debería comprender rápidamente:
qué se está promocionando;
por qué importa;
qué puede hacer.
Estructura de contenido recomendada
Muchas piezas pueden resumirse así:
TÍTULO
Texto breve
[ ACCIÓN ]
Ejemplo
NUEVOS PRODUCTOS
Descubre las últimas incorporaciones a nuestro catálogo.
[ VER NOVEDADES ]
Paso 7: configura el Button
Si el diseño contiene un botón, selecciona el componente correspondiente.
Puedes modificar:
Text;
enlace cuando corresponda;
colores;
Hover;
otras propiedades disponibles.
Utiliza acciones claras
Por ejemplo:
Ver productos
Conocer colección
Solicitar presupuesto
Ver promoción
Más información
Evita “Haz clic aquí”
El texto debería explicar qué ocurrirá.
Cada Slide puede tener una acción diferente
Por ejemplo:
Slide 1
Nueva colección
[ Ver productos ]
Slide 2
Soluciones empresariales
[ Solicitar información ]
Slide 3
Últimos proyectos
[ Ver proyectos ]
Revisa cada enlace después de clonar
Al duplicar un Slide, el Button o Link puede conservar el destino anterior.
Por ejemplo:
Slide original
→ /productos
Copia:
Slide nueva de Servicios
→ /productos
hasta que modifiques la URL.
Paso 8: completa Alt cuando la imagen lo requiera
Si la fotografía se utiliza como componente Image y aporta contenido, completa:
Alt
Por ejemplo:
Colección de botellas térmicas personalizadas
Evita:
slider1
Imágenes puramente decorativas
Cuando la información importante ya aparece mediante:
Heading;
Paragraph;
Button;
la fotografía puede tener una función más decorativa.
Su tratamiento de accesibilidad puede diferir según el caso.
Lo importante es no depender exclusivamente de texto incrustado dentro de la fotografía para transmitir información esencial.
Cantidad de Slides
No existe una cantidad obligatoria.
Puedes utilizar:
2;
3;
4;
otras cantidades.
Pero recuerda:
el visitante no necesariamente recorrerá todos los Slides.
No coloques la información más importante al final
Si tienes:
Slide 1 → mensaje secundario
Slide 2 → mensaje secundario
Slide 3 → información principal
puede que muchas personas no lleguen al tercero.
Coloca primero lo más importante.
Evita demasiados Slides
Un Slider con:
10 o 15 imágenes
puede convertirse en un recorrido demasiado largo.
En esos casos evalúa:
Galería;
Carrusel;
varias secciones;
página específica.
Dos o tres Slides sólidos suelen ser suficientes en muchos casos
Especialmente en Home.
Por ejemplo:
1. Propuesta principal
2. Promoción destacada
3. Servicio o categoría secundaria
Evita repetir el mismo mensaje
Por ejemplo:
Slide 1 → Envíos rápidos
Slide 2 → Envíos a todo el país
Slide 3 → Recibe tu pedido rápido
Puede ser más útil utilizar cada Slide para un objetivo diferente.
Orden del Slider
Piensa en prioridades.
Por ejemplo:
1. Propuesta principal
2. Campaña actual
3. Categoría destacada
Altura del Slider
Una imagen protagonista necesita suficiente altura.
Pero una altura demasiado grande puede hacer que el visitante no vea ningún contenido siguiente sin desplazarse.
Desktop
Puede utilizar una proporción amplia:
┌───────────────────────────────────────┐
│ │
│ SLIDER │
│ │
└───────────────────────────────────────┘
Celular
La misma altura puede no ser apropiada.
Por ejemplo:
┌───────────────┐
│ │
│ │
│ │
│ SLIDER │
│ │
│ │
│ │
└───────────────┘
podría ocupar prácticamente toda la pantalla.
Revisa Height y Min Height
Puedes adaptar:
Height;
Min Height;
Padding;
según el diseño.
Evita utilizar un Height fijo sin comprobar distintos dispositivos.
Ejemplo de problema
Desktop:
height: 600px;
funciona perfectamente.
En celular, 600 px puede dejar:
imagen enorme;
mucho espacio;
contenido siguiente demasiado abajo.
Otra situación
Reducir demasiado la altura en móvil puede cortar:
Heading;
Paragraph;
Button.
Busca un equilibrio.
Texto sobre Slider en móvil
Este es otro punto importante.
En desktop puedes tener:
┌─────────────────────────────────────┐
│ TÍTULO │
│ TEXTO │
│ BOTÓN │
└─────────────────────────────────────┘
Pero en celular:
┌──────────────┐
│ TÍTULO │
│ TEXTO │
│ BOTÓN │
└──────────────┘
El contenido puede necesitar ocupar una proporción mucho mayor del área.
Mantén suficiente espacio para el texto
No diseñes el Slider solo pensando en la fotografía.
El contenido necesita seguir siendo:
legible;
accesible;
cómodo.
Evita posicionamientos demasiado rígidos
Por ejemplo:
left: 700px;
top: 250px;
puede funcionar en una resolución concreta y fallar completamente en otra.
Utiliza la estructura responsive siempre que sea posible.
Alineación del contenido
Puedes encontrar diseños con texto:
izquierda;
centro;
derecha.
Elige según la fotografía.
Ejemplo
Si el sujeto principal está a la derecha:
┌───────────────────────────────────┐
│ TÍTULO [ PERSONA ] │
│ TEXTO │
│ BOTÓN │
└───────────────────────────────────┘
puede ser apropiado colocar el contenido a la izquierda.
No coloques texto sobre el sujeto principal
Especialmente en imágenes de:
personas;
productos;
arquitectura.
Utiliza las zonas visualmente libres de la fotografía.
Composición fotográfica
Una buena imagen para Slider debería permitir:
ZONA DE TEXTO
+
ZONA VISUAL
Por ejemplo:
┌─────────────────────────────────────────┐
│ │
│ TÍTULO PRODUCTO │
│ TEXTO PRODUCTO │
│ BOTÓN PRODUCTO │
│ │
└─────────────────────────────────────────┘
Esto facilita incorporar contenido sin tapar la imagen.
Pero recuerda el recorte móvil
En celular quizá solamente se vea la parte central.
Por eso comprueba siempre cómo queda la composición real.
Una única imagen puede no funcionar bien en todos los formatos
Si la composición depende muchísimo de una proporción horizontal concreta, puede ser difícil mantenerla intacta en móvil.
En esos casos puede ser necesario:
utilizar otra composición;
ajustar Background Position;
adaptar el contenido;
utilizar una imagen más flexible.
Evita incrustar botones falsos dentro de la imagen
Por ejemplo, una creatividad que ya contiene gráficamente:
[ COMPRAR ]
pero ese “botón” no es realmente clicable puede confundir al visitante.
Es preferible utilizar un Button real del editor.
Lo mismo con flechas o controles
Evita colocar dentro de la imagen elementos que parezcan:
botones;
controles;
links;
si no son interactivos.
Controles del Slider
Según el diseño, puede incluir controles como:
flechas;
indicadores;
otros elementos de navegación.
El comportamiento exacto puede variar según la composición.
Comprueba que los controles sean visibles
Por ejemplo:
flecha blanca sobre imagen blanca:
→
puede desaparecer visualmente.
Revisa:
contraste;
fondo;
tamaño;
posición.
Controles cerca de los bordes
Asegúrate de que sean cómodos de utilizar y no queden demasiado pegados al límite de la pantalla.
Especialmente en móvil.
Indicadores
Algunos diseños pueden incluir referencias de posición, por ejemplo puntos.
Conceptualmente:
● ○ ○
Esto ayuda a comunicar que existe más contenido.
El visitante debería saber que hay varios Slides
Si no existen controles, indicadores ni movimiento evidente, podría interpretar la primera imagen como un Banner estático.
La interfaz debe comunicar la posibilidad de recorrer contenido.
Movimiento automático
El comportamiento dependerá del Slider elegido.
Si ya funciona correctamente, no modifiques su lógica sin una necesidad concreta.
Velocidad
Si existe movimiento automático, el contenido debe permanecer visible el tiempo suficiente para:
leer el título;
leer la descripción;
encontrar el botón;
decidir si interactuar.
Slides con mucho texto necesitan más tiempo
Por eso una alternativa mejor puede ser:
reducir el texto.
No necesariamente ralentizar mucho el Slider.
No dependas del movimiento automático
El visitante debería poder comprender y utilizar la sección aunque no espere a que aparezcan todos los Slides.
No coloques información crítica solo en el Slide 4
Puede no llegar a visualizarse.
Hover
No necesitas grandes efectos Hover sobre una imagen que ya ocupa gran parte del área.
Puedes utilizar Hover principalmente sobre:
Buttons;
Links;
controles.
Evita zoom excesivo sobre la imagen completa
Un:
transform: scale(1.2);
puede provocar recortes o movimiento visual innecesario.
Si utilizas una ampliación, mantenla muy sutil.
Animaciones
El Slider ya contiene movimiento entre Slides.
Por eso no es necesario agregar muchas animaciones internas.
Ejemplo excesivo
Slide entra
↓
Título rebota
↓
Texto gira
↓
Botón aparece
↓
Imagen aumenta
puede resultar demasiado dinámico.
Una animación sencilla suele ser suficiente
Por ejemplo:
aparición del contenido;
transición suave.
Mantén el foco en el mensaje.
Slider en Home
Es una de las ubicaciones más habituales.
Por ejemplo:
Header
↓
Slider
↓
Beneficios
↓
Productos destacados
Puede utilizarse para presentar la propuesta principal.
Pero recuerda que Header no forma parte del Editor de bloques
El Slider puede ubicarse en un área editable, por ejemplo debajo del menú, pero no modifica el Header.
Slider debajo del menú
Puede utilizarse como pieza principal visual.
Por ejemplo:
MENÚ
↓
SLIDER PRINCIPAL
↓
CONTENIDO
Slider debajo del Banner
Si la Home ya utiliza un Banner dinámico o estructural según la configuración del sitio, evalúa si realmente necesitas además un Slider.
Evita acumular varias grandes piezas visuales consecutivas sin una razón clara.
Banner + Slider juntos
Por ejemplo:
Banner
↓
Slider
↓
Otro Banner
puede retrasar demasiado el acceso al contenido principal.
Prioriza.
Slider en una landing page
Puede funcionar como introducción para:
campañas;
lanzamientos;
eventos;
servicios.
Pero una landing muchas veces funciona mejor con una única propuesta clara.
No utilices un Slider automáticamente si necesitas concentrar toda la atención en una sola acción.
Un Slider puede repartir la atención
Si cada Slide ofrece una acción diferente:
Producto
Servicio
Blog
Contacto
el visitante debe decidir entre varias propuestas.
Para una campaña muy específica, un único Banner o Hero puede resultar más efectivo.
Utiliza Slider cuando la variedad sea parte del objetivo
Por ejemplo:
Colección A
Colección B
Colección C
o:
Tres campañas prioritarias
Slider en Productos
Puedes utilizar un bloque editable para mostrar:
promociones;
categorías;
colecciones.
Antes del catálogo dinámico.
Ejemplo
PRODUCTOS
↓
Slider de colecciones
← Colección verano →
← Línea corporativa →
← Novedades →
↓
CATÁLOGO DINÁMICO
No conviertas el Slider en un catálogo manual
Si Waclis ya administra los productos dinámicamente, utiliza el Slider para destacar o dirigir.
No necesitas recrear cada producto como un Slide estático.
Slider de proyectos
Puedes utilizar grandes fotografías:
← Proyecto residencial →
← Proyecto corporativo →
← Proyecto comercial →
con un Button:
Ver proyecto
Slider institucional
Puede utilizarse para:
Nuestra empresa
Nuestra infraestructura
Nuestro equipo
pero revisa si una sección Quiénes somos o Galería podría comunicar mejor esa información.
Cada sección tiene un propósito
No elijas Slider solamente porque se mueve.
Pregúntate:
¿La secuencia de imágenes mejora realmente la comunicación?
Clonar un Slide
El procedimiento recomendado:
1. Navigator
2. localizar Slide completo
3. seleccionar
4. Clonar elemento
5. reemplazar imagen
6. reemplazar Heading
7. reemplazar Paragraph
8. modificar Button / Link
9. revisar ID
10. comprobar Slider
Eliminar un Slide
Selecciona la unidad completa.
No elimines solamente:
Image;
Heading;
Button;
si quieres quitar toda la pieza.
Atención al nivel seleccionado
Si seleccionas el Slider completo y utilizas Eliminar, puedes borrar toda la composición.
Recuerda que Waclis no solicita confirmación.
Utiliza:
Deshacer
si te equivocas.
Mover Slides
Puedes modificar el orden.
Por ejemplo:
Antes:
1. Promoción secundaria
2. Producto principal
3. Novedades
Después:
1. Producto principal
2. Novedades
3. Promoción secundaria
Selecciona cada unidad completa.
Revisa Navigator después de mover
Confirma que el Slide continúa dentro del Slider.
Classes compartidas
Los diferentes Slides pueden compartir estilos para:
Heading;
Paragraph;
Buttons;
imágenes.
Esto ayuda a mantener consistencia.
Linked styles
Si modificas un título y Waclis indica que comparte estilos con otros elementos, puede ser deseable.
Por ejemplo:
Slide 1 → slider-title
Slide 2 → slider-title
Slide 3 → slider-title
Todos pueden compartir:
Font size;
Font weight;
color.
Si quieres una excepción
Por ejemplo, un Slide necesita texto oscuro porque su fotografía es clara.
Puedes utilizar:
Class adicional;
ID único;
otra configuración específica.
No necesitas eliminar el estilo común de todos los Slides.
Ejemplo
class="slider-title slider-title-dark"
para una excepción concreta.
Intenta mantener la misma lógica visual
Si cada Slide utiliza:
Slide 1 → título blanco
Slide 2 → título negro
Slide 3 → título rosa
Slide 4 → título verde
el Slider puede perder coherencia.
Las excepciones deberían responder a una necesidad real.
CSS personalizado
Si necesitas personalización avanzada, identifica el Slider.
Por ejemplo:
home-slider
y sus elementos:
home-slider-slide
home-slider-title
home-slider-text
home-slider-button
home-slider-image
Ejemplo
.home-slider .home-slider-title {
font-size: 48px;
font-weight: 700;
}
Responsive
@media (max-width: 768px) {
.home-slider .home-slider-title {
font-size: 32px;
}
}
Evita selectores globales
No utilices:
.slider h2 {
}
si existen varios Sliders con comportamientos distintos.
Limita el alcance.
Más de un Slider en una misma página
Puede existir:
Slider principal
Slider de proyectos
Identifícalos por separado.
IDs únicos
Si utilizas IDs personalizados:
id="slider-home"
y:
id="slider-proyectos"
cada uno debe ser único.
Cuidado al clonar un Slider completo
Si duplicas toda la estructura, revisa:
IDs;
Links;
imágenes;
Classes específicas;
cualquier referencia personalizada.
No confundas clonar Slide con clonar Slider
Clonar Slide
Slider
├── Slide
├── Slide
└── Slide nuevo
Clonar Slider
Slider A
Slider B
Son operaciones muy diferentes.
HTML y Sliders
Si necesitas una modificación avanzada, puedes utilizar:
Editar código HTML <>
sobre una estructura seleccionada.
Pero los Sliders son componentes interactivos.
Evita modificar:
Classes estructurales;
relaciones entre elementos;
controles;
si no comprendes su función.
Para cambiar una imagen no necesitas HTML
Utiliza:
Set Image
Para cambiar un color no necesitas HTML
Utiliza:
Estilo
o CSS localizado cuando corresponda.
Para cambiar una URL no necesitas reconstruir el Slider
Selecciona el:
Link / Button
correspondiente.
JavaScript
Un Slider puede depender de lógica propia para:
cambiar Slides;
responder a controles;
manejar transiciones.
No modifiques JavaScript si solamente quieres cambiar:
contenido;
colores;
imágenes;
dimensiones.
Si el Slider funciona, conserva su lógica
Esta es una de las recomendaciones más importantes.
Si deja de funcionar después de un cambio
Realiza este diagnóstico:
utiliza Deshacer si el cambio fue reciente;
revisa Navigator;
comprueba que todos los Slides sigan dentro del Slider;
revisa Classes;
revisa IDs personalizados;
verifica si modificaste HTML;
revisa CSS avanzado;
prueba mediante Ver página.
Si se ve bien en el editor pero no cambia de imagen en la Página web
La apariencia visual y la interacción son cosas diferentes.
Comprueba:
estructura;
Slides;
controles;
scripts;
Classes;
cambios avanzados realizados.
No concluyas que funciona solamente porque la primera fotografía se ve correctamente.
Prueba todos los Slides
Después de guardar:
abre Ver página;
avanza al Slide 2;
avanza al Slide 3;
vuelve hacia atrás;
prueba Buttons;
prueba Links;
revisa móvil.
Si el texto se corta en celular
Revisa:
tamaño de Heading;
Paragraph;
Padding;
Height;
Min Height;
posición;
cantidad de texto.
No reduzcas la tipografía a un tamaño ilegible
Puede ser mejor:
resumir;
aumentar altura;
reorganizar el contenido.
Si el Button queda fuera del Slider
Puede deberse a:
Height insuficiente;
Position;
Margin;
contenido demasiado largo.
Revisa primero estructura y dimensiones.
Si la imagen se ve demasiado recortada
Pregúntate:
¿La imagen es adecuada para este formato?
A veces cambiar la fotografía es mejor que crear múltiples reglas para corregir una composición que no funciona responsive.
Si el producto queda fuera del encuadre
Puedes:
elegir una imagen con el producto más centrado;
ajustar la posición cuando sea posible;
reconsiderar Cover;
utilizar otra imagen para ese uso.
No todos los archivos sirven como imagen de Slider
Una fotografía preparada para:
Instagram cuadrado
puede no funcionar correctamente en un Slider horizontal.
La composición importa.
Si necesitas mostrar toda la imagen
Puedes utilizar Contain cuando sea apropiado.
Pero en un Slider grande puede generar:
espacios vacíos
si las proporciones no coinciden.
Cover vs Contain en Slider
Cover
Prioriza:
llenar el área
a cambio de posibles recortes.
Contain
Prioriza:
mostrar toda la imagen
a cambio de posibles espacios libres.
En Sliders fotográficos, Cover suele resultar visualmente natural, pero la elección depende del contenido.
Slider de productos con fondo limpio
Un caso donde Contain puede funcionar:
┌────────────────────────────────┐
│ │
│ [ PRODUCTO ] │
│ │
│ NUEVO MODELO │
│ │
└────────────────────────────────┘
si el fondo forma parte del diseño.
Overlay y productos
No agregues un Overlay oscuro automáticamente si necesitas mostrar correctamente:
color;
detalles;
materiales.
Puede alterar demasiado la percepción visual del producto.
Overlay debe responder a una necesidad de contraste
No a una regla general.
Accesibilidad y legibilidad
Comprueba:
contraste de texto;
tamaño de tipografía;
Buttons identificables;
contenido no dependiente exclusivamente del color;
textos que continúan accesibles en móvil.
Evita texto demasiado pequeño sobre imágenes
Una fotografía compleja ya genera carga visual.
El texto necesita suficiente tamaño y contraste.
No coloques párrafos extensos centrados sobre una imagen muy detallada
Puede resultar difícil de leer.
Puedes:
reducir texto;
utilizar Overlay;
alinear contenido;
elegir otra imagen.
Optimización de imágenes
Los Sliders suelen utilizar imágenes grandes.
Por eso es especialmente importante utilizar archivos adecuados para web.
Evita fotografías con un peso mucho mayor del necesario.
Varias imágenes grandes pueden aumentar la carga
Por ejemplo:
Slide 1 → imagen grande
Slide 2 → imagen grande
Slide 3 → imagen grande
Slide 4 → imagen grande
Aunque solo una sea visible, todas forman parte de la composición.
Prioriza calidad y rendimiento
No necesitas utilizar el archivo original de máxima resolución de una cámara si la imagen será mostrada en una Página web.
Evita agregar Slides sin valor
Cada imagen adicional:
aumenta contenido;
puede aumentar peso;
extiende el recorrido.
Utiliza solamente las necesarias.
Ejemplo práctico: Slider de Home
Queremos:
Slide 1
NUEVA COLECCIÓN
Descubre nuestros últimos productos.
[ VER PRODUCTOS ]
Slide 2
SOLUCIONES PARA EMPRESAS
Encuentra productos personalizados para tu marca.
[ SOLICITAR INFORMACIÓN ]
Slide 3
NOVEDADES
Conoce nuestras últimas incorporaciones.
[ VER NOVEDADES ]
Paso 1
Abre:
Secciones → Sliders de imágenes
Paso 2
Selecciona una composición.
Paso 3
Utiliza Navigator para identificar:
Slider;
Slides;
imágenes;
contenido.
Paso 4
Reemplaza las fotografías.
Paso 5
Modifica los Heading.
Paso 6
Modifica Paragraph.
Paso 7
Configura Buttons y Links.
Paso 8
Comprueba el contraste.
Paso 9
Configura Overlay si corresponde.
Paso 10
Revisa Cover / Contain.
Paso 11
Comprueba desktop.
Paso 12
Comprueba tablet.
Paso 13
Comprueba celular.
Presta especial atención al recorte de la fotografía.
Paso 14
Guarda.
Paso 15
Utiliza:
Ver página
y recorre todos los Slides.
Ejemplo práctico: Slider de proyectos
PROYECTOS DESTACADOS
Slide 1:
Proyecto residencial
[ Ver proyecto ]
Slide 2:
Proyecto corporativo
[ Ver proyecto ]
Slide 3:
Proyecto comercial
[ Ver proyecto ]
Utiliza fotografías de proporciones y estilo similares para mantener continuidad visual.
Ejemplo práctico: promociones
Slide 1
PROMOCIÓN A
Slide 2
PROMOCIÓN B
Slide 3
PROMOCIÓN C
Comprueba que cada promoción siga siendo válida.
Un Slider promocional desactualizado puede comunicar:
descuentos vencidos;
fechas incorrectas;
condiciones antiguas.
Revisa contenido temporal
Especialmente:
fechas;
precios;
cuotas;
promociones;
campañas.
Elimina o actualiza Slides cuando dejen de corresponder.
¿Qué hacer si un Slide se ve perfecto en desktop pero mal en celular?
Comprueba:
recorte de imagen;
posición visual del sujeto;
Heading;
Paragraph;
Button;
Height;
Padding.
No asumas que es solamente un problema de CSS.
La propia fotografía puede no funcionar en esa proporción.
¿Qué hacer si el texto desaparece sobre partes claras?
Utiliza:
Overlay;
sombra de texto, si corresponde;
otro color;
otra posición;
otra fotografía.
Prioriza la legibilidad.
¿Qué hacer si el Overlay oscurece demasiado?
Reduce su intensidad o cambia la imagen.
El contenido visual también debe conservar protagonismo.
¿Qué hacer si el título cambia en todos los Slides cuando modifico uno?
Comprueba:
Linked styles
Si comparten una Class, puede ser normal.
Si solo querías cambiar el contenido textual:
utiliza Contenido, no necesariamente Estilo.
¿Qué hacer si quiero un color distinto en un Slide?
Puedes utilizar una Class adicional o ID específico si realmente necesitas una excepción.
¿Qué hacer si clono una imagen y no aparece un nuevo Slide?
Probablemente clonaste Image.
Utiliza Deshacer y selecciona la unidad completa.
¿Qué hacer si al eliminar desaparecen todas las imágenes?
Probablemente eliminaste:
Slider;
contenedor general;
en lugar de un Slide.
Utiliza Deshacer.
¿Qué hacer si el botón del Slide clonado lleva a la página anterior?
Modifica su URL.
Las copias pueden conservar valores existentes.
¿Qué hacer si aparece scroll horizontal?
Revisa:
Width;
imágenes;
contenedores;
Position;
Margin;
CSS personalizado.
No utilices globalmente:
body {
overflow-x: hidden;
}
sin localizar la causa.
¿Qué hacer si el Slider ocupa demasiado espacio vertical?
Revisa:
Height;
Min Height;
Padding;
cantidad de texto.
Adapta el diseño a cada dispositivo.
¿Qué hacer si el texto queda fuera de la imagen en móvil?
Comprueba la jerarquía y las dimensiones.
Evita utilizar posiciones absolutas con valores rígidos si no son necesarias.
Utilizar IA para personalizar un Slider
ChatGPT, Claude o Gemini pueden ayudarte.
Por ejemplo:
Estoy trabajando con un Slider de imágenes en Waclis.
La sección utiliza:
.home-slider
Los títulos utilizan:
.home-slider-title
Los textos utilizan:
.home-slider-text
El Slider ya funciona correctamente y NO quiero modificar su lógica.
Necesito:
- título de 48 px en desktop;
- 32 px en celular;
- texto de 18 px en desktop;
- 16 px en celular;
- limitar el ancho del contenido;
- mantener los cambios exclusivamente dentro de .home-slider.
No modifiques HTML.
No agregues JavaScript.
No elimines Classes existentes.
Devuélveme solamente el CSS necesario.
También puedes pedir ayuda para evaluar una imagen
Por ejemplo:
Esta es la imagen que quiero utilizar en un Slider de Waclis.
Debe funcionar en desktop y celular utilizando Cover.
Indícame qué elementos importantes pueden quedar recortados en una pantalla vertical y qué cambios de composición recomendarías antes de utilizarla.
Una captura puede ser especialmente útil para este análisis.
IA para crear textos
Puedes pedir:
Necesito tres Slides para la Home de una empresa que ofrece [servicio].
Cada Slide debe tener:
- Heading máximo de 6 palabras.
- Una descripción máxima de 18 palabras.
- Un CTA claro.
Slide 1: propuesta principal.
Slide 2: beneficio principal.
Slide 3: servicio destacado.
Utiliza español neutro.
No inventes condiciones comerciales.
IA para revisar contenido
También puedes solicitar:
Tengo estos cinco Slides.
[pegar textos]
Identifica cuáles comunican esencialmente lo mismo y propón reducirlos a tres Slides más claros.
No inventes nuevas promociones ni beneficios.
Esto ayuda a evitar Sliders redundantes.
Buenas prácticas para Sliders de imágenes
Recomendamos:
utilizar Slider cuando la secuencia de imágenes aporte valor;
priorizar los Slides más importantes;
mantener una cantidad razonable;
utilizar fotografías apropiadas para formato panorámico;
considerar desde el comienzo el recorte móvil;
mantener elementos importantes cerca de zonas seguras;
utilizar texto editable en lugar de incrustarlo siempre en la fotografía;
garantizar suficiente contraste;
utilizar Overlay cuando sea necesario;
mantener títulos breves;
utilizar CTA claros;
comprobar todos los enlaces;
utilizar Navigator;
clonar Slides completos;
conservar Classes estructurales;
adaptar Height y Typography responsive;
no modificar JavaScript si el Slider ya funciona;
optimizar las imágenes;
probar todos los Slides mediante Ver página.
Errores frecuentes
Confundir Slider con Carrusel
El Slider suele dar mayor protagonismo a imágenes grandes.
Utilizar Slider cuando solo necesitas un Banner
No agregues movimiento sin necesidad.
Utilizar demasiados Slides
Prioriza.
Colocar el mensaje principal en el último Slide
Puede no visualizarse.
Insertar todo el texto dentro de la fotografía
Puede recortarse o resultar difícil de actualizar.
Diseñar únicamente para desktop
Comprueba siempre móvil.
Colocar elementos importantes en los extremos de la imagen
Cover puede recortarlos.
Utilizar una fotografía que no funciona en formato vertical
Considera otra composición.
Utilizar texto sin suficiente contraste
Agrega Overlay o cambia el tratamiento.
Agregar Overlay demasiado fuerte
La imagen también debe verse.
Clonar solamente Image
Selecciona el Slide completo.
Eliminar el Slider completo en lugar de un Slide
Comprueba Navigator.
Olvidar cambiar URLs después de clonar
Prueba todos los Buttons.
Repetir IDs personalizados
Mantén cada ID único.
Eliminar Classes internas
Puede afectar la interacción.
Utilizar Height fijo sin revisar móvil
Adapta la altura.
Utilizar posiciones rígidas
Pueden fallar en otras resoluciones.
Animar excesivamente una estructura que ya tiene movimiento
Mantén una experiencia clara.
Modificar JavaScript para cambiar solamente la apariencia
Utiliza Estilo o CSS.
Agregar otra dependencia para crear un nuevo Slider encima del existente
Conserva la lógica funcional cuando ya está resuelta.
No probar controles
La primera imagen visible no garantiza que el Slider funcione.
No revisar promociones vencidas
Actualiza periódicamente contenidos temporales.
Flujo recomendado
1. DEFINIR OBJETIVO
↓
2. DECIDIR SI SLIDER ES LA SECCIÓN ADECUADA
↓
3. PRIORIZAR MENSAJES
↓
4. ELEGIR DISEÑO
↓
5. AGREGAR SLIDER
↓
6. REVISAR NAVIGATOR
↓
7. REEMPLAZAR IMÁGENES
↓
8. REEMPLAZAR TÍTULOS Y TEXTOS
↓
9. CONFIGURAR CTA Y LINKS
↓
10. REVISAR CONTRASTE / OVERLAY
↓
11. REVISAR COVER / RECORTES
↓
12. ADAPTAR ALTURA Y TEXTO RESPONSIVE
↓
13. PROBAR CONTROLES
↓
14. GUARDAR CAMBIOS
↓
15. VER PÁGINA
↓
16. RECORRER TODOS LOS SLIDES
Checklist antes de publicar un Slider
Slider es realmente la sección adecuada.
No sería mejor utilizar un Banner, Carrusel o Galería.
Los Slides principales aparecen primero.
La cantidad de Slides es razonable.
Todas las imágenes fueron reemplazadas.
No quedan imágenes de ejemplo.
Las fotografías tienen buena calidad.
Las fotografías están optimizadas para web.
Revisé Cover / Contain.
Revisé el recorte en desktop.
Revisé el recorte en tablet.
Revisé el recorte en celular.
Los elementos importantes no desaparecen con el recorte.
Los textos son editables cuando corresponde.
Los títulos son breves.
Las descripciones son concisas.
Existe suficiente contraste.
Overlay está correctamente configurado si se utiliza.
Los Buttons son claros.
Todos los Links funcionan.
Revisé URLs después de clonar.
Cloné Slides completos.
Eliminé Slides completos.
Los IDs personalizados son únicos.
No eliminé Classes estructurales.
Revisé Linked styles.
La altura funciona en desktop.
La altura funciona en tablet.
La altura funciona en celular.
Los controles son visibles.
Los controles funcionan.
No existe scroll horizontal inesperado.
No agregué JavaScript innecesario.
Las promociones y fechas siguen vigentes.
Guardé los cambios.
Probé todos los Slides mediante Ver página.
En resumen
Los Sliders de imágenes permiten presentar varias piezas visuales de gran formato dentro de una misma área.
Son especialmente útiles para:
campañas;
promociones;
lanzamientos;
productos destacados;
proyectos;
mensajes principales.
Recuerda la diferencia:
Banner → una pieza principal.
Slider → varias imágenes protagonistas que se alternan.
Carrusel → recorrido de múltiples elementos o Cards.
Uno de los puntos más importantes al trabajar con un Slider es el comportamiento responsive de sus imágenes.
Una fotografía horizontal que utiliza Cover puede recortarse considerablemente en celular.
Por eso:
no diseñes solamente para desktop.
Mantén la información visual importante dentro de zonas seguras y, cuando sea posible, utiliza:
Image + Heading + Paragraph + Button
en lugar de incrustar toda la información dentro del archivo de imagen.
También presta especial atención a:
contraste;
Overlay;
altura;
tipografía;
CTA;
URLs;
orden de Slides.
Y para modificar la estructura:
Navigator → seleccionar Slide completo → clonar, mover o eliminar.
Si el Slider ya funciona correctamente:
conserva su lógica y personaliza únicamente lo necesario.
Finalmente:
Guardar Cambios → Ver página → recorrer todos los Slides en desktop y celular.
Esto permite crear Sliders visualmente atractivos sin perder legibilidad, funcionalidad ni adaptación responsive.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp