Widget de texte à gradient d'élémenteur gratuit
Le widget Heading d'Elementor ne prend qu'une couleur de texte unie, donc le texte dégradé signifie généralement écrire CSS avec background-clip: text. Le widget Gradient Headline dans le plugin gratuit Master Addons le fait à partir du panneau Tapez le titre, choisissez deux couleurs, choisissez un dégradé linéaire ou radial, et les lettres s'en remplissent Vous obtenez également un dégradé de vol stationnaire séparé, 13 modes de mélange, une ombre de texte, un lien et un choix de tag de titre Cela convient aux titres de héros, aux titres de section et aux bannières de vente.
Comment ajouter du texte dégradé dans Elementor
Vous avez besoin d'Elementor et du plugin gratuit Master Addons Pas de CSS personnalisé et pas d'Elementor Pro.
- Installer et activer Modules complémentaires principaux de WordPress.org.
- Modifiez votre page avec Elementor, recherchez dans le panneau widgets Titre du dégradé et faites-le glisser.
- Tapez votre texte dans Titre(en), puis définissez le titre HTML Tag et Alignement.
- Dans Style, Gradient Style, choisissez la première couleur et la deuxième couleur et ajustez leurs curseurs de localisation.
- Choisissez Linéaire et définissez l'angle, ou Radial et définissez la position.
- Définissez la typographie, essayez un mode de mélange sur votre arrière-plan et ajoutez un dégradé de survol si vous le souhaitez.
Des captures d'écran de chaque étape sont dans le guide de texte dégradé.
Gradients linéaires ou radiaux à deux couleurs
En style, Style dégradé, réglé Couleur du texte to Gradient (ou Classic pour une couleur unie).Cueillez le premier Couleur et le Deuxième Couleuret déplacez chacun Emplacement curseur pour décider où l'un se fond dans l'autre. Type bascule entre Linéaire, avec un Angle (180 degrés par défaut s'étend de haut en bas) et Radial, avec un Position tel que Centre Centre Pour un dégradé qui se déplace derrière une section entière au lieu de texte, voir le Gradient animé BG extension (Pro).
- Onglet Normal et Hover : définissez un deuxième dégradé qui apparaît lorsque les visiteurs survolent le cap.
- Chaque dégradé utilise deux jeux de couleurs Pour trois couleurs ou plus, vous auriez besoin d'un CSS personnalisé.
- Les valeurs par défaut vont du violet (#9929ea) au rouge (#FB083 E), alors changez-les d'abord dans les couleurs de votre marque.
Titre d'élément avec titre CSS vs gradient
Vous pouvez créer du texte dégradé avec le propre widget Heading d'Elementor si vous êtes à l'aise avec CSS. Voici ce qu'implique chaque itinéraire.
| Caractéristique | Titre de l'élémenteur + CSS | Titre du dégradé Master Addons |
|---|---|---|
| Configuration | Ajouter CSS avec background-clip : texte dans WordPress Additional CSS, Elementor Pro Custom CSS ou les modules complémentaires Master gratuits Extension CSS personnalisée | Choisissez les couleurs dans le panneau |
| Types de dégradés | Tout ce que CSS permet, y compris trois couleurs ou plus | Linéaire ou radial, deux arrêts de couleur |
| Dégradé de survol | Css supplémentaire | Onglet Hover intégré |
| Mélangez les modes et l'ombre | Css supplémentaire | 13 modes de mélange et un contrôle d'ombre de texte |
| Prix | Gratuit si vous écrivez le CSS vous-même | Gratuit avec Master Addons |
Écrivez CSS si vous avez besoin de plus de deux couleurs ou d'un dégradé animé Utilisez Gradient Headline lorsque vous souhaitez le configurer visuellement en une minute Widgets gratuits associés : Double rubrique et Titres animés.
Typographie, modes de mélange et ombre de texte
Chaque onglet a le sien Typographie1, donc la police, la taille et le poids peuvent également changer en vol stationnaire. Mode Mélange offre 13 options, de Normal, Multiplier et Écran à Différence et Luminosité, qui mélangent le dégradé avec une image ou une couleur derrière le texte. Ombre de texte ajoute de la couleur, du flou et du décalage pour plus de profondeur ou de lisibilité par rapport aux photos occupées.
- Les gradients sont de purs CSS, il n'y a donc pas d'image à charger.
- Les modes de mélange réagissent à tout ce qui se trouve derrière le cap, alors prévisualisez-les sur le fond réel.
- Gardez suffisamment de contraste entre les deux couleurs et l'arrière-plan pour plus de lisibilité.
Lien, étiquette de titre et alignement
Dans l'onglet Contenu, ajoutez un URL de titre pour faire de l'ensemble du titre un lien Choisissez le Titre HTML Tag (H1 à H6, div, span ou p) pour que le titre corresponde à la structure de votre page, et set Alignement à gauche, au centre ou à droite.
- Utilisez un H1 par page, généralement le titre du héros, et H2 pour les titres des sections.
- Un cap dégradé lié fonctionne bien pour une bannière de vente qui va au magasin.
- Le texte de la vedette prend en charge l'édition en ligne dans l'aperçu de l'élémenteur.
Questions fréquemment posées pour le titre du dégradé
Le widget Gradient Headline est-il gratuit ?
Oui. Il fait partie du plugin gratuit Master Addons et fonctionne avec Elementor gratuit, vous n'avez donc pas besoin d'Elementor Pro pour le texte dégradé.
Puis-je utiliser plus de deux couleurs dans le dégradé ?
N° Chaque dégradé comporte deux jeux de couleurs, une première Couleur et une Deuxième Couleur Le déplacement des curseurs de Localisation change la netteté ou la douceur du mélange Pour trois couleurs ou plus, ajoutez votre propre CSS à un titre régulier.
Le texte dégradé ralentira-t-il mon site Web ?
Non. Le dégradé est CSS simple sur le texte de titre, il n'y a donc pas de fichier image à charger.
La pente peut-elle changer en vol stationnaire ?
Oui. L'onglet Survol dans le style dégradé a ses propres couleurs, emplacements, type, angle ou position, typographie, mode de mélange et ombre de texte, de sorte que le cap peut passer à un dégradé différent lorsque les visiteurs le survolent.
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
