Möchten Sie Ihre Beiträge in Registerkarten unterteilen, um Platz zu sparen und es den Nutzern zu erleichtern, das zu finden, was sie suchen?
Durch das Hinzufügen von Registerkarten können Sie mehr Informationen über Ihre Produkte und Dienstleistungen hinzufügen. Außerdem können die Nutzer so alle Details an einem einzigen Ort finden, anstatt eine andere Seite aufzurufen.
In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Beiträge und -Seiten mit Registerkarten versehen können.
Wann sollten Sie Tabbed Content in WordPress verwenden?
Die Verwendung von Registerkarten ermöglicht es Ihnen, mehr Details auf kleinem Raum hinzuzufügen oder große Teile des Inhalts aufzuteilen, um die Organisation und die Benutzerfreundlichkeit zu verbessern.
Nehmen wir an, Sie haben ein Online-Geschäft. Sie können Registerkarten für Produktbeschreibungen, Bewertungen, technische Spezifikationen und mehr hinzufügen. Diese Trennung hilft, alle Details für Ihre Kunden an einem Ort bereitzustellen und macht die Seite interaktiv.
In ähnlicher Weise können Sie auf den Plugin-Seiten von WordPress.org Inhalte mit Registerkarten sehen. Die Seite ist in verschiedene Abschnitte mit Registerkarten wie Details, Bewertungen, Installation, Support und Entwicklungsinformationen unterteilt.
Tabbed Content hilft, die Besucher auf Ihrer WordPress-Website zu halten. Sie müssen die Besucher nicht auf eine andere Seite schicken, um alle Details über Ihre Produkte und Dienstleistungen zu erfahren.
Sehen wir uns also an, wie Sie WordPress-Seiten und -Beiträgen Registerkarteninhalte hinzufügen können.
Hier sind die 2 Methoden, die wir verwenden werden, um dies zu erreichen:
- Hinzufügen von Registerkarteninhalten mit einem Landing Page Builder
- Hinzufügen von Registerkarteninhalten mit einem WordPress-Plugin
Methode 1: Hinzufügen von Registerkarteninhalten mit einem Landing Page Builder
Der beste Weg, um Tabbed Content in WordPress hinzuzufügen, ist die Verwendung eines SeedProd. Es ist der beste WordPress-Landingpage- und Website-Builder. SeedProd ist anfängerfreundlich und verfügt über einen Drag-and-Drop-Builder, vorgefertigte Vorlagen und zahlreiche Anpassungsoptionen.
Für dieses Tutorial verwenden wir die SeedProd Pro-Lizenz, da sie erweiterte Blöcke zum Hinzufügen von Registerkarteninhalten enthält. Es gibt auch eine SeedProd Lite-Version, die Sie kostenlos nutzen können.
Zunächst müssen Sie das SeedProd-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung werden Sie zum SeedProd-Willkommensbildschirm in Ihrem WordPress-Dashboard weitergeleitet. Geben Sie nun Ihren Lizenzschlüssel ein, den Sie in Ihrem SeedProd-Kontobereich finden.
Als Nächstes können Sie in Ihrem WordPress-Administrationsbereich zu SeedProd “ Landing Pages gehen.
Danach klicken Sie einfach auf die Schaltfläche „Neue Landing Page erstellen“.
Von hier aus zeigt Ihnen SeedProd mehrere Landing Page-Vorlagen, aus denen Sie wählen können.
Wählen Sie eine Vorlage aus, die Sie verwenden möchten. Bewegen Sie einfach den Mauszeiger über die Vorlage und klicken Sie auf das orangefarbene Häkchensymbol.
Es öffnet sich nun ein Popup-Fenster, in dem Sie im Feld „Seitenname“ einen Titel für Ihre Seite und unter „Seiten-URL“ einen Permalink-Slug eingeben müssen.
Danach klicken Sie einfach auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“.
Dadurch wird der SeedProd Drag-and-Drop-Builder gestartet. Sie können nun verschiedene Blöcke zu Ihrer Vorlage hinzufügen und vorhandene Elemente bearbeiten.
Um Inhalte mit Registerkarten hinzuzufügen, ziehen Sie einfach den Block „Registerkarten“ unter dem Abschnitt „Erweitert“ auf die Seitenvorlage und legen ihn dort ab.
Als nächstes können Sie den Registerkartenblock in SeedProd anpassen.
Sie können beispielsweise auf die Schaltfläche „Neues Element hinzufügen“ klicken, um so viele Registerkarten wie gewünscht hinzuzufügen. Außerdem gibt es Optionen zum Bearbeiten der Schriftgröße, des Textzwischenraums und der Ausrichtung für den Inhalt jeder Registerkarte.
Anschließend können Sie auf eine beliebige Registerkarte klicken, um sie weiter zu bearbeiten und Details hinzuzufügen.
Sie können zum Beispiel den Titel für jede Registerkarte ändern, Inhalte hinzufügen und das Symbol für die Registerkarte ändern.
Darüber hinaus bietet SeedProd auch erweiterte Anpassungsmöglichkeiten.
Klicken Sie einfach auf die Registerkarte „Erweitert“ im Menü auf der linken Seite. Hier können Sie das Layout der Registerkarte, die Typografie, die Farbe, die Hintergrundfarbe, die Rahmen und vieles mehr ändern.
Wenn Sie Änderungen am Registerkartenblock vorgenommen und Ihre Landing Page angepasst haben, vergessen Sie nicht, oben auf die grüne Schaltfläche „Speichern“ zu klicken.
Danach können Sie auf die Registerkarte „Seiteneinstellungen“ wechseln.
Als Nächstes können Sie auf den Schalter „Seitenstatus“ klicken und den Status von „Entwurf“ in „Veröffentlichen“ ändern.
Sie können auf die Schaltfläche „Speichern“ klicken, um Ihre Änderungen zu speichern und den Page Builder zu schließen.
Besuchen Sie jetzt einfach Ihre Website, um die WordPress-Seite mit Registerkarteninhalten in Aktion zu sehen.
Methode 2: Hinzufügen von Registerkarteninhalten mit einem WordPress-Plugin
Wenn Sie keinen Landing Page Builder verwenden möchten, können Sie ein spezielles WordPress-Plugin verwenden, um Ihren Beiträgen und Seiten Registerkarteninhalte hinzuzufügen.
Zunächst müssen Sie das Tabs Responsive-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung können Sie in Ihrem WordPress-Dashboard zu Tabs Responsive “ Add New Tabs gehen und zunächst einen Namen für Ihre Tabs eingeben.
Anschließend können Sie so viele Registerkarten hinzufügen, wie Sie möchten, indem Sie auf die rote Schaltfläche „Neue Registerkarten hinzufügen“ klicken.
Außerdem können Sie jede Registerkarte einzeln bearbeiten, indem Sie ihren Titel ändern, eine Beschreibung hinzufügen, ein anderes Registerkartensymbol verwenden und die Position des Symbols bearbeiten.
Außerdem bietet das Plugin verschiedene „Tabs Settings“ im Menü auf der rechten Seite.
Sie können zum Beispiel festlegen, ob der Titel der Registerkarten angezeigt werden soll, verschiedene Optionen für Titel und Symbol auswählen, die Position des Symbols ändern, den Rahmen der Registerkarten anzeigen, die Textfarbe auswählen und vieles mehr.
Wenn Sie die Änderungen vorgenommen haben, können Sie die Registerkarten nun in jedem Blogbeitrag oder auf jeder Seite verwenden, indem Sie den vom Plugin generierten Shortcode verwenden.
Klicken Sie einfach auf die Schaltfläche „Veröffentlichen“.
Als Nächstes können Sie die Registerkarten mit dem Shortcode [TABS_R id=130] auf jeder Seite oder jedem Beitrag einfügen. Stellen Sie einfach sicher, dass Sie die ID-Nummer im Shortcode durch die ID-Nummer Ihrer Tabs ersetzen.
Sie können die Registerkarten-ID und den Shortcode leicht finden, indem Sie zu Registerkarten Responsive “ Alle Registerkarten gehen und den Code in der Spalte Registerkarten Shortcode kopieren.
Als Nächstes müssen Sie entweder einen neuen Beitrag hinzufügen oder einen bestehenden Beitrag bearbeiten.
Wenn Sie im Inhaltseditor sind, fügen Sie einen Shortcode-Block hinzu, um den Shortcode einzugeben.
Danach können Sie eine Vorschau Ihres Blogbeitrags oder Ihrer Seite anzeigen. Wenn alles in Ordnung ist, können Sie auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“ klicken, um die Registerkarten in Ihrem Beitrag zu speichern.
Besuchen Sie nun Ihre Website, um die Registerkarteninhalte in Aktion zu sehen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man WordPress-Beiträge und -Seiten mit Registerkarten versieht. Sehen Sie sich auch unseren Leitfaden zu WooCommerce leicht gemacht an und wie Sie die beste Webdesign-Software auswählen.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ahmed Abo Rwash says
It’s excellent, professional, and valuable. Thank you
WPBeginner Support says
You’re welcome!
Admin
Alexander says
Hi, I need to display posts as tabs, I need the post title to be the tab label and the post content to be the tab content, any recommendations on how to do it?
WPBeginner Support says
For what it sounds like you’re wanting, you would want to go through some of the options from our guide below:
https://www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-in-wordpress
Admin
msiddiqui says
very simply explain u r no 1 in WordPress
WPBeginner Support says
Glad you like our content
Admin
navya says
I am beginner in wp.Can anyone help me to solve my problem?
in my site there is part of ou story as like history,fo eg. if click on 2018 tab i wanto get the corresponding description about 2018.How to do this in wp.Thank you in advance
Dan Acton says
I love this, Not the end of the world if this option is not available, just would like to be able to edit a current set of tabs using the same interface in which I created them. Is this possible instead of having to paste new content in between the shortcodes?
Andi Sutrisnya says
How to stop playing video in tab when switching to another tab if i have video in every tab? Please help me
dany says
thanks bro this helpful
Lena says
Is it possible to have just a button on the users editor which automatically creates a new tab where he/she can write her content in?
I’m planning a Content sharing platform …
David says
Hi,
I’m looking for vertical tabs that have the option of adding a link for each tab so that each tab has an address.
Can you suggest a tab plugin that has this option or a tutorial that explains how to add this functionality.
Thanks for any help
David
Soni says
This is a helpful article.
I would like to know about the tabbed content in wpbeginner homepage. Could this plugin create the same tabbed content?
Or you use another plugin to create that tabbed content?
I think that tab is great.
Ssekito says
Kindly show me how to post content under the different tabs i have put on my blog.
Thanks
WPBeginner Support says
Your blog is hosted on WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Admin
Ssekito says
Thanks for the reply!
I am actually a beginner of wordpress blog and i want to first get familiar with it so that i upgrade to wordpress.org with bluehost as my host.
I want to monetize my blog as i am into affiliate marketing! I currently want to add content just below each pages i created on the menu bar and some social share buttons though am finding it challenging!
Please guide me this.
Thanks.
Sase Antic says
Helpful info on tabs in WordPress!
However, is there a solution in this plugin or any other WP plugin to add tabs at the whole site (site-wide) and not just in posts and pages?
For example: I need one „tabs group“ consisted of 3 tabs, and I like to add it sitewide (the same content / tabs at all pages and posts; like menu / submenu but with tabs functionality).
Is this possible?
Otherwise, it’s a lot of work to add the same „tabs group“ to all pages and posts one by one.
Thanks in advance for the reply!
uvie says
what if i need the tab to display contents in the form of widgets.how can i achieve that
Tony says
This looks like a great tabs plugin – but, it would be even greater if I can added also to Pages not just posts. I looked all over, but does not appear in editor of Pages – any chance of that?
Sameer says
Hello,
Is it possible to create tables inside tabs in wordpress blog pages. Please see this page: , Please help me to create something like this one in wp.
WPBeginner Support says
Yes, it is possible. You will need to generate the HTML code required for the table in the content area of each tab.
Admin
Weiwei says
if in the content , there are more pages, what should I do?
WPBeginner Staff says
If you cannot figure out why you would need them, then this means that you don’t really need them on your website. We write about a lot of cool things that users can add to their websites. If users find something useful, then they can add it to their site.
Shah says
I’m very new to building a website. I think being so far advanced, your assumption of how well someone like me can understand and follow your instructions, is highly exaggerated. I still don’t understand what tabs are for. I know you explained it, and even showed us where we can see them in action, but I still don’t understand why I need to have tabs. It would be great if you were more deliberate in giving us, slower people, more examples. Thanks!
Heather Lewis says
This is a helpful article. I will use this plugin whenever it’s necessary. I think this is much better compared with the one I am using in terms of design. Thank you for sharing.
vinayak says
hi and thanks for providing a post where i could add tabbed content in my blog.
i was looking for a plugin that could do this.
Amjaru says
Is the content in the tabs searchable or does the short code prevent the content from being searched?
WPBeginner Staff says
It will still be searchable.
Knitwit23 says
can you show us a post where this is in use?
KonaGirl says
Will this plugin make a tabbed menu hierarchy? If it does, then do I remove the menu tabs prior to adding this plugin?
WPBeginner Staff says
It is used inside posts and pages to display content in tabs.
Sally Bennett says
It would be very useful if you explained what ‚tabs‘ are to a complete novice
WPBeginner Staff says
Tabs are like tabs in a folder or a telephone index book. Allowing users to browse different sections by clicking on the tab title. You can see them in action here.