So erstellen Sie Registerkarten in WordPress für atemberaubende Inhalte mit Registerkarten

Möchten Sie lernen, wie man Tabs in WordPress erstellt?

Das Hinzufügen von Registerkarten zu Ihrer WordPress-Website ist eine hervorragende Möglichkeit, verschiedene Arten von Inhalten zu organisieren und Platz auf Beiträgen und Seiten zu sparen.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie Tabs in WordPress hinzufügen.

Warum brauchen Sie WordPress-Inhalte mit Registerkarten?

Neben dem Sortieren von Inhalten machen es Registerkarten viel einfacher, Ihre Website-Besucher aktiv und engagiert zu halten. Da Inhaltsthemen auf Registerkarten auf einer Seite gruppiert werden, müssen Benutzer nicht auf andere Seiten klicken, was ideal für kürzere Aufmerksamkeitsspannen ist.

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

Einige andere Möglichkeiten, Tabs zu verwenden, sind:

• In Produktbeschreibungen, um unterschiedliche Produktspezifikationen anzuzeigen
• In Ihrer Blog-Seitenleiste, um Kategorien zu filtern
• Auf Kontaktseiten zum Sortieren von Kontaktinformationen

Profi-Tipp: Tabs sollten nicht mit Akkordeons verwechselt werden. Benutzer klicken auf Registerkarten, um Informationen zu wechseln, während sich Akkordeons erweitern, um Informationen anzuzeigen.

Jetzt wissen Sie mehr darüber, wie Tabs funktionieren und warum Sie sie brauchen. Schauen wir uns an, wie Sie Tabs zu Ihrer WordPress-Site hinzufügen.

Im Folgenden teilen wir 2 Möglichkeiten, Tabs zu WordPress hinzuzufügen. Zuerst verwenden wir einen Seitenersteller und zeigen Ihnen dann, wie Sie Registerkarten mit einem WordPress-Plugin erstellen.

Lass uns anfangen.

Methode 1: So erstellen Sie Tabs in WordPress mit einem Page Builder

Für die erste Methode verwenden wir SeedProd, den besten WordPress-Website-Builder, um Ihrer Website Inhalte mit Registerkarten hinzuzufügen.

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

Sie können SeedProd auch verwenden, um:

• Erstellen Sie benutzerdefinierte WordPress-Designs
• Erstellen Sie WooCommerce-Websites
• Erstellen Sie hochkonvertierende Landing Pages
• Versetzen Sie Ihre Website in den Wartungsmodus
• Und vieles mehr

Dieser Seitenersteller enthält auch hochgradig anpassbare Blöcke zur Verbesserung Ihres WordPress-Designs. Mit dem Tabs-Block, den wir in diesem Handbuch verwenden, können Sie beispielsweise mit wenigen Klicks mehrere Tabs zu Seiten hinzufügen.

Führen Sie die folgenden Schritte aus, um Registerkarten in WordPress mit SeedProd zu erstellen.

Schritt 1. Installieren Sie den SeedProd Website Builder

Zuerst müssen Sie zur SeedProd-Website gehen und das Plugin herunterladen. SeedProd hat eine kostenlose Version; Sie benötigen jedoch einen Premium-Plan, um Registerkarten und andere Blöcke freizuschalten.

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

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 Konto-Dashboard im Abschnitt Downloads .

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

Schritt 2. Erstellen Sie ein WordPress-Design oder eine Zielseite

Es gibt zwei Möglichkeiten, SeedProd zum Hinzufügen von Registerkarten zu Ihrer Website zu verwenden:

1. Verwenden Sie den Theme Builder, um ein benutzerdefiniertes WordPress-Theme zu erstellen und Registerkarten zu jeder WordPress-Seite hinzuzufügen.
2. Erstellen Sie mithilfe des Drag-and-Drop-Seitenerstellers eine eigenständige Zielseite mit Inhalten in Registerkarten.

Für diesen Leitfaden verwenden wir die erste Option, da Sie damit Registerkarten zu jeder beliebigen Seite hinzufügen können, einschließlich Ihrer Startseite, WordPress-Seitenleiste, Kopfzeile, Fußzeile und überall sonst in Ihrem Design.

Sie können dieser Schritt-für-Schritt-Anleitung folgen, um ein WordPress-Design mit SeedProd zu erstellen, und dann hierher zurückkehren, um Anweisungen zum Hinzufügen von Registerkarten zu Ihrer Website zu erhalten.

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

Nachdem Sie Ihr WordPress-Design erstellt haben, müssen Sie entscheiden, welche Seiten Inhalt mit Registerkarten haben sollen. Beispielsweise könnten Sie Ihrer Kontaktseite Registerkarten hinzufügen, um verschiedene Arten von Kontaktinformationen oder in einer benutzerdefinierten Seitenleiste für verschiedene Beitragskategorien anzuzeigen.

In diesem Beispiel fügen wir Registerkarten zur Info-Seite hinzu, um weitere Details wie Stellenangebote, redaktionelle Richtlinien und mehr anzuzeigen.

Gehen Sie dazu in Ihrem WordPress-Adminbereich zu Seiten » Alle Seiten und suchen Sie die Seite, die Sie bearbeiten möchten.

Da Sie ein SeedProd-Website-Kit verwenden, werden Inhaltsseiten wie die Info-, Kontakt- und Serviceseiten automatisch erstellt. Um sie im visuellen Editor zu öffnen, klicken Sie auf den Link Edit with SeedProd .

Sobald Ihre Seite im Page Builder geöffnet ist, können Sie die Anpassungsoptionen von SeedProd verwenden, um Änderungen vorzunehmen. Sie können auf jedes Element klicken, um dessen Inhalt, Farben, Stil und Sichtbarkeit zu ändern.

Es ist auch einfach, weitere Elemente zu Ihrer Seite hinzuzufügen, indem Sie sie aus dem Blockbereich ziehen und an Ort und Stelle ablegen. Also machen wir das mit dem Tab-Block von SeedProd.

Fügen Sie der Seite zunächst einen neuen Abschnitt hinzu, um Ihren Inhalt mit Registerkarten zu „unterbringen“. In unserem Fall duplizieren wir einen der vorhandenen Abschnitte und ziehen ihn an das Ende der Seite.

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

Jetzt können Sie im linken Bereich nach dem Tabs -Block suchen und ihn in den neuen Abschnitt auf Ihrer Seite ziehen.

Wenn Sie auf den Block klicken, werden seine Inhaltseinstellungen angezeigt, wo Sie Folgendes tun können:

• Fügen Sie mehrere Registerkarten hinzu
• Tab-Symbol ein- oder ausblenden
• Ändern Sie die Schriftgröße
• Erhöhen oder verringern Sie den Abstand zwischen den Tabulatoren
• Passen Sie die Registerkartenausrichtung an

Durch Erweitern jeder Registerkarte können Sie einen Registerkartentitel hinzufügen und Ihre Inhalte mit einem klassischen Editor mit WYSIWYG-Einstellungen (What you see is what you get) schreiben.

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

Wenn Sie auf die Registerkarte Erweitert klicken, können Sie weitere Anpassungsoptionen auswählen, einschließlich benutzerdefinierter Hintergrundfarben, Schriftarten, Rahmen, Abstände und mehr.

Sie können auch vertikale Registerkarten oder einen Satz horizontaler Registerkarten anzeigen, indem Sie auf eine der beiden Layoutoptionen klicken.

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 Registerkarten 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 Inhalte mit Registerkarten

Nachdem Sie Registerkarten zu Ihren verschiedenen WordPress-Seiten hinzugefügt haben, können Sie sie veröffentlichen, damit Ihre Website-Besucher sie sehen können.

Gehen Sie dazu auf die Seite SeedProd » Theme Builder und schalten Sie den Schalter „Enable SeedProd theme“ auf die Position „On“.

Jetzt können Sie eine Vorschau Ihrer Seiten anzeigen und Ihren Inhalt mit Registerkarten in Aktion sehen.

Methode 2: So fügen Sie Tabs mit einem WordPress-Plugin hinzu

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

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

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

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

Im nächsten Schritt fügen Sie Ihre Registerkarten hinzu. Sie können beliebig viele Registerkarten erstellen und Folgendes hinzufügen:

• Tab-Titel
• Registerkartenbeschreibungen
• Registerkartensymbole

Sie können auch das Design jeder Registerkarte in der rechten Seitenleiste bearbeiten, indem Sie benutzerdefinierte Registerkartenstile, Hintergrundfarben, Schriftfarben und mehr auswählen.

Wenn Sie mit Ihren Tabs zufrieden sind, kopieren Sie den Shortcode der Tabs und fügen Sie ihn an einer beliebigen Stelle in Ihrem WordPress-Theme ein.

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

So sieht es auf dem Frontend Ihrer Website aus:

Sie können den Tabs-Shortcode auch zu einem Widget-bereiten Bereich hinzufügen, wie z. B. Ihrer WordPress-Seitenleiste oder Ihren Fußzeilen-Widgets, indem Sie den Shortcode in einen Absatzblock einfügen.

Danach sehen Sie Ihre Inhalte mit Registerkarten live in Ihren Seitenleistenbereichen:

Hier hast du es!

In diesem Tutorial haben Sie gelernt, wie Sie Tabs in WordPress erstellen, ohne Code schreiben zu müssen. Sind Sie bereit, anpassbare Registerkarten auf Ihrer Website zu erstellen?

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

• So erstellen Sie Textanimationen in WordPress (einfache Schritte)
• So erstellen Sie ausgefallene Abschnittsteiler für WordPress-Websites
• So fügen Sie eine Autorenbox in WordPress hinzu (ohne Plugin)

Danke fürs Lesen. Bitte folgen Sie uns auf YouTube, Twitter und Facebook, um weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens zu erhalten.