Popover-Schalter

Die Popover-Schaltfeld Schalter ist, der beim Einschalten einen kleinen Popover von Kindersteuerungen öffnet Elementor verwendet das gleiche Muster für seine eigenen optionalen Funktionscluster und innerhalb der Master-Addons Widget-builder Es erledigt die gleiche Arbeit für Ihre benutzerdefinierten Widgets: Eine Reihe verwandter Einstellungen bleibt hinter einem Umschalter verborgen, anstatt das Panel mit einem ganzen zusätzlichen Abschnitt zu überfüllen.

Der Popover Toggle unterstützt Bedingungen Wie jedes Steuerelement erhält auch jedes Feld im Popover seinen eigenen kombinierten Token {{ toggle_field }}, wiedergegeben von der Twig-Syntax-Vorlagen-Engine. Beide Leitfäden behandeln Einrichtung und Einschränkungen.

Anders als ein Feld mit einfachem Wert ist der Popover Toggle strukturell, er hält den Ein-/Aus-Zustand selbst, und er trägt unter zusammengesetzten Namen untergeordnete Felder, deren Werte Ihre Vorlage erreichen Beide Hälften dieses Modells werden im Folgenden mit einem Beispiel für funktionierende Überlagerungen abgedeckt.

Was das Popover Toggle Feld macht #

• Einen Knebel ausleiht Im Panel des Widgets mit Ihren On - und Off-Labels.
• Öffnet einen Popover von Kinderkontrollen Beim Einschalten definiert in der Popover-Felderliste des Feldes.
• Akzeptiert die meisten Wertfeldtypen als Kinder„Z. B. Farb-, Text-, Auswahl- und Schiebereglerfelder.
• Stellt Ihrem Template den Umschaltstatus zur Verfügung als wahrheitsgemäßer Wert beim Ein - und leerer String beim Aus.
• Stellt jeden untergeordneten Wert zur Verfügung Unter einem zusammengesetzten Namen, der die Eltern- und Kindernamen mit einem Unterstrich verbindet.

Wenn Widget-Gebäude Neuland ist, lesen Sie die Übersicht über Widget Builder Zuerst.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Ein benutzerdefiniertes Widget öffnet sich im Widget Builder-Editor Unser Beispiel ist ein Bildbanner-Widget mit optionalem Farb-Overlay: ein Umschalter namens overlayEin Farbkind namens color.

So fügen Sie ein Popover-Umschaltfeld hinzu #

Scrollen Sie im Widget Builder-Editor im Feldfenster auf der linken Seite, bis Sie das gefunden haben Popover-Schalter Feld, mit den anderen Strukturfeldern wie Tabs und Repeater aufgelistet.

Ziehen Sie es in einen Abschnitt unter dem Inhalt oder Stil Tab, wohin auch immer die optionalen Einstellungen gehören Sobald es landet, öffnen sich die Optionen des Feldes auf der linken Seite, und die Hauptarbeit besteht darin, die untergeordneten Felder zu definieren, die das Popover aufnehmen wird.

Popover Feldoptionen umschalten erklärt #

• Etikett: Der Text neben dem Toggle in Elementor, zum Beispiel “Overlay”.
• Name: Die eindeutige Kennung für den Umschalter, Buchstaben, Zahlen und Unterstriche, zum Beispiel overlay. Kindernamen bauen darauf auf, also mach dich kurz.
• Beschriften Sie ein/beschriften Sie aus: Die beiden auf dem Schalter angezeigten Zustände, wie “Ja” und “Nein”.
• Rückgabewert: Der Wert, der gespeichert wird, während der Umschalter eingeschaltet ist, “ja” standardmäßig Aus speichert eine leere Zeichenfolge.
• Popover-Felder: Das Kind steuert innerhalb des Popovers Die meisten Wertfeldtypen sind erlaubt; unser Beispiel enthält ein einzelnes Farbfeld mit dem Namen color.
• Beschreibung, Etikett anzeigen, Trenner und Bedingungen decken die üblichen Anzeigeoptionen ab.

Lesen Sie den Knebel und seine Kinder in Ihrer Vorlage #

Zwei Namensregeln decken alles ab, was dieses Feld produziert.

Der Knebel selbst Unter eigenem Namen erhältlich ist, druckt er den Rückgabewert beim Ein - und eine leere Zeichenfolge beim Ausschalten, was ihn zu einer natürlichen Bedingung macht:

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

Beachten Sie, dass der gespeicherte Wert die Zeichenfolge „Rückgabewert“ist, „ja” standardmäßig, kein boolescher Wert. Testen Sie die Wahrhaftigkeit so, wie es das Beispiel tut; Vergleichen Sie das Feld mit „true never matches”

Jedes Kind Als übergeordneter Name und mit Unterstrich verbundener Kindername ist verfügbar Die color Kind des overlay Popover wird overlay_color. Zusammengesetzt sieht die Overlay-Ebene des Banners im HTML-Panel so aus:

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

Ausschalten, gar keine Overlay-Div rendert Schalten Sie ein, die Div erscheint mit welcher Farbe auch immer der Editor gewählt hat, fügen Sie weitere Kinder hinzu und jedes folgt dem gleichen Muster: ein Kind namens opacity Lesen würde als {{ overlay_opacity }}.

Achtung: hier gibt es keine Punktnotation. {{ overlay.color }} Löst sich zu nichts auf, denn Kinder werden zu unterstrichverbundenen Namen abgeflacht, nicht unter dem Elternteil verschachtelt, wenn ein untergeordneter Wert leer herauskommt, überprüfen Sie zuerst den zusammengesetzten Namen.

Verwenden Sie den Popover-Toggle in Elementor #

Das Widget zu einer Seite in Elementor hinzufügen, oder den Editor neu laden, wenn die Seite bereits geöffnet war Das Steuerelement erscheint als beschrifteter Schalter.

Klappen Sie es ein und das Popover öffnet sich mit den untergeordneten Steuerelementen Im Bannerbeispiel wählt der Editor eine Overlay-Farbe aus, die Ebene blendet in der Vorschau über das Bild ein, und das Ausschalten des Kipphebels entfernt es wieder, ohne die gewählte Farbe zu verlieren.

Häufige Anwendungsfälle #

• Bild - und Videoüberlagerungen, mit Farbe und Deckkraft Kinder hinter einem Schalter.
• Optionale Abzeichen Auf Karten, wo der Knebel das Abzeichen zeigt und Kinder seinen Text und Stil festlegen.
• Einstellungen für den Hover-Effekt Das spielt nur dann eine Rolle, wenn der Effekt aktiviert ist.
• Countdown - oder Zeitplanoptionen Auf Bannern, die teilweise zeitlich begrenzt sind.
• Sekundäre TastenHalten Sie den Text, den Link und den Stil der zweiten Schaltfläche bis zur Notwendigkeit außer Sichtweite.

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

• Abhängiges Markup einwickeln in {% if parent %}. Der ganze Sinn des Kippers ist, dass die Kinder nur dann wichtig sind, wenn er eingeschaltet ist; die Vorlage sollte das widerspiegeln.
• Kindernamen mit Unterstrich verfassen. Elternteil overlay Plus Kind color ist {{ overlay_color }}„Niemals {{ overlay.color }}.
• Elternnamen kurz halten. Jeder Kind-Token wiederholt den Elternnamen und {{ overlay_color }} Liest sich besser als {{ banner_image_overlay_settings_color }}.
• Verwenden Sie es für wirklich optionale Cluster. Einstellungen, die das Widget immer benötigt, gehören in das offene Panel; Das Popover ist für die manchmal Funktionen gedacht.
• Geben Sie Kindern vernünftige Standardeinstellungen. In dem Moment, in dem der Knebel aufklappt, sollte die Funktion eher absichtlich als ungestylt aussehen.

Häufig gestellte Fragen #

Einwickelnd #

Das Widget Builder Popover Toggle-Feld hält das Panel eines Widgets ehrlich: Die alltäglichen Bedienelemente bleiben sichtbar und der optionale Cluster wartet hinter einem Schalter. Wire es mit {% if parent %} Um die Markup - und Unterstrich-verbundenen Token für die Kinder, und das Feature schaltet sauber ein und aus Für die anderen Strukturmuster, siehe die Repeaterfeld, die Listen genauso behandelt wie dieses Feld Optionen. Entdecken Sie den Rest Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.