Le champ Slider ajoute le contrôle de plage glisser-définir d'Elementor à un widget personnalisé construit avec les modules complémentaires principaux Constructeur de widgets. Les éditeurs font glisser un handle ou tapent un numéro, choisissent une unité et la valeur entre dans votre CSS. Utilisez-le pour les espaces, les largeurs, les hauteurs, les tailles d'icônes, les tailles de police ou tout autre élément qui représente un numéro plus une unité.
Slider 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 Slider #
- Il affiche un curseur avec une boîte de numéro et un menu d'unité dans le panneau Élémenteur.
- Vous définissez le minimum, le maximum et le pas, plus une valeur de départ.
- La valeur est un nombre et une unité ensemble, tels que 24 et px.
- Vous le connectez à votre CSS avec une ligne CSS Selectors, ou vous l'imprimez dans l'onglet HTML ou CSS avec deux jetons.
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 “Team Grid” avec deux curseurs : Card Gap pour l'espace entre les cartes et Avatar Size pour les initiales rondes.
Comment ajouter un champ Slider #
- Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
- Cliquez sur le Style tab et ajouter une section, par exemple“Grid Layout”.
- Type
sliderdans le champ champ rechercher box à gauche. - Glisser Coulisseur dans la section Ses paramètres s'ouvrent dans la barre latérale gauche.
Options du champ de curseur expliquées #
- Étiquette est le texte au-dessus du curseur dans Elementor, par exemple “Card Gap”.
- Nom est l'ID unique du champ et le début de ses jetons, donc
card_gapdonne{{ card_gap.size }}. Lettres, chiffres et soulignements uniquement. - Description apparaît sous le curseur dans Elementor.
- Valeur Min, Valeur maximale et Étape définissez la plage et la distance parcourue par chaque mouvement de la poignée. Card Gap utilise 0 à 80 par pas de 2.
- Valeur par défaut est le numéro et l'unité de départ, définis avec son propre petit curseur et son menu d'unité.
Tapez les valeurs Min, Max et Step même si les cases affichent déjà 0, 100 et 1. les cases que vous ne touchez jamais ne sont pas enregistrées, et un curseur dont aucune n'est enregistrée revient aux plages d'Elementor : 0 à 1000 pour px, 0 à 100 pour % et 0 à 10 pour em et rem. Lorsque vous les définissez, la même plage est utilisée pour chaque unité, donc 0 à 80 s'applique à em ainsi qu'à px.
Il n'y a pas de paramètre pour quelles unités apparaissent Les éditeurs peuvent choisir px, %, em et rem. 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.
Connectez le curseur avec les sélecteurs CSS #
Faire défiler jusqu'à Sélecteurs CSS et cliquez Ajouter un élément. La nouvelle ligne est remplie d'un exemple (.text-1, .text-2 et color: {{VALUE}};), alors remplacez les deux cases :
CSS Selector: .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};
{{SIZE}} est remplacé par le numéro et {{UNIT}} avec l'unité choisie, donc 24 px devient gap: 24px;. Vous n'avez pas besoin {{WRAPPER}} dans le sélecteur car le constructeur l'ajoute pour vous Ajoutez plus de lignes pour utiliser la même valeur sur d'autres éléments.
Utilisez ces lignes plutôt que le simple Sélecteur case en bas de la barre latérale Cette case n'a pas de place pour une propriété CSS, elle ne peut donc pas écrire de règle de travail pour un curseur.
Utilisez plutôt la valeur de votre modèle #
Vous pouvez également imprimer la valeur dans l'onglet HTML ou CSS Écrivez la taille et l'unité sous forme de deux jetons l'un à côté de l'autre Le curseur Taille de l'Avatar définit ainsi la largeur et la hauteur de l'avatar
.team-avatar {
width: {{ avatar_size.size }}{{ avatar_size.unit }};
height: {{ avatar_size.size }}{{ avatar_size.unit }};
}
Un nu {{ avatar_size }} n'imprime rien Vous pouvez aussi comparer le nombre dans une condition, par exemple {% if card_gap.size >= 40 %}. Lorsque le contrôle réactif est activé, utilisez une ligne de sélection CSS, car Elementor écrit ensuite une règle distincte pour chaque appareil.
Cliquez Enregistrer Paramètres quand t'auras fini.
Utilisez le contrôle Slider 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 curseur affiche une poignée, une boîte numérique et une étiquette d'unité.
Faites glisser la poignée ou tapez un numéro, et le widget se met à jour immédiatement Cliquez sur l'étiquette de l'unité pour basculer entre px, %, em et rem.
Ici, l'écart est porté à 48px et les avatars à 96px :
Cas d'utilisation courants #
- Lacunes entre les cartes, les colonnes et les éléments de la liste.
- Largeur, largeur maximale ou hauteur d'une image, d'une carte ou d'une section.
- Tailles d'icônes, d'avatars et de badges.
- Taille de police ou hauteur de ligne pour un élément.
- Rayon de frontière ou largeur de frontière lorsque tous les côtés partagent une valeur.
Conseils pour travailler avec le champ Slider #
- Tapez toujours Min, Max et Step pour que le curseur ait une portée raisonnable.
- Choisissez une plage qui correspond à chaque unité que les éditeurs pourraient choisir. 0 à 80 convient parfaitement à px mais très grand pour em.
- Conservez une valeur de base pour la propriété dans l'onglet CSS, comme
gap: 24px;« , donc le widget regarde juste avant que quiconque ne touche le curseur ». - Remplacez le texte de l'exemple dans une nouvelle ligne de sélecteurs CSS. À gauche, la ligne cible les classes que votre widget n'a pas.
- Pour les valeurs à quatre côtés, telles que le remplissage ou la marge, utilisez le Champ de dimensions.
Foire aux questions #
Le champ Slider est-il libre ?
No. Slider est l'un des champs Pro du Widget Builder, Master Addons Pro doit donc être actif avant de pouvoir l'ajouter à un widget.
Pourquoi mon jeton de curseur n'imprime rien ?
Un curseur contient donc un nombre et une unité {{ field_name }} sur ses propres empreintes rien. Utiliser {{ field_name.size }}{{ field_name.unit }}.
Pourquoi le curseur monte-t-il jusqu'à 1000 ?
Min, Max et Step n'ont pas été enregistrés Tapez les valeurs dans les trois cases, même si elles affichent déjà 0, 100 et 1, puis enregistrez le widget.
Puis-je limiter le curseur à px uniquement ?
Pas dans le panneau de champ Les éditeurs peuvent choisir px, %, em ou rem. Choisissez une plage qui fonctionne pour les quatre, ou définissez une valeur par défaut raisonnable donc px est l'unité de départ.
Ai-je besoin de {{WRAPPER}} dans le sélecteur CSS ?
Non, ajoute le constructeur {{WRAPPER}} devant le sélecteur pour vous, donc .team-grid suffit.
Envelopper #
Ajoutez le champ Slider, tapez Min, Max et Step, définissez une valeur par défaut et connectez-la à une ligne CSS Selectors telle que gap: {{SIZE}}{{UNIT}};. Utiliser le .size et .unit jetons lorsque la valeur appartient à votre onglet HTML ou CSS. Pour les autres contrôles de dimensionnement, voir le Dimensions et Typographie champs, et vérifiez tarification pour ce que chaque plan comprend.
