skip to Main Content

Comment créer un titre dégradé 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é ]

Souhaitez-vous découvrir comment créer un titre dégradé avec Elementor ?

Lors de la création d’une page Web ou d’un template avec Elementor, vous pouvez faire une petite expérience avec l’élément titre pour que la page que vous créez soit remarquable. L’une des expériences que vous pouvez essayer consiste à ajouter un effet de dégradé à l’élément titre.

Cet article vous montrera comment y arriver.

Vous pouvez aussi lire : Comment créer un titre bicolore dans Elementor

Le bloc Titre natif d’Elementor n’offre aucune option pour définir un effet de dégradé. Vous ne pouvez utiliser que la couleur unie pour le texte du titre. Mais vous pouvez ajouter un CSS personnalisé pour ajouter un effet dégradé à l’élément titre dans Elementor en utilisant le CSS personnalisé qui n’est disponible que sur Elementor pro.

Pour le faire nous allons vous proposer deux méthodes : Si vous avez la version pro et que vous êtes à l’aise avec le CSS, utilisez la première méthode. Mais si vous aimez utiliser les plugins WordPress la deuxième méthode sera parfaite.

Méthode 1 : Ajouter un effet de dégradé sur l’élément titre avec du CSS personnalisé

En supposant que vous ayez mis à niveau votre Elementor vers la version pro, créez une nouvelle page/template et modifiez-le avec Elementor. Vous pouvez également modifier une page ou un template existant.

Ajoutez le widget Titre à la zone de canevas en faisant glisser et déposer l’élément Titre.

Dans le bloc Titre sous l’onglet Contenu, sélectionnez un niveau de titre dans l’option Balise HTML. Vous pouvez utiliser n’importe quel niveau de titre. Vous en aurez besoin comme sélecteur CSS.

créer un titre dégradé

Accédez à l’onglet Avancé et ouvrez le bloc CSS personnalisé et collez le code CSS suivant.

selector h2 {
    background-image: linear-gradient(to right,#463f64,#463f64, #e2285c, #e2285c);
    -webkit-background-clip: text;
    display: inline-block;
    padding: 14px;
    -webkit-text-fill-color: #00000000;
}

Assurez-vous d’adapter le sélecteur avec le niveau du titre que vous avez sélectionné à l’étape précédente.

Vous pouvez modifier les couleurs en collant le code hexadécimal des couleurs que vous aimez sur la propriété background-image.

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 ]

Ou bien, vous pouvez également utiliser le code suivant pour créer un titre dégradé avec plus de couleurs sur le gradient.

selector .elementor-heading-title
{
     background: linear-gradient(90deg,red,blue,black) ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}
créer un titre dégradé

Méthode 2 : Créer un titre dégradé dans Elementor avec un plugin

Si l’ajout du CSS vous semble effrayant, il existe un moyen plus simple de créer un titre dégradé dans Elementor: en installant une extension complémentaire. Une extension qui vous permet de créer un titre dégradé est Happy Addons.

Découvrez Comment installer (ajouter) un plugin sur WordPress

Happy Addons est une extension freemium et l’élément pour créer un titre dégradé (appelé Gradient Heading) est disponible sur la version gratuite. Vous pourrez définir le type de dégradé (radial ou linéaire), la position du dégradé et l’emplacement.

L’élément Titre offre également les mêmes options de réglage de dégradé que Happy Addons.

Voila! vous venez de créer un titre dégradé sur Elementor.

Obtenez Elementor Pro Maintenant !

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. 404 Error Page Redirect to Homepage or Custom Page

404 Error Page Redirect to Homepage or Custom Page

Voici l’un des meilleurs moyens d’ajouter facilement une page d’erreur 404 qui redirigera le visiteur vers la page d’accueil ou la page personnalisée, après l’activation de ce plugin WordPress.

Toutes les pages d’erreur 404 seront redirigées vers la page d’accueil ou sur une URL personnalisée. En utilisant ce plugin WordPress, vous permettrez à Google de réduire le pagerank de votre site web si ce dernier possède de nombreuses pages d’erreur 404.

Découvrez aussi Comment corriger l’erreur 413 sur WordPress

Ce plugin WordPress ne fait pas juste de la redirection mais il peut aussi être une solution idoine pour améliorer le classement de votre site web dans les résultats des moteurs de recherche.

Télécharger | Démo | Hébergement Web

2. WOOF 

Woof woocommerce products filter by realmag777 codecanyon

WOOF est un puissant plugin WooCommerce premium de filtrage de produits qui étend sa fonctionnalité pour permettre aux utilisateurs de votre boutique en ligne d’effectuer des recherches par catégories, par attributs des produits personnalisés, par mots-clés et par prix personnalisés.

Il propose des tonnes de fonctionnalités professionnelles et premium et sans aucun doute, ce sera celui qui vous marquera le plus, si vous les essayez tous. Il améliorera la recherche des produits sur votre boutique en ligne, avec une simplicité d’utilisation exceptionnelle.

Télécharger | Démo | Hébergement Web

3. Contact Form 7 Success Redirect

Contact Form 7 Success Redirect

Contact Form 7 Success Redirect est une extension du plugin WordPress Contact Form 7 qui permet de rediriger un visiteur ou un utilisateur vers une page après la soumission de son contact.

Il a été conçu pour que le formulaire soit plus convivial lorsque le processus de soumission du formulaire aboutit en redirigeant vers la page choisie par l’admin. Il est extrêmement facile à configurer. Vous pourrez le faire en sélectionnant une page dans les pages existantes de votre tableau de bord ou en fournissant une URL personnalisée de redirection.

Découvrez nos 8 plugins WordPress pour améliorer le SEO de votre blog

Chaque formulaire aura sa propre configuration. Ainsi, chaque redirection réussie pourra être définie de manière unique.

Télécharger | Démo | Hébergement Web

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous accompagneront dans la création et la gestion de votre site web.

Conclusion

Voilà ! C’est tout pour cet article. Désormais vous saurez comment créer un titre dégradé sur WordPress avec le plugin Elementor. Laissez-nous vos commentaires et remarques si vous avez des difficultés à y arriver.

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.

N’hésitez pas à le partager avec vos amis sur vos réseaux sociaux préférés

… 

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