Choisir

Le champ Choisir ajoute une rangée de boutons d'icônes à un widget personnalisé que vous construisez avec les modules complémentaires principaux Constructeur de widgets. C'est le même genre de contrôle qu'utilise Elementor pour l'alignement de texte : quelques boutons, un actif à la fois Utilisez-le quand il n'y a que deux à quatre options et qu'une icône explique chacune plus vite qu'un mot.

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

• Ajoute une rangée de boutons d'icônes au panneau de votre widget dans Elementor, un bouton par option.
• Affiche le titre de chaque option sous forme d'info-bulle lorsqu'un éditeur passe un bouton au pas.
• Enregistre le clé de l'option choisie, telle que center[TRADUCTION], pas son titre.
• Imprime cette clé partout où vous placez son jeton, comme {{ align }}. L'approche habituelle consiste à en faire une classe CSS.

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 s'ouvre dans le Widget Builder L'exemple de ce guide est un widget “Callout Box” avec deux champs Choisir : align (gauche, centre, droite) et icon_position (en haut ou à gauche).

Comment ajouter un champ Choisir #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Ajouter une section sur le Contenu tab, par exemple “Callout” Les choix de mise en page s'adaptent également bien à l'onglet Style.
3. Type choose dans le champ champ rechercher box à gauche.
4. Glisser Choisir dans la section Cliquez sur le crayon sur le champ pour ouvrir ses paramètres.

Un nouveau champ Choisir n'est pas vide Il est livré avec trois options d'alignement (gauche, centre et droite) et Centre comme valeur par défaut, donc pour un simple contrôle d'alignement, vous devez seulement changer l'étiquette et le nom.

Choisissez les options de champ expliquées #

• Étiquette: le texte à côté des boutons dans Elementor, par exemple “Icon Position”.
• 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 icon_position.
• Description: un indice affiché sous les boutons dans Elementor.
• Désarmé : permet aux éditeurs de cliquer à nouveau sur le bouton actif pour effacer le choix Voir la note ci-dessous avant de vous y fier.
• Options: une ligne par bouton. Clé est la valeur que votre modèle obtient, Titre est l'infobulle, et Icône ouvre le sélecteur d'icônes 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 titres, mais le champ stocke la clé.

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).

Choisissez les icônes qui apparaissent dans Elementor #

Cliquer sur l'icône d'une option ouvre le sélecteur d'icônes Master Addons Ouvrez le Icônes Élémentaires tabulation et recherche, par exemple align(en), pour trouver les icônes d'alignement et de position.

Restez fidèle à cet onglet Le sélecteur répertorie également les icônes Ligne simple, Police emblématique, Linéaire et Matériel, mais dans nos tests, ces boutons sont apparus en blanc dans le panneau Élémenteur Seules les icônes Élémenteur affichées.

Clés, titres et Unset #

• Gardez les touches courtes, minuscules et sans espaces, tels que left ou top. Ils finissent dans les noms de classe.
• Vous pouvez renommer un titre à tout moment La modification d'une touche casse des pages qui ont déjà enregistré l'ancienne.
• Dans nos tests, cliquer sur le bouton actif a effacé la valeur même avec Désarmé définissez sur Non. Planifiez une valeur vide dans un sens ou dans l'autre, comme indiqué dans le modèle ci-dessous.

Utilisez le choix dans votre modèle #

Le jeton imprime la clé, donc la configuration la plus propre est une classe de modificateur Il s'agit de la Callout Box HTML :

<div class="callout{% if align %} callout--{{ align }}{% endif %}{% if icon_position %} callout--icon-{{ icon_position }}{% endif %}">
  {% if icon_position %}<span class="callout-icon">!</span>{% endif %}
  <div class="callout-body">
    <p class="callout-title">{{ callout_title }}</p>
    <p class="callout-text">{{ callout_text }}</p>
  </div>
</div>

Chaque {% if %} saute la classe lorsque la valeur est vide Pour Icon Position, une valeur vide masque également l'icône, c'est pourquoi ce champ a Unset on Le panneau CSS stylise ensuite chaque classe :

.callout--left { text-align: left; }
.callout--center { text-align: center; }
.callout--right { text-align: right; }
.callout--icon-top .callout-icon { margin-bottom: 14px; }
.callout--icon-left { display: flex; gap: 18px; align-items: flex-start; }

Vous pouvez également comparer directement la valeur, par exemple {% if icon_position == 'left' %}. Comparez par rapport à la clé, jamais le titre.

Laissez le sélecteur et le contrôle réactif désactivés #

• Sélecteur: pour ce champ, il écrit color: {{VALUE}};. Dans nos tests, un sélecteur de .callout-title produit color:center;[traduction], que les navigateurs ignorent Contrairement à certains autres champs, Choose n'a pas de lignes CSS Selectors où vous pourriez écrire votre propre propriété Utilisez des classes comme indiqué ci-dessus.
• Contrôle réactif : ajoute des icônes d'appareil afin que les éditeurs puissent choisir une option différente sur tablette et mobile, mais le jeton n'imprime que le choix du bureau. Les choix par appareil n'atteignent jamais votre modèle.

Utilisez le contrôle Choisir dans Elementor #

Ajoutez le widget à une page, ou rechargez l'éditeur si la page était déjà ouverte Les boutons se trouvent sous votre étiquette avec l'option par défaut mise en évidence Passez un bouton pour voir son titre, et cliquez pour basculer Les mises à jour de l'aperçu tout de suite.

Voici le même appel avec des choix différents :

Cas d'utilisation courants #

• Alignement du texte pour les titres, les devis et les cartes.
• Position de l'image ou de l'icône : en haut, à gauche ou à droite.
• Direction de disposition, telle qu'une ligne ou une colonne.
• Petites variantes visuelles, comme un style clair ou sombre, lorsque chacune a une icône claire.

Conseils pour travailler avec le champ Choisir #

• Gardez-le à quatre options ou moins. Pour des listes plus longues, utilisez le Sélectionnez champ.
• Toujours gérer une valeur vide. Enveloppez les cours et faites du balisage {% if %}(en), et donnez à la classe de base des styles par défaut sensibles.
• Écrivez des titres clairs. L'infobulle est la seule vue des éditeurs de texte pour chaque bouton.
• Utilisez uniquement les icônes d’élément1, donc chaque bouton a une icône visible.
• Décidez des touches avant que les éditeurs n'utilisent le widget. Les titres et les icônes peuvent changer plus tard, les clés ne peuvent pas.

Foire aux questions #

Envelopper #

Ajoutez un champ Choisir, définissez des touches courtes avec des icônes Elementor et effacez les titres, puis imprimez la touche en tant que classe dans votre HTML et stylisez chaque classe dans le panneau CSS Gérez la valeur vide et le widget reste bien rangé lorsqu'un éditeur efface un choix Pour des listes d'options plus longues, consultez le Sélectionnez champet vérifiez tarification pour ce que chaque plan comprend.