Eine lange Seite mit Spezifikationen, Bewertungen und Anleitungen: Nutzer scrollen, verlieren die Orientierung und springen ab. Shops haben dieses Problem längst gelöst, indem sie Beschreibungen, Parameter und Bewertungen auf Tabs aufteilen. Kein Neuladen, kein Scrollen zum gewünschten Abschnitt.

Doch Tabs sind nicht nur für Onlineshops nützlich. Sehen Sie sich eine beliebige Plugin-Seite auf WordPress.org an: Informationen, Bewertungen, Installation, alles ist in Tabs gegliedert. Nutzer erkennen die Struktur sofort und wechseln gezielt dorthin, wo sie hinmöchten.

Nachfolgend finden Sie zwei funktionierende Methoden, um Tabs zu WordPress-Beiträgen und -Seiten hinzuzufügen. Erstens über einen Page Builder, sofern Sie bereits einen installiert haben. Zweitens über das kostenlose Plugin Tabs Responsive, wenn Sie Tabs ohne Bindung an einen bestimmten Builder benötigen.

💡 Kurzüberblick:

• Prüfen Sie, ob Ihr Page Builder ein Tabs-Modul besitzt
• Installieren Sie das kostenlose Plugin Tabs Responsive aus dem WordPress.org-Verzeichnis
• Erstellen Sie die Tabs im Drag-and-Drop-Builder und befüllen Sie sie mit Inhalten
• Fügen Sie den generierten Shortcode auf der gewünschten Seite oder in einem Widget ein

Wie sich Tabs von Akkordeons unterscheiden

Tabs sollten nicht mit Akkordeons verwechselt werden, sie dienen unterschiedlichen Zwecken. Ein Akkordeon klappt einen Block auf und die übrigen zu: praktisch für FAQs und mobile Bildschirme. Tabs halten alle Reiter sichtbar und wechseln den Inhalt sofort. Nutzer sehen jederzeit die Struktur und können schnell zu einem beliebigen Abschnitt springen.

Laut der Nielsen Norman Group sind Akkordeons dann geeignet, wenn Nutzer nur einen von mehreren Abschnitten benötigen. Tabs funktionieren, wenn Besucher innerhalb eines Besuchs voraussichtlich zwischen den Reitern wechseln. Für Produktseiten gewinnen Tabs: Käufer vergleichen Spezifikationen und Beschreibung in einem Fenster, ohne den Kontext zu verlieren.

Beachten Sie: Wenn der Inhalt eines Tabs mehr als eine Bildschirmseite umfasst, kann ein Akkordeon komfortabler sein. Ein langer Tab erzwingt Scrollen, genau wie eine normale Seite.

Methode 1: Tabs über einen Page Builder

Wenn Sie bereits einen Page Builder verwenden, haben Sie Glück. Die meisten gängigen Builder enthalten standardmäßig ein Tabs-Modul.

Elementor

🔗 Elementor auf WordPress.org

Elementor, der meistgenutzte Page Builder für WordPress: über 10 Millionen aktive Installationen und 40-50% des Page-Builder-Marktes, laut Colorlib-Daten für 2026. Das Tabs-Modul ist in der kostenlosen Version enthalten. Ziehen Sie das Element „Tabs" auf die Seite, bearbeiten Sie Tab-Überschriften und -Inhalte und passen Sie das Styling an Ihr Website-Design an.

Der Vorteil: Elementor-Tabs übernehmen globale Stile, Schriftarten, Farben und Abstände werden automatisch übernommen. Separates CSS-Editing entfällt.

WPBakery

🔗 WPBakery, offizielle Website

WPBakery (ehemals Visual Composer), ein Premium-Builder, der oft mit Themes gebündelt wird. Anders als bei Elementor beginnt das Tabs-Modul hier leer: Sie fügen jedem Tab separate Elemente hinzu, Text, Bilder, Icons, Buttons. Das bietet mehr Flexibilität, erfordert aber einige zusätzliche Schritte bei der Einrichtung.

Wenn Sie eine detaillierte Anleitung für WPBakery benötigen, haben wir einen separaten Leitfaden.

Methode 2: Tabs Responsive Plugin, Schritt-für-Schritt-Einrichtung

Kein Page Builder vorhanden, und einen Builder nur für Tabs zu installieren, wäre übertrieben. Tabs Responsive, ein kostenloses Plugin aus dem WordPress.org-Verzeichnis, tut genau, was es verspricht: Es fügt Tabs per Shortcode oder Widget in jeden Beitrag oder jede Seite ein.

🔗 Tabs Responsive auf WordPress.org

Das Plugin wird aktiv gepflegt und aktualisiert: 20.000+ aktive Installationen, 4,7 von 5 Sternen, über 500 Bewertungen, letztes Update Mai 2026, kompatibel mit WordPress 6.8.3. Die kostenlose Version enthält eine Designvorlage, horizontale und vertikale Darstellungsvarianten sowie Unterstützung für Font Awesome Icons. Die Pro-Version bietet über 20 Vorlagen, mehr als 500 Google Fonts und Inhaltsanimationen.

Schritt 1: Installation

Gehen Sie im WordPress-Administrationsbereich zu Plugins → Installieren, und geben Sie tabs responsive in die Suche ein. Suchen Sie das Plugin von wpshopmart, klicken Sie auf Jetzt installieren und anschließend auf Aktivieren.

Nach der Aktivierung erscheint im linken Menü ein neuer Eintrag „Tabs Responsive".

Schritt 2: Ihre ersten Tabs erstellen

Navigieren Sie zu Tabs Responsive → Add New Tabs. Es öffnet sich ein Drag-and-Drop-Builder.

Geben Sie dem Tab-Set zunächst einen aussagekräftigen Namen, zum Beispiel „Produktspezifikationen" oder „Homepage-Tabs". Das hilft Ihnen, wenn Sie mehrere Sets für verschiedene Seiten verwenden.

Der Builder wirkt auf den ersten Blick komplex, aber die Logik ist einfach:

Nun befüllen Sie die Tabs selbst. Im Bereich Add tabs konfigurieren Sie für jeden Tab:

• Tab title, was der Nutzer auf dem Tab sieht: „Beschreibung", „Spezifikationen", „Bewertungen".
• Tab description, der Inhalt des Tabs. Ein vollwertiger WYSIWYG-Editor steht zur Verfügung: Sie können Bilder, Videos, Musik und andere Shortcodes einfügen.
• Tab icon, wählen Sie ein Icon aus der im Plugin integrierten Font-Awesome-Bibliothek.
• Display above icon, diese Option platziert den Titel über dem Icon oder deaktiviert das Icon, sodass nur Text angezeigt wird.
• Remove, Schaltfläche zum Löschen eines bestimmten Tabs.
• Add new tabs, fügt dem Set einen leeren Tab hinzu.
• Remove all, setzt alle Tabs auf einmal zurück.

Tabs lassen sich per Drag-and-Drop in der Reihenfolge ändern. Klicken Sie während des Prozesses auf Save Draft; sollten Sie die Seite versehentlich verlassen, gehen Ihre Änderungen nicht verloren.

Schritt 3: Design und Stile

Das Erscheinungsbild der Tabs konfigurieren Sie in der rechten Seitenleiste des Builders.

Die kostenlose Version bietet eine Designvorlage:

Die Pro-Version stellt 19 weitere Vorlagen bereit. Aber auch in der kostenlosen Version können Sie anpassen: Hintergrund- und Schriftfarbe, Schriftfamilie, Innenabstände, Rahmen, Icon-Ausrichtung und Übergangsanimation.

Falls die Standardeinstellungen nicht ausreichen, verfügt das Plugin über ein Feld für benutzerdefiniertes CSS:

Hier befindet sich auch die Schaltfläche Update Default Settings; klicken Sie darauf, damit alle neuen Tab-Sets mit den aktuellen Stilparametern erstellt werden.

Schritt 4: Tabs auf einer Seite veröffentlichen

Wenn Inhalt und Stil fertig sind, klicken Sie oben auf dem Bildschirm auf Publish.

Das Plugin generiert einen Shortcode wie [TABS_R id=443]. Kopieren Sie diesen.

Öffnen Sie den Beitrag oder die Seite, in die Sie Tabs einfügen möchten, und fügen Sie den Shortcode an der gewünschten Stelle ein. Funktioniert in jedem Editor, sowohl im klassischen als auch in Gutenberg.

Wenn Sie Tabs in einer Seitenleiste oder einem Footer hinzufügen müssen, verwenden Sie das Tabs Responsive-Widget. Gehen Sie zu Design → Widgets:

Klicken Sie auf den Link „Click here", und Sie gelangen auf die Widgets-Seite, wo Sie das Widget per Drag-and-drop in einen beliebigen Bereich ziehen können:

Das Ergebnis nach 5 bis 7 Minuten Einrichtung sieht so aus:

Die Farben und Stile sind hier noch einfach gehalten; passen Sie diese bei Bedarf im rechten Panel des Builders oder über eigenes CSS an.

Sehen Sie sich das Video an, um den gesamten Ablauf von der Installation bis zu den fertigen Tabs auf der Seite zu verfolgen:

⁉️🤔 Häufig gestellte Fragen

Funktionieren Tabs auf mobilen Geräten?

Ja. Das Plugin Tabs Responsive basiert auf Bootstrap, daher passen sich Tabs jedem Bildschirm an. Auf schmalen Bildschirmen können horizontale Tabs je nach gewählter Vorlage in eine vertikale Liste oder ein Akkordeon übergehen. Prüfen Sie nach der Einrichtung, wie die Tabs auf einem Smartphone aussehen: Bei langen Tab-Texten ist der vertikale Stil oft praktischer als der horizontale.

Kann man Tabs ohne Plugin in einen Beitrag einfügen?

Ohne Plugin oder Builder nein, es sei denn, Sie schreiben eigenen JavaScript- und CSS-Code. WordPress bietet von Haus aus keine fertige Lösung für Tabs im Inhalt. Das Plugin Tabs Responsive löst die Aufgabe ohne Code: Installation und Einrichtung dauern Minuten, das Ergebnis kommt per Shortcode. Das ist der Kompromiss zwischen „Ich möchte kein Plugin installieren" und „Ich möchte keinen Code von Grund auf schreiben".

Beeinflussen Tabs die Suchmaschinenoptimierung?

Bei korrekter Umsetzung nein. Die Inhalte aller Tabs werden beim ersten Seitenaufbau im HTML geladen, Google sieht und indexiert sie. Das Plugin Tabs Responsive liefert sämtliche Inhalte im Quellcode aus, nicht asynchron nachgeladen, das ist unbedenklich für SEO. Probleme können nur bei per AJAX geladenen Tabs auftreten (Tab-Inhalt wird erst bei Klick geladen), solche Lösungen sollten Sie mit Vorsicht einsetzen.

Was tun, wenn Tabs mit dem Theme kollidieren?

Stilkonflikte sind das häufigste Problem. Versuchen Sie es zuerst mit dem Feld für benutzerdefiniertes CSS in den Plugin-Einstellungen: Meist genügen ein paar Zeilen, um Hintergrundfarbe oder Innenabstände an das Theme anzupassen. Hilft das nicht, wechseln Sie in den Vorlagen-Einstellungen vom horizontalen zum vertikalen Stil, manchmal tritt das Problem nur in einem der Modi auf. Als letzte Möglichkeit steht das Plugin-Supportforum auf WordPress.org zur Verfügung: Der Entwickler antwortet und hilft bei Konflikten.

Wie unterscheidet sich Tabs Responsive von Tabs in einem Builder?

Das Plugin ist nicht an einen bestimmten Builder gebunden. Wenn Sie sich entscheiden, den Builder zu wechseln oder zum nativen Block-Editor zu migrieren, funktionieren Tabs per Shortcode weiter. Bei Tabs von Elementor oder WPBakery haben Sie diese Flexibilität nicht: Beim Builder-Wechsel verschwinden die Tabs mit ihm. Zudem unterstützt Tabs Responsive vertikale Darstellung, Widgets und Icons, was nicht jeder Builder in der kostenlosen Version bietet.

Was Sie für Ihre Aufgabe wählen sollten

Ist bereits ein Page Builder installiert, nutzen Sie dessen Tabs-Modul. Das geht schneller: Ein Drag-and-drop, und die Tabs sind auf der Seite.

Ist kein Builder vorhanden, verwenden Sie das Plugin Tabs Responsive. Es ist kostenlos, wird aktualisiert und bindet Sie nicht an einen bestimmten Builder. Shortcode und Widget funktionieren in jedem Theme und jedem Editor.

Für WooCommerce-Onlineshops fügt das Plugin der Produktkarte einen separaten Tab mit Beschreibung hinzu, das ist mit Elementor-Tabs nicht möglich.

Testen Sie Tabs Responsive auf einer Testseite: Die Installation dauert eine Minute, und Ihre ersten Tabs erstellen Sie in 5 Minuten. Falls Sie an einer Stelle nicht weiterkommen, sehen Sie sich das Video oben an oder schreiben Sie in die Kommentare, wir finden eine Lösung.