El bloque Carrusel de Imágenes te permite mostrar una presentación giratoria de imágenes en tu página de SeedProd. Cada diapositiva admite un pie de foto, un texto de encabezado, un subtítulo y un botón de llamada a la acción opcionales, lo que lo convierte en un bloque flexible para galerías de fotos, escaparates de imágenes destacadas y secciones principales de estilo banner.
El carrusel admite la reproducción automática, las flechas de navegación, la visualización en modo ventana emergente, las superposiciones de imágenes y el contenido de banner por diapositiva con tipografía y efectos de animación totalmente personalizables.
Añadir el bloque Carrusel de Imágenes a tus páginas
Sigue estos pasos para añadir un bloque Carrusel de Imágenes a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Carrusel de Imágenes en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque Carrusel de Imágenes para abrir su configuración. La pestaña Contenido está organizada en dos secciones: Imágenes del Carrusel y Configuración del Carrusel.
Imágenes del Carrusel:
Esta sección enumera todas las diapositivas de tu carrusel. Haz clic en una fila de diapositiva para expandir su configuración individual, o arrastra las diapositivas para reordenarlas. También puedes duplicar o eliminar cualquier diapositiva usando los iconos que aparecen al pasar el ratón por encima.
- Imagen: Sube o selecciona una imagen de tu biblioteca de medios de WordPress para esta diapositiva, o introduce una URL de imagen directa.
- Pie de foto: Introduce texto opcional para el pie de foto que aparece debajo de la imagen cuando los pies de foto están habilitados.
- Mostrar texto de encabezado: Activa esta opción para mostrar los campos de texto de encabezado y subtítulo que se muestran como una superposición en la diapositiva.
- Encabezado: Introduce el texto del título que se muestra en la superposición de la diapositiva (visible cuando Mostrar texto de encabezado está habilitado).
- Subtítulo: Introduce el texto del subtítulo que se muestra debajo del encabezado en la superposición de la diapositiva (visible cuando Mostrar texto de encabezado está habilitado).
- Mostrar botón: Activa esta opción para añadir un botón de llamada a la acción en la superposición de la diapositiva.
- Texto del botón: Introduce la etiqueta del botón (visible cuando Mostrar botón está habilitado).
- Enlace del botón: Introduce la URL a la que enlaza el botón. Haz clic en el icono de configuración para mostrar las opciones Abrir en una ventana nueva y No seguir.
Haz clic en + Añadir imágenes en la parte inferior de la lista para añadir una nueva diapositiva a tu carrusel.
Configuración del Carrusel:
- Modo de color de navegación: Elige el color de las flechas y puntos de navegación — Oscuro o Claro — para asegurarte de que contrastan con tus imágenes.
- Diapositivas a mostrar: Establece cuántas diapositivas son visibles a la vez — de 1 a 6.
- Reproducción automática: Activa o desactiva la reproducción automática para controlar si las diapositivas avanzan solas.
- Velocidad de reproducción automática: Establece el retraso entre las transiciones de diapositivas en segundos (visible cuando Reproducción automática está habilitado).
- Mostrar pie de foto: Activa esta opción para mostrar el texto del pie de foto debajo de cada diapositiva.
- Mostrar navegación: Activa o desactiva las flechas y puntos de navegación.
- Color de superposición de imagen: Añade un color de superposición encima de la imagen de cada diapositiva usando el selector de color.
- Opacidad de superposición de imagen: Establece la opacidad de la superposición de 0 (transparente) a 1 (totalmente opaca).
- Alineación de pie de foto: Establece la alineación horizontal del texto del pie de foto: Izquierda, Centro o Derecha.
Ajustes del banner del carrusel:
- Posición vertical: Establece la posición vertical del contenido superpuesto del encabezado/botón en la diapositiva como un porcentaje de 0 a 100.
- Posición horizontal: Establece la posición horizontal del contenido superpuesto como un porcentaje de 0 a 100.
- Color del botón del banner: Establece el color de fondo del botón de llamada a la acción en cada diapositiva.
- Tamaño del botón: Elige el tamaño del botón del banner: Pequeño, Mediano, Grande, Muy Grande o Extra Grande.
- Radio del botón del banner: Establece el radio del borde del botón del banner de 0 a 100 px para controlar el redondeo de las esquinas.
- Alineación del texto del encabezado: Establece la alineación horizontal del texto superpuesto del encabezado: Izquierda, Centro o Derecha. Admite valores por dispositivo.
- Alineación del texto del subencabezado: Establece la alineación horizontal del texto superpuesto del subencabezado: Izquierda, Centro o Derecha. Admite valores por dispositivo.
- Alineación del botón del carrusel: Establece la alineación horizontal del botón superpuesto: Izquierda, Centro o Derecha. Admite valores por dispositivo.
Paso 3: Elige una plantilla (Opcional)
La pestaña Plantillas ofrece ajustes preestablecidos de estilo prediseñados para tu carrusel. Haz clic en cualquier miniatura de plantilla para aplicar instantáneamente una combinación de estilo de borde, sombra y imagen a todas las diapositivas de tu carrusel.
Paso 4: Personaliza el diseño
En la pestaña Avanzado, puedes personalizar la tipografía, el estilo de imagen y el espaciado de tu bloque de carrusel de imágenes.
Estilos:
- Tipografía del pie de foto: Ajusta la familia de fuentes, el grosor, el tamaño, la altura de línea, el espaciado entre letras y la transformación del texto del pie de foto. Admite valores por dispositivo.
- Color del pie de foto: Establece el color del texto de los pies de foto.
- Tipografía del encabezado del banner: Ajusta la configuración de fuentes para el texto del encabezado superpuesto de la diapositiva.
- Color del encabezado del banner: Establece el color del texto del encabezado superpuesto de la diapositiva.
- Tipografía del subencabezado del banner: Ajusta la configuración de fuentes para el texto del subencabezado superpuesto de la diapositiva.
- Color del subencabezado del banner: Establece el color del texto del subencabezado superpuesto de la diapositiva.
- Tipografía del botón del banner: Ajusta la configuración de fuentes para el texto del botón superpuesto de la diapositiva.
Estilos de imagen del deslizador:
- Sombra: Añade una sombra paralela a cada imagen de diapositiva. Elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Muy Grande o Extra Grande.
- Borde de imagen: Añade un borde alrededor de cada imagen de diapositiva, con control de radio del borde para redondear las esquinas.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de carrusel de imágenes (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
- Relleno: Ajusta el espaciado interior de tu bloque Carrusel de imágenes (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
Atributos:
- ID CSS: Muestra el identificador único autogenerado para tu bloque Carrusel de imágenes, creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos Personalizados: Agregue cualquier atributo HTML al elemento contenedor del bloque. Ingrese cada atributo en una nueva línea usando el formato: nombre-atributo|valor.
Visibilidad del Dispositivo:
- Ocultar en Escritorio: Oculta el bloque Carrusel de imágenes en pantallas de escritorio.
- Ocultar en Tableta: Oculta el bloque Carrusel de imágenes en dispositivos tableta.
- Ocultar en Móvil: Oculta el bloque Carrusel de imágenes en dispositivos móviles.
Efectos de Animación:
- Animación de Entrada: Elige un efecto de animación para cuando el bloque del carrusel aparezca en la vista.
- Efectos de Animación de Encabezado: Elige una animación para el texto del encabezado superpuesto de la diapositiva a medida que aparece cada diapositiva.
- Efectos de Animación de Subencabezado: Elige una animación para el texto del subencabezado superpuesto de la diapositiva.
- Efectos de Animación de Botón: Elige una animación para el botón superpuesto de la diapositiva.
Paso 5: Guardar tus cambios
Una vez que hayas terminado de configurar el bloque Carrusel de imágenes y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque Carrusel de imágenes a tu página! Los carruseles son una excelente manera de mostrar varias imágenes en un formato compacto y atractivo. Utiliza la configuración del banner para añadir texto superpuesto y llamadas a la acción en cada diapositiva, o mantenlo simple como una galería de imágenes limpia. Experimenta con las velocidades de reproducción automática, los estilos de navegación y las superposiciones de imágenes para crear un carrusel que se adapte perfectamente a tu página.