Bascule Popover

Le Champ Popover Toggle est un commutateur qui ouvre une petite fenêtre contextuelle de commandes enfants lorsqu'il est activé. Elementor utilise le même modèle pour ses propres clusters de fonctionnalités optionnelles et à l'intérieur des modules complémentaires principaux Constructeur de widgets il fait le même travail pour vos widgets personnalisés : un ensemble de paramètres associés reste caché derrière une bascule au lieu d'encombrer le panneau avec toute une section supplémentaire.

Le Popover Toggle prend en charge Conditions comme chaque contrôle, et chaque champ à l'intérieur de la popover obtient son propre jeton combiné, {{ toggle_field }}, rendu par le Moteur de modèles de syntaxe Twig. Les deux guides couvrent la configuration et les limitations.

Contrairement à un champ de valeur simple, le Popover Toggle est structurel Il maintient l'état marche/arrêt lui-même, et il transporte des champs enfants dont les valeurs atteignent votre modèle sous des noms composés Les deux moitiés de ce modèle sont couvertes ci-dessous avec un exemple de superposition de travail.

Ce que fait le champ Popover Toggle #

• Rend une bascule dans le panneau du widget avec vos étiquettes on et off.
• Ouvre une fenêtre contextuelle sur les contrôles enfants lorsqu'il est allumé, défini dans la liste des champs popover du champ.
• Accepte la plupart des types de champs de valeur en tant qu'enfants(, comme les champs couleur, texte, select, et slider).
• Expose l'état de bascule à votre modèle comme valeur truthy lorsqu'elle est activée et chaîne vide lorsqu'elle est désactivée.
• Expose chaque valeur enfant sous un nom composé qui joint les noms des parents et des enfants avec un trait de soulignement.

Si la construction de widgets est un nouveau territoire, lisez 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 bannière d'image avec une superposition de couleurs en option : un toggle nommé overlay, un enfant de couleur nommé color.

Comment ajouter un champ Popover Toggle #

Dans l'éditeur Widget Builder, faites défiler le panneau des champs sur la gauche jusqu'à ce que vous trouviez le Bascule Popover champ, répertorié avec les autres champs structurels tels que Tabs et Repeater.

Faites-le glisser dans une section sous le Contenu ou Style tab, où que les paramètres optionnels appartiennent Une fois qu'il atterrit, les options du champ s'ouvrent sur la gauche, et le travail principal est de définir les champs enfants que le popover tiendra.

Options du champ Popover Toggle expliquées #

• Étiquette: le texte à côté de la bascule dans Elementor, par exemple“Overlay”.
• Nom: l'identifiant unique pour la bascule, les lettres, les chiffres et les traits de soulignement uniquement, par exemple overlay. Les noms d'enfants s'appuient dessus, alors restez courts.
• Étiquette activée/Étiquette désactivée : les deux états affichés sur le commutateur, tels que les“Yes” et“No”.
• Valeur de retour : la valeur stockée pendant que la bascule est activée, “yes” par défaut Off stocke une chaîne vide.
• Champs de popover : l'enfant contrôle à l'intérieur de la popover La plupart des types de champs de valeur sont autorisés ; notre exemple contient un seul champ de couleur nommé color.
• La description, l'étiquette d'affichage, le séparateur et les conditions couvrent les options d'affichage habituelles.

Lisez la bascule et ses enfants dans votre modèle #

Deux règles de dénomination couvrent tout ce que ce champ produit.

La bascule elle-même est disponible sous son propre nom Il imprime la valeur de retour lorsqu'il est allumé et une chaîne vide lorsqu'il est éteint, ce qui en fait une condition naturelle :

{% if overlay %} ... {% endif %}

Notez que la valeur stockée est la chaîne Valeur de retour, “yes” par défaut, pas un booléen Testez la véracité comme le fait l'exemple ; comparer le champ avec vrai ne correspond jamais.

Chaque enfant est disponible sous forme de nom parent et de nom d'enfant joints à un trait de soulignement Le color enfant de la overlay popover devient overlay_color. Ensemble, la couche de superposition de la bannière ressemble à ceci dans le panneau HTML :

<div class="banner-media">
  <img src="{{ banner_image }}" alt="">
  {% if overlay %}
  <div class="banner-overlay" style="background: {{ overlay_color }}"></div>
  {% endif %}
</div>

Basculer, aucune superposition div rend du tout Basculer sur, le div apparaît avec la couleur choisie par l'éditeur Ajouter plus d'enfants et chacun suit le même modèle : un enfant nommé opacity lirait comme {{ overlay_opacity }}.

Attention : il n'y a pas de notation de points ici. {{ overlay.color }} ne résout à rien, car les enfants sont aplatis pour souligner les noms joints, non imbriqués sous le parent Si une valeur enfant sort vide, vérifiez d'abord le nom composé.

Utilisez le Bascule Popover dans Elementor #

Ajouter le widget à une page dans Elementor, ou recharger l'éditeur si la page était déjà ouverte Le contrôle apparaît comme un commutateur étiqueté.

Allumez-le et la fenêtre contextuelle s'ouvre avec les commandes enfants. Dans l'exemple de bannière, l'éditeur choisit une couleur de superposition, le calque s'efface sur l'image dans l'aperçu et la désactivation de la bascule la supprime à nouveau sans perdre la couleur choisie.

Cas d'utilisation courants #

• Superpositions d'images et de vidéos: avec des enfants de couleur et d’opacité derrière un seul interrupteur.
• Badges optionnels sur les cartes, où la bascule montre le badge et les enfants définissent son texte et son style.
• Paramètres de l'effet de survol cela n'a d'importance que lorsque l'effet est activé.
• Comptage ou options de planification sur des bannières parfois limitées dans le temps.
• Boutons secondaires(en), en gardant le texte, le lien et le style du deuxième bouton hors de vue jusqu'à ce que cela soit nécessaire.

Conseils pour travailler avec le champ Popover Toggle #

• Enveloppez le balisage dépendant {% if parent %}. Le point de vue de la bascule est que les enfants n'ont d'importance que lorsqu'elle est allumée ; le modèle devrait refléter cela.
• Composer les noms d'enfants avec un trait de soulignement. Parent overlay plus enfant color est {{ overlay_color }}(jamais) {{ overlay.color }}.
• Gardez les noms de parents courts. Chaque jeton enfant répète le nom du parent, et {{ overlay_color }} lit mieux que {{ banner_image_overlay_settings_color }}.
• Utilisez-le pour des clusters véritablement optionnels. Les paramètres dont le widget a toujours besoin appartiennent au panneau ouvert ; le popover est destiné aux fonctionnalités parfois.
• Donnez aux enfants des défauts de paiement raisonnables. Au moment où la bascule s'allume, la fonctionnalité doit paraître intentionnelle plutôt que non stylée.

Foire aux questions #

Envelopper #

Le champ Widget Builder Popover Toggle permet de garder le panneau d'un widget honnête : les commandes quotidiennes restent visibles, et le cluster optionnel attend derrière un interrupteur. Filez-le avec {% if parent %} autour des jetons joints au balisage et au soulignement pour les enfants, et la fonctionnalité s'allume et s'éteint proprement. Pour les autres modèles structurels, voir le Champ répéteur(en), qui gère les listes de la même manière que ce champ gère les options Explorez le reste de la Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.