Elementor Advanced Tabs Widget: Kostenlose horizontale, vertikale und Bild-Tabs
Das Advanced Tabs Widget in Master Addons teilt lange Inhalte in saubere, anklickbare Tabs auf, und es ist kostenlos Wählen Sie eine horizontale, vertikale oder linke aktive Randvoreinstellung, fügen Sie jedem Tabtitel ein Symbol oder Bild hinzu, und wählen Sie, ob Tabs auf Klick oder mit dem Hover jeden Tab mit Text aus dem Editor füllen, oder laden Sie mit Master Addons Pro einen gespeicherten Abschnitt, ein Widget oder eine Seitenvorlage Es funktioniert gut für Produktfunktionen, FAQs, Pläne und Schritt-für-Schritt-Anleitungen.
Sehen Sie sich das Tabs-Widget in Aktion an
Der Block unten ist das Widget, kein Screenshot Vier Tabs, Symbole auf den Titeln, und der erste, der standardmäßig auf Öffnen gesetzt ist Klicken Sie auf einen Titel, um das Bedienfeld zu wechseln.
- Übersicht
- Spezifikation
- Lieferung
- Gewährleistung
Ein Block, vier Paneele
Tabs halten eine lange Seite kurz Alles unten sitzt im selben Block, und nur das Panel, das Sie auswählen, ist auf dem Bildschirm, so dass eine Spezifikation, ein Lieferschein und eine Garantieseite aufhören, um dieselbe Bildlaufrolle zu konkurrieren.
Das ist das Widget selbst Klicke oben auf einen Titel, um das Panel zu wechseln.
Spezifikation
Jedes Panel nimmt gewöhnliche Editorinhalte: Überschriften, Absätze, Listen und Bilder Nichts hier ist ein Screenshot.
- Tab-Titel mit einem Symbol, einem Bild oder Text allein
- Horizontale, vertikale oder linke aktive Randvoreinstellungen
- Auf Klick oder auf Hover schalten
Lieferung
Ein Liefer - oder Versandpanel ist der klassische zweite Reiter auf einer Produktseite, denn die Leute suchen danach und niemand will es in der Hauptbeschreibung haben.
Legen Sie fest, welche Registerkarte sich zuerst mit Als Standard für das Element festlegen öffnet.
Gewährleistung
Das letzte Panel ist ein gutes Zuhause für Konditionen, Rücksendungen und alles andere, was einem Käufer wichtig ist, aber nicht auf den Platz gehört.
So fügen Sie Registerkarten in Elementor hinzu
Fünf Schritte von einer leeren Seite zu einem funktionierenden Tab-Block.
- Suchen Sie im Elementor-Widget-Panel nach Tabs und ziehen Sie das Widget auf die Seite.
- Öffnen Sie den Tabs-Repeater und fügen Sie pro Panel ein Element hinzu. Jedes Element verfügt über einen Tab-Titel und einen Inhaltseditor.
- Setzen Sie den Symboltyp für jedes Element auf Keine, Symbol oder Bild, wählen Sie dann das Symbol aus oder laden Sie das Bild hoch.
- Wählen Sie eine Stilvoreinstellung: Horizontale Registerkarten, vertikale Registerkarten oder linke aktive Umrandung.
- Stellen Sie den Tab-Effekt auf Klicken oder Bewegen ein und wechseln Sie den Standardwert auf der Registerkarte, die zuerst geöffnet werden soll.
Horizontale und vertikale Tabs mit Stilvoreinstellungen
Beginnen Sie mit einer integrierten Voreinstellung Horizontal Tabs legt die Titel oben in eine Reihe, Vertical Tabs reiht sie seitlich auf und Left Active Border markiert die offene Registerkarte mit einem farbigen Rand Master Addons Pro fügt einen Tabular Content voreingestellt für einen Box-Look hinzuJedes Preset ist nur ein Ausgangspunkt, sodass Sie es passend zu Ihrer Marke neu gestalten können.
- Horizontale und vertikale Layouts: Wählen Sie die Tab-Richtung, die zu Ihrem Inhalt passt.
- Visuelle Voreinstellungen: Beginnen Sie mit einem entworfenen Layout anstelle eines leeren Widgets.
- Einfaches Umschalten: Wechsel von horizontalen zu vertikalen Tabs, ohne den Inhalt neu zu erstellen.
Vertikale Tabs, live
Das gleiche Widget mit Style Preset auf Vertical Tabs. Titel laufen links ab, das Panel sitzt daneben, und auf einem schmalen Bildschirm stapelt sich der Streifen über dem Inhalt.
- Umfrage
- Entwurf
- Bauen
- Übergabe
Umfrage
Vertikale Registerkarten setzen die Titel in eine Spalte auf der linken Seite und das Panel danebenSie passen zu einem Prozess, bei dem es auf die Reihenfolge ankommt und jeder Schritt einen oder zwei Absätze hat.
Entwurf
Mit vier oder fünf Schritten liest sich ein vertikaler Streifen besser als eine horizontale Reihe, da lange Titel Platz haben und das Auge ihnen über die Seite folgt.
Bauen
Wechseln Sie mit dem Style Preset-Steuerelement zwischen den beiden Horizontal Tabs, Vertical Tabs und Left Active Border sind die drei Voreinstellungen in der Liste.
Übergabe
Auf einem schmalen Bildschirm stapelt sich der vertikale Streifen über dem Panel, sodass der Inhalt ohne ein zweites Layout lesbar bleibt.
Gespeicherte Vorlagen in Tabs (Pro)
Die kostenlose Version füllt jeden Tab aus dem Texteditor Mit Master Addons Pro kann jeder Tab einen anderen Inhaltstyp verwenden: einfachen Texteditor, einen gespeicherten Abschnitt, ein gespeichertes Widget oder sogar eine ganze gespeicherte Seitenvorlage. Das bedeutet, dass Sie eine komplexe Preistabelle, ein Kontaktformular, eine Bildergalerie oder einen anderen vorgestalteten Inhaltsblock in einen Tab legen können. Es ist, als hätten Sie mehrere Seiten in einem, ohne das Durcheinander.
- Template-Integration: Fügen Sie eine beliebige gespeicherte Elementor-Vorlage in eine Registerkarte ein, um unbegrenzte Designmöglichkeiten zu erhalten.
- Konsequentes Design: Verwenden Sie Ihre vorhandenen Abschnitte und Widgets wieder, um ein zusammenhängendes Aussehen zu bewahren.
- Perfekt für Vergleiche: Verwenden Sie Registerkarten, um zwischen verschiedenen Produktspezifikationen, Preisplänen oder Funktionslisten zu wechseln.
Tab-Styling: Farben, Ränder und Typografie
Erzielen Sie ein perfektes, poliertes Aussehen, indem Sie jeden Teil der Tabs stylen. Entwerfen Sie den Tabs-Container und den Inhaltsbereich separat. Steuern Sie für die Tabs den Normal- und Aktivzustand mit unterschiedlichen Farben, Hintergründen, Rändern und Typografie. Passen Sie die Polsterung, den Rand und die Symbolgröße an. Gestalten Sie für den Inhaltsbereich den Hintergrund, die Polsterung, die Ränder und die Typografie. Dieses Maß an Kontrolle sorgt dafür, dass Ihre Tabs integriert und professionell aussehen.
- Zustandsbasiertes Styling: Legen Sie einzigartige Farben, Hintergründe und Ränder für aktive und inaktive Registerkarten fest.
- Symbolunterstützung: Fügen Sie Symbole zu Ihren Tabs hinzu und steuern Sie deren Größe und Position.
- Content Area Design: Gestalten Sie den Content-Container so, dass er zur Ästhetik Ihrer Website passt.
Tabs beim Klicken oder Bewegen wechseln
Entscheiden Sie, wie Benutzer mit Ihren Tabs interagieren Stellen Sie den Tab-Effekt auf Klicken (traditionell) oder Bewegen (für schnellere Navigation) ein Sie können auch einstellen, welche Registerkarte standardmäßig geöffnet ist Diese Flexibilität ermöglicht es Ihnen, genau das gewünschte Benutzererlebnis zu erstellen, egal ob es sich um ein schnelles Produkt-Showcase oder eine sorgfältige, schrittweise Anleitung handelt.
- Klicken oder Bewegen: Wählen Sie den Auslöser, der zu Ihrem Inhalt passt Der Mauszeiger ist die Standardeinstellung.
- Standard Aktiv Tab: Legen Sie fest, welche Registerkarte beim Laden der Seite geöffnet ist.
Elementor-Tabs vs. Master-Addons Erweiterte Tabs
Elementors eigenes Tabs-Widget befindet sich im kostenlosen Plugin und ist in einer Sache gut, die dieses nicht kann: Es enthält andere Widgets in jedem Panel, da jede Registerkarte ein Container ist. Der Handel ist das, was die Tab-Titel tragen können und wie viel vom Styling freigelegt wird.
| Merkmal | Elementor-Tabs (freier Kern) | Master Addons Tabs |
|---|---|---|
| Lassen Sie andere Widgets in eine Registerkarte fallen | Ja, jede Platte ist ein Behälter | Nein, das Panel nimmt Editorinhalte |
| Titel seitlich (vertikal) | Ja | Ja, die Vertical Tabs sind voreingestellt |
| Wird mobil zum Akkordeon | Ja | Nein |
| Bild als Tab-Titel | Nein | Ja, Symboltyp auf Bild eingestellt |
| Symbol auf dem Tab-Titel | Ja | Ja |
| Stilvoreinstellungen | Nein | Drei, plus Tabellarischer Inhalt mit Pro |
| Schwebeschalter einschalten | Nein | Ja, Tab-Effekt auf Hover eingestellt |
| Gespeicherte Vorlage in einer Registerkarte | Nicht benötigt, Widgets verwenden | Für |
Also die Kurzversion: wenn ein Panel ein Formular, eine Galerie oder eine Preistabelle darin braucht, das Kern-Widget verwenden, wenn der Tab-Strip selbst das Designproblem ist, mit Bildtiteln, Voreinstellungen oder Hover-Switching, hat dieser die Steuerung.
Was das Tabs-Widget tut und was nicht
Im Widget-Panel geprüft Die “Nein” - Zeilen sind so nützlich wie die übrigen, denn zwei davon sind die Fragen, die die Leute am meisten stellen.
| Einstellung | Unterstützt |
|---|---|
| Horizontale Laschen | Ja, die Standardvoreinstellung |
| Vertikale Laschen | Ja |
| Left Active Border-Voreinstellung | Ja |
| Symbol auf einem Tab-Titel | Ja, aus der Elementor-Symbolbibliothek |
| Bild als Tab-Titel | Ja, Symboltyp auf Bild eingestellt |
| Nur Texttitel | Ja, der Symboltyp ist auf Null gesetzt |
| Klicken oder mit dem Mauszeiger einschalten | Ja, Tab-Effekt |
| Wählen Sie aus, welcher Tab zuerst geöffnet wird | Ja, als Standard für das Element festlegen |
| Tab - und Inhaltsausrichtung | Ja |
| Aktive und inaktive Farben | Ja |
| Gespeicherter Abschnitt, Widget oder Seitenvorlage in einem Tab | Für |
| Tabellarischer Inhalt voreingestellt | Für |
| Spaltenlayout für den Tabulatorstreifen | Für |
| Öffnen Sie einen Tab aus einer URL oder einem Link | Nein |
| Akkordeon auf Mobilgeräten | Nein |
Verwandte Widgets für den gleichen Job: Erweiterte Akkordeon Für FAQ-Listen, die Inhalte umschalten Zum Vertauschen eines Inhaltsblocks, Dynamische Tabelle Für Spezifikationen, Preistabelle für Pläne, und Inhaltsverzeichnis für lange Seiten.
Bild- und Symbolregisterkarten in Elementor
Jeder Tab-Titel kann ein Symbol aus der Elementor-Bibliothek oder ein eigenes Bild tragen Icon Type auf Image setzen, ein Bild aus der Mediathek auswählen, und der Titel wird zu einem Image-Tab Dies ist eine kostenlose Option und funktioniert mit jeder freien Voreinstellung.
- Symboltyp pro Registerkarte: Keine, Symbol oder Bild.
- Verwenden Sie Bilder für Produkt- oder Kategoriereiter und Symbole für Funktionslisten.
- Behalten Sie einen Stil in einer Registerkarte bei, da das Mischen von Bildern und Symbolen viel los ist.
Versuchen Sie es mit Inhalten, die sich an Ort und Stelle öffnen, anstatt die Panels zu wechseln Erweiterte Akkordeon oder Inhalte umschalten (Pro).
Häufig gestellte Fragen für Tabs
Kann ich sowohl Symbole als auch Text in den Tab-Titeln verwenden?
Ja. Legen Sie für jede Registerkarte Symboltyp auf Symbol oder Bild fest, und wählen Sie dann ein Symbol aus der Bibliothek oder ein Bild aus Ihrer Mediathek aus. Der Symbolgrößenregler in der Registerkarte Stil legt fest, wie groß das Symbol erscheint.
Wie mache ich die Tabs auf dem Handy gut aussehen?
Verwenden Sie den Reaktionsmodus von Elementor, um Typografie, Polsterung und Ränder für Tablet und Telefon anzupassen Vorschau vertikaler Registerkarten auf einem kleinen Bildschirm vor der Veröffentlichung, da die Titelspalte die Breite einnimmt.
Was ist der Unterschied zwischen dem "Tabular Content" - Preset und den anderen?
Tabular Content ist eine Pro-Voreinstellung. Es verleiht dem Tab-Inhaltsbereich einen klaren Hintergrund, Rand und Polsterung, sodass er wie ein Kasten aussieht, der mit den Tabs verbunden ist. Es ist ein strukturierterer, zurückhaltenderer Look im Vergleich zu den klassischen Unterstreichungs- oder Border-Links-Stilen.
Kann ich eine gespeicherte Vorlage in eine Registerkarte einfügen?
Ja, mit Master Addons Pro. Legen Sie den Inhaltstyp des Elements auf den gespeicherten Abschnitt, das gespeicherte Widget oder die gespeicherte Seitenvorlage fest und wählen Sie die Vorlage aus. Auf dem kostenlosen Plugin nimmt jedes Panel stattdessen Editorinhalte.
Kann ich einstellen, welcher Tab sich zuerst öffnet?
Ja. Switch Als Standard auf das gewünschte Element setzen, beim Laden der Seite öffnen, wenn keines gesetzt ist, öffnet sich der erste Tab.
Kann ich einen Tab mit einer externen URL oder einem anderen Abschnitt auf der Seite verknüpfen?
Das Element Erweiterte Registerkarten ist für das Umschalten von Inhalten innerhalb des Widgets konzipiert, für die Verlinkung mit externen URLs oder Seitenabschnitten benötigen Sie möglicherweise eine andere Lösung, wie ein Navigationsmenü oder Ankerlinks Sie können jedoch einen Button mit einem Link innerhalb des Tabinhalts platzieren.
Wie unterscheidet sich das von Elementors eigenem Tabs-Widget?
Mit dem kostenlosen Tabs-Widget von Elementor können Sie beliebige Widgets in jedem Tab platzieren und die Titel oben, unten oder neben dem Inhalt platzieren. Master Addons Advanced Tabs bietet Ihnen einen Hover-Trigger, Symbol- oder Bildbeschriftungen sowie vorgefertigte Voreinstellungen wie Left Active Border und Sie können einer Seite so viele Advanced Tabs-Widgets hinzufügen, wie Sie benötigen. Pro fügt die voreingestellten und gespeicherten Abschnitte, Widgets oder Seitenvorlagen für Tabulatinhalte hinzu.
Wie funktioniert die "Left Active Border" Voreinstellung?
Die Left Active Border Voreinstellung hebt die aktive Registerkarte normalerweise mit einem farbigen Rand oder Hintergrund auf der linken Seite hervor. Es ist ein moderner, sauberer Look, der gut für vertikale oder sogar horizontale Registerkarten funktioniert, wenn Sie eine markante Anzeige wünschen.
Werden die Laschen mobil zum Akkordeon?
Nein. Der Laschenstreifen bleibt ein Laschenstreifen und wickelt sich auf schmalen Bildschirmen ein Elementor-eigenes Tabs-Widget wechselt zwar zu einem Akkordeon, so dass man die bessere Wahl ist, wenn ein mobiles Akkordeon die Voraussetzung ist.
Soll ich Tabs oder ein Akkordeon verwenden?
Tabs, wenn die Panels Alternativen sind, zwischen denen ein Besucher wählt, wie Spezifikation, Lieferung und Garantie An Akkordeon Wenn es sich bei den Elementen um eine Liste handelt, lesen sich die Leute durch, beispielsweise eine FAQ, da mehrere gleichzeitig geöffnet sein können und sie auf natürliche Weise auf einem Telefon gestapelt werden.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
