Une image de héros dit une chose Un arrière-plan de héros qui tourne à travers vos trois ou quatre meilleures photos en dit considérablement plus, sans ajouter un seul widget à la mise en page Le Curseur d'arrière-plan extension dans Modules complémentaires principaux pour Elementor remplace l'arrière-plan statique d'une section par un diaporama d'images : choisissez les photos, choisissez une transition et le contenu se trouve sur le dessus tandis que la toile de fond circule derrière.
Voici le héros fini de la démo, parcourant ses trois photos avec une transition tourbillonnante :
Ce que fait l'extension Background Slider #
Une fois activés, les conteneurs, sections et colonnes obtiennent un Curseur d'arrière-plan panneau dans leur Style onglet, à côté de la section Arrière-plan ordinaire. Retournez-le, ajoutez des images de la médiathèque, et l'arrière-plan de la section devient un diaporama chronométré Tout y est configurable :
- Ajouter des images : un champ de galerie contenant les diapositives, les réorganiser ou les supprimer dans l'éditeur de galerie WordPress standard.
- Transition : 24 effets entre les diapositives plus Aléatoire : Fade, Glisser dans quatre directions, Zoom avant et arrière, Swirl, Burn, Blur et Flash, chacun avec une deuxième variante.
- Animation: Ken Burns se déplace sur chaque diapositive, dans neuf directions, aléatoire ou aucune.
- Superposition personnalisée : une couleur, un dégradé ou une couche d'image sur les diapositives, ainsi que neuf styles de superposition prédéfinis qui maintiennent le texte lisible.
- Délai et minuterie : combien de temps chaque diapositive tient (5000 ms par défaut), et si une fine barre de progression indique le temps restant sur chaque diapositive.
- Affichage aléatoire, résolution d'image, couverture : mélangez l'ordre lorsque la page est générée, choisissez la taille chargée et contrôlez la façon dont les images remplissent la section.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? Suivez le guide d'installation d'abord.
- Background Slider est une extension gratuite, donc aucune licence Pro n'est requise.
- Deux images ou plus dimensionnées pour un affichage pleine largeur, idéalement des dimensions similaires.
Comment activer l'extension Background Slider #
Depuis votre tableau de bord WordPress, rendez-vous sur Additions maîtres et ouvrez le Extensions onglet. Le curseur d'arrière-plan se trouve dans le Widgets d'animation groupe, à côté de Gradient animé BG (Pro). Cliquez sur sa bascule pour qu'elle devienne violette, puis frappez Enregistrer Modifications et attendez l'avis de” vert “Settings enregistré avec succès.
Ouvrez le panneau et ajoutez les images #
Sélectionnez le conteneur de héros dans l'éditeur Elementor et ouvrez le Style onglet. Élargir le Curseur d'arrière-plan section avec le badge MA violet et interrupteur Activer le curseur d'arrière-plan à Oui. La liste complète des paramètres apparaît, avec un Appliquer bouton en haut pour appuyer sur les modifications de l'aperçu.
Cliquez Ajouter des Images et choisissez les diapositives dans la médiathèque La démo utilise trois photos de service L'éditeur de galerie gère la commande : glisser pour réorganiser, appuyez sur le X pour en déposer une ou Ajouter à la galerie pour en savoir plus.
Choisissez la transition et le mouvement #
Le Transition dropdown décide comment une diapositive passe à la suivante La liste est longue : Fade, Slide Left, Right, Up, and Down, Zoom In and Out, Swirl Left and Right, Burn, Blur, and Flash, chacun en deux variantes La démo atterrit sur Tourbillon gauche.
Le Animation le réglage ajoute le mouvement de Ken Burns à l'intérieur de chaque diapositive, un panoramique lent et un zoom qui maintiennent l'arrière-plan en vie entre les transitions Choisissez une direction ou définissez-la sur Aléatoire et que chaque glisse à sa manière.
Superposition, retard et minuterie #
Le texte blanc sur une photo occupée a besoin d'aide Tournez Surcouche personnalisée pour afficher et placer une couleur, un dégradé ou une image sur les diapositives, ou choisir l'un des neuf prédéfinis Surcouche styles avec des motifs construits pour la lisibilité En dessous, Retard définit le nombre de millisecondes que chaque diapositive contient (5 000 dans la démo), Minuterie montre une barre de progression pour chaque glissière (les glissières tournent dans un sens ou dans l'autre), et Couverture fait remplir les images de la section bord à bord.
Le résultat sur la page #
Publier et le héros tourne tout seul, exactement comme dans le GIF en haut de cette page : chaque photo tient pour le retard, tourbillonne dans la suivante, et le cap et les boutons restent fixés sur le dessus Les visiteurs obtiennent une toile de fond mobile sans widget de curseur séparé, et la structure de section en dessous ne change jamais.
Où un curseur d'arrière-plan fonctionne bien #
- Sections héros. Faites pivoter trois photos fortes au lieu de parier la première impression sur une.
- Entreprises de services. Montrez l'équipe au travail derrière un titre.
- Restaurants et lieux. Plats et intérieurs à vélo derrière le bouton de réservation.
- Portefeuilles. Projets récents comme toile de fond de la section d'introduction.
- Pages d'atterrissage. Angles de produit tournant derrière un appel à l'action fixe.
Tutoriel Vidéo #
Regardez le curseur construit bout à bout, depuis l'activation de l'extension jusqu'au héros du cyclisme sur la page publiée.
Foire aux questions #
Comment ajouter un diaporama en arrière-plan à une section Élémenteur ?
Activez l'extension Background Slider dans l'onglet Master Addons Extensions, sélectionnez la section et ouvrez Background Slider dans l'onglet Style Allumez-la, ajoutez deux images ou plus, choisissez une transition et la section cycle d'arrière-plan automatiquement.
Quels effets de transition sont inclus ?
Vingt-quatre plus Aléatoire : Fade, Glisser à gauche, à droite, vers le haut et vers le bas, Zoom avant et arrière, Faire tourbillonner à gauche et à droite, Brûler, Flou, et Flash, chacun avec une deuxième variante Un paramètre d'Animation séparé ajoute un mouvement de panoramique et zoom de Ken Burns à l'intérieur de chaque diapositive.
Puis-je garder le texte lisible sur les photos ?
Oui. Activez la superposition personnalisée pour une couche de couleur, de dégradé ou d'image au-dessus des diapositives, ou choisissez l'un des neuf styles de superposition prédéfinis. La démo utilise une superposition sombre afin que le titre blanc et les boutons maintiennent le contraste sur chaque diapositive.
Comment contrôler la vitesse de glissière ?
Le champ Délai définit le nombre de millisecondes pendant lesquelles chaque diapositive reste visible, 5000 par défaut. La minuterie n'affiche qu'une barre de progression, car les diapositives tournent d'une manière ou d'une autre. L'affichage aléatoire mélange l'ordre des diapositives à chaque fois que la page est générée, donc sur une page mise en cache, l'ordre change uniquement lorsque le cache s'efface.
L'extension Background Slider est-elle gratuite ?
Oui. Background Slider est livré avec la version gratuite de Master Addons for Elementor, dans le groupe Animation Widgets de l'onglet Extensions La page de tarification couvre ce que les plans Pro ajoutent.
Elementor a-t-il son propre diaporama d'arrière-plan ?
Oui. Free Elementor a un type d'arrière-plan Diaporama avec cinq transitions, un zoom avant ou arrière de Ken Burns, un chargement par lazy et un positionnement par appareil. Background Slider ajoute 24 transitions, Ken Burns dans neuf directions, des superpositions de motifs, un ordre aléatoire et une barre de minuterie La page produit a un tableau de comparaison complet.
Envelopper #
Le Extension de curseur d'arrière-plan transforme un arrière-plan de section en diaporama avec une bascule et une poignée de choix : images, transition, superposition, délai Le contenu reste mis, la toile de fond fait le travail, et aucun widget de curseur supplémentaire n'entre dans la mise en page Pour le mouvement sans photos, le Extension d'arrière-plan de gradient animé (Pro) couvre la même section avec la couleur à la place et l'ensemble complet de Widgets et extensions Master Addons est à une page.
