Une couleur de fond plate fait son travail et disparaît Un dégradé qui dérive lentement entre les couleurs fait que la même section se sent vivante sans ajouter une seule image Le Gradient animé BG extension dans Modules complémentaires principaux pour Elementor ajoute cet effet à n'importe quelle section ou conteneur : choisissez vos couleurs, définissez l'angle et la vitesse, et l'arrière-plan les parcourt tout seul.
Voici l'effet qui s'exécute sur une page en direct La section se déplace dans son jeu de couleurs pendant que le contenu reste en place :
Ce que fait l'extension Animated Gradient BG #
Une fois activés, les conteneurs et les sections obtiennent un Fond de dégradé animé panneau dans leur Style onglet, juste en dessous de la section d'arrière-plan normale Vous le chargez avec deux couleurs ou plus, et l'extension rend un dégradé qui anime entre elles en boucle L'angle, le temps de cycle total et la douceur de chaque transition sont tous à vous de définir.
Tout s'exécute en CSS sur l'élément lui-même, il n'y a donc pas de vidéo à héberger ni d'image à compresser, et le texte en haut reste sélectionnable et lisible.
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.
- Animated Gradient BG est une extension gratuite, donc aucune licence Pro n'est requise.
Comment activer l'extension Animated Gradient BG #
Depuis votre tableau de bord WordPress, rendez-vous sur Additions maîtres et ouvrez le Extensions onglet. Animé Gradient BG se trouve dans le Widgets d'animation group, à côté de Particules et de Background Slider Cliquez sur sa bascule pour qu'elle devienne violette, puis frappez Enregistrer Modifications et attendez l'avis de” vert “Settings enregistré avec succès.
Mettre en place le dégradé sur une section #
Sélectionnez le conteneur ou la section dans l'éditeur Elementor et ouvrez le Style onglet. Le Fond de dégradé animé la section avec le badge MA violet se trouve juste en dessous de l'arrière-plan. Retourner Activer le dégradé animé to Oui, et les commandes apparaissent pendant que le canevas prévisualise l'effet en direct.
- Effet d'animation : l'assouplissement du mouvement de couleur, Ease In dans la démo.
- Angle: la direction du gradient, -45 dans la démo pour un balayage diagonal.
- Durée totale de l'animation (secondes) : un voyage complet à travers toutes vos couleurs La démo utilise 6 secondes.
- Transition Lissé (Secondes) : comme une couleur passe doucement à la suivante, 3 secondes dans la démo L'indice du panneau le dit directement : des valeurs plus élevées créent des transitions plus fluides entre les couleurs.
- Couleur: un répéteur tenant le gradient s'arrête Cliquez Ajouter un élément pour une autre couleur, ou le X pour en laisser tomber une.
Choisissez les couleurs #
Chaque ligne de la liste Couleur ouvre un sélecteur standard La démo commence par un ensemble cyan, violet et orange, puis échange les arrêts et les arrêts : supprimez-en un et la boucle se resserre, ajoutez un bleu profond (#3D6CD6) et le cycle le reprend immédiatement L'aperçu en direct en fait la partie amusante ; vous regardez l'ambiance de la section changer à chaque arrêt que vous touchez.
Deux ou trois couleurs dans la même plage de température se lisent comme élégantes Cinq couleurs sur toute la roue se lisent comme un économiseur d'écran Commencez petit.
Le résultat sur la page #
Publiez et regardez la section respirer à travers ses couleurs, comme dans le GIF en haut de cette page Le cycle complet prend ce que vous définissez comme durée, puis boucle Les boutons, les titres et les images sont assis sur le dessus sans être affectés.
Une remarque pratique : le texte sombre reste lisible sur les arrêts de dégradé lumineux mais peut disparaître sur les saturés Vérifiez votre titre par rapport à chaque couleur de l'ensemble, pas seulement la première image.
Où les dégradés animés fonctionnent bien #
- Sections héros. Mouvement au-dessus du pli sans vidéo d'arrière-plan lourde.
- Bandes d'appel à l'action. Une toile de fond changeante attire l’œil vers le bouton qui le chevauche.
- Bientôt disponible et pages de destination. Un dégradé plein écran comporte à lui seul une page clairsemée.
- Sites de portefeuille et d'agences. Les couleurs de la marque parcourent l'en-tête, sans payer pour une vidéo d'archives.
- Rubriques tarifaires. Un subtil dégradé derrière le plan mis en évidence le sépare du reste.
Tutoriel Vidéo #
Regardez la pente construite à partir de zéro, depuis l'activation de l'extension jusqu'à l'arrière-plan mobile fini.
Foire aux questions #
Comment ajouter un fond dégradé animé dans Elementor ?
Activez l'extension Animated Gradient BG dans l'onglet Master Addons Extensions, sélectionnez une section ou un conteneur et ouvrez l'onglet Style Activez Activer le dégradé animé dans le panneau Animated Gradient Background, ajoutez deux couleurs ou plus et l'arrière-plan commence immédiatement à fonctionner.
Combien de couleurs le dégradé peut-il utiliser ?
Autant que vous ajoutez au répéteur Couleur Chaque clic Ajouter un élément crée un autre arrêt de gradient, et l'animation les parcourt tous dans la durée totale que vous définissez Deux à quatre couleurs couvre la plupart des designs.
Puis-je contrôler la vitesse de l'animation du gradient ?
Oui, avec deux paramètres La durée totale de l'animation définit le nombre de secondes qu'un cycle de couleur prend, et Transition Smoothness contrôle la façon dont chaque couleur se fond progressivement dans la suivante Des valeurs de douceur plus élevées génèrent plus d'images clés pour un transfert plus doux.
Le dégradé animé ralentit-il ma page ?
L'effet est généré avec une animation CSS sur l'élément plutôt qu'un fichier vidéo ou image, il n'y a donc rien de plus à télécharger C'est l'une des façons les plus légères de mettre en mouvement dans une section héros.
L'extension Animated Gradient BG est-elle gratuite ?
Oui. Animated Gradient BG 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.
Envelopper #
L'extension Animated Gradient BG transforme un fond de section en couleur à déplacement lent : une liste de couleurs, un angle et deux curseurs de synchronisation Gardez la palette serrée, vérifiez le contraste du texte par rapport à chaque arrêt, et la section transporte le mouvement avec un poids d'actif nul. Il s'associe bien au Extension d'animation d'entrée pour le contenu qui arrive sur la toile de fond mobile, et l'ensemble complet de Widgets et extensions Master Addons est à une page.
