Elementor vous permet de définir un fond dégradé, mais pas un dégradé sur le texte lui-même Le widget standard Heading ne prend qu'une couleur unie, donc un titre multicolore signifie normalement écrire votre propre CSS avec background-clip: text. C'est l'écart Titre du dégradé widget dans Modules complémentaires principaux pour Elementor remplit.
Avec ce widget, vous choisissez deux couleurs, choisissez un dégradé linéaire ou radial, et le texte se remplit avec ce dégradé, pas de code Vous obtenez également une ombre de texte en option et 13 modes de mélange qui contrôlent la façon dont le dégradé se mélange avec tout ce qui se trouve derrière. Ce guide couvre chaque paramètre, en utilisant le widget livré gratuitement avec Master Addons.
Voici le genre de texte dégradé que vous allez construire, un en-tête qui s'estompe d'une couleur à l'autre sur une image de fond :
Avant de commencer #
- Élémenteur installé et actif
- Modules complémentaires principaux pour Elementor installés et actifs (guide d'installation)
- Une page ou un modèle ouvert dans l'éditeur Elementor
Étape 1 : Ajoutez le widget de titre de dégradé #
Dans l'éditeur Elementor, recherchez dans le panneau du widget Titre du dégradé et faites-le glisser sur votre page Les widgets Master Addons portent le badge“MA”, ils sont donc faciles à repérer L'éditeur ouvre le Modifier le titre du dégradé panneau avec trois onglets : Contenu, Style et Avancé.
Étape 2 : Définissez le contenu de l'en-tête #
Sur le Contenu onglet, tapez votre titre dans le Titre champ. Le reste des champs ici sont les bases :
- URL de titre transforme tout le cap en lien.
- Alignement le définit à gauche, au centre ou à droite.
- Titre HTML Tag choisit la balise, H1 à H6. utilisez H1 pour le titre principal d'une page et H2 pour les titres de section afin que la page garde une structure propre.
Étape 3 : Choisissez les couleurs du dégradé #
Passer au Style onglet et ouvrez Style dégradé. Le dégradé se déroule entre deux couleurs :
- Couleur est la première couleur, avec un Emplacement curseur (un pourcentage) qui définit où il se trouve le long du texte.
- Deuxième Couleur est la couleur de fin, avec la sienne Emplacement curseur.
Définissez les deux couleurs sur votre palette de marque, puis poussez les curseurs Emplacement pour décider de la quantité de texte couverte par chaque couleur. L'aperçu se met à jour au fur et à mesure que vous faites glisser Il y a un séparé Normal et Survole tab aussi, pour que la pente puisse changer lorsque quelqu'un survole le cap.
Étape 4 : Choisissez le type de gradient, linéaire ou radial #
Le Type dropdown définit la forme du gradient Chaque option échange le contrôle supplémentaire qui apparaît en dessous :
- Radial étale les couleurs à partir d'un point central Choisissez un Position (comme Center Center) pour définir où se trouve ce point.
- Linéaire exécute les couleurs en ligne droite Définir le Angle pour contrôler la direction : 180 points le gradient vers le bas, 90 le fait passer.
Radial est bon pour une lueur du milieu du texte Linéaire est celui que la plupart des gens imaginent lorsqu'ils pensent “gradient texte,” un fondu propre de gauche à droite ou de haut en bas.
Étape 5 : Ajouter une ombre de texte (facultatif) #
Le Ombre de texte le contrôle ajoute de la profondeur derrière les lettres Cliquez sur le crayon pour définir la couleur de l'ombre, le flou et le décalage horizontal et vertical Une ombre douce aide le texte dégradé à rester lisible lorsqu'il se trouve sur une image d'arrière-plan occupée.
Étape 6 : Essayez les 13 modes de mélange #
Le Mode Mélange dropdown décide comment le texte dégradé se mélange avec tout ce qui se trouve derrière, comme une image d'arrière-plan ou une couleur Il y a 13 modes :
- Normal, Multiplier, Écran, Superposition
- Assombrir, éclaircir, esquiver les couleurs, saturation
- Couleur, Différence, Exclusion, Teinte, Luminosité
Normal garde le dégradé tel quel Le reste réagit à l'arrière-plan : Multipliez les assombrissements, Écran s'éclaircit, Différence peut inverser les couleurs pour un look saisissant Le moyen le plus rapide de choisir est de les feuilleter et de regarder l'aperçu, puisque le résultat dépend des couleurs derrière le texte.
Réglez le Typographie pour la police et la taille pendant que vous êtes ici, puis cliquez sur Publier (ou Mise à jour) pour enregistrer la page.
Où le texte dégradé fonctionne bien #
- Titres héros: où un titre dégradé se détache sur une photo ou une section sombre.
- Titres de section cela nécessite un peu plus de personnalité que du texte plat.
- Pages d'atterrissage faire correspondre le dégradé à la palette de couleurs d'une marque.
- Sur des images d'arrière-plan(en), où un mode de mélange lie le texte à la scène.
Foire aux questions #
Pouvez-vous ajouter une couleur dégradée au texte dans Elementor ?
Pas avec le widget Heading par défaut, qui ne prend qu'une couleur unie Le widget Master Addons Gradient Headline l'ajoute : choisissez deux couleurs, choisissez linéaire ou radiale, et le texte se remplit avec le dégradé, aucun CSS personnalisé n'est nécessaire.
Comment puis-je créer du texte dégradé dans Elementor sans CSS ?
Ajoutez le widget Master Addons Gradient Headline, tapez votre titre, puis ouvrez l'onglet Style et définissez la première couleur et la deuxième couleur Choisissez Linéaire ou Radial sous Type, et le dégradé s'applique au texte automatiquement.
Quelle est la différence entre le texte à gradient linéaire et radial ?
Un dégradé linéaire fait passer les couleurs en ligne droite, réglé par un angle Un dégradé radial les étale à partir d'un point central que vous choisissez avec le contrôle Position Le linéaire convient aux évanouissements de gauche à droite ; radial convient à une lueur du milieu.
Que font les modes de mélange ?
Les modes de mixage contrôlent la façon dont le texte dégradé se mélange à l'arrière-plan derrière lui Les 13 options vont de Normal (pas de mixage) à Multiplier, Écran, Superposition, Différence, et plus L'effet dépend des couleurs derrière le texte, donc prévisualisez chacune.
Ai-je besoin d'Elementor Pro pour le texte dégradé ?
Non. Le widget Gradient Headline fonctionne avec la version gratuite d'Elementor, de sorte que les modes dégradé de couleurs, de types, d'ombre de texte et de mélange fonctionnent tous sans Elementor Pro.
