Bascule Popover

Le champ Popover Toggle regroupe quelques paramètres associés derrière un contrôle marche/arrêt dans un widget personnalisé construit avec les modules complémentaires principaux Constructeur de widgets. Dans Elementor, il s'affiche comme une seule rangée avec une icône de crayon Cliquer sur le crayon active l'option et ouvre une petite fenêtre contextuelle avec les paramètres à l'intérieur. Il empêche les extras facultatifs, comme une superposition ou un badge, de remplir le panneau.

Popover Toggle est un champ Pro. 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 Popover Toggle #

• Il ajoute une ligne au panneau de votre widget : votre étiquette, une icône de crayon et, une fois allumé, une flèche de réinitialisation.
• Le crayon active l'option et ouvre une fenêtre contextuelle avec les champs que vous avez définis.
• La bascule elle-même se stocke yes lorsqu'il est activé et rien lorsqu'il est désactivé, afin que votre modèle puisse le vérifier {% if %}.
• Chaque champ à l'intérieur de la popover obtient son propre jeton, fait à partir du nom de la bascule et du nom du champ rejoint par un trait de soulignement.

Si vous n'avez pas encore construit de widget, lisez le Aperçu du constructeur de widgets d'abord.

Avant de commencer #

• WordPress avec Elementor installé et actif.
• Master Addons pour Elementor et Master Addons Pro, tous deux actifs. Le guide d'installation couverture configuration.
• Un widget s'ouvre dans le Widget Builder L'exemple de ce guide est un widget “Image Banner” avec une superposition optionnelle : un Popover Toggle nommé overlay avec deux champs à l'intérieur, color et strength.

Comment ajouter un champ Popover Toggle #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Cliquez sur le Style tab et ajouter une section, par exemple“Overlay”.
3. Type popover dans le champ champ rechercher box à gauche.
4. Glisser Bascule Popover dans la section Ses paramètres s'ouvrent dans la barre latérale gauche.

Options du champ Popover Toggle expliquées #

• Étiquette est le texte à côté du crayon dans Elementor, par exemple“Overlay”.
• Nom est l'ID unique du champ et le début de chaque jeton qu'il crée, alors gardez-le court, par exemple overlay. Lettres, chiffres et soulignements uniquement.
• Description est une note pour vous à l'intérieur du constructeur.
• Étiquette sur et Étiquette désactivée sont enregistrés avec le champ, mais Elementor affiche ce contrôle sous forme d'icône en forme de crayon, donc ces mots n'apparaissent pas dans le panneau.
• Champs de popover répertorie les champs à l'intérieur de la popover Chaque ligne a un Nom, un Étiquette et un Type. Cliquez Ajouter un champ pour une autre ligne, l'icône de copie pour en dupliquer une, ou la croix rouge pour la supprimer.
• Valeur par défaut définit si une nouvelle copie du widget commence par l'option on (Yes) ou off (No).

Le menu Type propose Texte, Numéro, Zone de texte, WYSIWYG, Code, Caché, Commutateur, Couleur, Police, Typographie, Date Heure, URL, Média, Galerie, Icônes, curseur, Dimensions et Arrière-plan Les lignes n'ont qu'un nom, une étiquette et un type, il n'y a donc nulle part où définir une valeur par défaut ou une plage pour un champ à l'intérieur de la popover Un champ Slider utilise ici la plage standard d'Elementor, 0 à 1000 pour px.

Les paramètres communs plus bas fonctionnent comme ils le font dans d’autres domaines.

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

Deux règles couvrent tout ce que ce champ vous donne :

• Le propre nom de la bascule imprime yes quand c'est allumé et rien quand c'est éteint Utilisez-le {% if overlay %}.
• Un champ à l'intérieur de la popover est lu comme le nom de la bascule, un trait de soulignement, puis le nom du champ Le color champ devient {{ overlay_color }}& le strength slider devient {{ overlay_strength.size }}.

<div class="img-banner">
  {% if overlay %}
    <div class="img-banner__overlay" style="background: {{ overlay_color }}; opacity: {{ overlay_strength.size }}%;"></div>
  {% endif %}
  ...
</div>

Les points ne fonctionnent pas pour les champs à l'intérieur de la popover Dans nos tests {{ overlay.color }} n'a rien imprimé, alors que {{ overlay_color }} imprimé la couleur Les champs conservent également leurs valeurs lorsque la bascule est éteinte, alors enveloppez-les toujours {% if overlay %}.

Cliquez Enregistrer Paramètres quand t'auras fini.

Utilisez le Bascule Popover dans Elementor #

Ajoutez le widget à une page, ou rechargez l'éditeur si la page était déjà ouverte Sélectionnez le widget et ouvrez l'onglet où vous avez placé le champ Il s'affiche comme votre étiquette avec une icône en forme de crayon.

Cliquez sur le crayon L'option s'allume et le popover s'ouvre avec vos champs Définissez-les et le widget se met à jour immédiatement Cliquez à l'extérieur du popover pour le fermer Pour désactiver à nouveau l'option, cliquez sur la flèche de réinitialisation circulaire à côté du crayon.

Cas d'utilisation courants #

• Une superposition de couleurs en option sur les bannières d'images et de vidéos.
• Un badge ou un ruban en option avec son propre texte et sa propre couleur.
• Effets de survol supplémentaires que la plupart des éditeurs n'ont jamais besoin de voir.
• Options avancées d’espacement ou de bordure gardées hors du panneau principal.

Conseils pour travailler avec le champ Popover Toggle #

• Gardez le nom de la bascule court Chaque champ à l'intérieur commence par ce nom.
• Vérifiez toujours la bascule avec {% if %} avant d'utiliser ses champs, car les valeurs restent enregistrées lorsqu'il est éteint.
• Utilisez deux ou trois champs connexes par popover Plus que cela est plus facile à trouver dans une section normale.
• Définissez les styles par défaut dans l'onglet CSS. Les champs à l'intérieur du popover n'ont pas de valeurs par défaut qui leur sont propres.
• Pour une simple marche/arrêt sans paramètres à l'intérieur, utilisez le Champ de commutation.

Foire aux questions #

Envelopper #

Ajoutez le Popover Toggle, répertoriez ses champs, vérifiez {% if toggle_name %} dans votre modèle et lisez chaque champ comme {{ toggle_name_field_name }}. Les éditeurs obtiennent un panneau bien rangé, et les paramètres supplémentaires n'apparaissent que lorsqu'ils activent l'option. Pour regrouper les paramètres dans des onglets, consultez le Champ ongletset vérifiez tarification pour ce que chaque plan comprend.