Tabs

Tabs sind eine der einfachsten Möglichkeiten, um zu verhindern, dass sich eine lange Seite überwältigend anfühlt. Anstatt alles vertikal zu stapeln, teilen Sie Inhalte in anklickbare Abschnitte auf, die Besucher in ihrem eigenen Tempo erkunden können.

Die Erweiterte Tabs Widget in Master-Addons für Elementor Nimmt das Grundlegende Elementor-Tabulatoren Widget und fügt viel mehr Flexibilität hinzu Sie erhalten vier voreingestellte Layouts, die Option, jedem Tab eine Bild, Symbol - oder Lottie-Animation hinzuzufügen, und die Möglichkeit, einen gespeicherten Elementor-Abschnitt in jedes Tab-Panel zu laden.

Im Folgenden gehe ich Ihnen durch, wie Sie es mit den gleichen Layoutoptionen, die im Demovideo gezeigt werden, von Grund auf neu einrichten.

Was das Elementor Advanced Tabs-Widget tut #

Im Kern erstellt dieses Widget einen Satz Tab-Labels plus einen Inhaltsbereich, wenn jemand auf ein Label klickt, erscheint das passende Panel.

Im Vergleich zum Standard-Elementor-Tabs-Widget gibt Ihnen die Master-Addons-Version mehr Kontrolle Sie können zwischen vier visuellen Voreinstellungen wechseln, einzelnen Tabs Bilder oder Symbole hinzufügen, als Panel-Inhalt Klartext oder eine gespeicherte Vorlage verwenden und Style-Normal, Hover und Aktivzustände separat gestalten.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Wenn Sie es noch nicht installiert haben, überprüfen Sie die Installationsführung.
• Das Advanced Tabs-Widget ist im Master Addons-Optionsfeld aktiviert.
• Optional: eine gespeicherte Elementor-Vorlage, wenn Sie eine in eine Registerkarte laden möchten.

Fügen Sie das Widget Erweiterte Registerkarten hinzu #

Öffnen Sie den Elementor-Editor und suchen Sie nach dem Erweiterte Tabs Widget unter dem Abschnitt Master-Addons Ziehen Sie es in Ihre Seite und Sie sehen die standardmäßige horizontale Tableiste mit drei Beispiel-Tabs: Smart Control, Better Performance, und Easy Customization.

Wählen Sie ein voreingestelltes Layout #

Der schnellste Weg, den Look zu ändern, ist der Stilvoreinstellung Dropdown im Reiter Inhalt Sie haben vier Möglichkeiten:

• Horizontale Tabs: Beschriftungen laufen über die Oberseite mit Inhalt darunter Dies ist die Voreinstellung.
• Vertikale Tabs: Beschriftungen stapeln sich links und Inhalte erscheinen rechts.
• Linke aktive Grenze: Ähnlich wie bei vertikalen Tabs, aber der aktive Tab erhält links einen farbigen Rand.
• Tabellarischer Inhalt: Beschriftungen werden zu größeren Tasten im Kartenstil über dem Inhaltsfeld.

Du kannst sofort zwischen diesen wechseln, also probiere sie alle aus und schaue, welches am besten zu deinen Inhalten passt Es gibt auch eine Spaltenlayout Steuerung, mit der Sie anpassen können, wie viele Spalten die Tab-Etiketten einnehmen, was praktisch ist, wenn Sie engere Etiketten und mehr Platz für Inhalte wünschen.

Konfigurieren Sie die Registerkarten und Inhalte #

Wenn Sie ein Layout ausgewählt haben, erweitern Sie das Inhalt Abschnitt, um die Liste der Registerkarten zu sehen Jedes Element hat sein eigenes Einstellungsfeld Sie können Registerkarten duplizieren, löschen oder neu anordnen und drücken Artikel hinzufügen Wenn man mehr braucht.

Einstellungen pro Tab #

• Als Standard festlegen: Wählen Sie aus, welcher Tab sich beim Laden der Seite zuerst öffnet.
• Symboltyp: Pick Symbol, Bild, oder Lottie Für das Tab-Etikett, oder lassen Sie es leer.
• Bild / Symbol / Lottie: Das neben dem Tab-Titel angezeigte visuelle Asset.
• Tab-Titel: Die Textbesucher klicken auf.
• Inhaltstyp: Verwendung verwenden Inhalt Für einen normalen Texteditor, oder Gespeicherter Abschnitt Elementor-Vorlage einzuziehen.
• Tab-Inhalt: Der tatsächliche Inhalt oder die Vorlage, die das Panel ausfüllt.

In der Demo verwendet die erste Registerkarte ein Bild Setzen Sie einfach den Symboltyp auf Bild, öffnen Sie die Mediathek und wählen Sie Ihre Datei aus Das Bild wird sowohl neben dem Tabulatortitel als auch innerhalb des Inhaltsfelds angezeigt.

Für den zweiten Tab wechselt die Demo zu einem Icon Wählen Sie den Icon-Typ und wählen Sie etwas aus, das zum Label passt In diesem Fall funktioniert ein Icon im Tacho-Stil gut für “Bessere Leistung”

Laden Sie einen gespeicherten Abschnitt in eine Registerkarte #

Hier wird es interessant Ändern Sie die Inhaltstyp zu Gespeicherter Abschnitt und wählen Sie eine beliebige Vorlage aus Ihrer Elementor-Bibliothek aus. Die Demo lädt ein vollständiges FAQ-Akkordeon in einen Tab, was bedeutet, dass Ihr Panel Überschriften, Akkordeons, Formulare oder alles andere enthalten kann, was Sie als Vorlage gespeichert haben.

Gestalten Sie die Tabs und Inhalte #

Gehen Sie rüber zum Stil Tab zum Ändern von Farben, Typografie, Abständen und Rändern Die Bedienelemente sind in zwei Hauptabschnitte unterteilt:

• Tabs: Deckt die Tab-Etiketten ab, einschließlich Titelfarbe, Titeltypografie, Hintergrundfarbe, Inhaltsfarbe, Inhaltstypografie, Inhaltsausrichtung, Randradius, Kastenschatten, Polsterung und Rand.
• Inhalt: Stilt das Panel, das anzeigt, wenn ein Tab aktiv ist.

Die meisten dieser Steuerelemente unterstützen normale, Hover - und aktive Zustände, sodass die Registerkarte, die jemand gerade ansieht, anders aussehen kann als die anderen Die Inhaltsangleichung Mit den Schaltflächen können Sie den Paneltext auch an der Oberseite, Mitte oder Unterseite des Inhaltsbereichs ausrichten.

Erweiterte Einstellungen #

Die Fortgeschritten Tab verfügt über die üblichen Elementor-Steuerelemente, die Sie erwarten würden: Rand, Polsterung, Eingangsanimation, responsive Sichtbarkeit, benutzerdefiniertes CSS und Attribute Verwenden Sie diese, um die Positionierung anzupassen oder die Tabs auf bestimmten Bildschirmgrößen auszublenden.

Das Ergebnis auf der Seite #

Nach der Veröffentlichung funktionieren die Tabs genau so, wie Sie sie eingerichtet haben, zuerst öffnet sich die Standard-Tab, Besucher klicken sich durch die Beschriftungen, und jeder gespeicherte Abschnitt oder jedes Medium, das Sie hinzugefügt haben, wird im passenden Panel angezeigt.

Häufige Anwendungsfälle #

• Merkmalsaufschlüsselungen Auf Produktseiten, mit einem Tab pro Funktion.
• Preis- oder Planvergleiche Verwendung von tabellarischen Inhalten oder vertikalen Etiketten.
• FAQ-abschnitte In einer Lasche, indem Sie ein gespeichertes Akkordeon als Panelinhalt laden.
• Leistungsbeschreibungen Dabei deckt jede Registerkarte einen anderen Dienst ab.
• Portfolio oder Fallstudien Mit einem Bild oder Symbol pro Registerkarte und Details im Panel.

Tipps für bessere Tabs #

• Ordnen Sie die Voreinstellung Ihren Inhalten zu. Horizontale Tabs funktionieren am besten mit kurzen Etiketten, vertikale Tabs eignen sich hervorragend für längere Listen und tabellarische Inhalte heben jede Option hervor.
• Legen Sie Ihre wichtigste Registerkarte als Standard fest. Verwenden Als Standard festlegen Besucher sehen also zuerst Ihre besten Inhalte.
• Halten Sie Symbole und Bilder konsistent. Das Mischen von Bildern, Symbolen und Klartextetiketten in derselben Registerkarte sieht tendenziell chaotisch aus.
• Gespeicherte Abschnitte nicht überlasten. Eine Form oder ein Akkordeon in einer Lasche ist perfekt, aber ein schwerer Heldenabschnitt kann Dinge verlangsamen, selbst wenn er versteckt ist.
• Aktivieren Sie die mobile Ansicht, bevor Sie veröffentlichen. Vertikale Tabs können auf kleinen Bildschirmen hoch werden, also sehen Sie sich zuerst das responsive Layout an.

Häufig gestellte Fragen #

Einwickelnd #

Die Erweiterte Tabs Widget ist eine solide Art zu bauen Elementor erweiterte Tabs Mit mehreren Layouts und Rich Content Panels Mischen und passen Sie die Voreinstellungen mit Bildern pro Tab, Symbolen oder gespeicherten Abschnitten an, bis Sie das gewünschte Design erhalten.

Wenn Sie sehen möchten, was noch verfügbar ist, durchsuchen Sie das gesamte Set Master Addons Widgets und Erweiterungen. Und wenn ihr neugierig auf Pro-Features seid, schaut euch die Preisseite.