Registerkarten in WordPress für beeindruckende Registerkarteninhalte erstellen 

Das Hinzufügen von Registerkarten zu einer WordPress-Seite klingt einfach, aber die meisten Anleitungen gehen davon aus, dass Sie ein Entwickler sind oder drei Plugins installieren möchten, nur um loszulegen.

Die meisten Anleitungen führen Sie durch die Erstellung eines komplett benutzerdefinierten Themes von Grund auf. Sie überspringen die Block-Editor-Option vollständig oder behandeln nur ein Plugin.

SeedProd ist meine bevorzugte Methode für Registerkarteninhalte, aber in dieser Anleitung zeige ich Ihnen auch den Block-Editor-Ansatz und eine kostenlose Plugin-Option. Kein Code erforderlich.

Was sind WordPress-Registerkarten und warum helfen sie?

WordPress-Registerkarten sind klickbare Inhaltsbereiche, die Seiteninhalte in Abschnitte organisieren, zwischen denen Besucher wechseln können, ohne zu scrollen.

Registerkarten sind eine Art Navigationssystem, das Inhalte organisiert und es Besuchern erleichtert, Ihre Website zu durchsuchen. Sie können Registerkarten zu Beiträgen und Seiten hinzufügen oder ein Registerkarten-Widget verwenden, um Registerkarteninhalte in Ihrer WordPress-Seitenleiste und Ihren Widget-Bereichen anzuzeigen.

Warum benötigen Sie Registerkarteninhalte in WordPress?

Neben der Sortierung von Inhalten erleichtern Registerkarten es erheblich, Ihre Website-Besucher aktiv und engagiert zu halten. Da Registerkarten Inhaltsthemen auf einer Seite zusammenfassen, müssen Benutzer nicht zu anderen Seiten wechseln, was ideal für kürzere Aufmerksamkeitsspannen ist.

Zum Beispiel verwendet WordPress.org auf seiner Plugin-Seite Registerkarten, um Informationen wie Details, Bewertungen, Support und Entwicklung anzuzeigen.

Beliebte Möglichkeiten, Registerkarten in WordPress zu verwenden:

• Produktspezifikationen und Bewertungen auf WooCommerce-Seiten
• Kontaktdaten aufgeteilt nach Abteilung oder Standort
• Blog-Filter (beliebt, neu, Kategorien)
• FAQ-Bereiche mit separaten Registerkartenkategorien
• Preisstufen oder Servicepakete

WooCommerce-Produktseiten sind einer der häufigsten Orte, an denen Tabs verwendet werden. Ein eigener Tab für Spezifikationen, einer für Bewertungen und einer für den Versand hält Produktseiten übersichtlich, ohne die Details zu verbergen, die Käufer benötigen. Dedizierte WooCommerce-Tab-Plugins können Ihnen noch mehr Kontrolle darüber geben, wie Produktseiten-Tabs aussehen und funktionieren.

Profi-Tipp: Tabs sollten nicht mit Akkordeons verwechselt werden. Benutzer klicken auf Tabs, um Informationen umzuschalten, während Akkordeons erweitert werden, um Informationen anzuzeigen.

Wie erstelle ich Tabs mit SeedProd?

Für diese Methode verwenden wir SeedProd, den besten Website-Builder für WordPress, um Ihrer Website tabellarische Inhalte hinzuzufügen.

SeedProd ist ein Drag-and-Drop-Website-Builder, mit dem Sie flexible WordPress-Layouts erstellen können, ohne Code schreiben zu müssen. Mit seinen professionellen Website-Kits, Landingpage-Vorlagen und dem Live-Visual-Editor können Sie jeden Teil Ihrer Website anpassen und die Änderungen in Echtzeit sehen.

SeedProd enthält auch hochgradig anpassbare Blöcke, einschließlich des Tabs-Blocks, den wir in dieser Anleitung verwenden werden.

Befolgen Sie die nachstehenden Schritte, um Tabs in WordPress mit SeedProd zu erstellen.

Schritt 1. SeedProd Website Builder installieren

Gehen Sie zuerst zur SeedProd-Preisseite und wählen Sie einen Plan, der den Tabs-Block enthält. Der Tabs-Block ist in kostenpflichtigen Plänen verfügbar; besuchen Sie die Preisseite, um Optionen zu vergleichen und die richtige Wahl für Ihr Budget zu treffen.

Nachdem Sie das Plugin heruntergeladen haben, müssen Sie es auf Ihrer WordPress-Website installieren und aktivieren. Wenn Sie dies noch nie zuvor getan haben, können Sie diese Anweisungen zur Installation eines WordPress-Plugins befolgen.

Navigieren Sie nach der Aktivierung des Plugins zu SeedProd » Einstellungen und geben Sie Ihren Plugin-Lizenzschlüssel ein.

Sie finden Ihren SeedProd-Lizenzschlüssel in Ihrem Kontodashboard im Abschnitt Downloads.

Denken Sie daran, auf die Schaltfläche Schlüssel überprüfen zu klicken, bevor Sie zum nächsten Schritt übergehen.

Schritt 2. Öffnen Sie Ihre Seite mit SeedProd

Nach der Installation von SeedProd können Sie jede vorhandene WordPress-Seite im visuellen Editor öffnen. Gehen Sie in Ihrem WordPress-Adminbereich zu Seiten » Alle Seiten und suchen Sie die Seite, zu der Sie Tabs hinzufügen möchten.

Klicken Sie auf den Link Mit SeedProd bearbeiten, um die Seite im visuellen Editor zu öffnen.

In diesem Beispiel fügen wir Tabs zur Über uns-Seite hinzu, um weitere Details wie Stellenangebote und redaktionelle Richtlinien anzuzeigen. Sie können jede Seite wählen, die für Ihre Website sinnvoll ist.

Schritt 3. Fügen Sie Ihren WordPress-Seiten Registerkarten hinzu

Sobald Ihre Seite im visuellen Editor geöffnet ist, können Sie auf jedes Element klicken, um dessen Inhalt, Farben, Styling und Sichtbarkeit zu ändern.

Es ist auch einfach, Ihrer Seite weitere Elemente hinzuzufügen, indem Sie sie aus dem Blöcke-Panel ziehen und an der gewünschten Stelle ablegen.

Fügen Sie zuerst einen neuen Abschnitt zur Seite hinzu, um Ihre tabellarischen Inhalte unterzubringen. In unserem Fall duplizieren wir einen der vorhandenen Abschnitte und ziehen ihn an das Ende der Seite.

Tauschen Sie danach das Bild gegen etwas Relevanteres aus und löschen Sie alle Inhalte, die Sie nicht mehr benötigen, indem Sie auf das Papierkorb-Symbol klicken.

Suchen Sie nun im linken Bereich nach dem Tabs -Block und ziehen Sie ihn in den neuen Abschnitt auf Ihrer Seite.

Durch Klicken auf den Block werden seine Inhaltseinstellungen angezeigt, wo Sie:

• Mehrere Tabs hinzufügen
• Das Tab-Symbol anzeigen oder ausblenden
• Die Schriftgröße ändern
• Den Abstand zwischen den Tabs vergrößern oder verringern
• Die Ausrichtung der Tabs anpassen

Durch Erweitern jedes Tabs können Sie einen Tab-Titel hinzufügen und Ihren Inhalt mit einem klassischen Editor mit „What You See Is What You Get“-Einstellungen (WYSIWYG) schreiben.

Sie können auch ein benutzerdefiniertes Symbol aktivieren, um Ihren Tabs mehr Interesse zu verleihen und sie hervorzuheben. Schalten Sie den Schalter „Tab-Symbol ausblenden“ auf „Aus“ und wählen Sie ein benutzerdefiniertes Symbol aus der Font Awesome-Bibliothek.

Durch Klicken auf den Tab Erweitert können Sie weitere Anpassungsoptionen auswählen, einschließlich benutzerdefinierter Hintergrundfarben, Schriftarten, Rahmen, Abstände und mehr.

Sie können auch vertikale Tabs oder eine horizontale Tab-Gruppe anzeigen, indem Sie eine der Layoutoptionen auswählen.

Denken Sie daran, auf die Schaltfläche Speichern in der oberen rechten Ecke des Bildschirms zu klicken, um Ihre Änderungen zu speichern.

Befolgen Sie die gleichen Schritte, um Tabs zu jeder anderen Seite Ihrer WordPress-Website hinzuzufügen, und fahren Sie dann mit dem nächsten Schritt fort, um Ihre Änderungen live zu schalten.

Schritt 4. Veröffentlichen Sie Ihre Registerkarteninhalte

Nachdem Sie Tabs zu Ihren verschiedenen WordPress-Seiten hinzugefügt haben, sind Sie bereit, sie für Ihre Website-Besucher zu veröffentlichen.

Gehen Sie dazu zur Seite SeedProd » Theme Builder und schalten Sie den Schalter „SeedProd-Theme aktivieren“ auf „Ein“.

Sie können nun Ihre Seiten in der Vorschau anzeigen und Ihre Tab-Inhalte in Aktion sehen.

Wie füge ich Registerkarten im WordPress Block-Editor hinzu?

Wenn Sie ein Standard-WordPress-Theme verwenden und keinen vollständigen visuellen Editor benötigen, können Sie einen WordPress-Tabs-Block direkt im Block-Editor mit einem kostenlosen Plugin hinzufügen.

Ich habe mehrere Block-Editor-Tab-Plugins getestet, und Ultimate Blocks ist eine zuverlässige kostenlose Option mit einem dedizierten Tabs-Block, der mit jedem Theme funktioniert.

So fügen Sie der WordPress-Seite mit dem Block-Editor Tabs hinzu:

1. Gehen Sie zu Plugins » Neues hinzufügen, suchen Sie nach „Ultimate Blocks“ und klicken Sie auf Jetzt installieren, dann auf Aktivieren.
2. Öffnen Sie einen beliebigen Beitrag oder eine Seite im WordPress Block-Editor.
3. Klicken Sie auf das + Symbol, um den Block-Inserter zu öffnen und nach „Tabs“ zu suchen.
4. Wählen Sie den Tabs-Block aus dem Abschnitt Ultimate Blocks aus und fügen Sie ihn Ihrem Inhalt hinzu.
5. Klicken Sie auf jede Tab-Beschriftung, um sie umzubenennen, und fügen Sie dann Ihren Inhalt im Tab-Bereich darunter ein.
6. Verwenden Sie die Block-Einstellungen-Seitenleiste auf der rechten Seite, um Farben, Tab-Stil und Ausrichtung anzupassen.
7. Klicken Sie auf Aktualisieren oder Veröffentlichen, wenn Sie mit Ihren Tabs zufrieden sind.

Diese Methode funktioniert, ohne Ihr bestehendes WordPress-Theme zu ändern oder einen separaten Seitenersteller zu installieren.

Kann ich Registerkarten in WordPress kostenlos hinzufügen?

Ja, es gibt mehrere kostenlose WordPress-Tab-Plugins, die Tab-Inhalte ohne Seitenersteller hinzufügen können.

Tabs Responsive funktioniert mit jedem Theme über Shortcodes und ist das, was wir unten besprechen werden. Ultimate Blocks (behandelt in der obigen Methode für den Block-Editor) ist die bessere Wahl, wenn Sie bereits Gutenberg verwenden. WP Tabs ist eine weitere solide Option mit einer blockbasierten Oberfläche und mehreren Layoutstilen.

Die folgende Methode ist eine gute Alternative, wenn Sie Ihr WordPress-Theme nicht ändern oder eine Landingpage erstellen möchten. Wir verwenden das kostenlose Tabs Responsive WordPress-Plugin, um responsive Tabs zu Ihrer WordPress-Site hinzuzufügen.

Zuerst müssen Sie das Tabs Responsive Plugin installieren und in Ihrem WordPress-Admin aktivieren.

Navigieren Sie dann zu Tabs Responsive » Neue Tabs hinzufügen und geben Sie Ihrer Tab-Sammlung einen Titel.

Von dort aus können Sie die Standardvorlage auswählen, oder wenn Sie die Pro-Version verwenden, können Sie aus über 18 Vorlagenstilen wählen.

Der nächste Schritt ist das Hinzufügen Ihrer Tabs. Sie können so viele Tabs erstellen, wie Sie möchten, und Folgendes einschließen:

• Tab-Titel
• Tab-Beschreibungen
• Tab-Icons

Sie können auch das Styling jedes Tabs in der rechten Seitenleiste bearbeiten, indem Sie benutzerdefinierte Tab-Stile, Hintergrundfarben, Schriftfarben und mehr auswählen.

Wenn Sie mit Ihren Tabs zufrieden sind, kopieren Sie den Tab-Shortcode und fügen Sie ihn überall in Ihrem WordPress-Theme ein.

Zum Beispiel können Sie den Shortcode wie folgt in einen WordPress-Beitrag oder eine Seite einfügen: 

So wird es auf der Vorderseite Ihrer Website aussehen:

Sie können die Tabs auch zu einem Widget-fähigen Bereich hinzufügen, wie z. B. Ihrer WordPress-Seitenleiste oder Footer-Widgets, indem Sie den Shortcode in einen Absatzblock einfügen.

Danach sehen Sie Ihre Tab-Inhalte live in Ihren Seitenleistenbereichen:

Häufig gestellte Fragen: Registerkarten in WordPress erstellen

Wie erstelle ich Tabs in WordPress ohne Plugin?

Sie können Tabs ohne Plugin mit benutzerdefiniertem HTML-, CSS- und JavaScript-Code erstellen, aber dieser Ansatz erfordert Entwicklerkenntnisse. Für die meisten Anfänger ist es besser, ein kostenloses WordPress-Tab-Plugin wie Ultimate Blocks oder Tabs Responsive zu verwenden, das den gesamten Code für Sie übernimmt. Wenn Sie den visuellen Editor von SeedProd verwenden, ist der Drag-and-Drop-Tabs-Block die einfachste No-Code-Option, um Tab-Inhalte zu einer WordPress-Seite hinzuzufügen.

Wie füge ich Tabs im WordPress Block Editor hinzu?

Um Tabs im Block-Editor hinzuzufügen, installieren Sie ein Plugin, das einen Tabs-Block zu Gutenberg hinzufügt, wie z. B. Ultimate Blocks (kostenlos). Nach der Aktivierung öffnen Sie einen beliebigen Beitrag oder eine Seite, klicken Sie auf den + Block-Inserter, suchen Sie nach „Tabs“ und fügen Sie den WordPress-Tabs-Block zu Ihren Inhalten hinzu. Sie können dann jeden Tab umbenennen, Inhalte zu den Tab-Panels hinzufügen und Farben und Ausrichtung in der Block-Einstellungen-Seitenleiste anpassen.

Was ist der Unterschied zwischen Tabs und Akkordeons in WordPress?

WordPress-Tabs zeigen mehrere Inhaltsbereiche nebeneinander an, und das Klicken auf einen Tab wechselt zum sichtbaren Bereich. Akkordeons stapeln sich vertikal und erweitern sich, um Inhalte anzuzeigen, wenn sie angeklickt werden. Tabs eignen sich am besten, wenn Sie alle Optionen gleichzeitig sichtbar haben möchten und die Inhalte eine ähnliche Länge haben; Akkordeons eignen sich besser für längere Inhalte wie FAQs, bei denen die meisten Besucher nur einen Abschnitt lesen.

Wenn Sie die volle Designkontrolle über Ihre Registerkarteninhalte wünschen, ist SeedProd die schnellste Option mit einer Live-Vorschau. Die Block-Editor-Methode eignet sich gut, wenn Sie Ihr aktuelles Theme beibehalten und einen nativen Gutenberg-Ansatz bevorzugen. Das Plugin Tabs Responsive funktioniert mit jeder WordPress-Einrichtung und erfordert nichts weiter als ein kostenloses Shortcode-Plugin.

Sie können Registerkarteninhalte mit nur wenigen Klicks zu Ihrer WordPress-Website hinzufügen, ganz ohne Code. SeedProd macht den Prozess schnell und anfängerfreundlich, wenn Sie SeedProd bereits zum Erstellen Ihrer Website verwenden.

Bereit, Ihrer WordPress-Website Registerkarten hinzuzufügen?

Vielleicht gefallen Ihnen auch diese anderen hilfreichen WordPress-Anleitungen, während Sie hier sind:

• So erstellen Sie Textanimationen in WordPress (einfache Schritte)
• So erstellen Sie ausgefallene Abschnittstrenner für WordPress-Websites
• So fügen Sie eine Autorenbox in WordPress hinzu (ohne Plugin)
• So fügen Sie für verschiedene Seiten in WordPress eine andere Seitenleiste hinzu

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.