Pitkä sivu, jossa on teknisiä tietoja, arvosteluja ja ohjeita: käyttäjät selaavat, eksyvät ja poistuvat. Verkkokaupat ratkaisivat tämän ongelman jo kauan sitten jakamalla kuvaukset, tekniset tiedot ja arvostelut välilehtiin. Ei uudelleenlatausta, ei selaamista tarvittavaan osioon.

Mutta välilehdet eivät ole hyödyllisiä vain verkkokaupoille. Katso mitä tahansa lisäosasivua WordPress.orgissa: tiedot, arvostelut, asennus, kaikki on eroteltu välilehtiin. Käyttäjät näkevät rakenteen heti ja siirtyvät sinne, minne tarvitsevat.

Alla on kaksi toimivaa tapaa lisätä välilehtiä WordPressin artikkeleihin ja sivuihin. Ensimmäinen sivunrakentajan kautta, jos sinulla on sellainen jo asennettuna. Toinen ilmaisen lisäosan Tabs Responsive kautta, jos tarvitset välilehtiä sitoutumatta tiettyyn rakentajaan.

💡 Pikaopas:

• Tarkista, onko sivunrakentajassasi välilehtimoduuli
• Asenna ilmainen Tabs Responsive -lisäosa WordPress.orgin hakemistosta
• Luo välilehdet raahaa ja pudota -rakentajassa ja täytä ne sisällöllä
• Lisää luotu shortcode tarvittavalle sivulle tai vimpaimen sisään

Miten välilehdet eroavat haitareista

Välilehtiä ei pidä sekoittaa haitareihin, ne palvelevat eri tarkoituksia. Haitari avaa yhden lohkon ja sulkee muut: kätevä UKK-osioihin ja mobiilinäytöille. Välilehdet pitävät kaikki välilehdet näkyvissä ja vaihtavat sisällön välittömästi. Käyttäjät näkevät rakenteen koko ajan ja voivat hypätä nopeasti mihin tahansa osioon.

Nielsen Norman Groupin mukaan haitarit sopivat silloin, kun käyttäjä tarvitsee vain yhden osion useasta. Välilehdet toimivat, kun vierailijat todennäköisesti vaihtelevat välilehtien välillä yhden käynnin aikana. Tuotesivuilla välilehdet voittavat: ostajat vertailevat teknisiä tietoja ja kuvausta yhdessä ikkunassa menettämättä kontekstia.

Huomioi: jos välilehden sisältö ylittää yhden näytön korkeuden, haitari voi olla kätevämpi. Pitkä välilehti pakottaa selaamaan aivan kuten tavallinenkin sivu.

Tapa 1: välilehdet sivunrakentajan kautta

Jos käytät jo sivunrakentajaa, olet onnekas. Useimmat suositut rakentajat sisältävät välilehtimoduulin valmiina.

Elementor

🔗 Elementor WordPress.orgissa

Elementor, WordPressin suosituin sivunrakentaja: yli 10 miljoonaa aktiivista asennusta ja 40-50% sivunrakentajamarkkinoista Colorlibin vuoden 2026 datan mukaan. Välilehtimoduuli sisältyy ilmaisversioon. Vedä "Välilehdet"-elementti sivulle, muokkaa välilehtien otsikoita ja sisältöä, mukauta tyyli vastaamaan sivustosi ilmettä.

Etuna on, että Elementorin välilehdet perivät yleiset tyylit: fontit, värit ja välistykset tulevat automaattisesti. CSS:ää ei tarvitse muokata erikseen.

WPBakery

🔗 WPBakery, virallinen sivusto

WPBakery (entinen Visual Composer), maksullinen rakentaja, joka tulee usein teemojen mukana. Toisin kuin Elementorissa, välilehtimoduuli alkaa täällä tyhjänä: lisäät jokaiseen välilehteen erillisiä elementtejä, tekstiä, kuvia, kuvakkeita, painikkeita. Tämä antaa enemmän joustavuutta, mutta vaatii muutaman lisävaiheen asennuksen aikana.

Jos tarvitset tarkat ohjeet WPBakerylle, meillä on erillinen opas.

Tapa 2: Tabs Responsive -lisäosa, vaiheittainen asennus

Ei sivunrakentajaa, ja rakentajan asentaminen pelkkiä välilehtiä varten on liioittelua. Tabs Responsive, ilmainen lisäosa WordPress.org-hakemistosta, tekee juuri sen mitä lupaa: lisää välilehdet mihin tahansa artikkeliin tai sivuun shortcoden tai widgetin avulla.

🔗 Tabs Responsive WordPress.orgissa

Lisäosa on elossa ja päivitetty: yli 20 000 aktiivista asennusta, arvosana 4,7/5, yli 500 arvostelua, viimeisin päivitys toukokuussa 2026, yhteensopiva WordPress 6.8.3:n kanssa. Ilmaisversio sisältää yhden suunnittelumallin, vaaka- ja pystytyylit sekä Font Awesome -kuvaketuen. Pro-versio tuo mukanaan yli 20 mallia, yli 500 Google-fonttia ja sisältöanimaation.

Vaihe 1: asennus

Mene WordPressin hallintapaneelissa kohtaan Lisäosat → Lisää uusi, kirjoita hakuun tabs responsive. Etsi wpshopmartin lisäosa, napsauta Asenna nyt ja sitten Ota käyttöön.

Käyttöönoton jälkeen vasempaan valikkoon ilmestyy uusi "Tabs Responsive" -kohta.

Vaihe 2: ensimmäisten välilehtien luominen

Mene kohtaan Tabs Responsive → Add New Tabs. Näkyviin tulee vedä ja pudota -rakentaja.

Anna välilehtisetille ensin kuvaava nimi, esimerkiksi "Tuotetiedot" tai "Etusivun välilehdet". Tästä on apua, kun sinulla on useita settejä eri sivuille.

Rakentaja näyttää vaikuttavalta, mutta logiikka on yksinkertainen:

Täytä nyt itse välilehdet. Add tabs -osiossa määrität kullekin välilehdelle:

• Tab title, mitä käyttäjä näkee välilehdellä: "Kuvaus", "Tekniset tiedot", "Arvostelut".
• Tab description, välilehden sisältö. Käytössä on täysi WYSIWYG-editori: voit lisätä kuvia, videoita, musiikkia ja muita shortcodeja.
• Tab icon, valitse kuvake lisäosaan sisäänrakennetusta Font Awesome -kirjastosta.
• Display above icon, asetus sijoittaa otsikon kuvakkeen yläpuolelle tai poistaa kuvakkeen käytöstä jättäen vain tekstin.
• Remove, painike tietyn välilehden poistamiseen.
• Add new tabs, lisää tyhjän välilehden settiin.
• Remove all, nollaa kaikki välilehdet kerralla.

Välilehtiä voi raahata järjestyksen muuttamiseksi. Napsauta Save Draft työskentelyn aikana, niin muutokset eivät katoa, jos poistut sivulta vahingossa.

Vaihe 3: ulkoasu ja tyylit

Välilehtien ulkoasu määritetään rakentajan oikeanpuoleisessa sivupalkissa.

Ilmaisversio tarjoaa yhden suunnittelumallin:

Pro-versio lisää 19 mallia lisää. Mutta jo ilmaisversiossa voit muokata: taustan ja fontin väriä, fonttiperhettä, täytettä, reunuksia, kuvakkeen tasausta ja siirtymäanimaatiota.

Jos vakioasetukset eivät riitä, lisäosassa on kenttä omalle CSS:lle:

Täällä on myös Update Default Settings -painike, napsauta sitä, niin kaikki uudet välilehtisetit luodaan nykyisillä tyyliparametreilla.

Vaihe 4: välilehtien julkaiseminen sivulla

Kun sisältö ja tyyli ovat valmiit, napsauta Publish näytön yläreunassa.

Lisäosa luo shortcoden, kuten [TABS_R id=443]. Kopioi se.

Avaa julkaisu tai sivu, johon haluat lisätä välilehdet, ja liitä shortcode haluamaasi kohtaan. Toimii kaikissa editoreissa, sekä klassisessa että Gutenbergissa.

Jos haluat lisätä välilehdet sivupalkkiin tai alatunnisteeseen, käytä Tabs Responsive -widgettiä. Mene kohtaan Ulkoasu → Widgetit:

Klikkaa "Klikkaa tästä" -linkkiä, niin pääset widgetit-näytölle, jossa voit raahata widgetin mille tahansa alueelle:

Lopputulos 5-7 minuutin asennuksen jälkeen näyttää tältä:

Värit ja tyylit ovat tässä perusasettelulla, hienosäädä niitä halutessasi builderin oikeanpuoleisessa paneelissa tai omalla CSS:llä.

Katso video nähdäksesi koko prosessin asennuksesta valmiisiin välilehtiin sivulla:

⁉️🤔 Usein kysytyt kysymykset

Toimiiko välilehdet mobiililaitteilla?

Kyllä. Tabs Responsive -lisäosa on rakennettu Bootstrapin päälle, joten välilehdet mukautuvat mille tahansa näytölle. Kapeilla näytöillä vaakasuuntaiset välilehdet voivat muuttua pystysuuntaiseksi listaksi tai haitariksi valitusta mallipohjasta riippuen. Tarkista asennuksen jälkeen, miltä välilehdet näyttävät puhelimella: jos välilehden teksti on pitkä, pystysuuntainen tyyli voi olla vaakasuuntaista kätevämpi.

Voiko artikkelin runkoon lisätä välilehtiä ilman lisäosaa?

Ilman lisäosaa tai sivunrakentajaa ei, ellet kirjoita omaa JavaScript- ja CSS-koodia. WordPress ei tarjoa valmista ratkaisua sisällön välilehdille suoraan paketista. Tabs Responsive -lisäosa ratkaisee tehtävän ilman koodia: asennus ja käyttöönotto vievät minuutteja, lopputulos tulee shortcodella. Tämä on kompromissi vaihtoehtojen "en halua asentaa lisäosaa" ja "en halua kirjoittaa koodia alusta asti" välillä.

Vaikuttavatko välilehdet hakukoneoptimointiin?

Oikein toteutettuna eivät. Kaikkien välilehtien sisältö latautuu sivun HTML:ään ensimmäisellä renderöinnillä, Google näkee ja indeksoi sen. Tabs Responsive -lisäosa toimittaa kaiken sisällön lähdekoodissa, ei asynkronisesti ladaten, tämä on turvallista hakukoneoptimoinnin kannalta. Ongelmia voi syntyä vain AJAXilla ladattujen välilehtien kanssa (välilehden sisältö latautuu vasta klikattaessa), käytä tällaisia ratkaisuja varoen.

Mitä tehdä, jos välilehdet ovat ristiriidassa teeman kanssa?

Tyyliristiriita on yleisin ongelma. Kokeile ensin lisäosan asetusten mukautettua CSS-kenttää: yleensä pari riviä riittää korjaamaan taustavärin tai täytteen teemaan sopivaksi. Jos se ei auta, vaihda mallipohjan asetuksissa vaakasuuntaisesta pystysuuntaiseen tyyliin, joskus ongelma on vain toisessa tilassa. Viimeisenä keinona on lisäosan tukifoorumi WordPress.orgissa: kehittäjä vastaa ja auttaa ristiriitojen kanssa.

Miten Tabs Responsive eroaa sivunrakentajan välilehdistä?

Lisäosa ei ole sidottu tiettyyn sivunrakentajaan. Jos päätät vaihtaa rakentajaa tai siirtyä natiiviin lohkoeditoriin, shortcodella tehdyt välilehdet toimivat edelleen. Elementorin tai WPBakeryn välilehtien kanssa tällaista joustavuutta ei ole: rakentajaa vaihdettaessa välilehdet katoavat sen mukana. Lisäksi Tabs Responsive tukee pystysuuntaista tyyliä, widgettejä ja kuvakkeita, mitä jokainen rakentaja ei tarjoa ilmaisversiossa.

Mitä valita omaan tehtävääsi

Jos sivunrakentaja on jo asennettu, käytä sen välilehtimoduulia. Se on nopeampaa: yksi raahaus ja pudotus, ja välilehdet ovat sivulla.

Jos rakentajaa ei ole, käytä Tabs Responsive -lisäosaa. Se on ilmainen, päivittyvä eikä sido sinua tiettyyn rakentajaan. Shortcode ja widget toimivat missä tahansa teemassa ja millä tahansa editorilla.

WooCommerce-verkkokaupoissa lisäosa lisää tuotekorttiin erillisen välilehden kuvauksella, tämä ei ole mahdollista Elementorin välilehdillä.

Kokeile Tabs Responsivea testisivustolla: asennus vie minuutin, ja rakennat ensimmäiset välilehtesi viidessä minuutissa. Jos jäät jumiin missä tahansa vaiheessa, katso yllä oleva video tai kirjoita kommentteihin, selvitetään asia.