Tabs

Die Tabs-feld Organisiert die Steuerelemente eines Widgets in Panel-Tabs, die gleiche Struktur, die Elementors eigene Widgets für das Normal- und Hover-State-Styling verwenden. Innerhalb der Master-Add-ons Widget-builderIn „definieren Sie die Registerkarten, platzieren in jedem die untergeordneten Bedienelemente und das Elementorfeld rendert sie als kompakten Registerkartenstreifen anstelle einer langen Bildlaufrolle mit Feldern.

Die Tabs-Steuerung unterstützt Bedingungen Wie jedes Feld und seine Kinder werden durchgelesen Twig-Syntax-Vorlagen-Engine Mit einem dreiteiligen Token, dem {{ tabs.tab_1.field }}, keine Schleife erforderlich Beide Führungen behandeln die Details und Einschränkungen.

Tabs ist ein Strukturfeld Es hält keinen eigenen Wert; die Werte gehören den Kindern, und Ihre Vorlage liest jeden einzelnen durch einen verschachtelten Pfad, der das Tabs-Feld, die Registerkarte und das Feld darin benennt Keine Schleifen, keine Tricks, nur Adressen.

Was das Tabs-Feld bewirkt #

• Macht einen Laschenstreifen Im Widget-Panel, das auf dem Steuerregisterkartenmechanismus von Elementor basiert.
• Hält einen Satz Tabs, jeweils mit eigenem Namen, Etikett und Liste der Kinderkontrollen.
• Hält verwandte Zustände zusammenDie klassische Paarung besteht aus Normal- und Hover-Versionen derselben Einstellungen.
• Entblößt Kinderwerte über verschachtelte Pfade In Ihrer Vorlage: der Name des Tabulatorenfelds, dann der Tabulator und dann das Feld.
• Ermöglicht die gleichen untergeordneten Namen auf allen Registerkarten, also können Normal und Hover sich sauber spiegeln.

Wenn Sie gerade erst mit dem Bauherren beginnen, lesen Sie die Übersicht über Widget Builder Vor diesem.

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, das im Widget Builder-Editor geöffnet wird Unser Beispiel ist ein Button-Widget mit einem Tabs-Feld namens states Halten Sie eine Normal-Registerkarte und eine Hover-Registerkarte mit jeweils einem benannten Farbfeld bg.

So fügen Sie ein Tabs-Feld hinzu #

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

Ziehen Sie es in einen Abschnitt unter dem Stil Tab, wo das State Styling lebt, dann die Tabs definieren und in jede einzelne Kindersteuerung fallen lassen, die Optionen des Feldes öffnen sich links, sobald es landet.

Tabs Feldoptionen erklärt #

• Etikett: Die über dem Laschenstreifen in Elementor gezeigte Überschrift.
• Name: Die eindeutige Kennung für die gesamte Tab-Gruppe, Buchstaben, Zahlen und Unterstriche, zum Beispiel states. Es ist das erste Segment des Vorlagenpfads eines jeden Kindes.
• Tabs: Die Liste der Tabs. Jeder Tab trägt einen Namen (wird beispielsweise in Vorlagenpfaden verwendet normal(), ein Etikett (auf dem Streifen abgebildet, zum Beispiel “Normal”) und ein eigener Satz Kindersteuerungen.
• Kinderkontrollen: Die Felder innerhalb jeder Registerkarte Hier funktionieren Wertefeldtypen, und jeder behält seine eigenen Optionen und seine eigene Werteform.
• Beschreibung, Etikett anzeigen, Trenner und Bedingungen sind die gleichen Anzeigeoptionen wie überall sonst.

Tabulatorwerte durch verschachtelte Pfade lesen #

Kinder eines Tabs-Feldes werden mit einem dreiteiligen Punktpfad angesprochen: dem Namen des Tabs-Felds, dem Namen des Tabs und dann dem Namen des untergeordneten Felds.

{{ tabsname.tabname.fieldname }}

Es gibt keine Schleife über Tabs Jeder Wert wird genau dort gelesen, wo man ihn braucht Für das Buttonbeispiel wird ein states Tabs-Feld mit Normal- und Hover-Tabulatoren, die jeweils eine halten bg Farbfeld, Drähte in das CSS-Panel so:

.ma-btn {
  background: {{ states.normal.bg }};
}
.ma-btn:hover {
  background: {{ states.hover.bg }};
}

Das Kind in beiden Tabs gleich zu benennen ist bewusst und wird unterstützt Intern deduiert der Builder doppelte Schlüssel mit einem Zähler, aber der Vorlagenpfad bleibt pro Tab, also bg In Normal und bg In Hover bleiben zwei unterschiedliche, sauber adressierte Werte. Verspiegelte Namen sind das Muster, das angestrebt werden muss: Wer die Vorlage liest, sieht, dass sich die Normal- und Hover-Regeln nur um ein Pfadsegment unterscheiden.

Achtung: der flache Token {{ bg }} Sich zu nichts auflöst, und der Zweiteiler auch {{ normal.bg }}. Der Pfad beginnt immer mit dem eigenen Namen des Tabs-Feldes Wenn ein Tabulatorwert leer ausdruckt, zählen Sie zuerst die Segmente. Durch das Umbenennen eines Tabulators werden Pfade auf die gleiche stille Weise unterbrochen; Das CSS kompiliert weiter, der Wert kommt einfach nicht mehr an, also legen Sie sich auf Tabulatternamen fest, bevor Sie die Regeln schreiben.

Verwenden Sie die Tabs-Steuerung in Elementor #

Fügen Sie Ihr benutzerdefiniertes Widget zu einer Seite in Elementor hinzu (oder laden Sie den Editor neu, wenn die Seite bereits geöffnet war).Der Tabulatorstreifen wird im Panel mit Ihren Tabulatorbezeichnungen gerendert, und wenn Sie auf eine Registerkarte klicken, werden die untergeordneten Steuerelemente angezeigt.

Ein Editor setzt auf der ersten Registerkarte den Hintergrund Normal, wechselt auf Hover, und stellt die zweite Farbe ein, das Bewegen der Schaltfläche in der Vorschau zeigt den Übergang sofort an, da beide Werte bereits in den CSS-Regeln des Widgets sitzen.

Häufige Anwendungsfälle #

• Normales und Hover-Styling Für Schaltflächen, Karten und Links die klassische Paarung.
• Aktive und inaktive Zustände Für Umschalter, Filter und Navigationselemente.
• Vorher-Nachher-Einstellungen Im Vergleich oder Discover Widgets.
• Helle und dunkle VariantenDadurch können Redakteure beide Schemata aus einem Abschnitt abstimmen.
• Seltsames und gleichmäßiges Reihen-Styling in Listen - und Tabellen-Widgets.

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

• Adresswerte mit dem vollen dreiteiligen Pfad. {{ states.hover.bg }} Werke; {{ bg }} und {{ hover.bg }} Nicht tun.
• Spiegeln Sie Kindernamen auf Tabs. Gleiche Felder, gleiche Namen, ein unterschiedliches Pfadsegment; Die Vorlage bleibt lesbar und die Registerkarten bleiben vergleichbar.
• Tab-Namen kurz und klein halten. Es handelt sich also um Vorlagenkennungen normal und hover Beat “Tab 1” und “Tab 2”.
• Verwenden Sie Tabs für Zustände, Abschnitte für Themen. Zwei Varianten derselben Einstellungen gehören in Registerkarten; Nicht verwandte Einstellungen gehören in separate Abschnitte.
• Denken Sie daran, dass jedes Kind die Wertform seines Typs behält. Ein Schieberegler in einer Registerkarte lautet immer noch als {{ states.normal.gap.size }}{{ states.normal.gap.unit }}.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Tabs verwandelt das Zustandsstyling in ein aufgeräumtes Panelmuster: definieren normal und hover Spiegeln Sie einmal die Kindernamen und Ihr CSS liest {{ states.normal.bg }} Gegen {{ states.hover.bg }} Mit nichts anderem ändern Für sich wiederholende Inhalte statt gepaarter Zustände, wird die Repeaterfeld ist das strukturelle Geschwister zu greifen Erkunden Sie den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.