Una imagen de héroe dice una cosa. Un fondo de héroe que recorre tus mejores tres o cuatro fotos dice considerablemente más, sin agregar un solo widget al diseño. El Control deslizante de fondo extensión en Complementos maestros para Elementor reemplaza el fondo estático de una sección con una presentación de diapositivas de imágenes: elija las fotos, elija una transición y el contenido se ubicará en la parte superior mientras el fondo pasa detrás de él.
Aquí está el héroe terminado de la demostración, recorriendo sus tres fotos con una transición en remolino:
Qué hace la extensión del control deslizante de fondo #
Una vez habilitados, los contenedores y secciones obtienen un Control deslizante de fondo panel en su Estilo tab, al lado de la sección de Fondo normal. Actívelo, agregue imágenes de la biblioteca multimedia y el fondo de la sección se convertirá en una presentación de diapositivas cronometrada. Todo en él es configurable:
- Adăugați imagini: un campo de galería que contiene las diapositivas, reordenarlas o eliminarlas en el editor de galería estándar de WordPress.
- Transición: Más de 20 efectos entre diapositivas, incluidos desvanecimiento, diapositivas en cuatro direcciones, acercar y alejar, girar, quemar, desenfocar y flash, la mayoría con una segunda variante.
- Animación: Movimiento de Ken Burns en cada diapositiva, en varias direcciones o aleatorio.
- Superposición personalizada: una capa de color, degradado o imagen sobre las diapositivas, además de nueve estilos de superposición preestablecidos que mantienen el texto legible.
- Retardare și Timer: cuánto tiempo se mantiene cada diapositiva, 5000 ms en la demostración y si la rotación se ejecuta con un temporizador.
- Visualización aleatoria, resolución de imagen, portada: baraja el orden, elige el tamaño cargado y controla cómo las imágenes llenan la sección.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Sigue el guía de instalación primero.
- Background Slider es una extensión gratuita, por lo que no se requiere licencia Pro.
- Dos o más imágenes dimensionadas para visualización de ancho completo, dimensiones idealmente similares.
Cómo habilitar la extensión del control deslizante de fondo #
Desde su panel de WordPress, vaya a Complementos maestros y abre el Extensiones pestaña. El control deslizante de fondo se encuentra en Widgets de animación grupo, al lado de Gradiente animado BG. Haga clic en su palanca para que se vuelva violeta y luego presione Guardar cambios y espere el aviso verde “Configuración guardada correctamente”.
Abre el panel y agrega las imágenes #
Seleccione el contenedor héroe en el editor Elementor y abra Estilo pestaña. Expandir el Control deslizante de fondo sección con insignia MA morada e interruptor Habilite el control deslizante de fondo a Sí. Aparece la lista de configuraciones completa, con un Aplicar botón en la parte superior para presionar cambios en la vista previa.
Hacer clic Agregar imágenes y elija las diapositivas de la biblioteca multimedia. La demostración utiliza tres fotos de servicio. El editor de la galería maneja el orden: arrastre para reorganizar, presione la X para soltar una o agregue a la galería para obtener más información.
Elija la transición y el movimiento #
El Transición dropdown decide cómo un deslizamiento pasa al siguiente. La lista es larga: desvanecerse, deslizarse hacia la izquierda, hacia la derecha, hacia arriba y hacia abajo, acercar y alejar, girar hacia la izquierda y hacia la derecha, quemar, desenfocar y flash, la mayoría en dos variantes. La demostración aterriza Remolino a la izquierda.
El Animación la configuración agrega movimiento de Ken Burns dentro de cada diapositiva, un giro lento y un zoom que mantiene vivo el fondo entre transiciones. Elija una dirección o configúrela Aleatorio y deje que cada tobogán se desvíe a su manera.
Superposición, retardo y temporizador #
El texto blanco en una foto ocupada necesita ayuda. Girar Superposición personalizada para mostrar y colocar un color, degradado o imagen sobre las diapositivas, o elegir uno de los nueve ajustes preestablecidos Superposición estilos con patrones creados para ser legibles. Debajo de eso, Retraso establece cuántos milisegundos tiene cada diapositiva (5000 en la demostración) Temporizador mantiene la rotación automática, y Cubierta hace que las imágenes llenen la sección de borde a borde.
El resultado en la página #
Publish y el héroe se ciclan por sí solo, exactamente como en el GIF en la parte superior de esta página: cada foto contiene el retraso, gira hacia la siguiente y el encabezado y los botones permanecen fijos en la parte superior. Los visitantes obtienen un fondo móvil sin un widget deslizante separado, y la estructura de la sección debajo nunca cambia.
Donde un control deslizante de fondo funciona bien #
- Secciones de héroes. Gira tres fotos fuertes en lugar de apostar la primera impresión en una.
- Negocios de servicios. Muestre al equipo trabajando detrás de un titular.
- Restaurantes y lugares. Platos e interiores en bicicleta detrás del botón de reserva.
- Portafolios. Proyectos recientes como telón de fondo de la sección de introducción.
- Páginas de aterrizaje. Ángulos del producto que giran detrás de una llamada a la acción fija.
Vídeotutorial #
Mire el control deslizante construido de un extremo a otro, desde permitir la extensión hasta el héroe ciclista en la página publicada.
Preguntas frecuentes #
¿cómo agrego una presentación de diapositivas en segundo plano a una sección Elementor?
Habilite la extensión del control deslizante de fondo en la pestaña Extensiones de complementos maestros, seleccione la sección y abra el control deslizante de fondo en la pestaña Estilo. Enciéndalo, agregue dos o más imágenes, elija una transición y el fondo de la sección se ciclará automáticamente.
¿Qué efectos de transición están incluidos?
Más de veinte: desvanecerse, deslizarse hacia la izquierda, hacia la derecha, hacia arriba y hacia abajo, acercar y alejar, girar hacia la izquierda y hacia la derecha, quemar, desenfocar y flash, la mayoría con una segunda variante. Una configuración de animación separada agrega movimiento de giro y zoom de Ken Burns dentro de cada diapositiva.
¿Puedo mantener el texto legible sobre las fotos?
Sí. Active la superposición personalizada para obtener una capa de color, degradado o imagen sobre las diapositivas, o elija uno de los nueve estilos de superposición preestablecidos. La demostración utiliza una superposición oscura para que el encabezado blanco y los botones mantengan el contraste en cada diapositiva.
¿Cómo controlo la velocidad de deslizamiento?
El campo Retraso establece cuántos milisegundos permanece visible cada diapositiva, 5000 de forma predeterminada en la demostración. El temporizador mantiene la rotación ejecutándose automáticamente y la pantalla aleatoria baraja el orden de las diapositivas en cada carga si desea variedad.
¿la extensión Background Slider es gratuita?
Sí. El control deslizante de fondo se envía con la versión gratuita de Master Addons para Elementor, en el grupo Animation Widgets de la pestaña Extensiones. La página de precios cubre lo que agregan los planes Pro.
Envolviendo #
La extensión Background Slider convierte un fondo de sección en una presentación de diapositivas con un interruptor y un puñado de opciones: imágenes, transición, superposición, retraso. El contenido permanece puesto, el fondo hace el trabajo y ningún widget deslizante adicional ingresa al diseño. Para movimiento sin fotos, el Extensión animada de fondo degradado cubre la misma sección con color y el conjunto completo de Widgets y extensiones de complementos maestros está a una página de distancia.
