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.
Das Advanced Tabs-Widget in Master Addons for Elementor übernimmt das Grundlegende Elementor-Tabulatoren Widget und fügt viel mehr Flexibilität hinzu Sie erhalten drei kostenlose voreingestellte Layouts plus eine Pro-Voreinstellung, die Option, jedem Tab ein Bild oder Symbol hinzuzufügen, und mit Master Addons Pro die Möglichkeit, einen gespeicherten Elementor-Abschnitt in jedes Tab-Panel zu laden Für einen schnellen Überblick und Demos siehe die Erweitertes Elementor-Tabulat-Widget Seite.
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 visuellen Voreinstellungen wechseln, einzelnen Tabs Bilder oder Symbole hinzufügen, Klartext (kostenlos) oder eine gespeicherte Vorlage (Pro) als Panelinhalt verwenden und normale, Hover- und aktive Zustä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 (hierfür sind Master Addons Pro erforderlich).
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, und die letzte braucht Pro:
- 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 (Pro): Beschriftungen werden zu größeren Tasten im Kartenstil über dem Inhaltsfeld.
Sie können sofort zwischen diesen wechseln, also probieren Sie sie alle aus und sehen Sie, welcher am besten zu Ihren Inhalten passt. Pro fügt außerdem eine hinzu 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 Keine, Symbol, oder Bild Für die Tab-Beschriftung.
- Bild / Symbol: Das neben dem Tab-Titel angezeigte visuelle Asset.
- Tab-Titel: Die Textbesucher klicken auf.
- Inhaltstyp: Verwendung verwenden Inhalt Für einen normalen Texteditor, oder, mit Pro, Gespeicherter Abschnitt, Gespeichertes Widget, oder Gespeicherte Seitenvorlage.
- Tab-Inhalt: Der tatsächliche Inhalt oder die Vorlage, die das Panel ausfüllt.
In der Demo verwendet der erste Tab ein Bild Setzen Sie einfach den Symboltyp auf Bild, öffnen Sie die Mediathek, und wählen Sie Ihre Datei Das Bild wird neben dem Tab-Titel 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 (Pro) #
Mit Master Addons Pro ä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 die Voreinstellung des Pro Tabular Content macht jede Option hervorzuheben.
- 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 #
Was ist das Advanced Tabs Widget in Master Addons?
Es handelt sich um ein Elementor-Widget zum Erstellen von Tab-Inhalten. Sie können horizontale, vertikale, linke Aktivgrenze- oder Tabellarlayouts wählen; Fügen Sie jeder Registerkarte Symbole oder Bilder hinzu; Füllen Sie Panels mit Text oder mit gespeicherten Abschnitten auf Pro; und gestalten Sie den Normal-, Hover- und Aktivzustand.
Kann ich eine Elementor-Vorlage in eine Registerkarte laden?
Ja, mit Master Addons Pro. Legen Sie den Inhaltstyp der Registerkarte auf den gespeicherten Abschnitt fest und wählen Sie eine beliebige Vorlage aus Ihrer Elementor-Bibliothek aus. Diese Vorlage wird im Bedienfeld gerendert, wenn die Registerkarte aktiv ist.
Wie mache ich standardmäßig einen Tab geöffnet?
Öffnen Sie das Tab-Element in der Registerkarte Inhalt und schalten Sie als Standard festlegen ein Halten Sie sich an eine Standard-Registerkarte, damit das Panel immer in einem klaren Zustand startet.
Was ist der Unterschied zwischen Horizontal Tabs und Tabular Content?
Horizontal Tabs setzt die Beschriftungen in einer einzigen Zeile über dem Inhalt Tabular Content, eine Pro-Voreinstellung, verwandelt die Beschriftungen in größere Tasten im Kartenstil, was gut funktioniert, wenn Sie möchten, dass sich jede Registerkarte wie eine separate Auswahl anfühlt.
Kann ich verschiedene Symboltypen für verschiedene Registerkarten verwenden?
Ja. Jede Registerkarte hat einen eigenen Symboltyp-Steuerelement, so kann eine Registerkarte ein Bild verwenden, während eine andere ein Symbol verwendet Für einen saubereren Look versuchen Sie, den visuellen Stil über alle Registerkarten hinweg konsistent zu halten.
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.
