Ombre de texte

Le Champ d'ombre du texte ajoute le contrôle d'ombre de texte d'Elementor à votre widget personnalisé : décalage horizontal et vertical, flou, et une couleur avec opacité, appliquée à n'importe quel texte que pointe votre sélecteur à l'intérieur des modules complémentaires principaux Constructeur de widgets(en), c'est le moyen le plus rapide de permettre aux éditeurs de garder un titre lisible sur une photo occupée ou de donner au type d'affichage un effet subtil.

Comme chaque contrôle Widget Builder, Text Shadow prend en charge Conditions(à portée de main pour le révéler uniquement lorsqu'une option fantôme est activée, et la sortie du jeton dans le constructeur s'exécute via le Moteur de modèles de syntaxe Twig. Les deux guides couvrent la configuration et les limitations.

Text Shadow est un contrôle de groupe, le plus petit de la famille qui inclut la Typographie et l'Arrière-plan Le câblage est identique : pas de jeton dans votre CSS, juste une option Selector qui indique à Elementor quel élément styliser.

Ce que fait le champ Text Shadow #

• Rend le contrôle du groupe d'ombres textuelles de l'élémenteur(en anglais), ouvert à partir de l'icône du crayon à côté de l'étiquette du champ.
• Décalages horizontaux et verticaux placez l'ombre autour des glyphes.
• Flou adoucit le, d'un bord dur en double à une large lueur.
• Couleur comprend un canal alpha pour des ombres réalistes et à faible opacité.
• Écrit le CSS lui-même au sélecteur que vous fournissez ; il n'y a pas de jeton de modèle.

Jamais construit de widget avant ? commencer par le Aperçu du constructeur de widgets et revenez une fois que vous en avez un ouvert.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
• Un widget personnalisé s'ouvre dans l'éditeur Widget Builder Notre exemple est un widget de bannière photo avec un <h2 class="banner-title"> cap assis sur l'image.

Comment ajouter un champ Text Shadow #

Dans l'éditeur Widget Builder, faites défiler le panneau des champs sur la gauche jusqu'à ce que vous trouviez le Ombre de texte field, répertorié avec les autres champs de groupe de style tels que Typographie et Box Shadow.

Faites-le glisser dans une section sous le Style onglet, généralement juste à côté du champ Typographie qui stylise le même texte Une fois qu'il atterrit, les options du champ s'ouvrent sur la gauche.

Options du champ Shadow du texte expliquées #

• Étiquette: le texte affiché à côté du contrôle dans Elementor, par exemple “Title Shadow”.
• Nom: l'identifiant unique du champ, des lettres, des chiffres et des soulignements uniquement.
• Sélecteur: le sélecteur CSS auquel s'applique l'ombre C'est la connexion elle-même, couverte ensuite.
• Exclure: supprime les sous-contrôles individuels du groupe lorsque vous souhaitez une fenêtre contextuelle réduite.
• Description, Afficher l'étiquette, le séparateur et les conditions sont les options d'affichage standard que vous avez vues sur d'autres champs.

Pointez le champ sur votre sélecteur #

Comme les autres contrôles de groupe, le champ Text Shadow n'a pas {{shortcode}} pour votre CSS. L'ombre regroupe les décalages, le flou et la couleur en une seule propriété, donc un {{ token }} pour le terrain imprime rien d'utile Le Sélecteur l'option transporte toute la connexion.

Pour l'en-tête de bannière, le sélecteur est le suivant

{{WRAPPER}} .banner-title

• {{WRAPPER}} signifie le propre conteneur du widget, en gardant l'ombre à l'intérieur de ce widget Les commandes de groupe appliquent le sélecteur tel qu'écrit, donc {{WRAPPER}} est-ce à vous de taper ; il n'est pas ajouté pour vous.
• .banner-title est l'élément texte à l'intérieur de votre widget HTML.

Attention : sauter {{WRAPPER}} et le sélecteur stylise tous les .banner-title sur toute la page, y compris ceux des autres widgets La configuration reflète le Champ typographie exactement, donc un sélecteur qui fonctionne là fonctionne ici.

Si la conception nécessite une ombre par défaut, conservez-la dans l'onglet CSS du widget en guise de solution de secours Le contrôle la remplace une fois qu'un éditeur définit les valeurs.

Utilisez le contrôle Text Shadow dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, ou rechargez l'éditeur s'il était déjà ouvert Le contrôle montre votre étiquette et une icône de crayon qui ouvre la fenêtre contextuelle de l'ombre.

Choisissez une couleur, puis ajustez Blur et les deux décalages Une ombre sombre à faible opacité avec quelques pixels de flou garde un titre lisible sur la photographie ; des décalages plus grands avec un flou nul produisent un effet d'affichage rétro. L'aperçu met à jour à chaque changement. Réglez le résultat sur la photo la plus claire que le site est susceptible d'utiliser, pas seulement sur l'image de démonstration, car une ombre inscrite sur un fond sombre peut disparaître complètement sur une photo lumineuse.

Cas d'utilisation courants #

• Caps sur les photos dans les widgets de héros et de bannières, où l'ombre achète du contraste.
• Texte sur fonds vidéo(qui changent constamment et nécessitent un avantage supplémentaire).
• Effets de type affichage comme les ombres décalées dures sur les grands chiffres.
• Texte léger sur imagerie lumineuse(en), où un halo sombre et doux garde les légendes lisibles.
• Badges et étiquettes assis sur des pentes ou des zones à motifs.

Conseils pour travailler avec le champ Text Shadow #

• L'option Selector est toute la connexion. Aucun jeton n'existe pour les contrôles de groupe, donc rien ne va dans l'onglet CSS pour ce champ.
• Toujours démarrer le sélecteur avec {{WRAPPER}}. Il est utilisé brut, et sans lui, l'ombre atteint tous les éléments correspondants de la page.
• Associez-le à un champ Typographie sur le même sélecteur. Les décisions de police et d'ombre pour un titre s'assoient ensuite ensemble dans le panneau.
• Privilégier les couleurs à faible opacité. Les ombres construites à partir du canal alpha de la couleur sont intégrées au design ; le noir uni le fait rarement.
• Utiliser Exclure pour simplifier. Si un widget n'a besoin que de flou et de couleur, couper le groupe maintient la popover petite.
• Expédiez un repli dans l'onglet CSS lorsque la conception par défaut dépend de l'ombre qui s'y trouve.

Foire aux questions #

Envelopper #

Le champ Widget Builder Text Shadow est un petit contrôle qui résout un problème récurrent : un texte qui doit rester lisible quelle que soit l'image qu'un éditeur laisse tomber derrière lui Nommez le champ, définissez le sélecteur sur {{WRAPPER}} plus la classe du texte, et l'ombre vit dans le panneau dès lors Il partage son modèle de sélecteur avec le Champ typographie, qui appartient habituellement sur le même titre de toute façon Explorez le reste de la Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.