Choisir

Le Choisir champ rend une rangée de boutons d'icônes dans le panneau de votre widget, le même contrôle que l'élémenteur utilise pour l'alignement du texte : trois ou quatre boutons, un actif à la fois À l'intérieur des modules complémentaires principaux Constructeur de widgets[traduction], c'est le bon choix chaque fois que les options sont peu nombreuses et qu'une icône dit plus d'un mot L'alignement est l'exemple évident, mais les interrupteurs de position et de direction s'adaptent au même moule.

Les touches d'option Choisir le contrôle fonctionnent directement avec Conditions(, donc d'autres champs peuvent apparaître en fonction de l'option choisie, et avec le Moteur de modèles de syntaxe Twig, où un chèque comme {% if align == "center" %} change votre balisage Les deux guides couvrent les détails.

Comme le Select, la valeur remise à votre modèle est la clé de l'option, pas son titre Ce que le Choose ajoute en haut : une icône par option, un comportement de basculement facultatif et un chemin direct dans le mécanisme de sélection d'Elementor pour les choix CSS purs comme l'alignement.

Ce que fait le champ Choisir #

• Rend une rangée de boutons d'icônes dans le panneau Élémenteur, un par option que vous définissez.
• Détient une clé à partir de l'ensemble défini, exactement un bouton actif à la fois.
• Associe chaque option à un eicon: tels que eicon-text-align-left1, donc le choix se lit d'un coup d'œil.
• Éliminez éventuellement: avec l'option Basculer activée, cliquer à nouveau sur le bouton actif la désélectionne et la valeur devient vide.
• Prend en charge un drapeau réactif et peut écrire CSS directement via un sélecteur, couvert ci-dessous.

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 témoignage avec un sélecteur de” “Quote Alignment : gauche, centre, droite.

Comment ajouter un champ Choisir #

Dans l'éditeur Widget Builder, trouvez le Choisir champ dans le panneau de gauche, regroupé avec les autres champs de choix.

Faites-le glisser dans une section sous le Style onglet ; les paramètres de type alignement y vivent naturellement Une fois qu'il atterrit, les options du champ s'ouvrent à gauche.

Choisissez les options de champ expliquées #

• Étiquette: le texte affiché à côté des boutons dans Elementor, par exemple “Quote Alignment”.
• Nom: l'identifiant unique du champ, des lettres, des chiffres et des soulignements uniquement, par exemple quote_align.
• Options: chaque option est une clé plus un titre et une icône Le titre devient l'info-bulle du bouton et l'icône est une classe eicon, par exemple eicon-text-align-left pour la clé left.
• Basculer : lorsqu'il est activé, cliquer à nouveau sur le bouton actif le désélectionne et la valeur du champ devient vide Laissez-le désactivé si le widget a toujours besoin d'une valeur.
• Par défaut: la clé active lorsque le widget tombe pour la première fois sur une page.
• Réactif: ajoute l'icône de l'appareil afin que l'alignement puisse différer selon le point d'arrêt.
• Description, Afficher l'étiquette, séparateur : les paramètres d'affichage standard, plus Conditions d'affichage du champ uniquement lorsqu'un autre contrôle a une certaine valeur.

Connectez le Choisir à votre modèle ou à un sélecteur #

Il existe deux styles de câblage L'exemple d'alignement fonctionne avec l'un ou l'autre.

Modèles de modèles. Le jeton imprime la clé sélectionnée, de sorte que les modèles Select sont reportés inchangés. Une classe de modification conserve les variantes dans votre onglet CSS :

<blockquote class="quote align--{{ quote_align }}">
  {{ quote_text }}
</blockquote>

avec .align--center { text-align: center; } et les amis dans l'onglet CSS. Les conditionnels fonctionnent aussi : {% if quote_align == 'center' %}. Comme pour le Select, comparez avec la clé, jamais le titre.

L'option Sélecteur. Le Choose peut également écrire CSS via le mécanisme de sélection d'Elementor, en sautant complètement le modèle. Une chose à savoir avant de vous en fier : la propriété par défaut qu'Elementor injecte pour un sélecteur Choose est color: {{VALUE}}(en), ce qui est inutile pour l'alignement Une entrée de sélectionneurs personnalisés doit épeler la propriété immobilière :

text-align: {{VALUE}};

Les clés doivent alors être des valeurs CSS valides (left, center, right le sont déjà), et {{WRAPPER}} est préparé automatiquement pour ce type de contrôle de valeur, afin que les styles restent adaptés à votre widget sans que vous l'écriviez.

Attention à la version silencieuse de cette erreur Un Choose câblé à un sélecteur qui conserve la propriété par défaut écrira volontiers color: center(en), une déclaration non valide que le navigateur laisse tomber sans un mot Aucun avertissement de console, aucune indication visuelle Si les boutons semblent ne rien faire, inspectez le CSS généré avant de toucher la configuration du champ.

Utilisez le contrôle Choisir dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, en rechargeant l'éditeur si la page était déjà ouverte Le contrôle apparaît comme une rangée de boutons d'icônes sous votre étiquette, avec le bouton de la clé par défaut actif.

Cliquez sur un bouton et les mises à jour de l'aperçu en même temps Avec Toggle on, cliquer sur le bouton actif efface le choix, et le widget retombe à ce que définit votre onglet CSS Avec Responsive on, l'icône de l'appareil permet à chaque point d'arrêt de tenir son propre choix.

Cas d'utilisation courants #

• Alignement du texte pour les titres, les citations et les légendes, le terrain d'attache du contrôle.
• Position de l'élément comme l'image à gauche ou l'image à droite dans une carte multimédia et texte.
• Interrupteurs de direction pour les listes et les échéanciers horizontaux par rapport aux verticaux.
• Préréglages de taille comme les petites, moyennes et grandes mappées aux classes modificatrices.
• Choix côté spectacle pour les badges et les rubans, du haut à gauche jusqu'aux coins inférieurs à droite.

Conseils pour travailler avec le champ Choisir #

• Gardez-le à deux, trois ou quatre options. Une rangée de sept boutons d'icônes est un rabattement portant un costume ; utilisez plutôt un Select.
• Faites correspondre les touches aux valeurs CSS lors de l'utilisation d'un sélecteur. Clés comme left et center tomber directement dans text-align: {{VALUE}} sans couche de traduction.
• Définissez la propriété immobilière dans des sélecteurs personnalisés. La propriété injectée par défaut est color: {{VALUE}}(, qui ne convient qu'aux choix de couleurs réels).
• Planifiez la valeur vide si Toggle est activé. Un champ désélectionné imprime une clé vide, donc align-- les cours et les conditions doivent le tolérer ou empêcher Toggle de se déconnecter.
• Comparez avec les clés dans les conditions. Le titre de l'option est un texte uniquement composé d'un panneau et ne correspond jamais {% if %}.
• Utilisez Responsive pour l'alignement. Centre sur mobile, gauche sur le bureau est une commande au lieu de deux.

Foire aux questions #

Envelopper #

Le champ Widget Builder Choose donne aux petites décisions visuelles le contrôle qu'elles méritent Les touches sont assises derrière des boutons d'icônes, un jeton alimente les classes de modificateurs et les conditions, et le chemin de sélection gère les choix à propriété unique comme l'alignement une fois que vous définissez la propriété CSS réelle Pour les choix de mise en page qui ont besoin d'une vignette complète plutôt que d'une icône, passez à la Champ Choix Visuel. Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.