Kävijän ei pitäisi joutua arvailemaan, mihin osoitinta pitää viedä löytääkseen oikean osion. Jos sivustolla on yli kuusi keskeistä sivua, tavallisesta pudotusvalikosta tulee näppäryystesti: yksi väärä liike, ja käyttäjä palaa alkuun. Megavalikko ratkaisee tämän ongelman radikaalisti.

Megavalikko on leveä, avautuva valikko, jossa kaikki kategoriat ovat kerralla näkyvissä ilman porrastettuja alavalikoita ja linkkien metsästystä. Suuret markkinapaikat, uutisportaalit ja sisältöhankkeet käyttävät tätä lähestymistapaa ei ulkonäön vuoksi, vaan koska se toimii: kävijä pääsee tarvitsemalleen kolmannen tason osiolle yhdellä klikkauksella.

Ongelmana on, ettei WordPress tue megavalikoita suoraan. Vaikka teema tarjoaisi sisäänrakennetun vaihtoehdon, se on lähes aina rajoitettu muutamaan sarakkeeseen ilman kunnollista muokkausmahdollisuutta. Täysiveriseen megavalikkoon, jossa on visuaalinen editori, responsiivinen versio ja tarkat asetukset, tarvitset oikean työkalun, ja tässä kohtaa Elementor ja The Plus Addons astuvat kuvaan.

💡 Pikaopas:

• Ota TP Navigation Menu -widget käyttöön The Plus Addonsissa ja luo megavalikkopohja Elementorin visuaalisella editorilla.
• Määritä tavallinen WordPress-valikko (Ulkoasu, Valikot) ja lisää luotu pohja valikkokohtana, joka avaa megavalikon.
• Luo ylätunnistepohja Elementorin Theme Builderilla ja sijoita siihen The Plus Addonsin Navigation Menu -widget.
• Määritä responsiivinen toiminta: erillinen valikko tai pohja mobiilikävijöille, taitekohta, ulkoasu.

Milloin sivustosi tarvitsee megavalikon

Megavalikko ei ole yleisratkaisu jokaiseen projektiin. Mutta jos sivustolla on yli kuusi osiota, joissa on alakategorioita, tavallinen navigaatio lakkaa toimimasta. Nielsen Norman Groupin käyttäjäkokemuksen tutkijat ilmaisevat asian täsmällisesti: "Megavalikot toimivat hyvin sivustonavigaatiossa... Tämä on erinomainen suunnitteluvalinta, kun pitää mahduttaa suuri määrä vaihtoehtoja tai näyttää alemman tason sivut yhdellä silmäyksellä."

Verkkokaupoissa megavalikko on käytännössä standardi. Tuotekategoriat, alakategoriat, suodattimet, kaikki tämä pitää näyttää kävijälle heti, ei piilottaa hiirellä osoittamisten taakse:

Tämä on valtava askel eteenpäin verrattuna "vanhaan" tapaan, yhdistelmävalikoihin, joissa on porrastetut alavalikot ja joissa kävijältä vaadittiin tarkka-ampujan liiketarkkuutta ja yksi virhe palautti hänet alkuun:

Näin suuret verkkokaupat käyttävät megavalikoita:

Etsyssä on samankaltainen lähestymistapa: käsintehdyt, vintage- ja tarvikekategoriat on avattu yhteen paneeliin, ja ostaja näkee koko valikoiman kerralla:

Megavalikot eivät kuitenkaan ole vain verkkokauppaa varten. Uutissivustot, aikakauslehdet, sisällönjulkaisijat, yritysportaalit, missä tahansa pitää tehdä suuri määrä keski- ja alatason tietoa saavutettavaksi, tämä tekniikka toimii:

Yelp ryhmittelee ravintolat, kotipalvelut ja autopalvelut intuitiivisiksi lohkoiksi, mikä säästää kävijöiden aikaa etsimisessä:

Sivustonrakentaja Tilda käyttää mega-valikkoa esitelläkseen mallipohjatyyppejä ja portfolionäytteitä, mikä auttaa uusia käyttäjiä orientoitumaan:

Matkailusivusto Duvine esittää matkakohteet selkeässä ruudukossa, jolloin luetteloa ei tarvitse selata:

Quasar-toimisto sijoittaa portfolion, palvelut ja yhteystiedot mega-valikkoon ja muuttaa navigoinnin osaamisen näyteikkunaksi:

Mitä tarvitset mega-valikon luomiseen

Elementor tarjoaa visuaalisen editorin, jossa on raahaa ja pudota -toiminto ja kaikki suunnitteluominaisuudet mega-valikon rakentamiseen. Itse toiminnallisuuden lisäämiseen, hover-laajennus, asemointi, responsiivinen vaihto, tarvitset kuitenkin kolmannen osapuolen lisäosan.

Tarkemmin sanottuna The Plus Addons for Elementor. Tämä on tehokas laajennus, jossa on yli 120 widgetiä, ja niiden joukossa TP Navigation Menu -widget, joka kattaa kaikki skenaariot: vaakasuuntaiset, pystysuuntaiset ja sivupalkin mega-valikot, togglet ja responsiiviset asetukset.

Mitä The Plus Addons tarjoaa:

• Täysi Elementor-integraatio. Widget on kirjoitettu nimenomaan Elementorille ja on yhteensopiva kaikkien muiden widgetien ja rakentajan ominaisuuksien kanssa, uutta käyttöliittymää ei tarvitse opetella.
• Pikselintarkka responsiivisuus. Voit asettaa eri valikot tai jopa eri mega-valikkopohjat työpöytä- ja mobiililaitteille.
• Selaintuki. Kaikki kävijät saavat yhtä laadukkaan kokemuksen selaimesta riippumatta.
• Joustava muokkaus. Koon, tasauksen, nimiketekstien värien ja kuvakkeiden asetukset, kaikki tutun Elementor-paneelin kautta.

Täydellistä ylätunnisteen toiminnallisuutta varten tarvitset myös Elementor Pron, sen Theme Builderilla voit luoda mukautetun ylätunnistepohjan ja sijoittaa Navigation Menu -widgetin siihen.

Miten luot mega-menun Elementorilla: vaiheittainen opas

Koko prosessi mahtuu viiteen vaiheeseen. Varmista, että kolme lisäosaa on asennettu ja aktivoitu:

• Elementor (ilmainen)
• Elementor Pro -versio, Theme Builderiä ja mukautettuja ylätunnisteita varten
• The Plus Addons for Elementor, ilmainen versio on saatavilla WordPress.orgista, mutta Navigation Menu -widgettiin tarvitset Pro-lisenssin viralliselta sivustolta

Vaihe 1. Aktivoi TP Navigation Menu -widget

Mene WordPressin hallintapaneelissa kohtaan ThePlus Settings → Plus Widgets ja ota käyttöön TP Navigation Menu -widget:

Aktivoinnin jälkeen hallintapaneelin sivupalkkiin ilmestyy uusi custom post type Plus Mega Menu, joka on kaikkien mega-menu-mallipohjiesi säilytyspaikka.

Vaihe 2. Luo mega-menu-mallipohja Elementorissa

Mene kohtaan Plus Mega Menu → Add New. Anna mallipohjalle kuvaava nimi, tästä on hyötyä, kun käytät eri mega-menuvalikoita eri puolilla sivustoa. Klikkaa Edit with Elementor:

Olet nyt Elementorin visuaalisessa editorissa. Rakenna mega-menun asettelu kuten tavallinen sivu: ylätason osio, joka kattaa mega-menun koko leveyden, sen sisällä sarakkeita kullekin semanttiselle lohkolle ja sarakkeissa mitä tahansa Elementor-widgettejä: otsikoita, listoja, kuvia, painikkeita. Elementor Navigator (rakennepaneeli vasemmassa alakulmassa) auttaa hahmottamaan osioiden ja sarakkeiden hierarkian.

Kun design on valmis, tallenna ja julkaise mallipohja.

Vaihe 3. Määritä WordPressin navigointivalikko

Nyt sinun täytyy linkittää luotu mallipohja varsinaiseen sivuston valikkoon. Mene kohtaan Appearance → Menus. Jos valikkoa ei vielä ole, luo sellainen.

Lisää ensin tavalliset ylätason kohdat keskeisille osioille Custom Links -toiminnon kautta, nämä ovat kohtia, jotka eivät avaa mega-menuvalikkoa, vaan johtavat suoraan sivuille.

Laajenna sitten Plus Mega Menu -osio elementtien lisäyssivupalkissa ja valitse edellisessä vaiheessa luotu mallipohja, se lisätään valikkokohtana, jonka päälle vietäessä mega-menu avautuu.

Jos Plus Mega Menu -osio ei näy, WordPress piilottaa sen. Klikkaa oikeassa yläkulmassa Screen Options ja valitse Plus Mega Menu -valintaruutu:

Määritä lisätylle kohteelle koko ja tasaus. Kolme kokovaihtoehtoa on käytettävissä:

• Default, maksimileveys pikseleinä.
• Container, sivuston säiliön leveyden mukaan.
• Full Width, mega-menu venyy koko näytön levyiseksi.

Täällä määrität myös elementin nimikkeen, nimikkeen värit ja kuvakkeet:

Vaihe 4. Luo ylätunnisteen mallipohja Theme Builderissa

Nyt mega-menu täytyy sijoittaa sivuston ylätunnisteeseen. Tähän käytetään Theme Builderiä, joka on osa Elementor Prota.

Mene kohtaan Templates → Theme Builder ja luo uusi ylätunnisteen mallipohja (tai muokkaa olemassa olevaa). Voit valita valmiin ylätunnistepohjan tai rakentaa omasi alusta alkaen. Määritä Elementor Pron näyttöehtojen kautta, missä tätä ylätunnistetta näytetään, koko sivustolla vai vain tietyillä sivuilla.

Lisää ylätunnisteen editorissa TP Navigation Menu -widget The Plus Addonsista:

Valitse widgetin asetuksista valikon suunta, vaakasuuntainen, pystysuuntainen tai pystysuuntainen sivupalkki:

Valitse sitten Select Menu -kohdasta se valikko, jonka määritit vaiheessa 3:

Lisää tyyliparametreja on Style-välilehdellä: värit, fontit, välit ja hover-efektit.

Vaihe 5. Responsiivisen toiminnan määrittäminen

Viimeinen vaihe eli mobiiliversio. Avaa Navigation Menu -widgetin Content-välilehdeltä Mobile Menu -asetukset. Ota käyttöön Responsive Mobile Menu ja aseta breakpoint eli näytön leveys, jolla mobiiliasettelu aktivoituu:

Valitse Menu Content -pudotusvalikosta, mitä mobiilikävijöille näytetään: sama valikko kuin työpöydällä, erillinen valikko ilman mega menua (luodaan kohdassa Appearance → Menus) tai kokonaan erillinen Elementorilla rakennettu pohja.

Valmista. Loit juuri responsiivisen mega menun WordPressiin Elementorilla ja The Plus Addonsilla.

Video: asennus käytännössä

Teoria on hyvästä, mutta live-demo säästää puoli tuntia yrityksen ja erehdyksen aikaa. Tällä videolla näytetään The Plus Addons for Elementorin Navigation Menu -widgetin koko asennusprosessi aktivoinnista toimivaan mega menuun sivustolla:

⁉️🤔 Usein kysytyt kysymykset

Tarvitaanko mega menun luomiseen Elementor Prota?

Kyllä, Elementor Pro on välttämätön. Elementorin ilmaisversio ei sisällä Theme Builderia, työkalua mukautettujen header-pohjien luomiseen, ja ilman sitä mega menu -widgetiä ei voi sijoittaa sivuston headeriin. Tavalliset WordPress-teemat eivät tarjoa aluetta Elementor-widgetin lisäämiseksi navigaatioon. Elementor Pro -lisenssin hinta alkaa 59 dollarista vuodessa yhdelle sivustolle.

Onko The Plus Addons ilmainen vai maksullinen?

The Plus Addonsista on ilmainen versio WordPress.orgissa, jossa on peruswidgetit. Mega menuista vastaava TP Navigation Menu -widget on kuitenkin saatavilla vain Pro-versiossa. Pro-lisenssi ostetaan viralliselta theplusaddons.com-sivustolta, ja se sisältää yli 120 widgetiä, yli 1000 pohjaa ja prioriteettituen. Vaihtoehtoinen reitti on Elementor Pron sisäänrakennettu mega menu (tuli versiossa 3.12+), mutta se on joustavuudeltaan heikompi: ei sivupalkkia eikä pystysuoraa mega menua, vähemmän responsiivisuusasetuksia.

Voiko yhdelle sivustolle luoda useita erilaisia mega menuja?

Kyllä. The Plus Addonsilla voit luoda rajattomasti mega menu -pohjia kohdan Plus Mega Menu → Add New kautta. Jokainen pohja rakennetaan Elementorissa itsenäisesti. WordPressin valikoissa (Appearance → Menus) lisäät tarvittavat pohjat erillisinä kohteina, esimerkiksi "Tuotteet"-kohtaan "Katalogi"-mega menun ja "Palvelut"-kohtaan "Palvelut"-mega menun. Elementor Pron näyttöehtojen avulla voit näyttää eri headerit sivuston eri sivuilla: yhden headerin kaupalle, toisen blogille.

Mitä tehdä, jos mega menu ei näy mobiilissa?

Tarkista Navigation Menu -widgetistä kolme asetusta. Ensinnäkin, onko Responsive Mobile Menu -vaihtoehto käytössä (Content-välilehti → Mobile Menu). Toiseksi, onko breakpoint asetettu oikein (leveys pikseleinä, jolla mobiiliasettelu aktivoituu). Kolmanneksi, onko Menu Content -kohdassa valittu tietty lähde: jos siinä lukee "Same as desktop", mutta työpöytävalikko on liian leveä mobiilinäytölle, se ei mahdu. Ratkaisu: luo erillinen yksinkertaistettu valikko mobiilille kohdassa Appearance → Menus ja valitse se Menu Content -pudotusvalikosta.

Onko The Plus Addons ristiriidassa muiden Elementor-lisäosien kanssa?

Erittäin harvoin. The Plus Addons on kirjoitettu nimenomaan Elementoria varten, ja sen yhteensopivuus testataan jokaisen suuren päivityksen yhteydessä. Toukokuussa 2026 lisäosa sai WordPress 7.0 -yhteensopivuuden kaksi päivää julkaisun jälkeen, mikä kertoo tuen tasosta. Jos ristiriita kuitenkin ilmenee, aloita poistamalla muut Elementor-lisäosat käytöstä yksi kerrallaan syyllisen löytämiseksi. Useimmiten ongelmia eivät aiheuta pääasialliset lisäosat vaan tuntemattomat laajennukset, joiden CSS:ää ei ole testattu.

Luo mega menu, joka toimii juuri sinulle

Mega menu ei ole koriste vaan navigaatiotyökalu, joka muuttaa kolmenkymmenen sivun kaaoksen ymmärrettäväksi rakenteeksi. Kävijä näkee kaiken kerralla, pääsee haluamaansa osioon yhdellä klikkauksella eikä poistu sivustolta turhautuneena.

Elementorilla ja The Plus Addonsilla saat visuaalisen hallinnan mega menun jokaiseen pikseliin ilman yhtäkään koodiriviä. Yllä kuvatut viisi vaihetta, aktivointi, pohja, valikko, header, responsiivisuus, kattavat koko syklin ideasta toimivaan ratkaisuun tunnissa tai puolessatoista.

Valitse työkalu tehtävän mukaan. Jos sivusto on yksinkertainen ja budjetti rajallinen, Elementor Pron sisäänrakennettu mega menu riittää. Jos projekti on monimutkainen, jossa on useita mega menutyyppejä ja erilainen mobiili- ja työpöytänavigaatio, asenna The Plus Addons äläkä katso taaksepäin.