Registerkarten sind auf vielen Websites, insbesondere in E-Commerce-Shops, ein recht häufiges Feature. Besitzer von E-Commerce-Shops verwenden normalerweise Registerkarten im Produktbeschreibungsbereich, in denen sie Bewertungen, Beschreibungen, technische Spezifikationen usw. auf mehrere Registerkarten aufteilen.
Dennoch haben Tabs in vielen anderen Arten von Websites Verwendung gefunden, nicht nur auf E-Commerce-Websites. Sogar die offizielle WordPress.org-Website verwendet Registerkarten auf den Plugin-Beschreibungsseiten. Siehe Bild unten, um die hervorgehobenen Registerkarten auf WP.org zu sehen.
Viele andere Websitebesitzer verwenden Registerkarten auf verschiedenen Arten von Websites. Tabs sind jedoch nicht zu verwechseln mit Akkordeons, die sich erweitern, um Informationen preiszugeben. Bitte beachten Sie unten, wie ich Akkordeons auf meiner Website verwendet habe.
Aber abgesehen von Akkordeons sind wir hier, um darüber zu sprechen Registerkarten, also lasst uns unseren Fokus nicht verlieren; Ich musste nur den Unterschied zwischen Tabs und Akkordeons deutlich machen. Jetzt hoffe ich, dass wir auf der gleichen Seite sind 🙂
Im Wesentlichen verwenden Webbesitzer Registerkarten, um Informationen aufzuteilen, die ansonsten eine ganze Seite oder einen ganzen Beitrag eingenommen hätten. Das bedeutet, dass Tabs Informationen viel leichter verdaulich machen, ohne dass Benutzer zwangsläufig millionenfach auf das Scrollrad drücken müssen.
Mit anderen Worten, Tabs verbessern die Benutzerfreundlichkeit Ihrer Website, insbesondere in einer Welt der kürzere Aufmerksamkeitsspanne. Wenn Sie also Benutzer länger auf Ihrer Website halten möchten, ohne sie mit langen Seiten zu Tode zu langweilen, sollten Sie Tabs verwenden.
Im heutigen Beitrag zeigen wir Ihnen genau, wie Sie Ihren WordPress-Beiträgen und -Seiten Tabs hinzufügen. Vor dem Ende dieses Beitrags erhalten Sie alle Anweisungen, die Sie benötigen, um Tabs zu Ihrem Vorteil zu verwenden. Wir hoffen, dass Sie bis zum Ende Spaß haben und gehen Sie bitte nicht, ohne Ihre Gedanken im Kommentarbereich zu teilen. Das aus dem Weg, fangen wir an.
Verwenden Sie einen Page Builder
Wenn Sie bereits einen Page Builder installiert haben, haben Sie Glück – Sie haben wahrscheinlich bereits ein Tabs-Modul zur Hand. Die meisten großen Page Builder bieten Registerkarten als Teil ihres Kernsatzes von Page Builder-Elementen an. Hier ist ein kurzer Blick auf zwei unserer Favoriten.
Elementor Free Page Builder
Der beliebte Elementor Page Builder enthält Registerkarten als Teil der kostenlosen Version des Plugins. Sie müssen lediglich ein Tab-Element auf Ihrer Seite einfügen und dann den Titel, den Inhalt, den Stil usw. bearbeiten. Das war’s!
WPBakery Premium Page Builder
Verwenden eines Premium-Themes, das den WPBakery Page Builder enthält (wie unser eigenes Gesamtthema)? Groß! Tabs sind integriert und einfach zu bedienen.
Das WPBakery-Registerkartenmodul unterscheidet sich geringfügig vom vorherigen Beispiel, da die Registerkarten beim Hinzufügen zunächst leer sind. Sie müssen zusätzliche Seitenelemente (Textbereich, Bilder, Symbole usw.) in die Registerkarten einfügen, um Ihren Inhalt hinzuzufügen. Dies gibt Ihnen jedoch eine Menge Freiheit, Registerkarten nach Ihren Wünschen zu erstellen (zusätzlich zu den integrierten Styling-Optionen). Wir haben diesen Seitenersteller bereits im Blog behandelt. Wenn Sie also detailliertere Anweisungen wünschen, lesen Sie unseren WPBakery-Leitfaden (Hinweis – dieses Plugin wurde früher Visual Composer genannt, also entschuldigen Sie im Voraus etwaige Verwirrung).
Installieren Sie das Tabs WordPress-Plugin
Wenn Sie keinen Page Builder verwenden, müssen Sie ihn nicht nur für Registerkarten verwenden. Es gibt viele großartige Alternativen, wie das kostenlose WordPress-Plugin, das einfach als Tabs von WP Shop Mart bekannt ist. Tabs ist ein raffiniertes WordPress-Plugin, mit dem Sie eine unbegrenzte Anzahl schöner Registerkarten erstellen können, ohne ins Schwitzen zu geraten.
Beginnen wir mit der Installation des Tabs WordPress-Plugins. Da es im offiziellen WordPress-Plugin-Repository verfügbar ist, können Sie das Plugin direkt aus Ihrem WordPress-Admin-Dashboard installieren.
Wir verwenden die kostenlose Version, aber es ist eine Premium-Version verfügbar, wenn Sie später für zusätzliche Funktionen upgraden möchten.
Tabs WordPress Plugin installieren
Melden Sie sich bei Ihrem WordPress-Admin-Dashboard an und navigieren Sie zu Plugins > Neu hinzufügen und geben Sie „tabs wpshopmart“ in das Stichwortsuchfeld ein. Wenn Sie das richtige Plugin gefunden haben, klicken Sie auf Jetzt installieren Taste wie unten gezeigt.
Klicken Sie danach auf die aktivieren Sie Taste. Und das war’s, Ihr Tabs Responsive WordPress-Plugin ist einsatzbereit. Lassen Sie uns nun ein paar Registerkarten erstellen, um herauszufinden, was dieses Plugin zu bieten hat.
Konfigurieren Sie das Tabs Responsive WordPress-Plugin
Durch die Aktivierung des Plugins wird Ihrem WordPress-Admin-Menü ein neues Element hinzugefügt. Um neue Tabs zu erstellen, navigieren Sie zu Responsive Tabs > Neue Tabs hinzufügen wie wir im Screenshot unten detailliert beschreiben.
Dies führt Sie zum Tabs Responsive Builder, der alle Funktionen enthält, die Sie benötigen, um schöne Tabs wie ein Boss zu erstellen. Sehen Sie sich das Bild unten an, um einen Eindruck davon zu erhalten, was Sie erwartet.
Eine ziemliche Schriftrolle, nicht wahr? Nun, Sie finden die meisten Funktionen in der rechten Seitenleiste. Beachten Sie auch, dass einzelne Registerkarten ihre Einstellungen haben. Sie können sogar WYSIWYG-Editoren auf den Registerkarten verwenden, was bedeutet, dass Sie viel Kontrolle über Ihre Registerkarten haben.
Lassen Sie uns nun einige Beispielregisterkarten erstellen und sie auf einer Seite oder einem Beitrag anzeigen.
Titel hinzufügen
Beginnen Sie damit, Ihren Registerkarten einen beschreibenden Titel zu geben (genau wie bei Ihren Navigationsmenüs), wie in der Abbildung oben gezeigt. Auf diese Weise können Sie Ihre Registerkarten später im WordPress-Admin-Dashboard leicht identifizieren, falls Sie etwas bearbeiten müssen. Für die Zwecke dieses Tutorials habe ich meine Tabs „Test Home Tabs“ getauft.
Tabs-Designvorlage auswählen
Wie im obigen Screenshot zu sehen ist, müssen Sie im nächsten Schritt eine Designvorlage auswählen, die Sie für Ihre Tabs verwenden möchten. Die kostenlose Version des Tabs WordPress-Plugins bietet Ihnen nur eine Designvorlage, Sie können jedoch jederzeit auf die Premium-Version upgraden für 19 weitere. Apropos Gestaltungsfreiheit.
Registerkarten hinzufügen
Fügen Sie als Nächstes so viele Registerkarten hinzu, wie Sie möchten, wie unten gezeigt.
Wir haben eine nummerierte Liste erstellt, in der aufgeführt ist, was Sie auf der Registerkarten hinzufügen oben gezeigter Abschnitt. Nummern entsprechen jedem Bereich.
- Registerkartentitel – Fügen Sie Ihren Tab-Titel in dieses Feld ein, z. B. Beschreibung, Spezifikationen, Details, usw.
- Registerkarte Beschreibung – Fügen Sie hier Ihre Tab-Beschreibung hinzu. In diesem Feld können Sie den Inhalt Ihres Tabs hinzufügen. Das Beste daran ist, dass Sie den WYSIWYG-Editor (siehe Nummer 3 unten) verwenden können, um Ihren Registerkarten reichhaltige Inhalte hinzuzufügen, einschließlich Bilder, Musik und Videos
- Verwenden Sie WYSIWYG – Wenn Sie das Vertraute verwenden möchten WHut-Jadu-See-ichS-WHut-Jadu-get Editor, um Ihren Tab-Inhalt zu erstellen, klicken Sie auf diese Schaltfläche, um das Popup-Fenster zu starten
- Tab-Symbol – Dieses Feld hilft Ihnen bei der Auswahl eines Symbols, das auf Ihrer Registerkarte verwendet werden soll. Das Tabs WordPress-Plugin bietet Ihnen Zugriff auf jede Menge Font Awesome-Symbole, um Ihre Tabs wie ein Profi aufzupeppen
- Über dem Symbol anzeigen – Wenn Sie den Titel der Registerkarte neben dem Symbol anzeigen möchten, werden Sie diese Funktion lieben. Außerdem können Sie das Symbol deaktivieren, ohne den Titel der Registerkarte zu berühren
- Löschen – Klicken Sie auf diese Schaltfläche, um eine bestimmte Registerkarte zu löschen
- Neue Registerkarten hinzufügen – Klicken Sie auf diese Schaltfläche, um weitere Registerkarten hinzuzufügen
- Alles löschen – Müde von allen Registerkarten? Schlag einfach die Alles löschen Knopf um alles zurückzusetzen
Ein paar Bonustipps, um Ihnen zu helfen. Zuerst können Sie die Registerkarten per Drag & Drop verschieben, um sie neu anzuordnen und nach Ihren Wünschen anzuordnen.
Zweitens – vergiss nicht, die zu treffen Entwurf speichern Klicken Sie ein- oder zweimal auf die Schaltfläche, während Sie Ihre Registerkarten erstellen, um sicherzustellen, dass keine Änderungen verloren gehen, falls Sie versehentlich den Registerkarten-Generator verlassen.
Zu guter Letzt – wenn Sie Unterstützung brauchen, gibt es ein großes Blau Hole dir Unterstützung Knopf direkt unter dem Registerkarten hinzufügen Abschnitt (und auf den meisten Seiten des Plugins), der Sie zum offiziellen Tabs-Supportforum auf WordPress.org führt. Zögern Sie nicht, den Support-Button zu drücken, wenn Sie jederzeit Hilfe benötigen.
Tabs Shortcode
Als Nächstes finden Sie den Tabs-Shortcode, mit dem Sie Ihre Tabs auf einer beliebigen Seite oder einem gewünschten Beitrag hinzufügen und anzeigen. Unser Shortcode ist zum Beispiel [TABS_R id=443]. Um die Registerkarten auf einer Seite anzuzeigen, würde ich einfach den obigen Shortcode in diese bestimmte Seite kopieren und einfügen.
Registerkarten-Widget
Möchten Sie Ihre Tabs zu einem Widget-Bereich auf Ihrer Website hinzufügen? Wenn das ein klares Ja ist, werden Sie die Widget-Unterstützung lieben, die mit dem Tabs WordPress-Plugin geliefert wird.
Schlagen Klicken Sie hier Der Link im obigen Bild führt Sie zum WordPress-Widgets-Bildschirm, auf dem Sie Ihre Tabs überall hinzufügen können, wo Sie einen Widget-Bereich in Ihrem Design haben.
Benutzerdefinierte CSS
Während das Tabs WordPress-Plugin mit vielen Optionen zur Tab-Anpassung ausgestattet ist (schauen Sie sich einfach die rechte Seitenleiste an; sie ist voller Styling-Optionen!), Sie können Ihre eigenen benutzerdefinierten CSS-Stile hinzufügen, wie unten gezeigt.
Darüber hinaus können Sie Ihre benutzerdefinierten Einstellungen als Standardeinstellungen für alle neuen Registerkarten festlegen, indem Sie einfach auf klicken Standardeinstellungen aktualisieren Schaltfläche wie im Bild oben gezeigt.
Die rechte Seitenleiste
Die rechte Seitenleiste, die wir im obigen Bild hervorheben, trägt den Tag für Sie. Es ist vollgepackt mit allen Optionen, die Sie benötigen, um Ihre Tabs nach Herzenslust zu gestalten. Zu den bemerkenswerten Optionen gehören:
- Hintergrundfarbe der Registerkarte
- Tab-Schriftfarbe
- Schriftfamilie und -stil
- Anzeigeoptionen für Registerkartentitel und -symbol
- Ausrichtung der Tab-Symbolposition, dh vor oder nach dem Tab-Titel
- Registerkartenrahmen
- Mehrere Animationen für Registerkartenbeschreibungen
- Und so viel mehr
Füge deine Tabs zu einer WordPress-Seite oder einem Beitrag hinzu
Nachdem Sie Ihren Tab-Inhalt und Ihre Stiloptionen hinzugefügt haben, scrollen Sie nach oben und klicken Sie auf das Veröffentlichen Taste wie unten gezeigt.
An diesem Punkt sind Ihre Registerkarten bereit. Sie müssen lediglich die Registerkarten zu einer WordPress-Seite oder einem Beitrag hinzufügen. Kopieren Sie einfach den Shortcode für die Tabs, den wir zuvor gesehen haben. Unsere ist [TABS_R id=443].
Starten Sie Ihren Post-Editor (auch wenn Sie . verwenden) Gutenberg) und füge den Shortcode in deinen Beitrag/Seite ein. Drücken Sie danach die Veröffentlichen Taste wie unten gezeigt.
Nach etwa 5 Minuten Einrichtung; Ich verwende das Twenty Seventeen-Theme und viel Lorem Ipsum, ich bin zu folgendem Ergebnis gekommen.
Beachten Sie, dass ich die Farben oder irgendetwas nicht angepasst habe. Sag mir was du denkst; war das nicht einfach?
Das Hinzufügen von Tabs zu Ihren WordPress-Seiten und -Beiträgen ist das Zeug für Viertklässler. Ich erwarte nicht, dass Sie auf Probleme stoßen, insbesondere wenn Sie ein Plugin wie Tabs von WP Shop Mart verwenden.
Wie fügst du Tabs zu deinen WordPress-Seiten und -Beiträgen hinzu? Welches ist dein Lieblings-Tabs-WordPress-Plugin? Bitte teilen Sie Ihre Gedanken in den Kommentaren. Viel Spaß beim Gestalten!
