Schalter

Das Switcher-Feld fügt einem benutzerdefinierten Widget, das Sie mit den Master-Add-ons erstellen, einen Ein-/Aus-Toggle hinzu Widget-builder. Es ist die Standardmethode, einen Teil eines Widgets optional zu machen: ein Badge, ein Icon, ein kompaktes Layout Redakteure drehen den Knebel in Elementor um und Ihre Vorlage reagiert.

Switcher ist eines der Felder, die Sie im Widget Builder der kostenlosen Version verwenden können. Das kostenlose Plugin enthält einen begrenzten Widget Builder und der vollständige Satz an Feldern ist im Lieferumfang enthalten Master Addons Pro.

Was das Switcher-Feld tut #

• Fügt den Ein-/Aus-Umschalter von Elementor zum Panel Ihres Widgets hinzu.
• Speichert die Rückgabewert (yes Standardmäßig), wenn ein, und ein leerer Wert, wenn aus.
• Funktioniert mit {% if %} In Ihrer Vorlage wird Markup also nur angezeigt, wenn der Umschalter eingeschaltet ist.
• Kann andere Felder im Panel unter Bedingungen ausblenden und anzeigen, wodurch das Panel kurz gehalten wird, bis eine Option verwendet wird.

Neu beim Bauherrn? lesen Sie die Übersicht über Widget Builder Kommen Sie dann zuerst mit geöffnetem Widget zurück.

Bevor Sie beginnen #

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor installiert und aktiv Die Installationsführung Cover-einrichtung.
• Ein Widget im Widget Builder geöffnet Das Beispiel in diesem Handbuch ist ein “Promo Card” - Widget mit zwei Switchern: show_badge, das ein Band und ein Abzeichentextfeld offenbart, und compact_mode, wodurch die Karte enger wird.

So fügen Sie ein Switcher-Feld hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Fügen Sie einen Abschnitt auf der Registerkarte hinzu, zu dem die Option gehört Eine Inhaltsoption wie Abzeichen anzeigen passt auf die Inhalt Tab.
3. Typ switch Im Feldsuchfeld links.
4. Ziehen Schalter In den Abschnitt Klicken Sie auf den Bleistift auf dem Feld, um seine Einstellungen zu öffnen.

Switcher Feldoptionen erklärt #

• Etikett: Der Text neben dem Umschalter in Elementor, zum Beispiel “Abzeichen anzeigen”.
• Name: Die eindeutige ID des Feldes und der Name seines Tokens Verwenden Sie zum Beispiel nur Buchstaben, Zahlen und Unterstriche show_badge.
• Beschreibung: Ein Hinweis, der unter dem Umschalter in Elementor angezeigt wird.
• Beschriften Sie On und Beschriftung aus: Die kurzen Worte im Inneren des Kipphebels Elementor zeigt Label On an, während der Kipphebel eingeschaltet ist und Label Off, während er ausgeschaltet ist, also lesen sich “Compact” und “Normal” besser als Ja und Nein für eine Layoutoption.
• Rückgabewert: Der Wert, den das Feld hält, während es auf Belassen Sie es bei yes Es sei denn, etwas in Ihrem Code benötigt eine andere Zeichenfolge.
• Standardwert: Ein Dropdown mit Ja und Nein. Ja bedeutet, dass ein neu hinzugefügtes Widget mit dem Umschalten beginnt.

Zwei wissenswerte Dinge über dieses Panel Der Hilfetext unter Label On und Label Off wird vertauscht, und die Label Off-Zeile beginnt mit einem streunenden Extra T. Beide Labels funktionieren immer noch so, wie man es erwarten würde: Label On ist das Wort, das angezeigt wird, während der Knebel eingeschaltet ist.

Halten Sie den Rückgabewert und den Standardwert im Schritt #

Der Standardwert-Dropdown speichert immer yes Für Ja, was auch immer Sie in Rückgabewert eingegeben haben Diese Kombination geht fehl In unseren Tests ein Feld mit Rückgabewert enabled Und Standardwert Ja kam so heraus:

• Der Kipphebel in Elementor zeigte sich als deaktiviert.
• Der gespeicherte Wert war immer noch yes„also {% if %} Das Feld wie auf behandelt und der Markup gerendert.
• Das Panel und die Seite stimmten erst wieder zu, nachdem ein Editor einmal auf den Umschalter geklickt hatte, wodurch der Wert auf eingestellt wurde enabled.

Ändern Sie also Return Value nur, wenn Sie auch planen, das Feld zu starten (Default Value auf No gesetzt).Für alles andere belassen Sie Return Value bei yes.

Verwenden Sie den Knebel in Ihrer Vorlage #

Ein Switcher ist leer, wenn er ausgeschaltet ist, und ein leerer Wert ist in der Vorlagen-Engine falsch, also {% if %} Alles was Sie brauchen Die Promo Card HTML verwendet einen Switcher für Markup und einen für eine Klasse:

<div class="promo{% if compact_mode %} promo--compact{% endif %}">
  {% if show_badge %}
  <span class="promo-badge">{{ badge_text }}</span>
  {% endif %}
  <p class="promo-title">{{ promo_title }}</p>
  <p class="promo-text">{{ promo_text }}</p>
  <a class="promo-button" href="#">Claim the offer</a>
</div>

Mit dem Abzeichen aus, das Ganze span Seite weg ist, nicht nur versteckt Die Kompaktklasse schaltet im CSS-Panel ein paar Regeln um:

.promo--compact { padding: 18px 22px; }
.promo--compact .promo-title { font-size: 20px; }
.promo--compact .promo-text { display: none; }

Man kann den Wert auch vergleichen, wie in {% if show_badge == 'yes' %}Vergleichen Sie jedoch den Rückgabewert, nicht den Label-On-Text. {% if show_badge == 'Yes' %} Passt nie zusammen Die Ebene {% if show_badge %} Form vermeidet das Problem.

Lassen Sie die Wähler Box für dieses Feld leer Ein Toggle-Wert ist kein CSS-Wert, daher gehört Styling in das CSS-Panel hinter eine Klasse wie die oben.

Andere Felder ausblenden, bis der Umschalter eingeschaltet ist #

Dies ist die zweite Hälfte dessen, wofür ein Switcher da ist Auf dem Feld willst du dich verstecken, seine Einstellungen öffnen, scrollen zu Bedingungen und klicken Bedingung hinzufügen. Für das Feld Abzeichentext:

• Kontrollname: show_badge„der Name des Switchers.
• Gleichstellung: Gleich.
• Kontrollwert: yes„Der Rückgabewert des Switchers.

Badge Text erscheint jetzt nur noch in Elementor, während Show Badge eingeschaltet ist Siehe Bedingungen Für die anderen Betreiber.

Verwenden Sie die Switcher-Steuerung in Elementor #

Fügen Sie das Widget zu einer Seite hinzu, oder laden Sie den Editor neu, wenn die Seite bereits geöffnet war Der Umschalter sitzt unter Ihrem Etikett mit Ihrem Label On oder Label Off Wort darin Klicken Sie es und die Vorschau aktualisiert sich sofort, und jedes Feld mit einer Bedingung darauf erscheint oder verschwindet gleichzeitig.

Hier ist die fertige Karte auf der Vorderseite mit dem Abzeichen, mit kompaktem Modus an, und mit beiden Umschaltern aus:

Häufige Anwendungsfälle #

• Optionale Abzeichen, Bänder und Symbole.
• Eine kompakte oder dichte Layoutvariante.
• Zeigen oder ausblenden Sie eine sekundäre Schaltfläche, eine Fußnote oder einen Teiler.
• Ein Master-Switch, der eine Gruppe verwandter Felder im Panel anzeigt.

Tipps für die Arbeit mit dem Switcher-Feld #

• Belassen Sie den Rückgabewert bei yes. Es hält den Umschalter, die Standardeinstellung und Ihre Bedingungen im Gleichschritt.
• Benennen Sie das Feld nach dem, was es anzeigt(wie z show_badge oder compact_mode. Der Name liest sich wie eine Frage in {% if %}.
• Schreiben Sie Label On und Label Off für die Option„Nicht nur Ja und Nein, wenn die beiden Staaten Namen haben.
• Kombinieren Sie es mit Bedingungen Die Felder einer Option müssen also erst angezeigt werden, wenn sie eingeschaltet ist.
• Mehr als zwei Staaten? Nutzen Sie die Feld auswählen Für einen Dropdown oder die Feld wählen Für Symbol-Schaltflächen.

Häufig gestellte Fragen #

Einwickelnd #

Fügen Sie einen Switcher hinzu, geben Sie ihm einen klaren Namen und Etiketten und belassen Sie den Rückgabewert bei yes, und wickeln Sie den optionalen Teil Ihres Markups ein {% if %}. Fügen Sie den Feldern, die Option benötigt, eine Bedingung hinzu und das Panel bleibt kurz, bis ein Editor es einschaltet. Für drei oder mehr Zustände siehe die Wählen und Wählen Sie Felder, und überprüfen Preisbildung Für das, was jeder Plan beinhaltet.