skip to Main Content

Comment créer une barre de progression dégradée dans Elementor

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 901.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

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.

Comment créer une barre de progression dégradée dans Elementor

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.

Comment créer une barre de progression dégradée dans Elementor

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.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
0 Partages
Partagez
Tweetez
Enregistrer