Commutateur

Le champ Switcher ajoute une bascule marche/arrêt à un widget personnalisé que vous construisez avec les modules complémentaires principaux Constructeur de widgets. C'est la façon standard de rendre une partie d'un widget optionnelle : un badge, une icône, une mise en page compacte Les éditeurs retournent la bascule dans Elementor et votre modèle réagit.

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

• Ajoute la bascule marche/arrêt d'Elementor au panneau de votre widget.
• Enregistre le Retour Valeur (yes par défaut) quand on, et une valeur vide quand off.
• Fonctionne avec {% if %} dans votre modèle, le balisage apparaît donc uniquement lorsque la bascule est activée.
• Peut masquer et afficher d'autres champs dans le panneau via Conditions, ce qui maintient le panneau court jusqu'à ce qu'une option soit utilisée.

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 dans ce guide est un widget “Promo Card” avec deux Switchers : show_badge(en), qui révèle un ruban et un champ Badge Text, et compact_mode1, ce qui resserre la carte.

Comment ajouter un champ Switcher #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Ajouter une section sur l'onglet où l'option appartient Une option de contenu comme Afficher le badge correspond au Contenu onglet.
3. Type switch dans le champ champ rechercher box à gauche.
4. Glisser Commutateur dans la section Cliquez sur le crayon sur le champ pour ouvrir ses paramètres.

Options du champ du commutateur expliquées #

• Étiquette: le texte à côté de la bascule dans Elementor, par exemple“Show Badge”.
• 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 show_badge.
• Description: un indice affiché sous la bascule dans Elementor.
• Étiquette sur et Étiquette désactivée : les mots courts à l'intérieur de la bascule Elementor affiche Label On pendant que la bascule est activée et Label Off pendant qu'elle est désactivée, donc“Compact” et “Normal” lisent mieux que Oui et Non pour une option de mise en page.
• Valeur de retour : la valeur que le champ détient pendant qu'il est allumé Laissez-le à yes à moins que quelque chose dans votre code ait besoin d'une chaîne différente.
• Valeur par défaut : une liste déroulante avec Oui et Non. Oui signifie qu'un widget nouvellement ajouté commence par la bascule.

Deux choses qui valent la peine d'être connues à propos de ce panneau Le texte d'aide sous Label On et Label Off est échangé, et la ligne Label Off commence par un T supplémentaire égaré. Les deux étiquettes fonctionnent toujours comme on peut s'y attendre : Label On est le mot affiché pendant que la bascule est activée.

Gardez la valeur de retour et la valeur par défaut à l'étape #

La liste déroulante Valeur par défaut enregistre toujours yes pour Oui, quoi que vous ayez tapé dans Valeur de retour Cette combinaison rate Dans nos tests, un champ avec Valeur de retour enabled et la valeur par défaut Oui est sortie comme ceci :

• La bascule dans Elementor s'est affichée comme éteinte.
• La valeur sauvegardée était toujours yes, donc {% if %} traité le champ comme sur et le balisage rendu.
• Le panneau et la page n'étaient de nouveau d'accord qu'après qu'un éditeur ait cliqué une fois sur la bascule, ce qui a défini la valeur sur enabled.

Changez donc la valeur de retour uniquement lorsque vous prévoyez également de démarrer le champ (valeur par défaut définie sur Non).Pour tout le reste, laissez la valeur de retour à yes.

Utilisez la bascule dans votre modèle #

Un Switcher est vide lorsqu'il est éteint, et une valeur vide est fausse dans le moteur de modèle, donc {% if %} est tout ce dont vous avez besoin La carte promotionnelle HTML utilise un sélecteur pour le balisage et un pour une classe :

<div class="promo{% if compact_mode %} promo--compact{% endif %}">
  {% if show_badge %}
  <span class="promo-badge">{{ badge_text }}</span>
  {% endif %}
  <p class="promo-title">{{ promo_title }}</p>
  <p class="promo-text">{{ promo_text }}</p>
  <a class="promo-button" href="#">Claim the offer</a>
</div>

Avec le badge éteint, le tout span est parti de la page, pas seulement caché La classe compacte commute quelques règles dans le panneau CSS :

.promo--compact { padding: 18px 22px; }
.promo--compact .promo-title { font-size: 20px; }
.promo--compact .promo-text { display: none; }

Vous pouvez comparer la valeur aussi, comme dans {% if show_badge == 'yes' %}(mais comparez avec la valeur de retour), pas avec le texte Label On. {% if show_badge == 'Yes' %} jamais match. La plaine {% if show_badge %} la forme évite le problème.

Laisse le Sélecteur case vide pour ce champ Une valeur à bascule n'est pas une valeur CSS, donc le style appartient au panneau CSS derrière une classe comme celle ci-dessus.

Masquer les autres champs jusqu'à ce que la bascule soit activée #

C'est la seconde moitié de ce à quoi sert un Switcher Sur le champ que vous voulez cacher, ouvrez ses paramètres, faites défiler vers Conditions et cliquez Ajouter Condition. Pour le champ Texte de badge :

• Nom du contrôle : show_badge, le nom du Switcher.
• Égalité: Égale.
• Valeur de contrôle : yes[traduction], la valeur de retour du commutateur.

Badge Text apparaît maintenant dans Elementor seulement pendant que Show Badge est sur Voir Conditions pour les autres opérateurs.

Utilisez le contrôle Switcher dans Elementor #

Ajoutez le widget à une page, ou rechargez l'éditeur si la page était déjà ouverte La bascule se trouve sous votre étiquette avec votre mot Label On ou Label Off à l'intérieur de celle-ci Cliquez dessus et les mises à jour de l'aperçu tout de suite, et tout champ avec une condition dessus apparaît ou disparaît en même temps.

Voici la carte finie sur le devant avec le badge allumé, avec le mode compact également allumé, et avec les deux mélangeurs éteints :

Cas d'utilisation courants #

• Badges, rubans et icônes en option.
• Une variante d'aménagement compact ou dense.
• Afficher ou masquer un bouton secondaire, une note de bas de page ou un diviseur.
• Un commutateur maître qui révèle un groupe de champs connexes dans le panneau.

Conseils pour travailler avec le champ Switcher #

• Laisser la valeur de retour à yes. Il maintient la bascule, la valeur par défaut et vos conditions à l'étape.
• Nommez le champ après ce qu'il montre: tels que show_badge ou compact_mode. Le nom se lit comme une question {% if %}.
• Écrivez Étiquette sur et Étiquette off pour l'option[TRADUCTION], pas seulement Oui et Non, lorsque les deux États ont des noms.
• Associez-le à Conditions les champs dont une option a besoin n'apparaissent donc que lorsqu'elle est activée.
• Plus de deux États ? Utilisez le Sélectionnez champ pour un dropdown ou le Choisir champ pour boutons d'icônes.

Foire aux questions #

Envelopper #

Ajoutez un Switcher, donnez-lui un nom et des étiquettes clairs, laissez Valeur de retour à yeset enveloppez la partie facultative de votre balisage {% if %}. Ajoutez une condition aux champs dont cette option a besoin et le panneau reste court jusqu'à ce qu'un éditeur l'allume. Pour trois états ou plus, voir le Sélectionner et Choisir champs, et vérifiez tarification pour ce que chaque plan comprend.