Hur man lägger till flikar till WordPress-inlägg och sidor

Hur man lägger till flikar till WordPress-inlägg och sidor

Flikar är en ganska vanlig funktion på många webbplatser, särskilt e-handelsbutiker. Ägare av e-handel butiker använder vanligtvis flikar i produktbeskrivningsområdet, där de delar upp recensioner, beskrivning, tekniska specifikationer och så vidare i flera flikar.


exempel på flikar i aktion på en e-handelswebbplats

Ändå har flikar hittat användning på många andra typer av webbplatser, inte bara e-handelswebbplatser. Till och med den officiella WordPress.org-webbplatsen använder flikar på pluginbeskrivningssidor. Se bilden nedan för att se de markerade flikarna på WP.org.

flikar på wordpress.org plugin beskrivningssida

Många andra webbplatsägare använder flikar på olika typer av webbplatser. Men flikar ska inte förväxlas med dragspel, som expanderar för att avslöja information. Nedan kan du observera hur jag har använt dragspel på min webbplats.

dragspel på vistamedia.xyz

Men dragspel åt sidan, vi är här för att prata om flikar, så låt oss inte tappa vårt fokus; Jag behövde bara göra skillnaden mellan flikar och dragspel tydlig. Nu hoppas jag att vi är på samma sida ��

I huvudsak använder webbägare flikar för att dela information som annars skulle ha tagit en hel sida eller inlägg. Det betyder att flikar gör information mycket lättare att smälta, utan att nödvändigtvis tvinga användare att slå rullningshjulet en miljon gånger.

Med andra ord, flikar förbättrar användbarheten på din webbplats särskilt i en värld av kortare uppmärksamhet sträcker sig. Så om du vill hålla användare på din webbplats längre utan att tråkiga dem ihjäl med långa sidor, bör du överväga att använda flikar.

I dagens inlägg visar vi dig exakt hur du lägger till flikar till dina WordPress-inlägg och sidor. Innan slutet av detta inlägg har du alla instruktioner du behöver för att använda flikar till din fördel. Vi hoppas att du gillar helt till slutet, och vänligen inte lämna utan att dela dina tankar i kommentarsektionen. Låt oss komma igång.

Använd en sidbyggare

Om du redan har installerat en sidbyggare har du tur – du har troligtvis en flikmodul till fingerspetsarna. De flesta av de stora sidbyggarna erbjuder flikar som en del av deras kärnuppsättning av sidbyggare-element. Här är en snabb titt på två av våra favoriter.

Elementor Free Page Builder

Elementor Page Builder-flikar

Info & nedladdning Visa demonstrationen

Den populära Elementor-sidbyggaren innehåller flikar som en del av den gratis versionen av plugin. Allt du behöver göra är att infoga ett flikelement på din sida och sedan redigera titel, innehåll, stil etc. Det är det!

WPBakery Premium Page Builder

Flikar för WPBakery Page Builder

Vill du använda ett premiumtema som innehåller WPBakery Page Builder (som vårt eget Total-tema)? Bra! Flikar är inbyggda och enkla att använda.

Flikmodulen WPBakery skiljer sig något från föregående exempel eftersom flikarna ursprungligen är tomma när du lägger till dem. Du måste infoga ytterligare sidelement (textområde, bilder, ikoner osv.) I flikarna för att lägga till ditt innehåll. Men detta ger dig massor av frihet att skapa flikar hur du vill ha dem (utöver de inbyggda stylingalternativen). Vi har täckt den här sidbyggaren på bloggen tidigare, så om du vill ha mer detaljerade instruktioner, kolla in vår WPBakery-guide (Obs – detta plugin har tidigare kallats Visual Composer, så ledsen i förväg för förvirring).

Installera flikarna WordPress Plugin

Flikar Gratis WordPress-plugin

Om du inte använder en sidbyggare behöver du inte använda en bara för flikar. Det finns gott om fantastiska alternativ, som det gratis WordPress-plugin som kallas bara Tabs av WP Shop Mart. Tabs är ett snyggt WordPress-plugin som hjälper dig att skapa ett obegränsat antal vackra flikar utan att bryta svett.

Låt oss börja med att installera flikarna WordPress-plugin. Eftersom det är tillgängligt i den officiella WordPress-plugin-repo, kan du installera plugin direkt från din WordPress admin-instrumentpanel.

Vi använder gratisversionen, men det finns en premiumversion tillgänglig om du vill uppgradera för extra funktioner senare.

Installera flikar WordPress Plugin

Logga in på din WordPress admin-instrumentpanel och navigera till Plugins> Lägg till nytt och ange “flikar wpshopmart” i sökrutan för sökord. När du hittat rätt plugin, tryck på Installera nu som visas nedan.

installera flikarna wordpress plugin

Klicka sedan på Aktivera knapp. Och det är det, dina flikar responsiva WordPress-plugin är redo att användas. Låt oss nu skapa ett par flikar för att upptäcka vad detta plugin har att erbjuda.

Konfigurera flikarna Responsive WordPress Plugin

Om du aktiverar plugin läggs ett nytt objekt till din WordPress-adminmeny. För att skapa nya flikar, navigera till Flikar responsiva> Lägg till nya flikar som vi beskriver i screengrab nedan.

lägga till nya flikar med hjälp av flikarna responsive wordpress plugin

Om du gör det leder du till Tabs Responsive Builder som är chockfull av alla funktioner du behöver för att skapa vackra flikar som en chef. Se bilden nedan för en glimt av vad du kan förvänta dig.

flikar känsliga WordPress plugin flik byggare

Ganska en rullning är det inte? Du kan hitta de flesta funktioner på höger sidofält. Observera också att enskilda flikar har sina inställningar. Du kan till och med använda WYSIWYG-redigerare på flikarna, vilket innebär att du har gott om kontroll över dina flikar.

Låt oss nu skapa ett par exempelflikar och visa dem på en sida eller ett inlägg.

Lägg till titel

lägg till flikens titel

Börja med att ge dina flikar en beskrivande titel (precis som med dina navigationsmenyer) som visas på bilden ovan. På det här sättet kan du enkelt identifiera dina flikar i WordPress admin-instrumentpanelen senare om du behöver redigera något. I syftet med denna självstudie dopade jag mina flikar “Testa hemflikar.”

Välj flikar designmall

välj flikar designmall

Som man ser på skärmdumpen ovan innebär nästa steg att välja en formgivningsmall som du vill använda för dina flikar. Den kostnadsfria versionen av flikarna WordPress-plugin erbjuder bara en designmall, men du kan alltid uppgradera till premiumversionen för 19 till. Prata om designfrihet.

Lägg till flikar

Lägg sedan till så många flikar som du önskar som visas nedan.

lägga till nya flikar

Vi har skapat en numrerad lista med information om vad du kan göra på Lägg till flikar avsnittet ovan. Antalet motsvarar varje område.

  1. Fliktitel – Lägg till flikens titel i det här fältet, t.ex.. Beskrivning, specifikationer, detaljer, etc.
  2. Flikbeskrivning – Lägg till din flikbeskrivning här. Det här fältet låter dig lägga till innehållet på fliken. Det bästa är att du kan använda WYSIWYG-redigeraren (visas i nummer 3 nedan) för att lägga till rikt innehåll till dina flikar, inklusive bilder, musik och videor.
  3. Använd WYSIWYG – Om du vill använda det bekanta Whatt-You-See-jags-Whatt-You-Get redaktör för att skapa ditt flikinnehåll, tryck gärna på den här knappen för att starta popup-fönstret
  4. Flikikon – Detta fält hjälper dig att välja en ikon som du vill använda på fliken. Flikarna WordPress-plugin ger dig tillgång till massor av teckensnitt Awesome ikoner för att jazza dina flikar som en proffs
  5. Visa ovanför ikonen – Om du vill visa flikens titel bredvid ikonen kommer du att älska den här funktionen. Vidare tillåter det att du inaktiverar ikonen utan att röra vid flikens titel
  6. Radera – Tryck på den här knappen för att ta bort en specifik flik
  7. Lägg till nya flikar – Klicka på den här knappen för att lägga till fler flikar
  8. Radera allt – Trött på alla flikar? Bara slå på Radera allt för att återställa allt

Ett par bonustips för att hjälpa dig. Först kan du dra och släppa flikarna runt för att ordna och ordna dem som du vill.

För det andra – glöm inte att träffa Spara utkast -knappen en eller två gånger när du skapar dina flikar för att säkerställa att du inte tappar några ändringar om du navigerar bort från flikans byggare av misstag.

Slutligen – om du behöver stöd finns det en stor blå Få stöd knapp nedanför Lägg till flikar avsnitt (och på de flesta av pluginsidorna) som leder dig till det officiella forumet för flikar på WordPress.org. Tveka inte att trycka på supportknappen om du behöver hjälp när som helst.

Flikar Kortkod

flikar kortkod

Därefter hittar du flikarna kortkod som du använder för att lägga till och visa dina flikar på vilken sida eller inlägg du önskar. Till exempel är vår kortkod [TABS_R id = 443]. För att visa flikarna på en sida skulle jag helt enkelt kopiera och klistra in ovanstående kortkod på den specifika sidan.

Flikar widget

flikar widgetstöd

Letar du efter att lägga till dina flikar i ett widgetområde på din webbplats? Om det är ett rungande ja, kommer du att älska widgetstödet som medföljer flikarna WordPress-plugin.

Slår på Klicka här länken i bilden ovan tar dig till skärmen WordPress widgets, där du är fri att lägga till dina flikar var du än har ett widgetområde i ditt tema.

flikar widget

Anpassad CSS

Medan flikarna WordPress-plugin kommer med massor av flikanpassningsalternativ (titta bara på den högra sidofältet; den är full av stylalternativ!), Kan du lägga till dina egna CSS-stilar som visas nedan.

flikar wordpress plugin anpassade css

Vidare kan du ställa in dina anpassade inställningar som standardinställningar för alla nya flikar helt enkelt genom att klicka på Uppdatera standardinställningarna som visas på bilden ovan.

Höger sidofält

flikar WordPress plugin stylingalternativ

Den högra sidofältet som vi markerar på bilden ovan bär verkligen dagen för din. Det är fullpackat med alla alternativ du behöver för att utforma dina flikar till ditt hjärtas innehåll. Viktiga alternativ inkluderar:

  • Färg bakgrundsfärg
  • Fliken typsnitt färg
  • Teckensnitt familj och stil
  • Visa alternativ för flikens titel och ikon
  • Flikens ikonpositionering, dvs före eller efter flikens titel
  • Fliken gränsar
  • Flera beskrivningar av flikbeskrivningar
  • Och så mycket mer

Lägg till flikarna till en WordPress-sida eller -inlägg

När du har lagt till flikens innehåll och stilalternativ bläddrar du upp och klickar på Publicera som visas nedan.

Just nu är dina flikar redo. Du behöver helt enkelt lägga till flikarna på en WordPress-sida eller ett inlägg. Kopiera helt enkelt flikernas kortkod vi såg tidigare. Vårt är [TABS_R id = 443].

Starta inläggsredigeraren (även om du använder Gutenberg) och klistra in kortkoden i ditt inlägg / sida. Efter det, slå på Publicera som visas nedan.

Efter cirka 5 minuters installation av saker; Jag använder Twenty Seventeen-temat och massor av Lorem Ipsum, jag kom med följande resultat.

Observera att jag inte anpassade färgerna eller någonting. Säg mig vad du tycker; var inte så lätt?


Att lägga till flikar till dina WordPress-sidor och -inlägg är grejer för fjärde klassare. Jag förväntar mig inte att du kommer att stöta på några problem, särskilt om du använder ett plugin som Tabs av WP Shop Mart.

Hur lägger du till flikar på dina WordPress-sidor och inlägg? Vilka är dina favoritflikar WordPress-plugin? Vänligen dela dina tankar i kommentarerna. Lycklig skapande!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map