🥇 4 Parasta parallax-lisäosaa WordPressille 2026 (ilmainen ja Pro)

Staattinen sivusto näyttää lattealta. Kuvat ja taustat ovat liikkumattomia, vieritys on mekaanista, syvyyden tuntua ei ole. Sinä kuitenkin haluat kerrosten liikkuvan suhteessa toisiinsa, mikä luo volyymia ja kiinnittää katseen. Parallaksi tekee juuri tämän: tausta liikkuu hitaammin kuin etuala, mikä luo illuusion kolmiulotteisesta tilasta selainikkunassa.

Parallaksin toteuttaminen WordPressissä manuaalisesti ei ole helppoa. CSS-tekniikka background-attachment: fixed hajoaa iOS:ssä, JS-kirjastot kuten Jarallax tai Rellax vaativat räätälöintiä teemaasi varten, virheet z-index- tai overflow-määrityksissä tuhoavat asettelun. Parallaksi-lisäosat ratkaisevat tämän tuskan: visuaaliset asetukset nopeudelle ja suunnalle, videotaustan tuki, mobiililaitteisiin mukautuminen.

Valitsimme neljä lisäosaa eri skenaarioihin: kevyestä parallaksista yksittäiselle kuvalle aina taustanrakentajaan, jossa on YouTube-video ja hiiriparallaksi. Kaikki neljä ovat yhteensopivia WordPressin nykyisten versioiden ja Gutenbergin kanssa.

💡 Pikakatsaus:

• Määritä käyttötapauksesi: koko leveyden hero-osio videotaustalla, yksittäinen kuva artikkelin rungossa vai liukusäädin syvyysvaikutelmalla.
• Valitse lisäosa editoriisi: Gutenbergille maksimaalisilla ominaisuuksilla ota Advanced WordPress Backgrounds, Elementor-sivustoille Element Pack Lite on optimaalinen, klassiselle editorille [dd-parallax]-shortcode Parallax Image -lisäosasta toimii.
• Tarkista yhteensopivuus teemasi ja sivunrakentajasi kanssa ennen asennusta, jotta parallaksiefektit toimivat oikein nykyisen asettelun kanssa.

Lisäosien vertailutaulukko

1. Advanced WordPress Backgrounds: maksimaaliset efektit ja videotausta

Advanced WordPress Backgrounds (AWB) on tämän valikoiman monipuolisin parallaksi-lisäosa. Se lisää Background (AWB) -lohkon Gutenbergiin, jonka sisään sijoitat mitä tahansa sisältöä, ja lohkon asetuksissa määrität taustan: värin, kuvan, artikkelin esittelykuvan, kuvion, itse isännöidyn videon tai YouTube/Vimeo-videon. Jokaiselle taustatyypille parallaksi otetaan käyttöön suorituskykyiseen JS-kirjasto Jarallaxiin perustuen.

Tässä on kuusi parallaksiefektiä: klassinen vieritys, skaalaus (skaalautuminen vierityksen aikana), läpinäkyvyys (läpinäkyvyyden muutos), vieritys+skaalaus, vieritys+ läpinäkyvyys ja hiiriparallaksi, jolloin tausta siirtyy kursorin mukana. Efektin nopeutta säädetään liukusäätimellä. Erillinen asetus ottaa parallaksin käyttöön tai pois käytöstä mobiilissa, mikä on tärkeää, koska background-attachment: fixed iOS:ssä toimii epävakaasti.

Lisäosa tukee srcset-määritystä responsiivisille kuville. Läpinäkyvyydellä ja värillä varustettu peittokuva tummentaa taustaa luettavaa tekstiä varten. Mukautettu CSS-padding antaa tarkan hallinnan lohkon sijoittelusta.

Käytännössä AWB kattaa tehtävät laskeutumissivuille, joissa on videotaustoja, hero-osioille YouTube-videoilla ja lohkoille, joissa on hiiriparallaksi. Yksittäiselle kuvalle artikkelin rungossa se voi olla liioittelua.

• Plussat: 6 tyyppiä parallaksiefektejä mukaan lukien hiiriparallaksi, videotausta (YouTube, Vimeo, itse isännöity) aloitus-/lopetusajan asetuksilla, Gutenberg-lohko suoraan paketista + WPBakery Page Builder, säännölliset päivitykset (v1.12.11, kesäkuu 2026), yhteensopivuus WordPress 7.0:n kanssa
• Miinukset: videotausta mobiilissa ei poistu automaattisesti (vain manuaalinen asetus), liioittelua yhdelle yksinkertaiselle kuvalle
• Hinta: Ilmainen, ei Pro-versiota

🔗 Advanced WordPress Backgrounds WordPress.orgissa

2. Parallax Image: yksi shortcode yhdelle kuvalle

Jos AWB on Sveitsin armeijan linkkuveitsi, niin Parallax Image on skalpelli. Lisäosa tekee täsmälleen yhden asian: lisää koko leveyden kuvan parallaksiefektillä [dd-parallax]-shortcoden avulla. Konepellin alla on pixelcogin parallax.js, kevyt skripti ilman jQuery-riippuvuuksia.

Shortcode tukee kuutta parametria: img (tiedostonimi mediakirjastosta tai URL), height (ikkunan korkeus pikseleinä), speed (nopeus 0-10, jossa 0 = staattinen, 10 = suurin siirtymä), z-index, mobile (erillinen kuva mobiilille), offset (venytys koko leveyteen). Avaavan ja sulkevan tagin välinen teksti näytetään parallaksitaustan päällä, mikä on kätevää hero-osioille, joissa on otsikko ja painike.

Lisäosa testattiin klassisten WordPress-teemojen (Twenty Fourteen, Twenty Seventeen) ja Bootstrap-teemojen kanssa. Se toimii nykyaikaisten lohkoteemojen kanssa, mutta TinyMCE-painike on saatavilla vain klassisessa editorissa. Kehittäjä ei koskaan julkaissut Gutenberg-widgetiä.

Viimeisin päivitys oli marraskuussa 2024 (v1.9.1, CVE-korjauksia). Lisäosaa ei ole muodollisesti testattu kolmen viimeisimmän suuren WordPress-version kanssa, mutta käytännössä yksinkertainen shortcode parallax.js:n kanssa toimii edelleen vakaasti.

Käytännössä Parallax Image sopii klassisiin teemoihin ilman lohkoeditoria, kun sinun täytyy nopeasti lisätä yksi parallaksikuva shortcodella.

• Plussat: erittäin yksinkertainen (yksi shortcode, yksi parallaksi), kevyt parallax.js-skripti ilman jQuery-riippuvuuksia, erillinen kuva mobiilille mobile-parametrin kautta
• Miinukset: vain klassinen editori (ei Gutenberg-lohkoa), ei toiminnallisia päivityksiä vuoden 2024 jälkeen, vain kuvat (ei videotaustaa)
• Hinta: Ilmainen

🔗 Parallax Image WordPress.orgissa

3. Element Pack Lite: parallaksi-widgetit Elementorille

Element Pack Lite ei ole pelkkä parallaksi-lisäosa, vaan täysi sarja, jossa on yli 300 widgetiä ja laajennusta Elementorille. Niiden joukossa on kaksi erikoistunutta parallaksi-työkalua: Parallax Section (parallaksiefekti koko osiolle) ja Parallax Background (parallaksitausta yksittäisille lohkoille ja sarakkeille). Lisäksi Floating Effects ja animaatiopaneeli elementtien liikkeen hienosäätöön.

Widgetit on integroitu Elementorin käyttöliittymään: vedä haluttu widget piirtoalustalle, määritä nopeus, suunta ja liipaisin (vieritys tai kursori). Parallaksi-osiolle asetat taustakuvan ja käyttäytymisen: vieritys, skaalaus, läpinäkyvyys. Ota erikseen käyttöön tai pois käytöstä mobiilissa.

Ilmainen versio sisältää yli 30 widgetiä, mukaan lukien parallaksi-elementit. Sivustoille, jotka jo käyttävät Elementoria, Element Pack Lite on luonnollinen valinta: ei vaadi erillistä lisäosaa parallaksille, parallaksi-widgetit toimivat samassa käyttöliittymässä satojen muiden työkalujen kanssa.

Käytännössä lisäosa on optimaalinen Elementor-sivustoille, joissa parallaksi on yksi monista tehtävistä, ei ainoa. Jos rakennat Elementorilla, Element Pack Lite on jo must have -listalla.

• Plussat: kaksi parallaksi-widgetiä + Floating Effects + animaatiot yhdessä lisäosassa, yli 100 000 aktiivista asennusta, aktiivinen tuki, yhteensopivuus WordPress 7.0:n kanssa, viimeisin päivitys heinäkuu 2026 (v8.7.6)
• Miinukset: toimii vain Elementorin kanssa (ei Gutenbergille eikä Classic Editorille), yli 300 widgetiä voi tuntua liioittelulta, jos tarvitset vain parallaksia
• Hinta: Ilmainen

🔗 Element Pack Lite WordPress.orgissa

4. Parallax Slider Block: liukusäädin syvyysvaikutelmalla

Parallax Slider Block ratkaisee kapean mutta kysytyn tehtävän: kuvaliukusäädin parallaksiefektillä vierityksessä. Tämä on natiivi Gutenberg-lohko. Asenna lisäosa, lisää Slider Block -lohko editorissa, lataa kuvat.

Lohkon asetuksissa määrität: parallaksiefektin nopeuden, liukusäätimen korkeuden (pikseleinä tai vh), diojen välisen tilan, siirtymäanimaation, responsiiviset säädöt mobiilille. Lisättyjä mukautusvaihtoehtoja: varjo, kulmien pyöristys, reunus, mukautettu CSS. Dian otsikon typografiaa säädetään reaaliajassa.

Lisäosan loi WPDeveloper -tiimi, samat kehittäjät, jotka tekevät Essential Addonsia Elementorille (yli 2 miljoonaa asennusta) ja NotificationX:ää. Koodi on kevyt, resursseja ladataan vain sivuilla, joilla lohkoa käytetään.

Viimeisin päivitys oli heinäkuussa 2024 (v1.2.7), muodollisesti lisäosaa ei ole testattu kolmen viimeisimmän WordPress-version kanssa. Käytännössä se toimii vakaasti WordPress 6.6:n kanssa.

Käytännössä Parallax Slider Block sopii laskeutumissivuille ja portfolioihin, joissa tarvitset liukusäätimen syvyysvaikutelmalla, et staattista parallaksitaustaa.

• Plussat: natiivi Gutenberg-lohko (asenna ja käytä), kevyt (ei jQuerya, resursseja ladataan vain siellä missä käytetään), WPDeveloper-tiimi, jolla on hyvä maine
• Miinukset: vain liukusäädin (ei staattista parallaksitaustaa), viimeisin päivitys heinäkuu 2024 (ei tuoreita ominaisuuksia), yli 1 000 asennusta (pienempi yleisö kuin muilla valikoiman lisäosilla)
• Hinta: Ilmainen

🔗 Parallax Slider Block WordPress.orgissa

Video: parallaksiefekti toiminnassa

Parempi nähdä kerran kuin lukea asetuksia. WP Royal Themes -tiimin video näyttää vaihe vaiheelta parallaksin vieritysefektin asennuksen WordPressissä: lisäosan asennuksesta lopputulokseen live-sivustolla.

⁉️🤔 Usein kysytyt kysymykset

Hidastaako parallaksi sivustoa?

Nykyaikaiset parallaksi-lisäosat käyttävät requestAnimationFrame- ja IntersectionObserver-tekniikoita: efekti aktivoituu vain, kun lohko on näkymässä. AWB Jarallaxilla ja Parallax Image parallax.js:llä lataavat alle 5 kt gzipattuna. Hidastumisia ilmenee, jos laitat koko näytön videotaustan halvalle hostingille ilman välimuistia. Tässä ongelma ei ole parallaksissa, vaan videossa.

Toimiiko parallaksi iPhonella?

iOS Safari jättää historiallisesti huomiotta background-attachment: fixed -määrityksen renderöinnin erityispiirteiden vuoksi. Juuri siksi kaikki valikoiman lisäosat joko korvaavat fixedin transformaatioilla (AWB, Parallax Slider Block) tai tarjoavat erillisen staattisen kuvan mobiilille (Parallax Image mobile-parametrin kautta). Tarkista sivusto ehdottomasti oikealla iPhonella ennen julkaisua.

Voiko parallaksin tehdä ilman lisäosaa?

Voi. Minimaalinen variantti: lohko, jossa on background-image ja background-attachment: fixed Custom CSS:ssä. Mutta mobiilissa tämä hajoaa. Luotettavampi polku: yhdistä Jarallax- tai rellax.js-kirjasto manuaalisesti ja kirjoita kääre teemallesi. Kehittäjälle tämä on ok, sisällönhallitsijalle lisäosa säästää tunteja debuggausta.

Mikä lisäosa valita Gutenbergille ja mikä Elementorille?

Gutenbergille: AWB (maksimaaliset ominaisuudet) tai Parallax Slider Block (vain liukusäädin). Elementorille: Element Pack Lite, koska parallaksi-widgetit on rakennettu sivunrakentajan käyttöliittymään eivätkä vaadi hyppimistä lisäosien välillä. Parallax Image shortcodella toimii missä tahansa editorissa: universaali varavaihtoehto.

Mitä tehdä, jos parallaksitausta ei näy?

Kolme yleistä syytä: 1) z-index-ristiriita muiden elementtien kanssa (nosta arvoa lisäosan asetuksissa), 2) teeman kontaineri leikkaa overflow'n (tarkista overflow: hidden ylätason lohkoista inspectorissa), 3) kuva ei lataudu (tarkista URL selaimen konsolissa). AWB:ssä ongelma ratkeaa usein ottamalla Stretch-vaihtoehto käyttöön.

Mitä valita tehtävääsi

Valinta riippuu skenaariosta ja työkaluista.

• Jos teet laskeutumissivua tai hero-osiota videotaustalla, ota Advanced WordPress Backgrounds. Tämä on ainoa lisäosa valikoimassa, joka osaa YouTube/Vimeo-taustan parallaksilla ja jopa videon aloitus- ja lopetusaika-asetuksilla.

• Jos työskentelet Elementorissa, Element Pack Lite on jo must have -listallasi. Parallaksi-widgetit tulevat niputettuna satojen muiden hyödyllisten työkalujen kanssa.

• Jos tarvitset vain liukusäätimen syvyysvaikutelmalla, Parallax Slider Block kattaa tehtävän kuormittamatta sivustoa ylimääräisillä kirjastoilla.

• Jos sinulla on klassinen teema ilman lohkoeditoria ja sinun täytyy nopeasti lisätä yksi parallaksikuva, [dd-parallax]-shortcode Parallax Image -lisäosasta hoitaa sen viidessä minuutissa.

Parallaksin pääsääntö WordPressissä: kohtuus. Yksi, enintään kaksi parallaksilohkoa sivua kohden. Efektin tulee korostaa sisältöä, ei viedä huomiota siltä. Oikein määritetty parallaksi tuo sivustolle syvyyttä ja premium-tuntumaa. Kolme parallaksiosiota peräkkäin muuttaa laskeutumissivun huvipuistolaitteeksi, josta haluaa poistua.