Besoin de créer une barre de progression dégradée dans Elementor ?
Elementor dispose d’un widget Barre de progression natif que vous pouvez utiliser pour ajouter des éléments tels que le niveau de compétence ou la progression de quelque chose sur la page ou sur le modèle que vous créez.
Lorsque vous utilisez ce widget, vous pouvez personnaliser son apparence en modifiant la couleur et la typographie du texte. Ce widget vous permet uniquement d’utiliser une couleur unie pour la barre.
Mais est-il possible de créer une barre de progression avec une couleur dégradée ?
Si vous avez des compétences dans le CSS, vous pouvez utiliser la version pro d’Elementor et ajouter un CSS personnalisé au widget Barre de progression pour créer une barre de progression dégradée. Sinon, vous pouvez installer un module complémentaire qui offre un widget de barre de progression dans lequel vous pouvez choisir une couleur de dégradé lors du changement de couleur.
Deux add-ons qui offrent un tel widget sont Essential Addons et JetElements. Mais nous nous focaliserons sur Essential Addons
Création d’une barre de progression dégradée dans Elementor à l’aide d’Essential Addons
Essential Addons est l’un des add-ons Elementor les plus populaires. Il propose plus de 60 widgets, y compris un widget Barre de progression que vous pouvez utiliser pour créer une barre de progression dégradée. Essential Addons est un add-on freemium. Le widget Barre de progression est disponible sur la version gratuite.
Vous pouvez télécharger la version gratuite de cet add-on sur le répertoire officiel du plugin de WordPress.
Découvrez notre guide sur Comment installer (ajouter) un plugin sur WordPress
Après avoir installé et activé ce plugin, créez une page ou un modèle et modifiez-le avec Elementor et faites glisser le widget Barre de progression dans la zone d’édition.
Sélectionnez le style de barre de progression que vous souhaitez créer dans le menu déroulant de l’option Layout. Il existe 6 styles de barre de progression parmi lesquels vous pouvez choisir. Pour créer une barre de progression dégradée, vous devez sélectionner le style Ligne.
Définissez le titre, la valeur du compteur et la durée de l’animation. Une fois cela fait, passez à l’onglet Style et ouvrez le bloc Fill. Dans l’option Type d’arrière-plan, sélectionnez Dégradé et définissez la première couleur et la deuxième couleur. Vous pouvez également définir le type de dégradé (linéaire ou radial), l’emplacement et l’angle.
Vous pouvez ouvrir d’autres blocs d’options sous l’onglet Style pour définir d’autres options de style.
Obtenez Elementor Pro Maintenant !
Conclusion
Voila ! C’est tout pour cet article qui vous montre comment créer une barre de progression dégradée dans Elementor. Si vous avez des soucis sur comment y arriver faites-nous savoir dans les commentaires.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.
Mais en attendant, partagez cet article sur vos différents réseaux sociaux.
…
