Sélectionner

Le Sélectionnez champ met une liste déroulante native dans le panneau d'options de votre widget Vous définissez un ensemble fixe de choix, l'utilisateur en choisit un, et votre modèle réagit au choix : une classe de mise en page différente, un bloc de balisage différent, une valeur CSS différente à l'intérieur des modules complémentaires principaux Constructeur de widgets[traduction], le Select est le cheval de bataille de tout ce qui comporte une poignée de variantes nommées Styles de mise en page, effets de survol, ordres de tri, ce genre de décision.

Les valeurs de l'option de sélection sont le carburant naturel pour Conditions: d'autres contrôles peuvent apparaître uniquement lorsqu'une option spécifique est choisie. Les mêmes valeurs fonctionnent dans le Moteur de modèles de syntaxe Twig avec des chèques comme {% if layout == "card" %}1, donc une liste déroulante peut changer à la fois le panneau et le balisage.

Un détail façonne chaque motif de ce doc. La valeur que reçoit votre modèle est la clé de l'option, une courte limace que vous choisissez, et non l'étiquette lisible par l'homme que l'utilisateur voit Les clés entrent dans les noms de classe et les comparaisons ; les étiquettes restent dans le panneau.

Ce que fait le champ Sélectionner #

• Rend une baisse standard dans le panneau Élémenteur, les mêmes widgets natifs de noyau de sélection sont utilisés.
• Détient une valeur d'un ensemble fixe vous définissez comme des paires de clés et d'étiquettes.
• Alimente votre modèle avec la clé sélectionnée, prêt pour les classes modificatrices ou {% if %} blocs.
• Conduits Conditions sur d'autres contrôles« , donc choisir “Boxed” peut révéler un champ de couleur de bordure que “Minimal” cache. ».
• Prend en charge un drapeau réactif: permettant à l'utilisateur de choisir une option différente par appareil.

Si vous débutez dans la création de widgets, commencez par le Aperçu du constructeur de widgets d'abord.

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 un widget de table de tarification avec une liste déroulante de style “Layout offrant des variantes Boxed, Minimal et Outlined.

Comment ajouter un champ Sélectionner #

Ouvrez votre widget dans l'éditeur Widget Builder et regardez à travers le panneau des champs à gauche. Sélectionner s'assoit avec les autres champs de choix.

Faites-le glisser dans une section sous le Contenu ou Style onglet. Un commutateur de mise en page comme le nôtre appartient à Style ; un choix lié au contenu, comme un ordre de tri, convient au Contenu Une fois qu'il atterrit, les options du champ s'ouvrent sur la gauche.

Sélectionnez les options de champ expliquées #

• Étiquette: le texte affiché à côté de la liste déroulante dans Elementor, par exemple“Layout Style”.
• Nom: l'identifiant unique pour le champ, les lettres, les chiffres et les soulignements uniquement Votre modèle fait référence à ce nom, par exemple layout_style.
• Options: les choix eux-mêmes, chacun une clé plus une étiquette La clé est ce que votre modèle reçoit ; l'étiquette est ce que l'utilisateur lit Gardez les clés courtes et CSS-safe : boxed, minimal, outlined.
• Par défaut: la clé sélectionnée lorsque le widget tombe pour la première fois sur une page Réglez-la sur votre meilleure variante.
• Réactif: ajoute l'icône de l'appareil afin que le choix puisse différer par point d'arrêt.
• Description, Afficher l'étiquette, séparateur : les paramètres d'affichage standard, plus les conditions plus basses pour afficher le champ uniquement lorsqu'un autre contrôle a une certaine valeur.

Connectez le Select à votre modèle #

Le Select imprime sa valeur avec un jeton simple. Cette valeur est toujours la clé« Jamais l'étiquette. Deux motifs couvrent presque toutes les utilisations ».

Classe de modificateur. Imprimez la touche directement dans un attribut de classe et laissez votre onglet CSS faire le reste :

<div class="pricing layout--{{ layout_style }}">
  ...
</div>

Picking “Boxed” rend layout--boxedet une règle comme .layout--boxed { border: 1px solid #e2e2e2; } prend le relais Trois variantes deviennent trois blocs courts CSS Le HTML ne se branche jamais.

Balisage conditionnel. Lorsque les variantes nécessitent du HTML différent, et pas seulement des styles différents, comparez-les à la clé :

{% if layout_style == 'boxed' %}
  <div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
  <div class="pricing-outline"> ... </div>
{% else %}
  <div class="pricing-plain"> ... </div>
{% endif %}

Attention à une chose ici : la comparaison doit utiliser la clé. {% if layout_style == 'boxed' %} fonctionne, tandis que {% if layout_style == 'Boxed Layout' %} silencieusement ne correspond jamais, et vous n'obtenez aucun avertissement à ce sujet Si un conditionnel refuse de tirer, vérifiez l'orthographe de la clé avant de soupçonner autre chose.

Utilisez le contrôle Sélectionner dans Elementor #

Déposez votre widget personnalisé sur une page dans Elementor Si la page était déjà ouverte avant que vous n'ayez enregistré le widget, rechargez d'abord l'éditeur, puisque Elementor conserve l'ancienne configuration de contrôle jusqu'à ce que vous le fassiez Sélectionnez le widget et le dépôt apparaît dans son panneau sous l'étiquette que vous avez définie, avec l'option par défaut présélectionnée.

Choisissez immédiatement une option différente et les mises à jour d'aperçu. La classe de modificateur change, votre variante CSS entre en jeu et toutes les commandes conditionnées à ce champ apparaissent ou disparaissent pour correspondre.

Cas d'utilisation courants #

• Variantes de mise en page tels que les styles de cartes encadrés, minimaux et décrits à partir d'un seul widget.
• Préréglages de vol stationnaire et d'animation où chaque clé correspond à une classe CSS avec sa propre transition.
• Trier et commander des choix pour les widgets de type liste, les plus récents en premier ou alphabétiques.
• En-tête des sélecteurs d'étiquettes cela échange un h2 contre un h3 via un bloc conditionnel.
• Conditionneurs cela affiche ou cache des groupes entiers d'autres champs en fonction de la clé sélectionnée.

Conseils pour travailler avec le champ Sélectionner #

• Les clés sont pour le code, les étiquettes sont pour les gens. Utilisez des limaces comme boxed comme clés et enregistrer la formulation amicale pour l'étiquette.
• Conservez les clés CSS-safe. Les lettres minuscules, les chiffres et les traits d'union ou les traits de soulignement s'impriment proprement dans les noms de classe.
• Comparez contre la clé, jamais l'étiquette. C'est la raison la plus courante pour laquelle un conditionnel Select ne correspond jamais.
• Préférez les classes de modificateurs aux conditions quand seul le style change Le modèle reste un bloc et les variantes vivent en CSS.
• Utilisez le Sélectionner pour piloter Conditions. Avec le Switcher, c'est le contrôle habituel pour révéler ou cacher d'autres champs.
• Définissez un défaut raisonnable le widget semble donc intentionnel dès qu’il est abandonné.

Foire aux questions #

Envelopper #

Le champ Widget Builder Select transforme les variantes nommées en un choix en un clic Définissez les touches et les étiquettes, imprimez la touche dans une classe de modificateur ou un {% if %} bloquez, et chaque décision de mise en page se déplace dans le panneau Élémenteur Lorsque la liste devient longue ou qu'un choix ne suffit pas, passez au Champ SELECT2. Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.