En lang side med spesifikasjoner, anmeldelser og instruksjoner: brukere scroller, går seg bort og forlater siden. Butikker løste dette problemet for lenge siden ved å dele opp beskrivelser, parametere og anmeldelser i faner. Ingen omlasting, ingen scrolling til ønsket seksjon.

Men faner er ikke bare nyttige for nettbutikker. Se på en hvilken som helst plugin-side på WordPress.org: informasjon, anmeldelser, installasjon, alt er delt inn i faner. Brukere ser strukturen umiddelbart og bytter dit de trenger.

Nedenfor finner du to fungerende metoder for å legge til faner i WordPress-innlegg og -sider. Først via et sidebyggerverktøy, hvis du allerede har et installert. Deretter via den gratis plugin-en Tabs Responsive, hvis du trenger faner uten å binde deg til et bestemt byggerverktøy.

💡 Rask oversikt:

• Sjekk om sidebyggerverktøyet ditt har en fanemodul
• Installer den gratis plugin-en Tabs Responsive fra WordPress.org-katalogen
• Opprett faner i dra-og-slipp-byggeren og fyll dem med innhold
• Sett inn den genererte shortcode-en på ønsket side eller i en widget

Hvordan faner skiller seg fra trekkspillmenyer

Faner må ikke forveksles med trekkspillmenyer, de tjener ulike formål. En trekkspillmeny utvider én blokk og skjuler resten: praktisk for FAQ og mobilskjermer. Faner holder alle faner synlige og bytter innhold umiddelbart. Brukere ser alltid strukturen og kan raskt hoppe til hvilken som helst seksjon.

Ifølge Nielsen Norman Group er trekkspillmenyer hensiktsmessige når brukere bare trenger én seksjon av flere. Faner fungerer når besøkende sannsynligvis vil bytte mellom faner i løpet av ett besøk. For produktsider vinner faner: kjøpere sammenligner spesifikasjoner og beskrivelse i ett vindu uten å miste kontekst.

Vær oppmerksom: hvis innholdet i en fane overstiger én skjermhøyde, kan en trekkspillmeny være mer praktisk. En lang fane tvinger frem scrolling akkurat som en vanlig side.

Metode 1: faner via et sidebyggerverktøy

Hvis du allerede bruker et sidebyggerverktøy, har du flaks. De fleste populære byggerverktøy inkluderer en fanemodul ut av boksen.

Elementor

🔗 Elementor på WordPress.org

Elementor, den mest populære sidebyggeren for WordPress: 10+ millioner aktive installasjoner og 40-50% av sidebyggermarkedet, ifølge Colorlibs data for 2026. Fanemodulen er inkludert i gratisversjonen. Dra «Tabs»-elementet ut på siden, rediger faneoverskrifter og innhold, og tilpass stilen slik at den passer nettstedets design.

Fordelen er at Elementor-faner arver globale stiler: fonter, farger og mellomrom hentes automatisk. Du slipper å redigere CSS separat.

WPBakery

🔗 WPBakery, offisielt nettsted

WPBakery (tidligere Visual Composer), en premium-builder som ofte følger med temaer. I motsetning til Elementor starter fanemodulen her tom: du legger til separate elementer i hver fane, tekst, bilder, ikoner, knapper. Dette gir mer fleksibilitet, men krever noen flere trinn under oppsettet.

Trenger du detaljerte instruksjoner for WPBakery, har vi en egen guide.

Metode 2: Tabs Responsive-utvidelsen, trinnvis oppsett

Ingen sidebygger, og å installere en bygger bare for faner er overdrevent. Tabs Responsive, en gratis utvidelse fra WordPress.org-katalogen, gjør akkurat det den lover: legger til faner i ethvert innlegg eller på enhver side via kortkode eller widget.

🔗 Tabs Responsive på WordPress.org

Utvidelsen er aktiv og oppdatert: 20 000+ aktive installasjoner, 4,7 av 5 i vurdering, 500+ anmeldelser, sist oppdatert mai 2026, kompatibel med WordPress 6.8.3. Gratisversjonen inkluderer én designmal, horisontal og vertikal stil, støtte for Font Awesome-ikoner. Pro legger til 20+ maler, 500+ Google-fonter og innholdsanimasjon.

Trinn 1: installasjon

Gå til Utvidelser → Legg til ny i WordPress-administrasjonen, skriv inn tabs responsive i søkefeltet. Finn utvidelsen fra wpshopmart, klikk Installer nå, deretter Aktiver.

Etter aktivering dukker et nytt menyelement kalt «Tabs Responsive» opp i venstremenyen.

Trinn 2: opprett dine første faner

Gå til Tabs Responsive → Legg til nye faner. En dra-og-slipp-bygger åpnes.

Gi fanesettet et beskrivende navn først, for eksempel «Produktspesifikasjoner» eller «Hjemmesidefaner». Dette er nyttig når du har flere sett for ulike sider.

Byggeren ser avskrekkende ut, men logikken er enkel:

Fyll nå ut selve fanene. I seksjonen Legg til faner konfigurerer du for hver fane:

• Fanetittel, det brukeren ser på fanen: «Beskrivelse», «Spesifikasjoner», «Anmeldelser».
• Fanebeskrivelse, fanens innhold. En fullverdig WYSIWYG-editor fungerer: du kan sette inn bilder, videoer, musikk, andre kortkoder.
• Faneikon, velg et ikon fra Font Awesome-biblioteket som er innebygd i utvidelsen.
• Vis over ikon, et alternativ som plasserer tittelen over ikonet eller deaktiverer ikonet, slik at bare tekst vises.
• Fjern, knapp for å slette en bestemt fane.
• Legg til nye faner, legger til en tom fane i settet.
• Fjern alle, tilbakestiller alle faner på én gang.

Faner kan dras for å endre rekkefølge. Klikk Lagre kladd underveis, så går ikke endringer tapt om du skulle forlate siden ved et uhell.

Trinn 3: design og stiler

Faneutseendet konfigureres i sidepanelet til høyre i byggeren.

Gratisversjonen tilbyr én designmal:

Pro-versjonen legger til 19 flere maler. Men selv i gratisversjonen kan du tilpasse: bakgrunns- og skriftfarge, skriftfamilie, polstring, rammer, ikonjustering, overgangsanimasjon.

Hvis standardinnstillingene ikke er nok, har utvidelsen et felt for egendefinert CSS:

Her finner du også knappen Oppdater standardinnstillinger, klikk på den slik at alle nye fanesett opprettes med gjeldende stilparametere.

Trinn 4: publisering av faner på en side

Når innhold og stil er klart, klikker du Publiser øverst på skjermen.

Utvidelsen genererer en shortcode som [TABS_R id=443]. Kopier den.

Åpne innlegget eller siden der du trenger å legge til faner, og lim inn shortcoden på ønsket sted. Fungerer i alle editorer, både klassisk og Gutenberg.

Hvis du trenger å legge til faner i en sidestolpe eller bunntekst, bruker du Tabs Responsive-widgeten. Gå til Utseende → Widgeter:

Klikk på lenken «Klikk her», så kommer du til widget-skjermen der du kan dra widgeten inn i et hvilket som helst område:

Resultatet etter 5-7 minutters oppsett ser slik ut:

Farger og stiler her er grunnleggende. Om ønskelig kan du justere dem i byggerens høyrepanel eller via tilpasset CSS.

Se videoen for å se hele prosessen fra installasjon til ferdige faner på siden:

⁉️🤔 Ofte stilte spørsmål

Fungerer faner på mobile enheter?

Ja. Tabs Responsive-utvidelsen er bygget på Bootstrap, så faner tilpasser seg enhver skjerm. På smale skjermer kan horisontale faner bli til en vertikal liste eller et trekkspill, avhengig av valgt mal. Sjekk hvordan faner ser ut på en telefon etter oppsett: hvis faneteksten er lang, kan vertikal stil være mer praktisk enn horisontal.

Kan du legge til faner i et innlegg uten en utvidelse?

Uten en utvidelse eller et byggeverktøy, nei, med mindre du skriver din egen JavaScript- og CSS-kode. WordPress ut av boksen gir ingen ferdig løsning for faner i innhold. Tabs Responsive-utvidelsen løser oppgaven uten kode: installasjon og oppsett tar minutter, resultat via shortcode. Dette er et kompromiss mellom «vil ikke installere en utvidelse» og «vil ikke skrive kode fra bunnen av».

Påvirker faner SEO?

Med riktig implementering, nei. Innhold fra alle faner lastes inn i sidens HTML ved første rendering, Google ser og indekserer det. Tabs Responsive-utvidelsen leverer alt innhold i kildekoden, ikke asynkront, dette er trygt for SEO. Problemer kan bare oppstå med AJAX-lastede faner (faneinnhold lastes kun ved klikk), bruk slike løsninger med forsiktighet.

Hva gjør jeg hvis faner kommer i konflikt med temaet?

Stilkonflikt er det vanligste problemet. Prøv først feltet for tilpasset CSS i utvidelsesinnstillingene: vanligvis er et par linjer nok til å fikse bakgrunnsfarge eller padding for temaet. Hvis det ikke hjelper, bytt fra horisontal til vertikal stil i malinnstillingene, noen ganger er problemet bare i én av modusene. Siste utvei, støtteforum for utvidelsen på WordPress.org: utvikleren svarer og hjelper med konflikter.

Hvordan skiller Tabs Responsive seg fra faner i et byggeverktøy?

Utvidelsen er ikke knyttet til et spesifikt byggeverktøy. Hvis du bestemmer deg for å bytte byggeverktøy eller gå over til den innebygde blokkredigereren, vil faner via shortcode fortsette å fungere. Med Elementor- eller WPBakery-faner finnes ikke en slik fleksibilitet: når du bytter byggeverktøy, forsvinner fanene med det. I tillegg støtter Tabs Responsive vertikal stil, widgeter og ikoner, noe ikke alle byggeverktøy tilbyr i gratisversjonen.

Hva du bør velge for din oppgave

Hvis et sidebyggeverktøy allerede er installert, bruk dets fanemodul. Det er raskere: ett dra-og-slipp, og fanene er på siden.

Hvis det ikke finnes noe byggeverktøy, bruk Tabs Responsive-utvidelsen. Den er gratis, oppdatert og binder deg ikke til et spesifikt byggeverktøy. Shortcode og widget fungerer i ethvert tema og enhver redigerer.

For WooCommerce-nettbutikker legger utvidelsen til en egen fane med beskrivelse på produktkortet, dette er ikke tilgjengelig med Elementor-faner.

Prøv Tabs Responsive på et testnettsted: installasjon tar ett minutt, og du bygger dine første faner på 5 minutter. Hvis du står fast på noe trinn, sjekk videoen over eller skriv i kommentarene, så finner vi ut av det.