Master Addons
Preisgestaltung
Kategorien anzeigen

Popover-Schalter

Roy Jemee
Aktualisiert am 17. September 2026

6 min gelesen

Das Popover-Umschaltfeld gruppiert einige verwandte Einstellungen hinter einem Ein-/Aus-Steuerelement in einem benutzerdefinierten Widget, das mit den Master-Add-ons erstellt wurde Widget-builderIn Elementor zeigt es als einzelne Reihe mit Bleistiftsymbol an, ein Klick auf den Bleistift schaltet die Option ein und öffnet einen kleinen Popover mit den Einstellungen im Inneren, Er hält optionale Extras, wie ein Overlay oder ein Badge, davon ab, das Panel zu füllen.

Popover Toggle ist ein Pro-Feld Das kostenlose Plugin enthält einen begrenzten Widget Builder und der gesamte Feldsatz ist im Lieferumfang enthalten Master Addons Pro.

Bildbanner, das mit dem Widget Builder Popover Toggle-Feld erstellt wurde, wird mit ausgeschaltetem Overlay und dunklem Overlay angezeigt

Was das Popover Toggle Feld macht #

  • Es fügt dem Panel Ihres Widgets eine Zeile hinzu: Ihr Etikett, ein Bleistiftsymbol und, sobald es eingeschaltet ist, einen Reset-Pfeil.
  • Der Bleistift schaltet die Option ein und öffnet einen Popover mit den von Ihnen definierten Feldern.
  • Der Knebel selbst speichert yes Wenn ein und nichts, wenn aus, so dass Ihre Vorlage es überprüfen kann mit {% if %}.
  • Jedes Feld im Popover erhält einen eigenen Token, der aus dem Namen des Kipphebels und dem Namen des Feldes besteht, zusammen mit einem Unterstrich.

Wenn Sie noch kein Widget gebaut haben, lesen Sie die Übersicht über Widget Builder Zuerst.

Bevor Sie beginnen #

  • WordPress mit installiertem und aktivem Elementor.
  • Master Addons für Elementor und Master Addons Pro, beide aktiv Die Installationsführung Cover-einrichtung.
  • Ein im Widget Builder geöffnetes Widget Das Beispiel in diesem Handbuch ist ein “Image Banner” - Widget mit optionalem Overlay: ein Popover Toggle namens overlay Mit zwei Feldern im Inneren color und strength.

So fügen Sie ein Popover-Umschaltfeld hinzu #

  1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
  2. Klicken Sie auf die Stil Tab und fügen Sie einen Abschnitt hinzu, zum Beispiel “Overlay”.
  3. Typ popover Im Feldsuchfeld links.
  4. Ziehen Popover-Schalter In den Abschnitt Seine Einstellungen öffnen sich in der linken Seitenleiste.
Popover-Feld umschalten, das durch Suchen von Popover im Master Addons Widget Builder gefunden und zu einem Style-Abschnitt hinzugefügt wurde

Popover Feldoptionen umschalten erklärt #

Popover Schalten Sie Feldoptionen mit Etikett, Name, Beschriftung, Beschriftung aus, Popover-Feldern für Farbe und Stärke sowie Standardwert um
  • Etikett Text neben dem Bleistift in Elementor, zum Beispiel “Overlay”.
  • Name Ist die eindeutige ID des Feldes und der Start jedes Tokens, den es erstellt, also halten Sie es kurz, zum Beispiel overlay. Nur Buchstaben, Zahlen und Unterstriche.
  • Beschreibung Notiz für Sie im Inneren des Bauherrn ist.
  • Beschriften Sie On und Beschriften Sie ab Werden mit dem Feld gespeichert, aber Elementor zeigt dieses Steuerelement als Bleistiftsymbol an, sodass diese Wörter nicht im Panel erscheinen.
  • Popover-felder Listet die Felder im Inneren des Popover auf Jede Zeile hat eine Name, a Etikett und ein Typ. Klicken Sie Feld hinzufügen Für eine andere Zeile das Kopiersymbol, um eines zu duplizieren, oder das rote Kreuz, um es zu entfernen.
  • Standardwert Legt fest, ob eine neue Kopie des Widgets mit der Option an (Ja) oder aus (Nein) beginnt.

Das Menü Typ bietet Text, Nummer, Textarea, WYSIWYG, Code, Versteckt, Switcher, Farbe, Schriftart, Typografie, Datumszeit, URL, Medien, Galerie, Symbole, Schieberegler, Abmessungen und Hintergrund Zeilen haben nur einen Namen, eine Beschriftung und einen Typ, sodass man nirgends einen Standardwert oder einen Bereich für ein Feld innerhalb des Popovers festlegen kann Ein Slider-Feld verwendet hier den Standardbereich von Elementor, 0 bis 1000 für px.

Die gemeinsamen Einstellungen weiter unten funktionieren wie auf anderen Feldern.

Lesen Sie den Umschalter und seine Felder in Ihrer Vorlage #

Zwei Regeln decken alles ab, was Ihnen dieses Feld bietet:

  • Eigene Namensabdrücke des Kippers yes Wenn es an ist und nichts wenn es aus ist Benutze es in {% if overlay %}.
  • Ein Feld im Inneren des Popovers wird als Name des Kipphebels gelesen, ein Unterstrich, dann der Name des Feldes Die color Feld wird {{ overlay_color }}, und die strength Schieber wird {{ 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>
Widget HTML mit if-Overlay mit Overlay_color und Overlay_strength.size-Tokens

Punkte funktionieren nicht für die Felder im Popover In unseren Tests {{ overlay.color }} Nichts gedruckt, während {{ overlay_color }} Farbe gedruckt Die Felder behalten auch ihre Werte bei ausgeschaltetem Kipphebel, also immer einpacken {% if overlay %}.

Klicken Sie auf Einstellungen speichern Wenn du fertig bist.

Verwenden Sie den Popover-Toggle in Elementor #

Fügen Sie das Widget zu einer Seite hinzu, oder laden Sie den Editor neu, wenn die Seite bereits geöffnet war Wählen Sie das Widget und öffnen Sie die Registerkarte, auf der Sie das Feld platziert haben Es wird als Ihr Etikett mit einem Bleistiftsymbol angezeigt.

Überlagern Sie den Popover-Toggle auf der Registerkarte Elementorstil mit dem Stiftsymbol, während das Overlay ausgeschaltet ist

Klicke auf den Bleistift Die Option schaltet sich ein und mit deinen Feldern öffnet sich der Popover Legen Sie sie fest und das Widget aktualisiert sich gleich Klicken Sie außerhalb des Popovers, um es zu schließen Um die Option wieder auszuschalten, klicken Sie auf den kreisförmigen Reset-Pfeil neben dem Bleistift.

Öffnen Sie Popover in Elementor mit Overlay-Farb- und Festigkeitskontrollen und dem Banner, das das Overlay zeigt

Häufige Anwendungsfälle #

  • Eine optionale Farbüberlagerung auf Bild - und Videobannern.
  • Ein optionales Abzeichen oder Band mit eigenem Text und eigener Farbe.
  • Zusätzliche Hover-Effekte, die die meisten Redakteure nie sehen müssen.
  • Erweiterte Abstands- oder Randoptionen, die außerhalb des Hauptfelds aufbewahrt werden.

Tipps für die Arbeit mit dem Popover Toggle Feld #

  • Halten Sie den Namen des Kipphebels kurzJedes Feld darin beginnt mit diesem Namen.
  • Überprüfen Sie immer den Umschalter mit {% if %} Bevor Sie seine Felder verwenden, da die Werte gespeichert bleiben, wenn sie ausgeschaltet sind.
  • Verwenden Sie zwei oder drei verwandte Felder pro Popover Mehr als das ist in einem normalen Abschnitt leichter zu finden.
  • Legen Sie Standardstile in der Registerkarte CSS fest Felder im Popover haben keine eigenen Standardwerte.
  • Für ein einfaches Ein/Aus ohne Einstellungen im Inneren verwenden Sie die Schalterfeld.

Häufig gestellte Fragen #

Ist das Popover Toggle Feld frei?

Nr. Popover Toggle ist eines der Pro-Felder im Widget Builder, daher muss Master Addons Pro aktiv sein, bevor Sie es zu einem Widget hinzufügen können.

Was druckt der Kipp-Token?

{{ overlay }} Druckabzüge yes Wenn die Option an ist und nichts, wenn sie aus ist, also {% if overlay %} Funktioniert als Scheck.

Wie drucke ich ein Feld aus dem Popover heraus?

Verbinden Sie den Namen des Kipphebels und den Namen des Feldes beispielsweise mit einem Unterstrich {{ overlay_color }}. Für einen Schieberegler hinzufügen .size(wie in {{ overlay_strength.size }}.

Warum druckt {{overlay.color }} nichts?

Felder im Popover sind nicht unter dem Umschalter verschachtelt Verwenden Sie die Unterstrichform {{ overlay_color }}„stattdessen.

Warum werden meine Label On- und Label Off-Wörter nicht in Elementor angezeigt?

Elementor zeigt einen Popover-Toggle als Bleistiftsymbol und nicht als Ja/Nein-Schalter an, sodass diese Etiketten nicht angezeigt werden.

Einwickelnd #

Fügen Sie den Popover-Schalter hinzu, listen Sie seine Felder auf und überprüfen Sie {% if toggle_name %} In Ihrer Vorlage und lesen Sie jedes Feld als {{ toggle_name_field_name }}. Editoren erhalten ein aufgeräumtes Panel, und die zusätzlichen Einstellungen erscheinen nur, wenn sie die Option einschalten Zum Gruppieren von Einstellungen in Tabs stattdessen siehe die Tabs-feldund überprüfen Preisbildung Für das, was jeder Plan beinhaltet.

Was sind deine Gefühle