Sélectionner

Le champ Sélectionner ajoute une liste déroulante à un widget personnalisé que vous construisez avec les modules complémentaires principaux Constructeur de widgets. Vous définissez une liste fixe de choix, l'éditeur en choisit un dans Elementor, et votre modèle change pour correspondre : une classe de mise en page différente, un badge supplémentaire, un bloc de balisage différent C'est le champ à utiliser pour les variantes nommées comme les styles de cartes, les types de badges ou les ordres de tri.

Select est l'un des champs que vous pouvez utiliser dans le Widget Builder de la version gratuite 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 Sélectionner #

• Ajoute une liste déroulante standard au panneau de votre widget dans Elementor.
• Permet à l'éditeur de choisir une option dans la liste que vous définissez.
• Enregistre l'option clé (par exemple outlined), pas l'étiquette que voit l'éditeur.
• Imprime cette clé partout où vous placez son jeton, comme {{ layout_style }}(, pour que vous puissiez l'utiliser comme classe ou le vérifier avec {% if %}.

Nouveau au constructeur ? lire le Aperçu du constructeur de widgets tout d'abord, revenez avec un widget ouvert.

Avant de commencer #

• WordPress avec Elementor installé et actif.
• Modules complémentaires principaux pour Elementor installés et actifs. Le guide d'installation couverture configuration.
• Un widget ouvert dans le Widget Builder L'exemple de ce guide est un widget “Plan Card” avec deux champs Select : layout_style (Encadré, Minimal, En contour) sur l'onglet Style et badge (Pas de badge, Les plus populaires, Nouveau) dans l'onglet Contenu.

Comment ajouter un champ Sélectionner #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Choisissez l'onglet auquel appartient le paramètre et ajoutez une section Un choix d'apparence comme le style de mise en page convient au Style tab, par exemple dans une section “Card Style”.
3. Type select dans la zone de recherche du champ à gauche Deux champs apparaissent : Sélectionner et Sélectionner2.
4. Glisser Sélectionner dans la section Cliquez sur le crayon sur le champ pour ouvrir ses paramètres.

Select détient un choix parmi une liste courte Si les éditeurs doivent rechercher une longue liste ou choisir plus d'une option, utilisez Sélectionner2 au lieu de cela, qui est un champ Pro.

Sélectionnez les options de champ expliquées #

• Étiquette: le texte à côté de la liste déroulante dans Elementor, par exemple “Layout Style”.
• Nom: l'identifiant unique du champ et le nom de son jeton Utilisez uniquement des lettres, des chiffres et des traits de soulignement, par exemple layout_style.
• Description: un indice affiché sous la liste déroulante dans Elementor.
• Options: une rangée par choix La case de gauche est la clé votre modèle reçoit, et la bonne case est la étiquette les éditeurs voient. Utilisez la croix rouge pour supprimer une ligne et le bouton plus pour en ajouter une.
• Valeur par défaut : l'option une nouvelle copie du widget commence par La liste déroulante affiche les étiquettes, mais le champ enregistre la clé.

Un nouveau champ Sélectionner est livré avec trois rangées d'échantillons value-1 à value-3 avec les étiquettes Option 1 à Option 3. remplacez-les par vos propres clés et étiquettes avant d'utiliser le widget.

Gardez les touches courtes, minuscules et sans espaces, tels que boxed ou most_popular. Ils se retrouvent dans les noms de classe et les comparaisons Si vous laissez Default Value vide, le widget démarre sur la première option de la liste.

Sous Paramètres communs, vous trouverez Afficher l'étiquette, Bloc d'étiquettes, Séparateur et Conditions(qui fonctionnent de la même manière que dans d’autres domaines).

Utilisez le choix dans votre modèle #

La carte Plan HTML utilise les deux champs Select de la manière la plus courante :

<div class="plan plan--{{ layout_style }}">
  {% if badge == 'popular' %}
  <span class="plan-badge">Most Popular</span>
  {% elseif badge == 'new' %}
  <span class="plan-badge plan-badge--new">New</span>
  {% endif %}
  <p class="plan-name">{{ plan_name }}</p>
  <p class="plan-price">{{ plan_price }}<span>/month</span></p>
  <a class="plan-button" href="#">Get started</a>
</div>

Classes modificatrices #

plan--{{ layout_style }} devient plan--boxed, plan--minimal ou plan--outlined. Chaque variante est alors une règle courte dans le panneau CSS, et le HTML reste le même :

.plan--boxed { background: #fff; box-shadow: 0 12px 32px rgba(29, 27, 76, .14); }
.plan--minimal { background: transparent; }
.plan--outlined { background: #fff; border: 2px solid #7c3aed; }

Marquage différent par option #

Lorsqu'une option nécessite un HTML différent, comparez la clé avec {% if %}. {% elseif %} et {% else %} travailler aussi Dans l'exemple, none ne correspond à aucun des deux chèques, donc aucun badge n'est imprimé.

Comparez toujours avec la clé. {% if badge == 'popular' %} matchs, tandis que {% if badge == 'Most Popular' %} ne le fait jamais et ne donne aucune erreur Si un chèque ne se déclenche jamais, regardez d'abord l'orthographe de la clé.

Sélecteur et contrôle réactif #

• Sélecteur écrit toujours color: {{VALUE}}; pour ce champ, et il n'y a pas de boîte pour changer la propriété Avec des clés comme boxed la règle ne fait rien Elle n'aide que lorsque vos touches sont des couleurs : dans nos tests, des touches telles que #7c3aed et #0ea5e9 avec un Sélecteur de .plan-price a coloré le prix Pour toute autre chose, laissez Selector vide et utilisez les classes.
• Contrôle réactif permet aux éditeurs de choisir une option différente par appareil. Ces choix par appareil n'atteignent la page que via la règle du sélecteur ci-dessus. Le jeton imprime le choix du bureau, alors laissez le contrôle réactif désactivé lorsque vous utilisez la valeur dans votre modèle.

Utilisez le contrôle Sélectionner dans Elementor #

Ajouter le widget à une page, ou recharger l'éditeur si la page était déjà ouverte Sélectionnez le widget et ouvrez l'onglet où vous avez placé le champ Le dropdown affiche vos étiquettes, avec l'option par défaut déjà sélectionnée Choisissez une autre option et les mises à jour de l'aperçu.

Voici la même carte Plan avec trois combinaisons de style de mise en page et de badge :

Cas d'utilisation courants #

• Variantes de style carte, bouton ou section.
• Badges ou rubans tels que Vente, Nouveau ou le Plus Populaire.
• Étiquette d'en-tête, rapport d'image ou choix de nombre de colonnes.
• Trier l'ordre ou la source de données pour un widget de liste.

Conseils pour travailler avec le champ Sélectionner #

• Décidez des touches avant que les éditeurs n'utilisent le widget. Vous pouvez renommer les étiquettes plus tard, mais changer une touche casse les pages qui ont déjà enregistré l'ancienne.
• Ajouter une option“none” lorsque l'élément est facultatif, comme le badge dans l'exemple.
• Définir une valeur par défaut cela semble bien en soi, donc un widget nouvellement ajouté est prêt à être utilisé.
• Seulement deux ou trois options avec des icônes claires ? Le Choisir champ les affiche sous forme de boutons au lieu d'une liste déroulante.
• Juste allumé ou éteint ? Utilisez le Champ de commutation.

Foire aux questions #

Envelopper #

Ajoutez un champ Sélectionner, remplacez les exemples de lignes par des touches courtes et des étiquettes claires, et définissez une valeur par défaut, puis imprimez la touche en tant que classe pour les variantes de style, ou vérifiez-la avec {% if %} lorsque le balisage change Pour les choix consultables ou multiples, voir Sélectionner2et vérifiez tarification pour ce que chaque plan comprend.