Le champ Box Shadow ajoute le contrôle d'ombre de boîte d'Elementor à un widget personnalisé construit avec les modules complémentaires principaux Constructeur de widgets. Les éditeurs définissent la couleur, les décalages, le flou, l'étalement et la position à partir d'une petite fenêtre contextuelle, et l'ombre est appliquée à l'élément sur lequel pointe votre sélecteur CSS. C'est le champ pour soulever des cartes de la page, adoucir des boutons ou donner à un panneau un aspect enfoncé.
Box 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 Box Shadow #
- Il ajoute un contrôle à l'onglet Style de votre widget : votre étiquette et une icône en forme de crayon qui ouvre les paramètres de l'ombre.
- Les paramètres sont Couleur, Horizontal, Vertical, Flou, Spread et Position (Outline ou Inset).
- Elementor écrit le
box-shadowCSS à l'élément dans le Sélecteur, vous n'avez donc pas besoin d'un 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.
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 ouvert dans le Widget Builder L'exemple de ce guide est un widget “Testimonial Card” dont la carte a la classe
quote-card.
Comment ajouter un champ Box Shadow #
- Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
- Cliquez sur le Style tabuler et ajouter une section, par exemple“Card Style”.
- Type
shadowdans le champ champ de recherche à gauche Box Shadow et Text Shadow montent. - Glisser Ombre de boîte dans la section Ses paramètres s'ouvrent dans la barre latérale gauche.
Boîte Options du champ Shadow expliquées #
- Étiquette est le texte à côté du contrôle dans Elementor, par exemple “Card Shadow”.
- Nom est l'ID unique du champ Lettres, chiffres et soulignements seulement.
- Description est une note pour vous à l'intérieur du constructeur.
- Sélecteur, Type d'ombre par défaut, Valeurs d'ombre par défaut et Couleur d'ombre par défaut apparaissez sous la description Dans nos tests, les modifications saisies dans ces cases n'ont pas été enregistrées et le constructeur a enregistré une erreur, alors ne vous fiez pas à elles pour l'instant Définissez plutôt le sélecteur dans les paramètres communs (section suivante) et donnez à la carte une ombre de départ dans l'onglet CSS.
- Valeur par défaut n'est pas utilisé par ce champ.
Définissez le sélecteur #
Faites défiler vers le bas de la barre latérale et tapez la classe de l'élément dans le Sélecteur boîte sous Classes de contrôle. Pour la carte de témoignage :
.quote-card
Vous n'avez pas à taper {{WRAPPER}}. Le constructeur l'ajoute devant votre sélecteur, la règle devient donc {{WRAPPER}} .quote-card et n'affecte que ce widget Séparez plusieurs sélecteurs avec des virgules si une ombre doit s'appliquer à plus d'un élément Si le Sélecteur est vide, l'ombre va sur l'emballage extérieur du widget.
Après avoir enregistré, la case Sélecteur située en haut de la barre latérale affiche la même valeur.
Ajouter une ombre de secours #
Mettez l'ombre de départ dans l'onglet CSS Il s'affiche jusqu'à ce qu'un éditeur active le contrôle, et l'ombre du contrôle le remplace après cela :
.quote-card {
box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}
Cliquez Enregistrer Paramètres quand t'auras fini.
Utilisez le contrôle Box 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. Votre étiquette apparaît avec une icône en forme de crayon.
Cliquez sur le crayon pour ouvrir la fenêtre contextuelle Cela active l'ombre avec les valeurs de départ d'Elementor : Horizontal 0, Vertical 0, Blur 10, Spread 0 et noir à 50 % d'opacité Ajustez-les et la carte se met à jour pendant que vous faites glisser :
- Couleur définit la couleur de l'ombre et l'opacité Une couleur teintée et semi-transparente semble plus douce que le noir.
- Horizontal et Vertical déplacez l'ombre latéralement et vers le haut ou vers le bas.
- Flou adoucit le bord. 0 donne une ombre dure.
- Étaler fait croître ou rétrécit l'ombre Une petite valeur négative empêche un grand flou de se répandre sur les côtés.
- Position bascule entre Outline (en dehors de la boîte) et Inset (à l'intérieur de celle-ci).
Définir la position sur Encart pour un aspect enfoncé, utile pour les champs de saisie et les panneaux silencieux :
La flèche circulaire à côté du crayon réinitialise la commande et supprime l'ombre.
Cas d'utilisation courants #
- Cartes en widgets de témoignage, de tarification, d'équipe et de blog.
- Des boutons qui nécessitent un peu de profondeur, souvent associés à un style de vol stationnaire.
- Ombres décalées dures pour des motifs audacieux et plats.
- Enfilez des ombres sur les champs de saisie, les barres de recherche et les panneaux encastrés.
Conseils pour travailler avec le champ Box Shadow #
- Utilisez le sélecteur en bas de la barre latérale et tapez uniquement la classe.
{{WRAPPER}}est ajouté pour vous. - Gardez un repli
box-shadowdans l'onglet CSS pour que les nouveaux widgets ne soient pas plats. - Pour les ombres de cartes souples, essayez un grand flou, un décalage vertical d'environ la moitié du flou et un petit spread négatif.
- Donnez à l'élément un rayon de bordure Les ombres suivent les coins, donc les cartes arrondies obtiennent des ombres arrondies.
- Pour les ombres sur le texte, utilisez le Champ d'ombre du texte au lieu de cela.
Foire aux questions #
Le champ Box Shadow est-il gratuit ?
No. Box Shadow est l'un des champs Pro du Widget Builder, Master Addons Pro doit donc être actif avant de pouvoir l'ajouter à un widget.
Dois-je ajouter {{WRAPPER}} au sélecteur ?
Non, ajoute le constructeur {{WRAPPER}} devant le sélecteur Box Shadow pour vous, donc .quote-card suffit.
Pourquoi mon Type d'Ombre par défaut ou mes Valeurs d'Ombre par défaut ne sauvegardes ?
Dans nos tests, ces cases n'ont pas conservé leurs modifications. Définissez l'ombre de départ avec un box-shadow règle dans l'onglet CSS à la place Les éditeurs peuvent alors le modifier avec le contrôle.
Où est le jeton d'ombre de boîte pour mon CSS ?
Il n'y en a pas une à utiliser Une ombre est plusieurs valeurs dans une propriété CSS, alors Elementor écrit la règle au Sélecteur pour vous.
Quelle est la différence entre Box Shadow et Text Shadow ?
Box Shadow dessine autour de la boîte de l'élément et a Spread et Inset. Text Shadow suit les lettres du texte Utilisez Box Shadow pour les cartes et boutons, Text Shadow pour les titres.
Envelopper #
Ajoutez le champ Ombre de la boîte à une section Style, tapez la classe de votre élément dans le sélecteur en bas de la barre latérale et conservez une ombre de secours légère dans l'onglet CSS. Les éditeurs contrôlent ensuite l'ombre d'une fenêtre contextuelle. Pour le reste du style de la carte, voir le Frontière et Dimensions champs, et vérifiez tarification pour ce que chaque plan comprend.
