Le Champ d'ombre de la boîte met le contrôle d'ombre standard d'Elementor dans le panneau de votre widget personnalisé : décalage horizontal et vertical, flou, étalement, couleur avec opacité, et une bascule en médaillon à l'intérieur des addons maîtres Constructeur de widgets(en), c'est le champ qui permet aux éditeurs de soulever une carte de la page, d'adoucir un bouton ou d'interrompre une entrée sans toucher à la feuille de style.
Le contrôle Box Shadow prend en charge Conditions(en), une façon claire de l'afficher uniquement lorsqu'une bascule d'ombre est activée, et la sortie du jeton sur le constructeur est gérée par le Moteur de modèles de syntaxe Twig. Les deux guides couvrent la configuration et les limitations.
Box Shadow est un contrôle de groupe, la même famille que Typography et Background La connexion à votre widget est un sélecteur CSS, pas un jeton : vous indiquez au champ quel élément il stylise, et Elementor y écrit l'ombre tout seul.
Ce que fait le champ Box Shadow #
- Rend le contrôle du groupe fantôme de boîte d'Elementor(en anglais), ouvert à partir de l'icône du crayon à côté de l'étiquette du champ.
- Décalages horizontaux et verticaux positionnez l'ombre autour de l'élément.
- Flou et propagation contrôler la douceur et la portée.
- Couleur comprend un canal alpha, d'où provient la plupart des qualités d'ombre.
- Basculer de position bascule entre une ombre extérieure et un encart.
- Écrit le CSS lui-même au sélecteur que vous fournissez ; aucun jeton de modèle n'existe.
Si vous êtes nouveau dans la construction de widgets, le Aperçu du constructeur de widgets est l'endroit pour commencer.
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é ouvert dans l'éditeur Widget Builder Notre exemple est un widget de témoignage dont
<article class="quote-card">devrait porter une ombre contrôlée par l'éditeur.
Comment ajouter un champ Box Shadow #
Dans l'éditeur Widget Builder, faites défiler le panneau des champs sur la gauche jusqu'à ce que vous trouviez le Ombre de boîte champ, répertorié avec les autres champs de groupe de style tels que l'arrière-plan et l'ombre de texte.
Faites-le glisser dans une section sous le Style onglet, généralement à côté des champs Border et Dimensions dans une section de style de carte Une fois qu'il atterrit, les options du champ s'ouvrent sur la gauche.
Boîte Options du champ Shadow expliquées #
- Étiquette: le texte affiché à côté du contrôle dans Elementor, par exemple “Card 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.
- Options des champs : remplace les sous-contrôles à l'intérieur du groupe, comme la modification d'une valeur par défaut à partir de laquelle l'ombre commence.
- Description, Afficher l'étiquette, le séparateur et les conditions sont les options d'affichage habituelles.
Pointez le champ sur votre sélecteur #
Comme chaque contrôle de groupe, le champ Box Shadow n’a pas {{shortcode}} pour votre CSS. Une ombre est constituée de plusieurs valeurs regroupées en une seule propriété et a {{ token }} pour le terrain imprime rien d'utile Le Sélecteur l'option est toute la connexion.
Pour la carte de témoignage, le sélecteur est :
{{WRAPPER}} .quote-card
{{WRAPPER}}représente le propre conteneur du widget et maintient l'ombre portée sur ce widget Les commandes de groupe utilisent le sélecteur exactement au moment où vous l'écrivez, alors tapez{{WRAPPER}}vous-même..quote-cardest l'élément à l'intérieur de votre widget HTML sur lequel l'ombre atterrit.
Attention : un sélecteur sans {{WRAPPER}} correspond à chaque .quote-card sur la page, donc les paramètres d'ombre d'un widget les relookent tous Rien ne vous avertit ; les styles se propagent simplement.
Gardez une ombre de secours dans l'onglet CSS du widget si le design dépend d'un. C'est l'apparence de la première goutte, et les valeurs du contrôle prennent le relais une fois qu'un éditeur ouvre la fenêtre contextuelle.
Utilisez le contrôle Box Shadow dans Elementor #
Placez le widget sur une page dans Elementor, en rechargeant l'éditeur si la page était déjà ouverte Le contrôle montre votre étiquette avec une icône de crayon ; en cliquant dessus, vous ouvrez la fenêtre contextuelle fantôme.
Définissez d'abord la couleur, puis tirez Blur vers le haut et gardez les décalages petits pour l'apparence de la carte souple, ou poussez Vertical vers le haut avec zéro Blur pour une ombre graphique dure. Flip Position à insérer pour les champs et puits enfoncés L'aperçu suit chaque changement Une note de mise en page : les ombres ne prennent pas de place dans le flux, de sorte qu'un spread généreux peut saigner dans les sections au-dessus et en dessous sans rien bouger, ce qui vaut la peine de vérifier quand le widget se trouve entre des rangées serrées.
Cas d'utilisation courants #
- Cartes dans les widgets de témoignage, de tarification et d'équipe, où une ombre douce sépare la carte de la page.
- Boutons cela nécessite de la profondeur sur l’état par défaut.
- Cadres d'image1, donnant aux photos un bord soulevé, semblable à une impression.
- Barres et panneaux collants où une ombre signale une élévation au-dessus du contenu.
- Champs de formulaire d'insertion(en), en utilisant la bascule en médaillon pour un look encastré.
Conseils pour travailler avec le champ Box Shadow #
- L'option Selector est toute la connexion. Il n'y a pas de jeton d'ombre de boîte pour l'onglet CSS ; en attendre un est l’impasse la plus courante avec les contrôles de groupe.
- Toujours démarrer le sélecteur avec
{{WRAPPER}}. Le champ l'utilise brut et le laisser éteint renverse l'ombre sur chaque élément correspondant de la page. - Regroupez-le avec Border et Dimensions. Les trois champs forment ensemble une section complète de style de carte dans le panneau.
- Penchez-vous sur la couleur alpha, pas sur l'obscurité. Une ombre noire à 10 à 15 pour cent d'opacité se lit mieux qu'une ombre grise unie, et elle vaut une note dans la Description de votre champ.
- Gardez un repli dans le widget CSS. Si le design a besoin d'une ombre par défaut, expédiez-la dans la feuille de style et laissez le contrôle l'annuler.
Foire aux questions #
Qu'est-ce que le champ Box Shadow dans le Master Addons Widget Builder ?
Il ajoute le contrôle du groupe d'ombres de la boîte d'Elementor à un widget personnalisé, couvrant les décalages, le flou, la propagation, la couleur et une bascule d'encart. Vous pointez le champ vers un sélecteur CSS tel que {{WRAPPER}} .quote-card« Et Elementor écrit l'ombre sur ce sélecteur ».
Où est le shortcode fantôme de la boîte pour l'onglet CSS ?
Il n'y en a pas Box Shadow est un contrôle de groupe, donc sa valeur n'imprime jamais via a {{token}}; un jeton pour il ne génère rien d'utile Remplissez l'option Selector à la place et le CSS est généré pour vous.
Pourquoi mon ombre apparaît-elle aussi sur d'autres widgets ?
Le sélecteur est manquant {{WRAPPER}}. Les contrôles de groupe appliquent le sélecteur exactement comme écrit, donc .quote-card seul stylise chaque match de la page Changez-le en {{WRAPPER}} .quote-card et économisez.
Puis-je faire une ombre intérieure ?
Oui. La bascule Position de la popover fait basculer l'ombre vers l'encastrer, ce qui la dessine à l'intérieur des bords de l'élément, le traitement habituel pour les entrées et les puits encastrés.
À quoi sert le paramètre Options des champs ?
Il remplace les sous-commandes individuelles à l'intérieur du groupe, donnant par exemple à l'ombre une valeur de départ prédéfinie afin que le contrôle s'ouvre avec une ombre utilisable au lieu d'une ombre vide.
Une ombre dans mon widget CSS entre-t-elle en conflit avec le contrôle ?
Non. L'ombre de la feuille de style est l'apparence par défaut, et la sortie du contrôle la remplace une fois qu'un éditeur définit les valeurs. En gardant une solution de secours, il existe la configuration recommandée.
Envelopper #
Le champ Widget Builder Box Shadow donne aux éditeurs un réel contrôle sur la profondeur : un champ, un sélecteur commençant par {{WRAPPER}}« , et toute la fenêtre d'ombre apparaît dans le panneau. Il fonctionne sur le même modèle de sélecteur que le » Champ typographie1, donc la configuration se déroule directement entre les commandes de groupe. Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.
