Dimensions

Le champ Dimensions ajoute le contrôle d'espacement à quatre cases d'Elementor (en haut, à droite, en bas et à gauche, avec une icône de lien et un menu d'unité) à un widget personnalisé construit avec les modules complémentaires principaux Constructeur de widgets. Utilisez-le chaque fois que le rembourrage, la marge, la largeur de la bordure ou le rayon du coin doivent être définis à partir du panneau Élémenteur au lieu d'être fixés dans votre CSS.

Dimensions 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 Dimensions #

• Il affiche quatre cases de numéro dans le panneau Élémenteur Avec l'icône de lien sur, taper dans une case remplit les quatre.
• Un menu d'unité permet aux éditeurs de basculer entre les unités que vous autorisez, telles que px, em et %.
• Vous pouvez masquer les côtés dont vous n'avez pas besoin Un champ de remplissage de boutons peut afficher uniquement la droite et la gauche.
• Elementor écrit le CSS pour vous via les lignes CSS Selectors du champ, y compris des valeurs distinctes par appareil lorsque le contrôle réactif est activé.

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 dans ce guide est un widget “Pricing Card” avec un price-card boîte et un price-btn champs de boutons et trois dimensions : rembourrage de cartes, rayon de carte et rembourrage de boutons.

Comment ajouter un champ Dimensions #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Cliquez sur le Style tab et ajouter une section, par exemple“Card Spacing”.
3. Type dimensions dans le champ champ rechercher box à gauche.
4. Glisser Dimensions dans la section Ses paramètres s'ouvrent dans la barre latérale gauche.

Options de champ Dimensions expliquées #

Voici le champ Card Padding :

• Étiquette est le texte au-dessus des cases dans Elementor, par exemple “Card Padding”.
• Nom est l'ID unique du champ Lettres, chiffres et soulignements seulement.
• Description apparaît sous le contrôle dans Elementor.
• Dimensions autorisées a quatre boutons fléchés pour le haut, la droite, le bas et la gauche Cliquez sur une flèche pour désactiver ce côté Dans Elementor, un côté qui est désactivé apparaît comme une boîte grise qui ne peut pas être modifiée.
• Type de propriété offre la coutume, la marge, le rembourrage, la largeur de la bordure et le rayon de bordure Choisissez-en un et le constructeur remplit une ligne de sélection CSS pour cette propriété (plus d'informations à ce sujet ci-dessous).Finder Width ajoute également border-style: solid.
• Taille Unités listes que les éditeurs d'unités peuvent choisir Un nouveau champ permet px, %, em, rem, vh et vw. Supprimez ceux qui n'ont pas de sens pour votre conception.
• Valeur par défaut a quatre cases pour les valeurs de départ haut, droite, bas et gauche.

Le champ de remplissage de boutons n'a besoin que de gauche et de droite, donc les flèches supérieure et inférieure sont désactivées :

Plus bas, Contrôle réactif ajoute l'icône de l'appareil afin que le bureau, la tablette et le mobile puissent avoir des valeurs différentes Afficher l'étiquette, le séparateur et les conditions fonctionnent comme ils le font sur d'autres champs.

Connectez le champ avec les sélecteurs CSS #

Chaque Sélecteurs CSS la rangée a un Sélecteur CSS (quel élément à style) et Propriétés CSS (la règle à écrire).Lorsque vous choisissez Padding comme type de propriété, la ligne commence comme ceci :

CSS Selector:   {{WRAPPER}}
CSS Properties: padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};

{{WRAPPER}} à lui seul signifie l'ensemble du widget Changez-le en l'élément que vous voulez, tel que .price-card. Vous pouvez partir {{WRAPPER}} dehors, car le constructeur l'ajoute devant votre sélecteur afin que la règle reste à l'intérieur de ce widget.

Dans Propriétés CSS, {{TOP}}, {{RIGHT}}, {{BOTTOM}} et {{LEFT}} sont remplacés par les numéros des quatre cases, et {{UNIT}} avec l'unité choisie Avec le Type de Propriété défini sur Personnalisé, vous écrivez la règle vous-même Le champ Rembourrage de boutons utilise seulement deux côtés :

CSS Selector:   .price-btn
CSS Properties: padding-right: {{RIGHT}}{{UNIT}}; padding-left: {{LEFT}}{{UNIT}};

Cliquez Ajouter un élément d'appliquer la même valeur à un autre élément avec une deuxième rangée.

Deux choses à savoir Le single Sélecteur la case située en bas des paramètres courants ne fait rien pour un champ Dimensions, alors utilisez toujours les lignes CSS Selectors. Et le choix d'un type de propriété remplit la case Propriétés CSS pour vous, alors choisissez-le d'abord et cochez à nouveau les lignes si vous le changez plus tard.

Utilisez plutôt les valeurs de votre modèle #

Vous pouvez également imprimer les valeurs directement dans l'onglet HTML ou CSS Le champ est valable top, right, bottom, left et unit(, donc écrivez chaque côté suivi de l'unité) :

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

Un nu {{ card_padding }} n'imprime rien Pour la plupart des widgets, les lignes des sélecteurs CSS constituent le meilleur choix, car Elementor écrit une règle distincte pour chaque appareil lorsque le contrôle réactif est activé.

Cliquez Enregistrer Paramètres quand t'auras fini.

Utilisez le contrôle Dimensions 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. Chaque champ Dimensions affiche quatre cases étiquetées Haut, Droite, Bas et Gauche, l'icône de lien et un menu d'unité dans le coin supérieur droit. Le remplissage du bouton affiche le haut et le bas grisés.

Tapez un numéro et la carte se met à jour immédiatement Cliquez sur l'icône de lien pour dissocier les côtés et donner à chacun sa propre valeur, comme le fait Card Padding ici avec 64 en haut et en bas et 56 sur les côtés Utilisez le menu de l'unité pour basculer entre les unités que vous avez autorisées.

Cas d'utilisation courants #

• Rembourrage intérieur pour cartes, boîtes et bannières.
• Marges entre les parties d'un widget, comme l'espace sous un titre.
• Rayon de coin sur les cartes, les images et les boutons, en utilisant le type de propriété Border Radius.
• Rembourrage des boutons gauche et droit, avec les côtés supérieur et inférieur désactivés.
• Largeurs de bordure par côté, en utilisant le type de propriété Border Width.

Conseils pour travailler avec le champ Dimensions #

• Changez toujours le sélecteur CSS {{WRAPPER}} a votre élément. Laissé tel quel, l'espacement s'applique à l'ensemble de l'emballage du widget.
• Trim Size Units à ceux que vous souhaitez que les éditeurs utilisent. px et em couvrent la plupart des espacements.
• Désactivez les côtés qui ne s'appliquent pas Cela empêche les éditeurs de définir des valeurs qui n'ont aucun effet.
• Définissez une valeur par défaut qui correspond à votre conception, afin que le widget soit bien visible dès son ajout.
• Faites attention avec % pour le remplissage et la marge Les navigateurs calculent le remplissage en pourcentage à partir de la largeur de l'élément, même pour le haut et le bas.
• Pour une valeur unique telle qu'un écart ou une taille d'icône, le Champ de curseur est plus simple.

Foire aux questions #

Envelopper #

Choisissez un type de propriété, pointez la ligne des sélecteurs CSS sur votre élément, coupez les unités et les côtés et définissez une valeur par défaut raisonnable. Les éditeurs obtiennent ensuite le même contrôle d'espacement qu'ils connaissent dans les propres widgets d'Elementor. Pour le reste du style de la boîte, voir le Frontière et Contexte champs, et vérifiez tarification pour ce que chaque plan comprend.