Ostit premium-teeman, mutta demon liukusäädin ei toiminut? Tai kokosit liukusäätimen ilmaisella lisäosalla ja se pätkii mobiilissa samalla kun tuo puoli megatavua ylimääräistä kuormaa? Me testasimme noin viisi liukusäädintä ennen kuin päädyimme yhteen.

Slider Revolution ThemePunchilta ei ole vain "yksi liukusäädin muiden joukossa". Se on visuaalinen editori minkä tahansa monimutkaisuustason sisällölle: Hero-osiosta kerroksilla rakennettuun yhden sivun sivustoon. Vuonna 2026 lisäosa elää versiossa 7 ja osaa asioita, joita ilmaiset vaihtoehdot eivät ole edes ajatelleet: WebGL-efektejä, 3D-partikkeliryppäitä, nesteen simulointia ja kerrosten tekoälykääntämistä.

Alla on rehellinen arvio ja vaiheittainen opas. Mitä versio 7 osaa, miten se asennetaan (erillisenä ostoksena tai teeman mukana tulleena) ja ennen kaikkea, miten käynnistät ensimmäisen liukusäätimesi tunnissa.

💡 Pikakatsaus:

• Osta Slider Revolution osoitteesta sliderrevolution.com (CodeCanyon ei ole enää vaihtoehto, koska lisäosa poistui markkinapaikalta) tai aktivoi premium-teemasi mukana tullut kopio
• Aktivoi lisenssi WordPressin hallintapaneelissa ja määritä yleiset asetukset: käyttöoikeudet, grid-murtokohdat, laiska lataus
• Tuo valmis malli yli 200 vaihtoehdon kirjastosta tai luo moduuli tyhjästä
• Täytä diat: tausta, kerrokset (teksti, painikkeet, video, muodot, SVG), animaatiot ja siirtymät
• Määritä navigaatio, edistymispalkki, vieritysefektit ja lisää shortcode sivullesi

Mikä Slider Revolution on ja mitä uutta versiossa 7

Premium WordPress -lisäosa ThemePunchilta. Hakemiston mukaan sillä on yli 9 miljoonaa aktiivista asennusta ja yli 200 mallia kirjastossa. Suoraan paketista: liukusäätimiä, karuselleja, Hero-lohkoja, yhden sivun sivustoja ja dynaamisia moduuleita, jotka perustuvat artikkeleihin tai WooCommerce-tuotteisiin.

Lyhyesti: tämä ei ole "kuvaliukusäädin". Se on ympäristö, jossa jokainen dia kootaan kerroksista (teksti, painike, video, SVG-muoto, rivi sarakkeineen) kuten sivunrakentimessa. Kohtaus rakennetaan hiirellä kankaalle, ei sivupalkin liukusäätimillä, ja lopputulos näkyy välittömästi.

Versio 7, joka julkaistiin kolmen vuoden kehitystyön jälkeen, toi täysin uuden visuaalisen editorin ja renderöintimoottorin. Vanhat projektit siirtyvät automaattisesti päivityksen yhteydessä. Huomionarvoisia lisäyksiä: WebGL-moottori edistyneitä siirtymiä varten, Fluid Dynamics (nesteen simulointi, joka reagoi kursoriin), The Cluster (3D-partikkeliryppäät kiertoradoilla ja vetovoimalla), AI Translate (automaattinen kerrosten kääntäminen WPML-tuella) ja yli 30 lisäosaa kaikkiin tarpeisiin.

Asettelut ja responsiivisuus

Lisäosa on jo kauan sitten kasvanut ulos pelkästä "pyyhkäistävästä liukusäätimestä": karusellit, "kohtaukset" (yksittäinen dia rakentimen rivinä) ja koko näytön moduulit ovat käytettävissä. Responsiivisuus menee kuvanpakkausta pidemmälle: Smart Inherit jäsentää kerrokset uudelleen kullekin laitteelle, ja elementit skaalautuvat tai piiloutuvat. Mobiilissa liukusäädin pysyy luettavana sen sijaan, että se muuttuisi pienten painikkeiden muurahaispesäksi.

Sisältölähteet

Yhdeksän vaihtoehtoa sisällölle. Oletuksena omat kuvasi ja videosi. Voit hakea blogiartikkeleita (mitä tahansa sisältötyyppejä, mukaan lukien tietyt ID:t), WooCommerce-tuotteita, sisältöä Flickr:stä, Instagramista, Twitteristä, Facebookista, YouTubesta ja Vimeosta. Viimeinen vaihtoehto on loistava reaaliaikaisiin some-todiste-elementteihin: liukusäädin päivittyy itsestään, kun uusia julkaisuja ilmestyy.

Kerrosten hallinta

Jokainen dia on kerroskakku. Lisäät tekstiä, kuvia, painikkeita (mukaan lukien some-esiasetukset ja hampurilaisvalikot), muotoja (tausta, syke, reunaviiva), ääntä, videota (YouTube, Vimeo, HTML5), ikoneita/SVG:tä ja rivejä sarakkeineen kuin täysiverisessä rakentimessa. Kerrosten ryhmittely helpottaa toisiinsa liittyvien elementtien siirtämistä. Lisenssin haltijoilla on pääsy ThemePunchin valmiiseen kerroskirjastoon, ja he voivat tuoda kerroksia asennuksensa muista liukusäätimistä.

Esiasetukset ja uudelleenkäyttö

Kun olet määrittänyt fontit, kerrosanimaatiot ja siirtymät, tallenna ne esiasetukseksi ja käytä seuraaviin liukusäätimiin yhdellä napsautuksella. Tämä säästää tunteja, kun luot moduuleita yhtenäisellä tyylillä.

Asennus: kaksi polkua

Lisäosa päätyy sivustollesi joko suoralla ostolla osoitteesta sliderrevolution.com tai aktivoimalla premium-teeman mukana tulleen kopion. Käydään läpi molemmat vaihtoehdot.

Suora osto osoitteesta sliderrevolution.com

Lisäosaa myytiin aiemmin CodeCanyonissa, mutta version 7 julkaisun myötä ThemePunch siirtyi kokonaan suoramyyntiin osoitteessa sliderrevolution.com. Oston jälkeen kirjaudu tilillesi sivustolla ja lataa lisäosan zip-arkisto.

Sitten WordPressin hallintapaneelissa: Lisäosat → Lisää uusi.

Napsauta Lisää lisäosa -painiketta vasemmassa yläkulmassa → Valitse tiedosto → valitse ladattu zip → Asenna nyt.

Asennuksen jälkeen napsauta Ota lisäosa käyttöön. Valmista.

Voit käyttää myös FTP:tä: pura lisäosa ja siirrä kansio hakemistoon wp-content/plugins.

Premium-teeman mukana tullut lisäosa

Useimmat premium-teemat sisältävät Slider Revolutionin paketissaan. Tarkka prosessi on kyseisen teeman dokumentaatiossa, mutta yleinen logiikka on sama.

Teeman aktivoinnin jälkeen näkyviin tulee ilmoitus suositelluista lisäosista. Napsauta sitä.

Pääset liitännäisten lisäosat -sivulle; asenna ja ota käyttöön Slider Revolution.

Jotkin teemat (esimerkiksi Total) tarjoavat liitännäisen asennusta demosisällön tuontiprosessin aikana.

Valitse "Import Sliders" -vaihtoehto, kun tuot demosisältöä, ja teema hakee kaikki mukautetut sliderit demoaineistosta.

Ensimmäinen käynnistys: asetukset ja lisenssi

Aktivoinnin jälkeen Slider Revolution -kohta ilmestyy päävalikon hallintaan.

Täältä voit luoda ja muokata moduuleja, tuoda malleja ja aktivoida lisenssiavaimen.

Lisenssin aktivointi

Jos ostit liitännäisen suoraan sliderrevolution.com-sivustolta, aktivoi lisenssi hallinnassa avataksesi kaikki ominaisuudet, premium-mallit ja lisäosat.

Avain löytyy tililtäsi osoitteessa sliderrevolution.com. Kopioi ja liitä se WordPressin hallintaan.

Hallinnassa: siirry Slider Revolution -osioon → kellokuvake → lisenssiavainkenttä.

Tärkeä huomio: jos liitännäinen tuli teeman mukana, aktivointia ei tarvita. Teeman kehittäjä hoitaa päivitykset, ei ThemePunch. Liitännäinen päivittyy teeman mukana, joskus viiveellä mutta taatusti yhteensopivana. Huono puoli: ThemePunchin premium-mallikirjasto ja lisäosat eivät ole käytettävissä.

Yleiset asetukset

Ennen ensimmäistä slideria siirry Global Settings -alavalikkoon.

Kaksi parametria on tärkeitä tässä.

Käyttöoikeus. Rajoita liitännäisen käyttö vain pääkäyttäjille. Hyödyllistä, jos sivustolla on vieraskirjoittajia, jotta he eivät vahingossa riko slidereita.

Ruudukon taitekohdat. Leveys pikseleinä responsiivista asettelua varten eri laitteilla. Oletusarvot ovat hyvät, mutta jos sivustosi ruudukko on epästandardi, säädä niitä.

Loput (mukautetut fontit, laiska lataus, pakotettu tietokannan luonti, jos tauluissa on ongelmia) voidaan muuttaa tarpeen mukaan. Tallenna asetukset.

Valmiin mallin tuominen

Nopein aloitus on napata malli kirjastosta.

Lataa moduulitiedosto sliderrevolution.com-sivustolta. Hallinnassa: Slider Revolution → Import Slider → valitse tiedosto → tuo. Moduuli, jossa on diat, tasot ja asetukset, ilmestyy kirjastoosi; muokkaa sitä tarpeidesi mukaan.

Suoran lisenssin haltijat näkevät kirjaston, jossa on yli 200 valmista mallipohjaa. Vie hiiri asettelun päälle: silmäkuvake esikatselua varten, plus-merkki asennusta varten. Käyttäjät, joilla on niputettu kopio (sisältyy teemaan), eivät näe tätä kirjastoa, mutta teemojen tekijät sisällyttävät usein omia mallipohjiaan demo-tuontityökaluun.

Liukusäätimen luominen tyhjästä

Kolme lähtökohtaa: tyhjä pohja, ilmainen vienti Slider Revolution -sivuston esimerkeistä ja teemaan sisäänrakennetut mallipohjat. Käydään läpi tyhjästä rakentamisen polku, joka pätee myös tuodun mallipohjan muokkaamiseen.

Valitse New Blank Module.

Tervetuloa-ikkuna, jossa on pikaopas, tulee näkyviin; klikkaa "start" ja seuraa vaiheita.

Ensimmäinen vaihe: moduulin tyyppi. Slider on klassinen sarja animoituja dioja. Scene on yksittäinen dia builder-rivinä (Hero-osioita varten). Carousel näyttää useita dioja kerralla.

Toinen vaihe: asettelu. Auto venyttää moduulin teeman sisältökontin levyiseksi (sinä määrität korkeuden). Full Width kattaa koko näytön leveyden reunasta reunaan. Full Screen täyttää koko selaimen laitekoosta riippumatta.

Kolmas vaihe: responsiivisuus. Classic (Linear) Resizing skaalaa suhteellisesti (leveys ja korkeus pienenevät kontin mukana, fontit ja kuvat skaalautuvat synkronoidusti). Smart Inherit luo automaattisesti neljä laitekokoa työpöytäasetusten perusteella, ja jokaista voi muokata erikseen. Custom (Manual) sallii tarkat pikselit jokaiselle resoluutiolle.

Kun olet valinnut perusasetukset, siirryt builderiin, jossa diat kootaan.

Moduulin yleiset asetukset

Määritä neljä asiaa:

• Title ja Alias: liukusäätimen järjestelmänimi (Alias tarvitaan shortcodea varten).
• Layout: työpöytäalueen leveys ja korkeus. Testisivustolla sovitimme sen sisältöalueen leveyteen.
• Default duration: kuinka kauan dia näkyy. 5000 ms (5 sekuntia) aluksi; säädä sitten sisältösi tahtiin sopivaksi.
• Spinner: esilatauskuvake (15 vaihtoehtoa, joista valita).

Navigaatio

Valitse, miten kävijät navigoivat dioja. Tässä esimerkissä otimme Uran-tyylin yksinkertaisilla nuolilla. Saatavilla olevat vaihtoehdot: pallukat (dots, 14 tyyliä), välilehdet (thumbnail ja title, julkaisupohjaisille moduuleille), esikatselukuvakkeet (5 tyyliä), kosketusnavigaatio, näppäimistö, hiiri karuselliefektillä. Mikä tahansa elementti on muokattavissa: sijainti, koko, näkyvyys, tyyli.

Diat ja tausta

Heti moduulin luomisen jälkeen olet diassa #1 ja voit alkaa täyttää sitä.

Tausta: läpinäkyvä, väri (liukuvärillä), kuva, ulkoinen kuva tai video YouTubesta, Vimeosta, HTML5.

Videolle: aseta lähde, ota käyttöön Force Cover Mode (venytä täyttämään liukusäädin) ja Rewind at Start (toista alusta jokaisella näyttökerralla). Älä unohda pikkukuvaa navigaatiota ja hallintaa varten.

Kuville: lataa mediakirjastosta. Cover mode (venytys rajauksella rajoihin sopivaksi) tai Contain (sovitus ilman rajausta). Cover on vakio useimmissa tilanteissa.

Siirtymäanimaation voi valita kymmenistä vaihtoehdoista. Suotimet (22 esiasetusta) ovat enemmän taustakuvallisia dioja varten, makuasia. Näyttöaika ja tauko ovat yksilöllisesti säädettävissä. Julkaisusäännöt ovat käteviä kausiluonteisille ja kampanjadioille: määritä ne etukäteen ja julkaise oikeana päivänä.

Tasot: päämekanismi

+ Add Layer -painike näytön yläreunassa avaa valikon, jossa on yli 8 tasotyyppiä.

Teksti. Otsikot, kuvaukset, linkit. Fontti, koko, väri, tasaus, kaikkea muokataan suoraan työalustalla, ei sivupalkissa.

Kuvat. Logo, parallax-kerrokset syvyysvaikutelmaa varten, ennen/jälkeen-kuvaparit ja lisäkuvat.

Painikkeet. Koko, reunuksen pyöristys, väri, tausta, hover-tila, kaikki on muokattavissa. Esiasetukset some-verkoille, animoidut vierityskuvakkeet, hampurilaisvalikot, Play/Pause-painikkeet.

Muodot. Visuaalisen painotuksen lisääminen: syke painikkeen takana, tekstikohdan korostus, värillinen tausta. Asetukset: tausta, reunaviivan väri ja koko, kulman pyöristys (0 neliölle, 100 ympyrälle), täyte.

Ääni ja video. Lataa mediakirjastosta tai liitä linkki (YouTube, Vimeo, SoundCloud). Vaihtoehdot: toisto silmukassa, automaattinen käynnistys, siirtyminen seuraavaan diaan lopussa, äänenvoimakkuus, segmentti (alku/loppu). Loistava asiakassuosituksille ja intro-videoille.

Kuvakkeet / SVG. Sisäänrakennetut kuvakkeet tai oma SVG, joka skaalautuu moduulin mukana laadun kärsimättä.

Rivit. Kuten sivunrakentajassa: sarakkeita dian sisällä. Ne järjestävät kerrokset ruudukkoon.

Ryhmä. Yhdistää useita kerroksia, jotta ne liikkuvat ja niitä määritetään yhdessä.

Kirjasto ja kerrosten tuonti. Valmiit ThemePunchin resurssit (vain lisenssillä) ja kerrosten kopiointi muista kirjastosi moduuleista.

Muut asetukset: pikaopas

Alla on osioita, jotka eivät mahtuneet vaiheittaiseen esimerkkiin, mutta ovat hyödyllisiä oikeassa työssä.

Yleiset. Automaattinen kierto, pysäytys hiiren viennillä päälle, silmukointi, ensimmäinen dia. Täällä myös piilotat moduulin mobiilissa tai määritetyllä näytön leveydellä.

Vierityksessä. Parallax, 3D-syvyys, aikajana, häivytys, sumennus, harmaasävy. Nopeus ja siirtymä ovat säädettävissä. Vinkki: älä yritä kattaa kaikkea kerralla. Ota valmis malli, jossa on vieritysefektejä, ja tutki miten se on rakennettu; se on nopeampaa kuin dokumentaation lukeminen.

Latausanimaatio. 15 esilatausvaihtoehtoa muokattavilla väreillä.

Lisäasetukset. Laiska lataus, varakuva, yksinkertaistettu moduuli vanhemmille selaimille.

CSS / jQuery. Mukautettua koodia moduulikohtaisesti, mutta parasta jättää rauhaan ilman koodaustaitoa.

Modaali. Liukusäädin ponnahdusikkunana tai lightboxina: sijainti, peitekerroksen väri, shortcode (eri kuin pääshortcode, lisää käyttömääritteen).

Ulkoasuteema. Tyylin esiasetus tekstikerroksille. Määritä kerran brändiisi sopivaksi ja käytä kaikkiin kerroksiin.

Lisäosat. Saatavilla vain suoralla lisenssillä, eivät sisälly teeman mukana tuleviin versioihin.

Navigaatio, yksityiskohtaisesti. Edistyminen (ilmaisin tai ympyrä aikajanalla), nuolet (13 tyyliä), pallopisteet (14 tyyliä), välilehdet (julkaisupohjaisille moduuleille, pikkukuva ja otsikko), esikatselut (5 pikkukuvatyyliä), kosketusnavigaatio, näppäimistö, hiiri (karuselli), navigaatioeditori mukautettua koodia varten.

Dian asetukset. Tausta (läpinäkyvä, väri liukuvärillä, kuva, video), pikkukuva (hallintaan ja navigaatioon), siirtymäanimaatio, suodattimet (22 esiasetusta), edistyminen (kesto, tauko, näkyvyys), julkaisusäännöt, tunnisteet ja linkki (mukautettu luokka/id, linkki koko dialle), parametrit (jopa 10 mukautettua käytettäväksi kerroksissa ja navigaatiossa), kerrosten silmukointi ja vieritysefektit yksittäisen dian tasolla.

Video: käyttöliittymä toiminnassa

Katso, miltä tämä kaikki näyttää oikeassa editorissa Slider Revolutionin virallisen kanavan videolta:

⁉️🤔 Usein kysytyt kysymykset

Miten Slider Revolution eroaa ilmaisista slider-plugineista?

Ilmaiset lisäosat (MetaSlider, Smart Slider 3 Free) tarjoavat perustoiminnot: lataa kuvat, aseta nuolet, valmista. Slider Revolution on visuaalinen ympäristö, jossa on tasot, animaatiot, WebGL-efektit ja dynaamiset sisältölähteet. Ilmaisilla vaihtoehdoilla ei voi rakentaa hero-osioita, tuotekaruselleja eikä parallaksia hyödyntäviä yhden sivun sivustoja. Jos sivustosi tarvitsee vain "kolme kuvaa, antaa mennä" -sliderin, ilmainen riittää. Kaikkeen muuhun, Revolution.

Täytyykö minun aktivoida lisenssi, jos lisäosa tuli teeman mukana?

Ei. Teeman mukana tulevat kopiot toimivat ilman lisenssiavainta; teeman tekijä hoitaa päivitykset ja yhteensopivuuden. Huono puoli: ThemePunchin premium-pohjat ja lisäosat eivät ole käytettävissä, ja päivitykset tulevat viiveellä, kun teeman kehittäjä testaa niitä. Jos tarvitset pääsyn koko kirjastoon ja välittömät päivitykset, on parempi ostaa erillinen lisenssi.

Kuormittaako lisäosa sivustoa paljon?

Oikein määritettynä ei. Ota yleisissä asetuksissa käyttöön lazy loading, älä laita yhteen moduuliin yli 3-4 diaa ilman pakottavaa syytä ja käytä optimoituja kuvia (WebP/AVIF). Testisivustolla, jossa oli kolme diaa ja muutama taso kussakin, se lisäsi 250-400 kt, mikä on normaalin rajoissa mediasisällölle. Suurin nopeuden tappaja on koko ruudun video jokaisella dialla. Jos video on kriittinen, käytä lazy loadingia ja poista automaattinen toisto mobiilissa.

Voinko käyttää sitä usealla sivustolla yhdellä lisenssillä?

Se riippuu paketista. Starter kattaa 1 sivuston (45 €/vuosi). Enthusiast kattaa 3 sivustoa (89 €/vuosi). Scale on suunniteltu toimistoille ja freelancereille, jopa 250 asiakassivustolle hintaan 209 €/vuosi, ajantasainen hinnoittelu Slider Revolutionin verkkosivustolla. Scalessa sivustokohtainen hinta putoaa alle 1 euroon vuodessa, mikä on paras vaihtoehto web-kehittäjille.

Onko sen opettelu vaikeaa tyhjästä?

Perusslideri kuvilla ja kuvateksteillä syntyy 15-20 minuutissa. Tasojen, animaatioiden ja vieritysefektien hallinta vaatii 2-3 illan harjoittelua. Suurin este ei ole monimutkaisuus vaan asetusten määrä: kun avaat editorin ensimmäistä kertaa, silmät harhailevat kaikkialle. Vinkki: aloita tuomalla pohja ja tutkimalla, miten se on rakennettu; se on nopeampaa kuin dokumentaation lukeminen.

Mitä tapahtui kertamaksulisenssille CodeCanyonissa?

ThemePunch poisti lisäosan CodeCanyonista ja hylkäsi "osta kerran, käytä ikuisesti" -mallin. Syy on yksinkertainen: versio 7 kirjoitettiin tyhjästä kolmen vuoden aikana, eivätkä kertamaksut kata sellaista kehitystyötä. Vanhat avaimet toimivat edelleen jo aktivoiduilla sivustoilla, mutta uudet asennukset ja päivittäminen versioon 7 edellyttävät vuositilausta.

Mitä valita vuonna 2026: tuomio

Slider Revolution ei ole lisäosa kaikille. Jos tarvitset yksinkertaisen sliderin, jossa on kolme kuvaa, nappaa ilmainen MetaSlider äläkä maksa liikaa. Revolution pääsee oikeuksiinsa, kun sivusto tarvitsee parallaksilla varustetun hero-osion, tuotekarusellin tai tasoille ja WebGL-efekteille rakennetun yhden ruudun laskeutumissivun.

Käytäntö osoittaa: ne, jotka asentavat Revolutionin "varmuuden vuoksi", käyttävät pientä osaa sen ominaisuuksista ja tuhlaavat rahaa tilaukseen. Ne, jotka oikeasti työskentelevät tasojen ja dynaamisen sisällön kanssa, eivät palaa muihin slidereihin. Lisäosa ei ole halpa (vuositilaus alkaen 45 €), mutta kaupallisissa projekteissa ja asiakassivustoilla se maksaa itsensä takaisin jo ensimmäisellä sliderilla, jota kehtaa näyttää.

Kokeile demoa Slider Revolutionin verkkosivustolla, niin tiedät heti, onko tämä työkalu sinua varten.