Cómo Agregar un Slider a una P ágina
Usa el elemento Slider para mostrar varios paneles de contenido en un carrusel. Cada slide puede contener imágenes, testimonios, tarjetas de oferta u otros elementos anidados. Los visitantes se mueven entre slides usando flechas o puntos de paginación.
Esta guía explica cómo agregar un slider y configurar las opciones principales que controlan slides y navegación.
Antes de Empezar
Asegúrate de tener:
- Una página abierta en el Page Builder.
- Contenido listo para cada slide (imágenes, titulares, botones o testimonios).
- Una sección lo suficientemente ancha para el carrusel (los sliders funcionan mejor en contenedores de ancho total o casi total).
Evita anidar un slider dentro de otro slider. Eso suele romper la navegación y confundir a los visitantes en mobile.
Paso 1: Agregar el Elemento Slider
- Abre Pages y haz clic en Edit en tu página.
- En el panel de elementos, encuentra Slider.
- Arrastra Slider a la sección o contenedor objetivo.
- Haz clic en el slider en el canvas para abrir la configuración.
Los sliders se usan comúnmente para testimonios, destacados de productos, galerías antes/después y tarjetas de características.
Paso 2: Crear y Gestionar Slides
Los slides se llaman blocks en la configuración del Slider.
| Acción | Qué hace |
|---|---|
| Add block | Crea un nuevo slide. |
| Remove block | Elimina un slide del carrusel. |
| Reorder blocks | Cambia el orden de los slides de izquierda a derecha. |
| Edit slide content | Abre los elementos anidados dentro de ese slide. |
Agregar contenido dentro de un slide
- Selecciona un block de slide.
- Agrega elementos anidados dentro de él—por ejemplo Image, Text, Button o Icon.
- Estiliza el contenido anidado por slide según sea necesario.
Mantén cada slide enfocado. Una imagen principal más un titular corto suele rendir mejor que párrafos densos en todos los slides.
Paso 3: Configurar el Layout del Slide
| Configuración | Qué hace |
|---|---|
| Slide width | Qué tan ancho aparece cada slide en la viewport del carrusel. |
| Slide height | Espacio vertical para el área del slide cuando la altura está controlada. |
| Padding | Espaciado interno dentro de cada block de slide. |
| Slide alignment | Cómo se alinea el contenido del slide dentro del carrusel. |
| Slide gap | Espacio entre slides adyacentes cuando varios slides asoman en pantalla. |
En mobile, prueba si un slide por vista es lo más claro. Los slides parciales en "peek" pueden funcionar para galerías pero pueden sentirse apretados para contenido con mucho texto.
Paso 4: Configurar las Flechas de Navegación
| Configuración | Qué hace |
|---|---|
| Show arrows | Habilita los controles de flecha anterior/siguiente. |
| Arrow position | Dónde se sitúan las flechas respecto al slider. |
| Arrow size | Tamaño del objetivo de clic/toque—importante en mobile. |
Las flechas deben permanecer visibles contra el fondo del slide. Si los slides son imágenes ocupadas, habilita fondos en las flechas o elige un estilo de alto contraste.
Paso 5: Configurar los Puntos de Paginación
| Configuración | Qué hace |
|---|---|
| Show pagination | Muestra indicadores de puntos para la posición del slide. |
| Dot spacing | Distancia entre los puntos. |
| Active dot state | Cómo se resalta el punto del slide actual. |
Los puntos ayudan a los visitantes a entender cuántos slides existen y cuál está activo. Prueba los objetivos de toque de los puntos en mobile—deben ser fáciles de presionar.
Paso 6: Vista Previa Responsive
Usa los device toggles del builder (desktop, tablet, mobile) para verificar:
- El ancho del slide no recorta texto importante.
- Flechas y puntos son tocables en pantallas táctiles.
- Las imágenes anidadas escalan correctamente dentro de cada slide.
- Espaciado y padding siguen equilibrados en anchos menores.
Consulta Vista previa responsive para el flujo completo de preview.
Paso 7: Guardar, Publicar y Probar
- Haz clic en Save en el builder.
- Publica la página. Consulta Publicar una página.
- Abre la URL en vivo.
- Haz clic en flechas y puntos para recorrer cada slide.
- Prueba en un teléfono si el tráfico mobile importa.
Checklist de pruebas
- Cada slide es accesible vía flechas y puntos.
- Ningún slide muestra imágenes rotas o blocks vacíos.
- La navegación no está bloqueada por elementos superpuestos.
- Autoplay está apagado a menos que lo hayas configurado intencionalmente en otro lugar.
Slider vs Galería de Imágenes
El elemento Slider es un carrusel con varios slides y controles de navegación. Si solo necesitas una imagen estática, usa el elemento Imagen. Si necesitas una cuadrícula de imágenes sin navegación de carrusel, considera un layout de contenedor con varias columnas.
Solución de Problemas
| Problema | Qué verificar |
|---|---|
| Las flechas no mueven los slides | Flechas habilitadas; ningún elemento superpuesto bloqueando clics. |
| Puntos ausentes | Paginación habilitada en la configuración del slider. |
| Contenido del slide recortado | Ancho, altura y padding del slide en el breakpoint mobile. |
| El slider parece vacío | Cada block tiene contenido anidado; las imágenes terminaron de subirse. |
| El layout se rompe en mobile | Reduce texto por slide; aumenta padding; prueba un slide por vista. |
Resultado
Tu página ahora incluye un carrusel funcional. Los visitantes pueden explorar varios paneles sin desplazarse por una sección vertical larga—útil para testimonios, ofertas y prueba visual.
Documentación Relacionada
FAQ
¿Puedo poner botones y texto dentro de los slides del slider?
Sí. Cada block de slide soporta elementos anidados como imágenes, texto, botones e íconos. Mantén layouts simples para que la navegación permanezca clara.
¿Debo usar flechas, puntos o ambos?
Muchas páginas usan ambos para claridad. Como mínimo, habilita un método de navegación que los visitantes puedan descubrir en mobile.
¿Cuántos slides debo agregar?
Tres a siete slides sólidos suelen funcionar bien. Demasiados slides reducen la probabilidad de que los visitantes vean cada panel.
¿Puedo usar un slider para testimonios?
Sí. Los testimonios son un caso de uso común—una cita o captura de pantalla por slide con flechas o puntos para explorar.
¿Por qué debo evitar sliders anidados?
Un slider dentro de otro slider crea navegación confusa y mala usabilidad en mobile. Usa un carrusel por sección.