ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: So fügen Sie Registerkarten zu WordPress-Posts und -Seiten hinzu
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
Duux Edge 1500 im Test
Technische Bewertungen
Das MacBook Air 2022 ist zurück zu seinem bisher niedrigsten Preis
Angebote
Vertrauenswürdige Empfehlungen: Samsungs 5-Sterne-Fernseher blendet
Technische Bewertungen
Meross Smart Schnelllade-Steckdosenleiste MSP843P im Test
Technische Bewertungen
Das Remake von Resident Evil 4 ist bereits im Preis eingebrochen
Angebote
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tutorials > So fügen Sie Registerkarten zu WordPress-Posts und -Seiten hinzu
Tutorials

So fügen Sie Registerkarten zu WordPress-Posts und -Seiten hinzu

Zuletzt aktualisiert: November 15, 2021 6:37 pm
ThemeLocal vor 1 Jahr 13 Minuten Mindestlesezeit
Aktie
13 Minuten Mindestlesezeit
Aktie

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.

Contents
Verwenden Sie einen Page BuilderElementor Free Page BuilderWPBakery Premium Page BuilderInstallieren Sie das Tabs WordPress-PluginTabs WordPress Plugin installierenKonfigurieren Sie das Tabs Responsive WordPress-PluginTitel hinzufügenTabs-Designvorlage auswählenRegisterkarten hinzufügenTabs ShortcodeRegisterkarten-WidgetBenutzerdefinierte CSSDie rechte SeitenleisteFüge deine Tabs zu einer WordPress-Seite oder einem Beitrag hinzu

Beispiel für Tabs in Aktion auf einer E-Commerce-Website

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.

Registerkarten auf der WordPress.org-Plugin-Beschreibungsseite

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.

Akkordeons auf vistamedia.xyz

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

Elementor Page Builder-Registerkarten

Info & DownloadDemo ansehen

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

WPBakery Page Builder-Registerkarten

Infos & DownloadDemo ansehen

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

Tabs Kostenloses WordPress-Plugin

Infos & DownloadDemo ansehen

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.

Installation des WordPress-Plugins für Tabs

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.

Hinzufügen neuer Tabs mit dem auf Tabs reagierenden WordPress-Plugin

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.

Tabs Responsive WordPress Plugin Tab Builder

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

Tabs-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

Wählen Sie die Designvorlage für Registerkarten

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.

neue Registerkarten hinzufügen

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.

  1. Registerkartentitel – Fügen Sie Ihren Tab-Titel in dieses Feld ein, z. B. Beschreibung, Spezifikationen, Details, usw.
  2. 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
  3. 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
  4. 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
  5. Ü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
  6. Löschen – Klicken Sie auf diese Schaltfläche, um eine bestimmte Registerkarte zu löschen
  7. Neue Registerkarten hinzufügen – Klicken Sie auf diese Schaltfläche, um weitere Registerkarten hinzuzufügen
  8. 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

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

Tabs-Widget-Unterstützung

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.

Registerkarten-Widget

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.

Tabs WordPress-Plugin benutzerdefiniertes CSS

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

Tabs WordPress-Plugin-Styling-Optionen

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!

Verwandter Beitrag

Dolby Vision vs HDR10: Wie unterscheiden sie sich, was ist besser?

So konvertieren Sie RAW in JPG

So verwenden Sie das Schwarzpunkt-Tool zum Bearbeiten von iPhone-Fotos und warum Sie dies möglicherweise möchten

So beantworten Sie Anrufe mit AirPods mit Siri

So aktivieren Sie den Dunkelmodus bei NordVPN

MARKIERTE: fügen, hinzu, Registerkarten, Seiten, Sie, und, WordPressPosts
ThemeLocal November 15, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel So verhindern Sie Spam und schützen Ihren WordPress-Blog
Nächster Artikel 24+ WordPress-Sicherheitstipps
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

So löschen Sie eine Playlist von Ihrem iPhone
Wie man
So legen Sie bei der Arbeit ein anderes Layout des iPhone-Startbildschirms fest (2023)
Wie man
iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe
Wie man
So erstellen Sie ein GIF in Photoshop
Wie man
macOS: So verwenden Sie Schnellaktionen im Finder
Wie man
Salter Plant Milk Maker Bewertung
Technische Bewertungen

También podría gustarte

Gegen

Dolby Vision vs HDR10: Wie unterscheiden sie sich, was ist besser?

vor 10 Stunden 7 Minuten Mindestlesezeit
Wie man

So konvertieren Sie RAW in JPG

vor 14 Stunden 2 Minuten Mindestlesezeit
Wie man

So verwenden Sie das Schwarzpunkt-Tool zum Bearbeiten von iPhone-Fotos und warum Sie dies möglicherweise möchten

vor 24 Stunden 3 Minuten Mindestlesezeit
Wie man

So beantworten Sie Anrufe mit AirPods mit Siri

vor 1 Tag 3 Minuten Mindestlesezeit
Wie man

So aktivieren Sie den Dunkelmodus bei NordVPN

vor 1 Tag 2 Minuten Mindestlesezeit
Wie man

So ändern Sie den Desktop-Hintergrund in Windows 11

vor 1 Tag 2 Minuten Mindestlesezeit
Angebote

Mit diesem Pixel 6a-Angebot erhalten Sie unbegrenzte Daten zum günstigen Preis

vor 2 Tagen 2 Minuten Mindestlesezeit
Wie man

So duplizieren Sie Fotos und Videos auf iPhone und iPad

vor 2 Tagen 2 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?