En av våra läsare frågade oss nyligen hur man delar in publicerade inlägg i tabs för att save utrymme och göra det lättare för användare att hitta det de letar efter.
På WPBeginner har vi hjälpt många website-ägare att förbättra sin content-organisation med tabs layouts.
Adding tabs content allow you to pack more information about your products and services into a single page, improving user experience and keeping all the details in one convenient place. Som ett resultat minskar du sidans rörighet och gör navigationen enklare för besökarna.
I den här artikeln visar vi hur du add to tabs content till dina posts och pages i WordPress, så att dina besökare enkelt kan hitta det de behöver.
När ska du använda tabs content i WordPress?
Using tabs allow you to add more details in a small amount of space or split large chunks of content for better organization and user experience.
Låt oss säga att du har en store på nätet. You can add to tabs for product descriptions, reviews, technical specifications, and more. Denna separation hjälper till att ge dina kunder all details på ett ställe och gör sidan interaktiv.
På samma sätt kan du se tabs content på WordPress.org plugin pages. Sidan är indelad i olika sektioner med hjälp av tabbar som gillar details, reviews, installation, support, och utvecklingsinformation.
Tabs content hjälper till att hålla folk kvar på din WordPress website. Du behöver inte skicka folk till en annan page för att få all den details de behöver om dina produkter och tjänster.
Med detta sagt, låt oss se hur du kan add to tabs content till WordPress pages och posts.
Här är de två metoder vi kommer att använda för att få detta gjort:
- Lägga till innehåll med tabs med hjälp av Landing Page Builder
- Lägga till tabs content med hjälp av ett plugin för WordPress
Metod 1: Lägga till tabs innehåll med hjälp av en Landing Page Builder
Det bästa sättet att add to tabs content i WordPress är att använda en SeedProd. Det är den bästa WordPress landning page och website builder. SeedProd är nybörjarvänligt och levereras med en drag and drop-byggare, färdiga templates och flera alternativ för customize.
För denna tutorial kommer vi att använda SeedProd Pro-licensen eftersom den innehåller avancerade block för att add to tabs content. Det finns också en SeedProd Lite-version som du kan använda gratis.
Först måste du installera och aktivera SeedProd plugin. Om du behöver hjälp, vänligen se vår guide om hur du installerar ett plugin för WordPress.
Efter aktivering kommer du att redirectas till SeedProds välkomstvy i din WordPress dashboard. Gå vidare och enter din license key, som du kan hitta i ditt SeedProd account area.
Därefter kan du heada till SeedProd ” Landing Pages från din WordPress adminpanel.
Efter det klickar du bara på knappen ”Skapa ny Landing Page”.
Härifrån kommer SeedProd att visa dig flera templates för landing pages som du kan välja mellan.
Gå vidare och välj en template som du gillar att använda. Håll bara hoveringen över templates och click the orange tick mark icon.
Ett popup-fönster öppnas nu där du måste enter en rubrik för din page i fältet ”Page Name” och en slug för permalänken under ”Page URL”.
Efter det klickar du bara på knappen ”Save and Start Editing the Page”.
Detta kommer att starta SeedProd drag and drop-byggaren. Du kan nu add to olika block till din template och edit befintliga element.
För att add to tabbed content drar du bara blocket ”Tabs” under Advanced section och släpper det på page template.
Därefter kan du customize tabs blocket i SeedProd.
Till exempel kan du klicka på knappen ”Add New Item” för att lägga till så många tabs du vill. Dessutom finns det alternativ för att editera fontstorlek, mellanrum mellan text och justering för innehållet i varje tabs.
Därefter kan du clicka på vilken tabs som helst för att editera den ytterligare och lägga till details.
You can for instance change the title for each tab, add to content, and change the tab icon.
Förutom det tillhandahåller SeedProd också avancerade alternativ för customize.
Klicka bara på tabben ”Advanced” i menyn till vänster. Här kan du ändra tabbens layout, typografi, färg, bakgrundsfärg, ramar och mycket mer.
När du har gjort ändringar i tab block och customize din landing page, glöm inte att klicka på den gröna knappen ”Save” högst upp.
Efter det kan du heada till fliken ”Page Settings”.
Därefter kan du klicka på ”Page Status” toggle och ändra status från Draft till Publicera.
You can click the ”Save” button to store your changes and close the page builder.
Nu är det bara att besöka din website för att se tabs content på WordPress page i action.
Metod 2: Lägga till tabs content med hjälp av ett plugin för WordPress
Om du inte vill använda en landing page builder kan du använda ett särskilt plugin för WordPress för att add to tabs content till dina posts och pages.
Först måste du installera och aktivera pluginet Tabs Responsive. För mer detaljer, vänligen se vår guide om hur du installerar ett plugin för WordPress.
Efter aktivering kan du gå till Tabs Responsive ” Add New Tabs från din WordPress dashboard och börja med att enter ett namn för dina tabs.
Därefter kan du rulla ner för att lägga till så många tabs som du vill genom att clicka på den röda knappen ”Add New Tabs”.
Dessutom kan du redigera varje enskild tabb genom att ändra dess rubrik, lägga till en description, använda en annan tabbikon och redigera icons location.
Förutom det erbjuder pluginet också olika ”Tabs Settings” i menyn till höger.
You can for instance choose whether to display tabs title, select different options for title and icon, change icon position, show tabs border, select text color, and more.
När du har gjort ändringarna kan du nu använda tabs i alla blogginlägg eller pages med hjälp av shortcode som genereras av plugin.
Klicka bara på knappen ”Publicera”.
Därefter kan du lägga till tabs på vilken page eller post som helst med hjälp av [TABS_R id=130] shortcode. Se bara till att ersätta ID:n i shortcoden med ID:n för din tabs.
Du kan enkelt hitta ID:n och shortcoden för tabben genom att gå till Tabs Responsive ” All tabs och kopiera koden under Tabs Shortcode column.
Därefter behöver du bara antingen lägga till ett nytt inlägg eller redigera ett befintligt.
När du är i Gutenberg block editor, gå vidare och add en shortcode block för att ange shortcode.
Efter det kan du previewa ditt blogginlägg eller din page. Om allt kontrolleras kan du clicka på knappen ”Publicera” eller ”Update” för att saved tabs i your post.
Besök nu din website för att se tabs content i action.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du add to tabs content till WordPress posts och pages. You can also see our guide on WooCommerce made simple and our expert list of the best WordPress plugins for business websites.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Ahmed Abo Rwash
It’s excellent, professional, and valuable. Thank you
WPBeginner Support
You’re welcome!
Administratör
Alexander
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
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
Administratör
msiddiqui
very simply explain u r no 1 in WordPress
WPBeginner Support
Glad you like our content
Administratör
navya
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
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
How to stop playing video in tab when switching to another tab if i have video in every tab? Please help me
dany
thanks bro this helpful
Lena
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
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
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
Kindly show me how to post content under the different tabs i have put on my blog.
Thanks
WPBeginner Support
Your blog is hosted on WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administratör
Ssekito
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
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
what if i need the tab to display contents in the form of widgets.how can i achieve that
Tony
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
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
Yes, it is possible. You will need to generate the HTML code required for the table in the content area of each tab.
Administratör
Weiwei
if in the content , there are more pages, what should I do?
WPBeginner Staff
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
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
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
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
Is the content in the tabs searchable or does the short code prevent the content from being searched?
WPBeginner Staff
It will still be searchable.
Knitwit23
can you show us a post where this is in use?
KonaGirl
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
It is used inside posts and pages to display content in tabs.
Sally Bennett
It would be very useful if you explained what ’tabs’ are to a complete novice
WPBeginner Staff
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.