Master Addons
Preisgestaltung
Kategorien anzeigen

Tabs

Roy Jemee
Aktualisiert am 17. September 2026

7 min gelesen

Das Tabs-Feld gruppiert Steuerelemente in einen Tabulatorstreifen im Elementor-Panel, wie die Registerkarten Normal und Hover bei den Elementor-eigenen Schaltflächenstilen. Sie erstellen es in den Master-Addons Widget-builder: Fügen Sie die Registerkarten hinzu, legen Sie Felder in jedes einzelne ein und lesen Sie jeden Wert in Ihrem HTML oder CSS mit einem dreiteiligen Token wie z {{ button_states.hover.bg }}.

Tabs ist ein Pro-Feld Das kostenlose Plugin enthält einen begrenzten Widget Builder und der vollständige Satz an Feldern ist im Lieferumfang enthalten Master Addons Pro.

Schaltfläche, die mit dem Widget Builder Tabs-Feld erstellt wurde und seine normalen Farben und Hover-Farben zeigt

Was das Tabs-Feld bewirkt #

  • Es fügt eine Reihe anklickbarer Registerkarten zu einem Abschnitt des Panels Ihres Widgets hinzu. Wenn Sie auf eine Registerkarte klicken, werden die darin enthaltenen Felder angezeigt.
  • Jeder Reiter hat einen Namen, eine Beschriftung und eine eigene Liste von Feldern.
  • Das Feld Tabs speichert selbst keinen Wert Die Werte gehören zu den Feldern innerhalb der Tabs.
  • Vorlagen lesen diese Werte mit {{ tabs_name.tab_name.field_name }}. Zwei Registerkarten können dieselben Feldnamen verwenden, wodurch die Normal- und Hover-Regeln leicht zu vergleichen sind.

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 Widget im Widget Builder geöffnet Das Beispiel in diesem Handbuch ist ein “Hover Button” - Widget: ein Textfeld für die Button-Beschriftung, plus ein Tabs-Feld namens button_states Mit einem Normal und einem Hover Tab. Jede Registerkarte enthält zwei Farbfelder, die bg und text.

So fügen Sie ein Tabs-Feld 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 “Button Style”.
  3. Typ tabs Im Feldsuchfeld links.
  4. Ziehen Tabs In den Abschnitt Seine Einstellungen öffnen sich in der linken Seitenleiste, und die Abschnittsvorschau zeigt den Tabstreifen.
Tabs-Feld gefunden, indem Tabs im Master Addons Widget Builder mit einer Normal- und Hover-Tab-Vorschau in einem Stilabschnitt durchsucht werden

Ein neues Tabs-Feld wird benannt tabs und kommt mit zwei leeren Tabs, tab_1 und tab_2. Benennen Sie sie um, bevor Sie irgendwelche Token schreiben, denn die Namen werden Teil jedes Pfades.

Tabs Feldoptionen erklärt #

Tabulatorenfeld Etiketten-, Namens- und Tabulatortabelle mit Normal- und Hover-Tabulatternamen und -beschriftungen
  • Etikett Benennt das Feld im Inneren des Builders, In Elementor sehen die Redakteure den Abschnittstitel und die Tab-Etiketten, nicht diese Bezeichnung.
  • Name Der erste Teil jedes Tokens ist also button_states gibt {{ button_states.normal.bg }}. Nur Buchstaben, Zahlen und Unterstriche.
  • Beschreibung Notiz für Sie im Inneren des Bauherrn ist.
  • Tabs Ist die Liste der Tabs Jede Zeile hat eine Name (wird in Token verwendet, wie z hover) und ein Etikett (auf der Registerkarte angezeigt, z. B. Hover).Klicken Tab hinzufügen Für eine andere Reihe, oder das rote Kreuz, um eine zu entfernen.

Unter der Registerkartenliste zeigt die Seitenleiste eine Tab-feld Tabelle pro Tab, betitelt mit der Beschriftung des Tabs Hierhin gehen die Felder.

Tab-Feldtabellen für die Registerkarten Normal und Hover, jeweils mit bg - und Textfarbfeldern
  • Name Ist der letzte Teil des Tokens Du kannst in jedem Tab denselben Namen wiederverwenden, als bg und text Hier sind.
  • Etikett Ist der Text neben dem Steuerelement in Elementor.
  • Typ Setzt das Steuerelement: Text, Nummer, Textarea, WYSIWYG, Code, Versteckt, Switcher, Wählen, Farbe, Schriftart, Typografie, Datumszeit, URL, Medien, Galerie, Symbole, Schieberegler, Abmessungen oder Hintergrund.
  • Klicken Sie auf Feld hinzufügen Tab eine Zeile hinzuzufügen.

Die gängigen Einstellungen weiter unten (Label anzeigen, Separator, Bedingungen und der Rest) ändern nichts daran, wie ein Tabs-Feld in Elementor erscheint, sodass Sie es in Ruhe lassen können.

Lesen Sie Tab-Werte in Ihrer Vorlage #

Jeder Wert innerhalb einer Registerkarte wird mit drei Namen gelesen, die durch Punkte verbunden sind: das Tabs-Feld, die Registerkarte und dann das Feld.

{{ tabs_name.tab_name.field_name }}

Sie müssen diese nicht eingeben. Nachdem Sie gespeichert haben, listet das Dokumentationsfeld neben dem HTML-Editor jeden Pfad unter der Bezeichnung des Tabs-Felds auf und das Kopiersymbol kopiert einen.

Widget Builder Dokumentation Panel Auflistung button_states.normal.bg und andere verschachtelte Tab Token

Token funktionieren im CSS-Tab ebenso wie im HTML-Tab Der Beispiel-Button behält seinen Basis-Look in einer Regel und liest die Tab-Farben in den nächsten beiden:

.ma-btn {
  background: #652dd9;
  color: #ffffff;
}

.ma-btn {
  background: {{ button_states.normal.bg }};
  color: {{ button_states.normal.text }};
}

.ma-btn:hover {
  background: {{ button_states.hover.bg }};
  color: {{ button_states.hover.text }};
}
Widget CSS mit button_states.normal und button_states.hover-Tokens mit einer Fallback-Regel

Die erste Regel ist ein Fallback Bis ein Editor eine Farbe auswählt, druckt ein Token nichts und die Zeile wird background: ;. Browser überspringen diese ungültige Zeile, sodass die Farben aus der ersten Regel an Ort und Stelle bleiben.

Nur der volle Pfad funktioniert Im Testen, der {{ bg }}, {{ hover.bg }} und {{ button_states.hover }} Alles druckte nichts, während {{ button_states.hover.bg }} Farbe gedruckt Wenn ein Wert leer rauskommt, erst nach drei Teilen und genauer Schreibweise suchen.

Klicken Sie auf Einstellungen speichern Wenn du fertig bist.

Verwenden Sie die Tabs-Steuerung in Elementor #

Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite bereits geöffnet war Wählen Sie das Widget und öffnen Sie die Stil Tab. Ihr Abschnitt zeigt den Tabulatorstreifen mit geöffnetem Normal-Tab.

Normale Registerkarte des Tabs-Steuerelements im Elementorstil-Tab mit Hintergrund- und Textfarbe

Setzen Sie die Farben auf der Registerkarte Normal, und klicken Sie dann auf Schweben und das zweite Paar setzen Bewegen Sie die Maus über die Schaltfläche in der Vorschau, um die Hover-Farben zu überprüfen.

Hover-Tab des Tabs-Steuerelements mit der Schaltfläche, die die Hover-Farben anzeigt

Häufige Anwendungsfälle #

  • Normal - und Hover-Farben für Schaltflächen, Karten und Links.
  • Aktive und inaktive Stile für Filter, Umschalter und Menüpunkte.
  • Helle und dunkle Versionen einer Komponente, bearbeitet aus einem Abschnitt.
  • Inhalte, die in Gruppen aufgeteilt sind, z. B. eine Registerkarte vorne und hinten auf einer Flip-Karte, mit Text- und Medienfeldern in jedem.

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

  • Wählen Sie zuerst den Tabs-Feldnamen und die Tab-Namen aus. Um sie später umzubenennen, muss jedes Token aktualisiert werden, das sie verwendet.
  • Feldnamen über Tabs hinweg wiederverwenden. normal.bg und hover.bg leichter lesbar sind als zwei nicht verwandte Namen.
  • Vermeiden Sie es, das Label eines Feldes zu ändern, sobald sich das Widget auf Live-Seiten befindet. Elementor speichert die gespeicherten Werte unter einem vom Label erstellten Schlüssel, sodass ein neues Label vorhandene Werte von diesen Seiten verschwinden lassen kann.
  • Legen Sie Standardstile in eine Regel vor die Token-Regel, damit ein leerer Wert niemals das Design beeinträchtigt.
  • Geben Sie Ihren Klassen ein Präfix (z. B ma-btn). CSS aus dem CSS-Tab des Widgets gilt für die ganze Seite, also generische Namen wie .button Mit anderen Stilen kollidieren kann.
  • Eine einzelne Ein-/Aus-Gruppe von Einstellungen anstelle von Tabs finden Sie in der Popover-Schaltfeld. Für eine Liste, zu der der Editor Zeilen hinzufügen kann, verwenden Sie die Repeaterfeld.

Häufig gestellte Fragen #

Ist das Tabs-Feld frei?

No. Tabs 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.

Wie lese ich einen Wert von einem bestimmten Tab?

Verwenden Sie drei Namen, die durch Punkte verbunden sind: den Tabs-Feldnamen, den Tabulatornamen, dann den Feldnamen. Zum Beispiel {{ button_states.hover.bg }} Liest die bg Feld aus dem hover Tab.

Können zwei Tabs Felder mit demselben Namen enthalten?

Ja. Der Tab-Name ist Teil des Pfades, also {{ button_states.normal.bg }} und {{ button_states.hover.bg }} Getrennte Werte bleiben.

Warum druckt mein Tab Token nichts?

Entweder ist der Pfad unvollständig oder der Editor hat noch keinen Wert festgelegt Überprüfen Sie, ob das Token alle drei Teile hat und mit den Namen im Builder übereinstimmt Behalten Sie bei leeren Werten eine Fallback-Regel vor der Token-Regel in Ihrem CSS bei.

Funktionieren die Token im CSS-Tab?

Ja. Das Gleiche {{ tabs_name.tab_name.field_name }} Token funktionieren sowohl in den HTML - als auch in den CSS-Registern.

Einwickelnd #

Benennen Sie das Tabs-Feld und seine Tabs, fügen Sie jedem Tab Felder hinzu und lesen Sie sie mit {{ tabs_name.tab_name.field_name }} In Ihrem HTML oder CSS. eine Fallback-Regel für leere Werte beibehalten und sich mit Namen abfinden, bevor das Widget live geht Die Farbfeld Doc deckt die in diesem Beispiel verwendete Farbsteuerung ab und Preisbildung Zeigt, was jeder Plan beinhaltet.

Was sind deine Gefühle