Slik legger du til faner i WordPress-innlegg og sider

Slik legger du til faner i WordPress-innlegg og sider

Faner er en ganske vanlig funksjon på mange nettsteder, spesielt e-handelsbutikker. Eiere av e-handel bruker vanligvis faner i produktbeskrivelsesområdet, der de deler anmeldelser, beskrivelse, tekniske spesifikasjoner og så videre i flere faner..


eksempel på faner i aksjon på et netthandelnettsted

Fortsatt har faner funnet bruk på mange andre forskjellige typer nettsteder, ikke bare nettsteder for e-handel. Til og med det offisielle WordPress.org-nettstedet bruker faner på beskrivelsessider for plugins. Se bildet nedenfor for å se de uthevede fanene på WP.org.

faner på wordpress.org plugins beskrivelse side

Mange andre nettstedseiere bruker faner på forskjellige typer nettsteder. Faner er imidlertid ikke til å forveksle med trekkspill, som utvides for å avsløre informasjon. Nedenfor kan du observere hvordan jeg har brukt trekkspill på hjemmesiden min.

trekkspill på vistamedia.xyz

Men trekkspill til side, vi er her for å snakke om faner, så la oss ikke miste fokuset; Jeg trengte bare å gjøre skillet mellom faner og trekkspill tydelig. Nå håper jeg vi er på samme side ��

I hovedsak bruker netteiere faner for å dele opp informasjon som ellers ville ha tatt en hel side eller et innlegg. Det betyr at faner gjør informasjon mye lettere å fordøye, uten nødvendigvis å tvinge brukere til å slå rullehjulet en million ganger.

Med andre ord, faner forbedrer brukervennligheten til nettstedet ditt, spesielt i en verden av kortere oppmerksomhet spenner over. Så hvis du ønsker å holde brukere på nettstedet ditt lenger uten å kjede dem i hjel med lange sider, bør du vurdere å bruke faner.

I dagens innlegg viser vi deg nøyaktig hvordan du legger til faner til WordPress-innlegg og sider. Før slutten av dette innlegget, vil du ha alle instruksjonene du trenger for å bruke faner til din fordel. Vi håper du liker helt til slutt, og vær så snill og ikke gå uten å dele tankene dine i kommentarfeltet. La oss komme i gang.

Bruk en sidebygger

Hvis du allerede har installert en sidebygger, er du heldig – du har sannsynligvis allerede en fanemodul til fingerspissene. De fleste av de store sidebyggerne tilbyr faner som en del av deres kjernesett med sidebyggerelementer. Her er en rask titt på to av favorittene våre.

Elementor gratis sidebygger

Elementor Page Builder-faner

Info & NedlastingVis The Demo

Den populære Elementor-sidebyggeren inkluderer faner som en del av gratisversjonen av plugin-modulen. Alt du trenger å gjøre er å sette inn et faneelement på siden din og deretter redigere tittelen, innholdet, stilen osv. Det er det!

WPBakery Premium Page Builder

WPBakery Page Builder faner

Bruker du et premiumtema som inkluderer WPBakery Page Builder (for eksempel vårt eget Total-tema)? Flott! Faner er innebygde og enkle å bruke.

Tabuleringsmodulen WPBakery er litt forskjellig fra forrige eksempel, ettersom fanene først er tomme når du legger til dem. Du må sette inn flere sideelementer (tekstområde, bilder, ikoner osv.) I kategoriene for å legge til innholdet ditt. Men dette gir deg massevis av frihet til å lage faner hvordan du vil ha dem (i tillegg til de innebygde stylingsalternativene). Vi har dekket denne sidebyggeren på bloggen før, så hvis du ønsker mer detaljerte instruksjoner, sjekk ut WPBakery-guiden vår (merk – denne pluginen ble tidligere kalt Visual Composer, så beklag på forhånd for forvirring).

Installer fanene WordPress Plugin

Faner Gratis WordPress-plugin

Hvis du ikke bruker en sidebygger, er det ikke nødvendig å bruke en bare for faner. Det er mange gode alternativer, som den gratis WordPress-plugin som bare kalles Tabs av WP Shop Mart. Tabs er en fin WordPress-plugin som hjelper deg å lage et ubegrenset antall vakre faner uten å brekke svette.

La oss begynne med å installere fanene WordPress-plugin. Siden det er tilgjengelig i det offisielle WordPress-plugin-repoet, kan du installere plugin-programmet direkte fra ditt WordPress admin-dashbord..

Vi bruker gratisversjonen, men det er en premiumversjon tilgjengelig hvis du vil oppgradere for ekstra funksjoner senere.

Installere faner WordPress Plugin

Logg deg på ditt WordPress admin dashbord og naviger til Plugins> Legg til nytt og skriv inn “tabs wpshopmart” i søkefeltet. Når du har funnet riktig plugin, trykker du på Installere nå knappen som vist nedenfor.

installere kategoriene wordpress plugin

Klikk deretter på Aktiver knapp. Og det er det, Tabs Responsive WordPress-pluginen er klar til bruk. La oss nå lage et par faner for å finne ut hva denne pluginen har å tilby.

Konfigurer fanene Responsive WordPress Plugin

Aktivering av plugin vil legge til et nytt element i WordPress-admin-menyen. For å opprette nye faner, naviger til Faner responsive> Legg til nye faner som vi beskriver i screengrab nedenfor.

legge til nye faner ved å bruke fanene responsive wordpress plugin

Hvis du gjør det, fører du til Tabs Responsive Builder som er fyldig med alle funksjonene du trenger for å lage vakre faner som en sjef. Se bildet nedenfor for et glimt av hva du kan forvente.

faner responsive wordpress plugin fanebygger

Ganske en rulle er det ikke? Vel, du kan finne de fleste funksjonene på høyre sidefelt. Merk også at individuelle faner har sine innstillinger. Du kan til og med bruke WYSIWYG-redigerere på fanene, noe som betyr at du har rikelig med kontroll over fanene.

La oss nå lage et par eksempler faner, og vise dem på en side eller et innlegg.

Legg til tittel

legg til kategorien tittel

Begynn med å gi kategoriene en beskrivende tittel (akkurat som med navigasjonsmenyene dine) som vist på bildet over. På denne måten kan du enkelt identifisere fanene dine i WordPress admin dashbord senere, i tilfelle du trenger å redigere noe. I forbindelse med denne opplæringen døpte jeg fanene mine “Test hjemmefaner.”

Velg kategorier Design Mal

velg kategorier designmal

Som du ser på skjermdumpen ovenfor, involverer det neste trinnet ditt å velge en designmal du vil bruke til fanene. Gratisversjonen av fanene WordPress-plugin tilbyr bare en designmal, men du kan alltid oppgradere til premiumversjonen for 19 til. Snakk om designfrihet.

Legg til faner

Deretter legger du til så mange faner du ønsker som vist nedenfor.

legge til nye faner

Vi har laget en nummerert liste som beskriver hva du kan gjøre på Legg til faner delen vist ovenfor. Tall tilsvarer hvert område.

  1. Fanen Tittel – Legg til fanetittelen i dette feltet, f.eks. Beskrivelse, spesifikasjoner, detaljer, etc.
  2. Fanebeskrivelse – Legg til fanebeskrivelsen her. Dette feltet lar deg legge til innholdet på fanen. Det beste er at du kan bruke WYSIWYG-redigeringsprogrammet (vist i nummer 3 nedenfor) for å legge til rikt innhold på fanene, inkludert bilder, musikk og videoer
  3. Bruk WYSIWYG – Hvis du vil bruke det kjente Whatt-You-See-Jegs-Whatt-You-Get redigeringsprogram for å lage faneinnholdet ditt, trykk gjerne på denne knappen for å starte popup-vinduet
  4. Tabulatorikon – Dette feltet hjelper deg å velge et ikon du vil bruke på fanen. Tabs WordPress-plugin gir deg tilgang til mange Font Awesome-ikoner for å jazze fanene dine som en proff
  5. Vis over ikonet – Hvis du vil vise fanetittelen ved siden av ikonet, vil du elske denne funksjonen. Videre lar den deg deaktivere ikonet uten å berøre kategoritittelen
  6. Slett – Trykk på denne knappen for å slette en bestemt fane
  7. Legg til nye faner – Klikk på denne knappen for å legge til flere faner
  8. Slette alle – Lei av alle faner? Bare trykk på Slette alle for å tilbakestille alt

Et par bonustips for å hjelpe deg. Først kan du dra og slippe fanene rundt for å ordne og ordne dem slik du ønsker.

For det andre – ikke glem å slå den Lagre utkast -knappen en eller to ganger når du oppretter fanene dine for å sikre at du ikke mister endringer i tilfelle du ved en tilfeldighet navigerer bort fra fanebyggeren.

Til slutt – hvis du trenger støtte er det et stort blått Få støtte knappen rett under Legg til faner delen (og på de fleste av plugin-sidene) som fører deg til det offisielle forumet for støtte for faner på WordPress.org. Ikke nøl med å trykke på støtteknappen hvis du trenger hjelp når som helst.

Faner Kortkode

faner kortkode

Deretter finner du fanekortkoden du bruker for å legge til og vise fanene på hvilken som helst side eller innlegg du ønsker. For eksempel er kortkoden vår [TABS_R id = 443]. For å vise fanene på en side, ville jeg bare kopiere og lime inn kortkoden ovenfor på den aktuelle siden.

Faner Widget

faner widget støtte

Ønsker du å legge til fanene dine i et widget-område på nettstedet ditt? Hvis det er et rungende ja, vil du elske widget-støtten som følger med fanene WordPress-plugin.

Slår den Klikk her koblingen på bildet over tar deg til WordPress-widgets-skjermen, hvor du står fritt til å legge til fanene dine hvor som helst du har et widget-område i temaet ditt..

faner widget

Tilpasset CSS

Mens Tabs WordPress-plugin-en har mange alternativer for tilpasning av faner (bare se på den høyre sidefeltet; den er full av stylingsalternativer!), Kan du legge til dine egne tilpassede CSS-stiler som vist nedenfor.

faner wordpress plugin tilpasset css

Videre kan du angi dine tilpassede innstillinger som standardinnstillinger for alle nye faner ved å klikke på Oppdater standardinnstillinger -knappen som vist på bildet over.

Høyre sidefelt

faner WordPress plugin stylingalternativer

Den høyre sidefeltet vi fremhever på bildet over, bærer dagen for din virkelig. Det er fullpakket med alle alternativene du trenger for å style fanene etter ditt hjerte. Viktige alternativer inkluderer:

  • Bakgrunnsfarge på fanen
  • Tablettfarge
  • Fontfamilie og stil
  • Vis alternativer for kategoritittel og ikon
  • Posisjonsjustering av faneikon, dvs. før eller etter titteltittel
  • Fanen grenser
  • Flere fanebeskrivelsesanimasjoner
  • Og så mye mer

Legg til fanene dine på en WordPress-side eller -innlegg

Når du har lagt til fanenes innhold og stilalternativer, blar du opp og klikker på publisere knappen som vist nedenfor.

På dette tidspunktet er fanene dine klare. Du trenger ganske enkelt å legge til fanene på en WordPress-side eller et innlegg. Bare kopier kategorienes kategorier vi så tidligere. Vårt er [TABS_R id = 443].

Start innlegget redigeringsprogram (selv om du bruker Gutenberg) og lim inn kortkoden i innlegget / siden din. Etter det, traff publisere knappen som vist nedenfor.

Etter omtrent 5 minutter med å sette opp ting; Jeg bruker Twenty Seventeen-temaet og rikelig med Lorem Ipsum, jeg kom med følgende resultat.

Merk at jeg ikke tilpasset fargene eller noe. Fortell meg hva du tenker; var ikke så lett?


Å legge til faner til WordPress-sidene og innleggene dine er ting til fjerde klassinger. Jeg forventer ikke at du får problemer, spesielt hvis du bruker en plugin som Tabs av WP Shop Mart.

Hvordan legger du til faner på WordPress-sidene og innleggene dine? Hvilke er favorittfanene dine WordPress-plugin? Del gjerne tankene dine i kommentarene. Glad å skape!

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