Coulisseur

Le Champ de curseur met un contrôle de plage glisser-définir dans le panneau de votre widget personnalisé, le même que celui qu'Elementor utilise pour les espaces, les largeurs et le rayon de bordure sur ses propres widgets À l'intérieur des modules complémentaires principaux Constructeur de widgets(en), vous définissez un minimum, un maximum, un pas, et les unités que l'utilisateur peut choisir parmi Celui qui modifie le widget dans Elementor fait alors glisser un handle au lieu de taper des valeurs CSS brutes.

Le champ Slider prend en charge Conditions comme tout contrôle, et puisque sa valeur est numérique, le Moteur de modèles de syntaxe Twig vous permet de vous y brancher avec des comparaisons comme {% if columns >= 3 %}. Les deux guides couvrent la configuration et les limitations.

La valeur qu'un Slider produit n'est pas un nombre simple C'est une paire : une taille et une unité Ce détail décide comment vous connectez le champ à votre feuille de style, donc ce doc y passe la plupart de son temps.

Ce que fait le champ Slider #

• Rend un curseur de portée avec une poignée dragable et une entrée numérique à côté, correspondant aux commandes du curseur natif d'Elementor.
• Offre un sélecteur d'unités lorsque vous autorisez plus d'une unité, le même contrôle peut donc fonctionner en px, % ou em.
• Stocke une taille et une unité ensemble comme une valeur, votre panneau CSS lit avec la notation par points.
• Prend en charge les valeurs réactives(en), permettant aux utilisateurs de définir une taille différente par appareil à partir de l'icône de l'appareil.
• Accepte les valeurs dynamiques et peut écrire CSS via le mécanisme de sélection d'Elementor comme alternative au panneau CSS.

Nouveau sur la construction de widgets ? Lire le Aperçu du constructeur de widgets d'abord ; ce doc suppose que vous avez déjà un widget ouvert dans l'éditeur.

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 une grille de cartes d'équipe dont .team-row le conteneur a besoin d'un espace réglable par l'utilisateur entre les cartes.

Comment ajouter un champ Slider #

Dans l'éditeur Widget Builder, faites défiler le panneau des champs sur la gauche jusqu'à ce que vous trouviez le Coulisseur champ, répertorié avec les autres champs de valeur CSS tels que Dimensions.

Faites-le glisser dans une section sous le Style tab, où les contrôles de dimensionnement sont généralement en ligne, bien que Content et Advanced fonctionnent également Une fois qu'il atterrit, les options du champ s'ouvrent sur la gauche.

Options du champ de curseur expliquées #

• Étiquette: le texte à côté du contrôle dans Elementor, par exemple “Card Gap”.
• Nom: l'identifiant unique auquel votre CSS fait référence, lettres, chiffres et soulignements uniquement, par exemple my_gap.
• Par défaut: la valeur de départ, stockée sous forme de taille plus une unité.
• Min, Max, Étape : la plage couverte par la poignée et la distance parcourue par chaque incrément de traînée. Un contrôle d’écart peut fonctionner de 0 à 100 par pas de 1.
• Unités de taille : les unités entre lesquelles l'utilisateur peut basculer, telles que px, % et em. Une unité masque le commutateur ; plusieurs le montrent.
• Réactif: ajoute l'icône de l'appareil afin que chaque point d'arrêt conserve sa propre valeur.
• Dynamique et Sélecteurs : prise en charge dynamique des balises et mécanisme de sélection d'Elementor couvert ci-dessous.
• Description, Afficher l'étiquette, le séparateur et les conditions sont les mêmes options d'affichage que chaque champ transporte.

Connectez le curseur à votre CSS #

La valeur d'un Slider est un tableau à deux touches : size et unit. Imprimer le nom du champ sur ses propres sorties rien, car il n'y a pas de valeur unique à imprimer Dans le panneau CSS, écrivez toujours les deux parties avec la notation par points :

.team-row {
  gap: {{ my_gap.size }}{{ my_gap.unit }};
}

Une valeur de 24 avec px rendus sélectionnés comme gap: 24px;. Changez le sélecteur d'unités en % et la même règle devient gap: 24%; sans toucher au gabarit.

Attention: {{ my_gap }} sur son propre imprime une chaîne vide Si votre règle rend comme gap: ; et la disposition ignore le contrôle, les disparus .size et .unit sont presque toujours pourquoi Le même silence suit un renom : changez le Nom du champ plus tard et les anciens jetons continuent de rendre, juste sans rien dedans, alors mettez à jour le panneau CSS dans la même séance.

L'alternative des sélecteurs #

Les curseurs fonctionnent également avec le mécanisme de sélection d'Elementor, qui écrit le CSS pour vous au lieu de passer par le panneau CSS. Pour un curseur, Elementor injecte une valeur nue plutôt qu'une déclaration complète, de sorte que le champ Sélecteur simple du constructeur ne produit pas à lui seul de règle utilisable. Une entrée de sélection de personnalisation doit transporter la propriété complète, en utilisant les propres espaces réservés d'Elementor :

'{{WRAPPER}} .team-row' => 'gap: {{SIZE}}{{UNIT}};'

Pour la plupart des widgets, le jeton du panneau CSS est l'itinéraire le plus simple ; atteignez les entrées des sélecteurs lorsque vous souhaitez qu'Elementor gère la sortie.

Utilisez le contrôle Slider dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor Si la page était déjà ouverte, rechargez l'éditeur en premier, puisqu'un onglet périmé continue d'afficher l'ancien panneau Le curseur apparaît dans le panneau du widget avec votre étiquette, le handle, l'entrée numérique, et le sélecteur d'unité si vous avez autorisé plus d'une unité.

Faites glisser la poignée ou tapez un numéro et l'aperçu suit immédiatement. Avec Responsive on, l'icône de l'appareil change le contrôle entre les valeurs du bureau, de la tablette et du mobile, de sorte qu'un espace de bureau de 40 px peut diminuer jusqu'à 16 px sur les téléphones à partir du même champ.

Cas d'utilisation courants #

• Écarts de grille et de flexion entre cartes, colonnes ou objets de galerie.
• Largeurs et hauteurs des éléments%, comme une taille d'image ou une longueur de diviseur, avec une option % pour les mises en page fluides.
• Rayon frontière sur les cartes et les boutons quand un rayon uniforme suffit.
• Dimensionnement des icônes et des polices où une unité em conserve les choses par rapport au texte environnant.
• Compensations d'espacement comme la distance entre un badge et le coin dans lequel il se trouve.

Conseils pour travailler avec le champ Slider #

• Imprimez toujours les deux parties. {{ my_gap.size }}{{ my_gap.unit }} est toute la connexion ; le nom du champ nu vous donne une chaîne vide.
• Faites correspondre Min, Max et Step à la propriété. Une plage de 0 100 par pas de 1 convient à un espace ; un contrôle de rayon peut n'avoir besoin que de 0050.
• Offrez uniquement les unités qui ont du sens. Un contrôle px uniquement est plus clair qu'un contrôle dans lequel % produit des mises en page cassées.
• Gardez un repli dans la structure du panneau CSS. Écrivez la règle pour que le widget soit toujours sainement exposé à la valeur par défaut dès la première goutte.
• Activer Responsive pour les valeurs de mise en page. Les espaces et les largeurs nécessitent presque toujours un réglage mobile plus serré.
• Préférez le jeton du panneau CSS sur le champ Sélecteur. Le champ Sélecteur simple injecte uniquement une valeur nue pour les curseurs, ce qui n'est pas une déclaration complète.

Foire aux questions #

Envelopper #

Le champ Widget Builder Slider transforme n'importe quelle longueur CSS de votre widget en un contrôle que l'éditeur peut faire glisser : nommez le champ, limitez la plage et imprimez {{ name.size }}{{ name.unit }} dans le panneau CSS. Il s'associe naturellement avec le Champ de dimensions lorsqu'un widget a besoin d'un espacement à quatre faces à côté de valeurs uniques Explorez le reste de la Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.