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 Extension BG à gradient animé dans Maître Addons Pro ajoute cet effet à n'importe quel conteneur, section ou colonne : 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, sections et colonnes obtiennent un Fond de dégradé animé panneau dans leur Style onglet, juste en dessous de la section Arrière-plan normale Vous le chargez avec deux couleurs ou plus, et l'extension rend un dégradé qui anime entre eux en boucle L'angle, le temps de cycle total et l'assouplissement sont à vous de définir.
Un petit script ajoute une couche de dégradé derrière le contenu et l'anime avec CSS, il n'y a donc pas de vidéo à héberger ni d'image à compresser, et le texte en haut reste sélectionnable.
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.
- UN Maître Addons Pro licence, car Animated Gradient BG est une extension Pro.
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) : le temps que prend le gradient pour dériver en travers et en arrière La démo utilise 6 secondes.
- Transition Lissé (Secondes) : montré dans le panneau avec un défaut de 3, mais dans la version actuelle, il ne change pas l'animation Utilisez la durée et l'effet d'animation pour ajuster la sensation à la place.
- 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 un conteneur, une section ou une colonne 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. Durée totale de l'animation définit le nombre de secondes qu'un cycle complet prend, de 1 à 20, et Animation Effect définit l'assouplissement Le curseur Transition Smoothness n'affecte pas l'animation de la version actuelle.
Le dégradé animé ralentit-il ma page ?
L'effet est une animation CSS mise en place par un petit script plutôt qu'un fichier vidéo ou image, il y a donc très peu de extra à 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 ?
No. Animated Gradient BG est une extension Pro dans Master Addons Elementor a un type d'arrière-plan Gradient libre, mais ce gradient ne bouge pas.
Envelopper #
Le Extension BG à gradient animé transforme un fond de section en couleur lente : une liste de couleurs, un angle, une durée et un assouplissement 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, le gratuit Titre du dégradé le widget couvre le texte de dégradé et l'ensemble complet de Widgets et extensions Master Addons est à une page.
