Dimensions

Le Champ de dimensions donne à un widget personnalisé le contrôle familier de l'espacement à quatre entrées de l'onglet Avancé d'Elementor : valeurs supérieure, droite, inférieure et gauche avec une icône de lien qui les maintient synchronisées à l'intérieur des modules complémentaires principaux Constructeur de widgets(en), c'est le champ que vous recherchez chaque fois que le remplissage, la marge ou un rayon de bordure par coin doit être modifiable à partir du panneau au lieu d'être codé en dur dans votre feuille de style.

Comme chaque contrôle Widget Builder, Dimensions prend en charge Conditions(, pour que vous puissiez révéler les options d'espacement uniquement lorsqu'elles s'appliquent. La sortie du jeton dans le constructeur traverse le Moteur de modèles de syntaxe Twig; les deux guides couvrent les détails et les limites.

La valeur qu'il stocke porte les quatre côtés plus l'unité, et votre panneau CSS imprime chaque pièce par son nom Obtenir cette orthographe juste est l'astuce entière, et il y a un comportement spécifique à ce champ qui vaut la peine d'être connu avant de le câbler : le champ Sélecteur simple du constructeur ne fait rien pour un contrôle Dimensions.

Ce que fait le champ Dimensions #

• Rend le contrôle à quatre entrées pour le haut, la droite, le bas et la gauche, avec l'icône de lien qui reflète une valeur de tous les côtés.
• Stocke chaque côté plus l'unité en une seule valeur, votre CSS lit avec la notation par points.
• Offre un sélecteur d'unités sur les unités que vous autorisez, telles que px, % et em.
• Peut limiter les côtés affichés grâce à l'option dimensions autorisées, jusqu'aux entrées horizontales uniquement ou verticales uniquement.
• Prend en charge les valeurs réactives ainsi chaque point d'arrêt garde son propre espacement.

Si vous n'avez pas construit de widget auparavant, le Aperçu du constructeur de widgets couvre les bases ; commencez par là.

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 carte de tarification dont .price-card box devrait permettre aux éditeurs de définir le remplissage interne.

Comment ajouter un champ Dimensions #

Ouvrez le panneau des champs à gauche de l'éditeur Widget Builder et trouvez le Dimensions champ, répertorié avec les autres champs de valeur CSS tels que Slider.

Faites-le glisser dans une section sous le Style tab, le domicile habituel pour les contrôles d'espacement Une fois qu'il atterrit, les options du champ s'ouvrent à gauche.

Options de champ Dimensions expliquées #

• Étiquette: le texte à côté du contrôle dans Elementor, par exemple “Card Padding”.
• Nom: l'identifiant unique auquel votre CSS fait référence, lettres, chiffres et soulignements uniquement, par exemple pad.
• Par défaut: la valeur de départ, en maintenant le haut, la droite, le bas, la gauche, l'unité et si les côtés commencent liés.
• Unités de taille : les unités entre lesquelles l'utilisateur peut basculer, telles que px, % et em.
• Dimensions autorisées : quelles entrées apparaissent. “All” affiche quatre côtés ; “horizontal” affiche uniquement à gauche et à droite ; “vertical” affiche uniquement en haut et en bas ; une liste personnalisée sélectionne des côtés spécifiques.
• Réactif: ajoute l'icône de l'appareil afin que le bureau, la tablette et le mobile conservent des valeurs distinctes.
• Description, Afficher l'étiquette, le séparateur et les conditions fonctionnent de la même manière ici que sur tous les autres champs.

Connectez la valeur Dimensions à votre CSS #

La valeur stockée est un tableau avec les clés top, right, bottom, left, unit, et isLinked. Dans le panneau CSS, épeler les quatre côtés et répéter l'unité après chacun :

.price-card {
  padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};
}

Avec 24 de chaque côté et px sélectionné, la règle donne padding: 24px 24px 24px 24px;. Dissocier les côtés dans le panneau et chaque jeton porte son propre numéro Le même motif couvre margin et, côte à côte par coin, border-radius. Une bizarrerie CSS à retenir si vous proposez % en tant qu'unité : le remplissage en pourcentage se résout par rapport à la largeur de l'élément, même pour le haut et le bas, et les éditeurs ne s'y attendront pas.

Attention : le champ Sélecteur du constructeur n'émet aucune propriété CSS par défaut pour un contrôle Dimensions, donc le remplir ne produit rien Écrivez les côtés dans le panneau CSS comme ci-dessus, ou définissez les entrées complètes des sélecteurs qui contiennent la propriété complète ; l'option Sélecteur simple n'est pas un raccourci pour ce champ.

Utilisez le contrôle Dimensions dans Elementor #

Déposez votre widget personnalisé sur une page dans Elementor, ou rechargez l'éditeur si la page était déjà ouverte ; les nouvelles commandes n'apparaissent jamais dans un onglet d'éditeur obsolète Le contrôle apparaît avec quatre entrées, le sélecteur d'unité et l'icône de lien dans son coin.

Tapez dans n'importe quelle entrée pendant que l'icône de lien est active et que les quatre côtés se mettent à jour ensemble Cliquez sur l'icône pour dissocier et chaque côté prend sa propre valeur, c'est ainsi que vous obtenez un remplissage asymétrique tel qu'un haut plus haut qu'un bas Avec Responsive on, l'icône de l'appareil stocke un espacement séparé par point d'arrêt.

Cas d'utilisation courants #

• Rembourrage de cartes et de boîtes(en), le contrôle d'espacement le plus courant dans les widgets personnalisés.
• Rubans de section et d'emballage ainsi, les éditeurs peuvent régler le rythme vertical entre les blocs.
• Rayon frontalier par coin: en utilisant les quatre valeurs comme coins au lieu de côtés.
• Rembourrage de boutons(, souvent avec des dimensions autorisées limitées à l'horizontale).
• Compensations médias(en), pousser une image ou un badge avec des valeurs de marge.

Conseils pour travailler avec le champ Dimensions #

• Épelez chaque côté et l'unité. La connexion du panneau CSS comprend quatre jetons plus quatre jetons unitaires ; un nu {{ pad }} imprime rien d'utilisable.
• Sauter le champ Sélecteur simple. Il n'émet aucune propriété pour Dimensions Le panneau CSS, ou une entrée complète des sélecteurs, est la route de travail.
• Limitez les côtés lorsque la propriété l'exige. Une commande uniquement horizontale maintient un champ de remplissage de boutons honnête.
• Définir une valeur par défaut liée. Commencer par des côtés égaux et liés donne aux éditeurs une base de référence saine et une entrée à laquelle réfléchir.
• Gardez l'espacement des bases dans votre feuille de style. Le widget doit regarder à droite dès la première goutte ; le contrôle s'ajuste ensuite à partir de là.
• Activer Responsive pour le remplissage et la marge. L'espacement des bureaux survit rarement au contact avec un écran de téléphone.

Foire aux questions #

Envelopper #

Le champ Dimensions du constructeur de widgets déplace les décisions de remplissage, de marge et de rayon hors de votre feuille de style et dans le panneau : une commande, quatre côtés, une unité, le tout imprimé par son nom dans l'onglet CSS. Utilisez-le à côté du Champ de curseur[traduction], qui couvre les longueurs à valeur unique pour lesquelles un contrôle à quatre faces serait exagéré Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.