Commutateur

Le Champ de commutation met le bouton oui/non familier d'Elementor dans un widget personnalisé Un clic dans le panneau et un badge apparaît, une mise en page se resserre ou tout un bloc de balisage s'éteint À l'intérieur des modules complémentaires principaux Constructeur de widgets(en), le Switcher est le moyen standard de rendre n'importe quelle partie d'un widget facultative.

Le Switcher est le champ source le plus courant pour Conditions: il stocke yes lorsqu'il est allumé, d'autres commandes peuvent donc s'afficher ou se cacher en fonction de celui-ci. Sur le front-end, le Moteur de modèles de syntaxe Twig vous permet d'enrouler le balisage {% if my_toggle %} ainsi, la bascule contrôle également la sortie. Les deux guides couvrent la configuration et les limitations.

Sa valeur est délibérément simple : une chaîne comme yes lorsque la bascule est activée, une chaîne vide lorsqu'elle est désactivée. Cela correspond directement aux conditions du modèle. En pratique, presque tous les Switcher finissent enveloppés dans un {% if %} bloquer ou conduire les Conditions des autres contrôles.

Ce que fait le champ Switcher #

• Basculer/désactiver de Renders Elementor dans le panneau du widget, avec vos propres étiquettes marche/arrêt.
• Renvoie une chaîne configurable (par défaut yes) lorsqu'il est activé et une chaîne vide lorsqu'il est désactivé.
• Conduit {% if %} bloque dans le modèle, donc le balisage ne s'allume que lorsque la bascule est activée.
• Commute les classes CSS en ligne, par exemple class="card {% if compact_mode %}is-compact{% endif %}".
• Agit comme le conducteur habituel pour Conditions sur d'autres champs, afficher ou masquer des groupes entiers de contrôles.

Construire votre premier widget ? Commencez par le Aperçu du constructeur de widgets: alors reviens ici.

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 carte de tarification avec un Switcher nommé show_badge cela révèle un ruban “Popular” sur la carte.

Comment ajouter un champ Switcher #

Faites glisser le Commutateur champ du panneau des champs dans une section sous le Contenu ou Style onglet. Ses options s'ouvrent à gauche dès son atterrissage.

Options du champ du commutateur expliquées #

• Étiquette: le texte affiché à côté de la bascule dans Elementor, par exemple “Show Badge”.
• Nom: l'identifiant unique auquel vos modèles font référence Lettres, chiffres et soulignements uniquement, par exemple show_badge.
• Étiquette activée/Étiquette désactivée : les textes courts sur la bascule elle-même, Oui“” et “No” par défaut.
• Valeur de retour : la chaîne que le champ tient lorsqu'il est allumé, yes par défaut. Changez-le lorsque votre modèle ou script attend une chaîne spécifique.
• Par défaut: réglez-le sur la valeur de retour pour démarrer la bascule ; laissez-le vide pour démarrer.

Notez que la valeur par défaut et la valeur de retour doivent correspondre exactement pour que la bascule puisse démarrer. Si vous modifiez la valeur de retour enabled mais laissez Par défaut à yes: le widget entre avec la bascule désactivée et aucune erreur ne vous explique pourquoi.

Connectez le commutateur avec un bloc { % si %} #

Le Switcher est un champ de jeton, mais vous imprimez rarement son jeton par lui-même, Off signifie chaîne vide, et une chaîne vide est faussée dans la logique de modèle, donc le motif naturel est un conditionnel dans le panneau HTML :

{% if show_badge %}
<span class="pc-badge">Popular</span>
{% endif %}

Activez, le badge se rend Désactivez, le balisage disparaît entièrement, ne laissant derrière lui aucun emballage vide Le même motif change de classe sans balisage supplémentaire :

<article class="pc-card {% if compact_mode %}is-compact{% endif %}">

L'autre boulot du Switcher est la conduite Conditions. N'importe quel champ du widget peut être défini pour apparaître uniquement lorsque le Switcher est activé, donc basculer “Show Badge” peut également révéler un champ Badge Text et un contrôle de couleur de badge dans le panneau. Cela maintient le panneau court jusqu'à ce que l'option soit réellement utilisée.

Attention: si vous comparez explicitement la valeur, comparez avec la chaîne Valeur de retour, pas avec l'étiquette. {% if show_badge == 'yes' %} correspond à la valeur de retour par défaut ; {% if show_badge == 'Yes' %} ne correspond jamais, car “Yes” n'est que le texte d'affichage de la bascule Vérité nue, {% if show_badge %}: cela élude le problème.

Utilisez le contrôle Switcher dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor (rechargez l'éditeur si la page était déjà ouverte).Le Switcher s'affiche comme le basculeur standard d'Elementor basculer sous votre étiquette Cliquez dessus et l'aperçu se met à jour immédiatement ; tous les champs conditionnés sur lui apparaissent ou disparaissent dans le panneau en même temps.

Cas d'utilisation courants #

• Badges et rubans optionnels sur cartes, enveloppé dans un {% if %} bloc.
• Variantes de mise en page comme un mode compact, appliqué comme classe modificatrice.
• Afficher/masquer les sections comme une note de bas de page, une icône ou un bouton secondaire.
• Commutateurs de fonctionnalités pour les scripts: où le panneau JS lit la valeur pour activer la lecture automatique ou l'animation.
• Panneaux de contrôle(en), révélant un groupe de contrôles associés uniquement lorsque leur fonctionnalité est activée.

Conseils pour travailler avec le champ Switcher #

• Testez la véracité, pas les étiquettes. {% if show_badge %} est-ce que la plupart des modèles ont besoin ; l'état activé est une chaîne non vide et l'état désactivé est vide.
• Enroulez tout le bloc facultatif. Mettez le {% if %} autour du balisage complet, emballage inclus, donc une bascule désactivée ne laisse aucun élément vide pour briser l'espacement.
• Défaut délibérément. Démarrez la bascule (Par défaut = Valeur de retour) pour les fonctionnalités souhaitées par la plupart des sites, désactivées pour les extras.
• Associez-le à Conditions. Un commutateur plus deux ou trois champs conditionnés se lit bien mieux dans le panneau que cinq commandes toujours visibles.
• Nommez-le comme une question à laquelle le basculer répond. show_badge et compact_mode lire naturellement à l'intérieur {% if %} blocs.

Foire aux questions #

Envelopper #

Le champ Widget Builder Switcher est le plus petit contrôle avec la portée la plus large : une bascule peut ajouter du balisage, échanger des classes et remodeler le panneau via Conditions en même temps. Combinez-le avec un Champ numéro pour des fonctionnalités accordables ou un Champ répéteur dont il révèle les extras optionnels Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.