Descripción: Esta herramienta permite crear, personalizar y gestionar carruseles dinámicos (sliders) compuestos por múltiples elementos visuales, ideales para la presentación de contenidos destacados en el sitio web.
¿Para qué sirve? (Ejemplos prácticos)
Utiliza el módulo Carruseles para:
- Crear un área de bienvenida en la página principal que rote automáticamente entre diferentes promociones o mensajes clave.
- Presentar una galería de imágenes o videos con efectos de fondo únicos y textos superpuestos.
- Organizar contenidos complejos en una secuencia visual controlada, como una presentación guiada o un portafolio.
Funcionalidades principales
El módulo ofrece un control granular tanto sobre las configuraciones generales del carrusel como sobre la personalización de cada diapositiva individual.
- Gestión centralizada: Visualización rápida de todos los carruseles creados, con indicación inmediata si están activos u ocultos en el sitio.
- Estructura por diapositivas: El carrusel está compuesto por pestañas separadas, cada una representando una diapositiva individual.
- Editor visual avanzado: Cada diapositiva incluye un área para insertar texto, imágenes y otros elementos gráficos complejos, gestionados mediante un editor visual dedicado.
- Fondos multimedia: Soporte para el uso de imágenes de fondo (con opciones separadas para desktop y mobile) o videos (de plataformas externas como YouTube/Vimeo o archivos MP4).
- Efectos de superposición (Overlay): Posibilidad de aplicar colores, degradados y niveles de opacidad sobre el fondo para mejorar la legibilidad del contenido.
Cómo se configura
La configuración se divide en dos áreas: las opciones generales del carrusel y las configuraciones específicas de cada diapositiva.
1. Configuraciones generales del carrusel
Estas opciones definen el comportamiento y aspecto general del carrusel.
| Opción | Descripción |
|---|---|
| Título slider | Nombre interno para identificar el carrusel en el área de gestión. |
| Visible en el sitio | Estado de activación/desactivación del carrusel. |
| Altura slider | Define la altura total del carrusel, especificando un valor numérico y la unidad de medida (pixel, vh, vw). |
| Autoplay | Tiempo en segundos tras el cual la diapositiva pasa automáticamente a la siguiente. |
| Loop | Si está activado, el carrusel vuelve a empezar desde el principio al alcanzar la última diapositiva. |
| Flechas | Muestra los botones de navegación para desplazamiento manual entre las diapositivas. |
| Orden aleatorio | Las diapositivas se muestran en un orden diferente cada vez que se carga la página. |
2. Configuraciones de cada diapositiva individual
Cada diapositiva (gestionada mediante una pestaña) puede personalizarse individualmente.
Contenido y Título
- Título Diapositiva: Nombre interno de la diapositiva (útil para organización).
- Contenido: Área principal donde insertar texto y elementos visuales usando el editor.
Fondo (Imágenes)
Esta sección gestiona el aspecto visual del fondo mediante imágenes.
| Opción | Descripción |
|---|---|
| Imagen Desktop/Mobile | Permite cargar imágenes específicas para visualizarse en pantallas grandes y pequeñas. |
| Tamaño | Define cómo se ajusta la imagen al área (ej. cover para cubrir completamente el espacio). |
| Repetir | Determina si la imagen debe repetirse horizontalmente, verticalmente o no repetirse. |
| Posición | Alineación de la imagen de fondo (ej. centro, arriba a la izquierda, etc.). |
| Adjunto | Define si la imagen se desplaza con la página o permanece fija (fixed). |
Fondo (Video)
Permite usar un video como fondo.
| Opción | Descripción |
|---|---|
| Video Fondo | Inserta la URL del video (soporta enlaces directos a archivos MP4 o enlaces desde plataformas como Vimeo/YouTube). |
| Al finalizar el video | Define qué sucede cuando termina el video (repetir, ocultar, detenerse en el último fotograma). |
| Mostrar en | Permite ocultar el video en dispositivos específicos (Desktop, Tablet, Mobile). |
Overlay
Estas opciones aplican un filtro colorido o degradado sobre el fondo.
| Opción | Descripción |
|---|---|
| Degradado | Aplica un degradado de color sobre el fondo. |
| Color | Aplica un color uniforme sobre el fondo. |
| Opacidad | Define la transparencia del degradado/color aplicado (de 0 a 100%). |
Integraciones automáticas
Una vez guardados, los carruseles están inmediatamente disponibles para insertarse en cualquier página de tu sitio. El sistema gestiona automáticamente:
- Visualización multilingüe: Si tu sistema soporta varios idiomas, el contenido textual de las diapositivas se gestiona y guarda para cada idioma configurado.
- Adaptabilidad: Las configuraciones del fondo (imágenes desktop/mobile) y visibilidad de videos aseguran que el carrusel se adapte correctamente a todo tipo de dispositivos.
