Fond de gradient animé d'élémenteur (Pro) : sections de gradient mobiles
Animated Gradient BG est une extension Master Addons Pro qui met un gradient linéaire en mouvement lent derrière un conteneur, une section ou une colonne Vous choisissez deux couleurs ou plus, l'angle, la durée et l'assouplissement, et le gradient dérive d'avant en arrière dans une boucle sans aucune image ou fichier vidéo Il est souvent utilisé pour les sections de héros, les bandes d'appel à l'action et les pages à venir Pour le texte de couleur dégradée au lieu d'un arrière-plan, essayez le gratuit Titre du dégradé widget.
Deux couleurs ou plus, un dégradé mobile
Ajouter des couleurs dans le Couleur liste, une ligne par couleur L'extension en a besoin d'au moins deux Elle les espace uniformément sur un dégradé linéaire et répète la première couleur à la fin, de sorte que la boucle n'a pas de bord dur Il n'y a pas de paramètres pour les positions d'arrêt de couleur ou un dégradé radial L'aperçu de l'éditeur se met à jour lorsque vous choisissez les couleurs.
- Liste de couleurs : ajouter, dupliquer ou supprimer des lignes Deux à quatre couleurs lisent généralement mieux.
- Couleurs transparentes: le dégradé repose sur sa propre couche au-dessus de l'arrière-plan normal de la section, de sorte que les couleurs transparentes laissent transparaître une image d'arrière-plan.
- Où ça marche: conteneurs, sections et colonnes, dans l'onglet Style Les widgets n'obtiennent pas le panneau.
Angle, durée et facilité
Angle définit la direction du gradient de -45 à 180 degrés, avec -45 comme valeur par défaut. Durée totale de l'animation (secondes) va de 1 à 20 et par défaut à 6. c'est le temps que prend la pente pour dériver en travers et en arrière. Effet d'animation définit l'assouplissement : linéaire, facile, facile à intégrer, facile à éliminer, facile à sortir ou l'une des trois courbes lisses, avec la conception matérielle (lisse) par défaut.
- Lent et subtil: 12 à 20 secondes fonctionne bien derrière le texte du héros.
- Toujours sur: la boucle démarre lorsque la page se charge et n'a pas de déclencheur de survol ou de défilement.
- Transition Douceur : ce curseur apparaît dans le panneau, mais il ne modifie pas l'animation dans la version actuelle.
Fond de gradient d'élément vs gradient animé BG
Le paramètre d'arrière-plan gratuit d'Elementor a un type Gradient (coché sur Elementor 4.2.4), mais le gradient ne bouge pas Vous pouvez l'animer en écrivant vous-même des images clés CSS, ou utiliser l'extension.
| Caractéristique | Dégradé Élémenteur | CSS à la main | Gradient animé BG |
|---|---|---|---|
| Prix | Gratuit | Gratuit | Maître Addons Pro |
| Mouvement | Statique | Oui, vous écrivez les images clés | Oui, intégré |
| Couleurs | 2, avec les emplacements d'arrêt | N'importe lequel | 2 ou plus, régulièrement espacés |
| Type de gradient | Linéaire ou radial | N'importe lequel | Linéaire seulement |
| Angle | 0 à 360, par appareil | N'importe lequel | -45 à 180 |
| Rapidité et détente | Non | Oui | Durée 1 à 20 s, 8 options de détente |
| S'installer dans | Panneau de style | Css personnalisé | Panneau de style |
Pour un dégradé fixe, le propre réglage d'Elementor suffit et donne plus de contrôle sur les arrêts et le type de gradient L'extension vous permet d'enregistrer des images clés lorsque vous souhaitez que le dégradé se déplace.
Connexes: Titre du dégradé (gratuit) pour le texte dégradé, plus Particules (gratuit) et Curseur d'arrière-plan (gratuit) pour d'autres arrière-plans en mouvement.
Comment ajouter un arrière-plan de dégradé animé dans Elementor
Une fois l'extension allumée, le panneau apparaît dans l'onglet Style de chaque conteneur, section et colonne Voici un détail documentation sur le fond de dégradé animé.
- Avec Master Addons Pro actif, rendez-vous sur Additions principales > Extensions et allumez Gradient animé BG.
- Modifiez votre page avec Elementor et sélectionnez un conteneur, une section ou une colonne.
- Ouvrir le Style onglet et extension Fond de dégradé animé.
- Définir Activer le dégradé animé à Oui. Trois exemples de couleurs apparaissent.
- Changer les couleurs dans le Couleur liste, puis set Angle, Durée totale de l'animation (secondes) et Effet d'animation.
- Mettez à jour la page et vérifiez que votre texte reste lisible par rapport à chaque couleur.
Questions fréquemment posées pour le gradient animé BG
Animated Gradient BG est-il gratuit ?
Non. Il fait partie de Master Addons Pro. L'arrière-plan Gradient libre d'Elementor est statique, donc un gradient mobile a besoin de cette extension ou de votre propre CSS.
Puis-je l'utiliser sur une image d'arrière-plan ?
Oui. Le dégradé est dessiné sur sa propre couche au-dessus du fond normal de la section. Choisissez les couleurs avec une certaine transparence dans le sélecteur de couleurs et l'image de fond apparaît.
Combien de couleurs puis-je utiliser dans une seule animation ?
Au moins deux, et autant que vous en ajoutez après cela Les couleurs sont espacées uniformément, donc deux à quatre donnent généralement le résultat le plus propre.
L'animation est-elle jouée tout le temps, ou puis-je la faire jouer en vol stationnaire ?
Il se joue tout le temps La boucle démarre lorsque la page se charge et n'a pas de déclencheur de survol ou de défilement Pour un effet de survol uniquement vous auriez besoin de votre propre CSS, par exemple avec le Css personnalisé extension.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
