Ombre de texte

Le champ Text Shadow ajoute le contrôle d'ombre de texte d'Elementor à un widget personnalisé construit avec les modules complémentaires principaux Constructeur de widgets. Les éditeurs obtiennent une couleur, un paramètre de flou et deux décalages, et l'ombre est appliquée au texte vers lequel pointe votre sélecteur CSS. Utilisez-le lorsqu'un en-tête doit rester lisible au-dessus d'une photo.

Text Shadow est un champ Pro. Le plugin gratuit comprend un Widget Builder limité et l'ensemble complet des champs est livré avec Maître Addons Pro.

Ce que fait le champ Text Shadow #

• Il ajoute un contrôle au panneau de votre widget dans Elementor : votre étiquette plus une icône en forme de crayon qui ouvre les paramètres de l'ombre.
• Ces paramètres sont Couleur (avec opacité), Flou, Horizontal et Vertical.
• Elementor écrit le text-shadow CSS à l'élément défini dans l'option Sélecteur du champ, afin que vous ne placez pas de jeton dans votre HTML ou CSS.

Si vous n'avez pas encore construit de widget, lisez le Aperçu du constructeur de widgets d'abord et revenez avec un widget ouvert.

Avant de commencer #

• WordPress avec Elementor installé et actif.
• Master Addons pour Elementor et Master Addons Pro, tous deux actifs. Le guide d'installation couverture configuration.
• Un widget s'ouvre dans le Widget Builder L'exemple de ce guide est un widget “Photo Banner” : une photo d'arrière-plan avec un cap H2 en haut qui a la classe banner-title, rempli à partir d'un champ Texte nommé banner_title.

Comment ajouter un champ Text Shadow #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Cliquez sur le Style onglet au-dessus de la zone des sections et ajouter une section si l'onglet est vide Donnez à la section un titre clair, tel que “Banner Title”.
3. Type shadow dans le champ champ de recherche à gauche Box Shadow et Text Shadow montent.
4. Glisser Ombre de texte dans la section Ses paramètres s'ouvrent dans la barre latérale gauche.

Vous pouvez également déposer le champ dans une section Contenu ou Avancé, et le contrôle apparaît ensuite dans cet onglet Élémenteur. Les éditeurs recherchent généralement des ombres sous Style, cependant.

Options du champ Shadow du texte expliquées #

• Étiquette est le texte à côté du contrôle dans Elementor. L'exemple utilise “Title Shadow”.
• Nom est l'ID unique du champ (lettres, chiffres et soulignements uniquement).Elementor enregistre les valeurs de l'éditeur sous ce nom, alors définissez-le une fois et laissez-le tranquille.
• Description est une note pour vous à l'intérieur du constructeur Elementor ne l'affiche pas sous ce contrôle.
• Valeur par défaut n'est pas utilisé par ce champ Une nouvelle ombre part toujours des propres valeurs par défaut d'Elementor, répertoriées plus bas.

Faites défiler vers le bas dans la barre latérale pour atteindre les paramètres communs et le sélecteur.

• Afficher l'étiquette cache ou montre l'étiquette dans le panneau.
• Séparateur dessine une ligne de séparation avant ou après la commande.
• Conditions afficher le contrôle uniquement lorsqu'un autre champ a une certaine valeur, par exemple un sélecteur “Show shadow” Voir Conditions.
• Sélecteur est le sélecteur CSS qui reçoit l'ombre Le champ ne fait rien d'utile sans lui, il a donc sa propre section ci-dessous.

Bloc d'étiquettes, Contrôle réactif, Support dynamique, Frontend Disponible et Classes de contrôle apparaissent également dans la liste Un contrôle d'ombre de texte ne les utilise pas, et les modifier n'a aucun effet sur ce champ.

Définissez le sélecteur #

Le Sélecteur indique à Elementor quel élément obtient l'ombre Pour l'en-tête de la bannière, entrez :

{{WRAPPER}} .banner-title

• {{WRAPPER}} est remplacé par la classe unique de ce widget sur la page, qui conserve l'ombre à l'intérieur de ce widget.
• .banner-title est la classe sur le titre dans le HTML de votre widget.

Le champ utilise votre sélecteur exactement comme tapé Sans {{WRAPPER}}: la règle devient .banner-title { text-shadow: ... } pour toute la page, et chaque élément avec cette classe la ramasse, y compris les titres dans d'autres widgets Si vous laissez le Sélecteur vide, l'ombre va à {{WRAPPER}} .elementor-widget-container(en), qui couvre tout le texte du widget.

Une commande peut styliser plusieurs éléments Séparez les sélecteurs par des virgules et démarrez chacun par {{WRAPPER}}, par exemple {{WRAPPER}} .banner-title, {{WRAPPER}} .banner-subtitle.

Le panneau Documentation à côté de l'éditeur de code répertorie a {{title_shadow}} jeton pour ce champ Laissez-le en dehors de votre HTML et CSS. Une ombre est stockée sous forme de chiffres et de couleur, de sorte que le jeton n'a pas de texte à imprimer et que le sélecteur gère déjà la sortie.

Cliquez Enregistrer Paramètres quand t'auras fini.

Utilisez le contrôle Text Shadow dans Elementor #

Ajouter le widget à une page, ou recharger l'éditeur si la page était déjà ouverte Sélectionnez le widget et ouvrez le Style onglet. Le contrôle se trouve dans la section que vous avez créée, montrant votre étiquette et une icône en forme de crayon.

Cliquez sur le crayon pour ouvrir la popover Cela active l'ombre avec les valeurs de départ d'Elementor : Flou 10, Horizontal 0, Vertical 0 et noir à 30 % d'opacité La toile se met à jour pendant que vous faites glisser les curseurs.

• Flou fonctionne de 0 à 100 px. À 0, vous obtenez une copie nette des lettres, et des valeurs plus élevées l'adoucissent en une lueur.
• Horizontal et Vertical courez de -100 à 100 px et déplacez l'ombre vers la gauche ou la droite et vers le haut ou vers le bas.

Cliquez sur l'échantillon de couleur pour choisir la couleur de l'ombre Le sélecteur a un curseur d'opacité et accepte les valeurs HEXA, RGBA ou HSLA, afin que vous puissiez saisir une valeur telle que rgba(0, 0, 0, 0.65) directement.

Pour supprimer l'ombre, cliquez sur la flèche circulaire de réinitialisation à côté du crayon.

Cas d'utilisation courants #

• Des titres sur des photos de héros et de bannières avec des zones lumineuses derrière le texte.
• Texte sur des arrière-plans vidéo, où une ombre douce maintient les mots lisibles à mesure que le cadre change.
• Type d'affichage rétro, tel qu'un décalage dur avec un flou nul sur de grands nombres ou des badges de vente.
• Une lueur sur fond sombre, réalisée avec une couleur d'ombre claire, un grand flou et aucun décalage.

Conseils pour travailler avec le champ Text Shadow #

• Commencez chaque sélecteur avec {{WRAPPER}}. Sinon, l'ombre peut s'infiltrer dans d'autres widgets de la page.
• Mettez le champ à côté d'un champ Typographie qui utilise le même sélecteur, de sorte que les paramètres de police et d'ombre de l'en-tête se trouvent dans une section.
• Choisissez une couleur semi-transparente. Le noir avec une opacité de 40 à 70 % semble naturel et le noir uni a tendance à paraître lourd.
• Vérifiez l'ombre contre l'image la plus brillante que le widget est susceptible d'obtenir Une ombre qui fonctionne sur une photo sombre peut disparaître sur une photo claire.
• Si le design a besoin d'une ombre avant que quiconque touche le contrôle, ajoutez un text-shadow règle pour .banner-title dans l'onglet CSS. La valeur du contrôle le remplace une fois qu'un éditeur en définit un.
• Pour les cartes, boutons et conteneurs, utilisez le Champ d'ombre de la boîte au lieu de cela. Text Shadow suit la forme des lettres.

Foire aux questions #

Envelopper #

Déposez le champ Text Shadow dans une section Style, donnez-lui une étiquette et un nom, et définissez le sélecteur sur {{WRAPPER}} plus la classe de votre texte Les éditeurs obtiennent alors des commandes de Couleur, de Flou et de décalage dans Elementor, et l'ombre reste à l'intérieur de ce widget Associez-le avec le Champ typographie pour le reste du style du titre, et vérifier tarification pour ce que chaque plan comprend.