Så här lägger du till tabbed content i WordPress posts och pages

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.