Tarvitset painikkeen missä tahansa sivustollasi avataksesi Elementor-ponnahdusikkunan, mutta tavallinen "klikkauksesta"-laukaisin toimii vain yhdellä sivulla? Tämä tehtävä ratkeaa viidessä minuutissa ilman kolmannen osapuolen lisäosia ja ilman koodimuutoksia.

Sisäänrakennettu Elementor Pro -mekanismi, ankkurilinkki yhdistettynä Open By Selector -CSS-valitsimeen. Kun määrität sen, saat ponnahdusikkunan, joka avautuu miltä tahansa sivustosi sivulta: valikkokohdasta, tekstilinkistä tai alatunnisteen painikkeesta. Alla on vaiheittainen opas ponnahdusikkunan luomisesta sen testaamiseen live-sivustolla. Jokainen vaihe on havainnollistettu kuvakaappauksella todellisesta asetuksesta.

💡 Pikaopas:

• Luo ponnahdusikkuna kohdassa Elementor Templates → Popups ja julkaise se
• Valitse näyttöehdoissa "Entire Site", tämä on menetelmän avainkohta
• Ota ponnahdusikkunan yleisissä asetuksissa käyttöön "Disable Page Scroll" ja "Prevent Multiple Popups"
• Syötä Advanced-välilehdellä Open By Selector -kenttään valitsin a[href="#your-anchor"]
• Sijoita linkkejä ankkurilla #your-anchor ympäri sivustoasi, ponnahdusikkuna avautuu mistä tahansa

Vaihe 1: Luo ponnahdusikkuna Elementorissa

Avaa Templates → Popups WordPress-sivupalkin valikossa ja klikkaa "Add New". Valitse valmis malli Elementor-kirjastosta tai aloita tyhjällä pohjalla. Nimeä ponnahdusikkuna kuvaavasti, esimerkiksi "Yhteydenottoponnahdus" tai "Pyyntölomake", jotta löydät sen helposti listasta myöhemmin. Ulkoasu voi olla mikä tahansa: yhteydenottolomake, uutiskirjeen tilaus, palautelomake tai kampanjabanneri.

Kokoa sisältö Elementor-rakentimessa kuten tavallinen sivu: lisää otsikko, lomake, tekstiä ja sulkupainike. Kun olet valmis, klikkaa Publish.

Julkaisun jälkeen Elementor avaa ehdot, laukaisimet ja lisäsäännöt -näytön. Täällä teemme ainoan kriittisen asetuksen.

Vaihe 2: Ehto, "Entire Site"

Ehtonäytössä etsi pudotusvalikko ja valitse Entire Site. Tämä on ainoa ehto, joka sinun tarvitsee asettaa.

Huomio: vaikka suunnittelisit näyttäväsi ponnahdusikkunan vain tietyillä sivuilla, "Entire Site" -valinta on yksinkertaisin reitti. Näyttöä itsessään ei ohjaa sivuehto, vaan ankkurilinkin #contact läsnäolo URL-osoitteessa. Ei ankkuria osoiterivillä, ei ponnahdusikkunaa.

Laukaisimet-näytön ja lisäsäännöt voi ohittaa: klikkaa Next, sitten Save & Close. Ankkurilinkkimenetelmä toimii näistä asetuksista riippumatta.

Vaihe 3: Ponnahdusikkunan yleiset asetukset

Klikkaa rataskuvaketta ponnahdusikkunan muokkausnäytön vasemmassa alakulmassa, Popup Settings -paneeli avautuu. Siirry Advanced-välilehdelle.

Täällä määrität toiminnan tehtävääsi varten. Suosittelemme ottamaan käyttöön:

• Disable Page Scroll, jotta taustasivu ei vieritä, kun ponnahdusikkuna on auki;
• Prevent Multiple Popups, jotta useat ponnahdusikkunat eivät mene päällekkäin.

Jätä muut parametrit oletusarvoihinsa. Pääasia on kenttä aivan välilehden alaosassa, jota varten kaikki tämä aloitettiin.

Vaihe 4: Open by selector, ankkuritaika

Syötä Open By Selector -kenttään CSS-valitsin, joka "kuuntelee" ankkurilinkkiä. Muoto on tarkka:

1
a[href="#contact"]

Korvaa #contact omalla ankkurillasi: #popup / #callback / #sale tai mikä tahansa muu yksilöllinen tunniste. Valitsin reagoi klikkaukseen mihin tahansa <a>-elementtiin, jonka href-attribuutti vastaa ankkuriasi.

Tallenna ponnahdusikkuna. Nyt se odottaa, että kävijä seuraa linkkiä, jossa on vaadittu ankkuri.

Vaihe 5: Sijoita ankkurilinkkejä ympäri sivustoasi

Enää tarvitsee lisätä linkit, joista kävijä avaa ponnahdusikkunan. Mikä tahansa Elementor-widget, jossa on linkkikenttä, käy: Button, Text Editor, Image, Icon Box.

Syötä linkkikenttään tavallisen URL-osoitteen sijaan #contact (tai oma ankkurisi). Sivustolla tämä toimii seuraavasti: klikattaessa selain lisää #contact osoiteriville, valitsin a[href="#contact"] laukeaa ja ponnahdusikkuna avautuu.

Käytännössä käytämme kolmea tyypillistä skenaariota:

• Painike hero-osiossa, "Pyydä soittoa" href-arvolla #callback;
• Valikkokohta, kohdassa Appearance → Menus lisää mukautettu linkki ankkurilla #contact;
• Tekstilinkki artikkelin rungossa, valitse teksti ja syötä ankkuri linkkipaneeliin.

Testaa: avaa mikä tahansa sivu sivustollasi, lisää #contact osoiteriville ja paina Enter, ponnahdusikkunan pitäisi ilmestyä. Jos ei, palaa vaiheeseen 4 ja tarkista valitsin.

Video: asennus 3 minuutissa

Virallinen Elementor-video näyttää prosessin alusta loppuun, ponnahdusikkunan luomisesta sen testaamiseen live-sivustolla.

⁉️🤔 Usein kysytyt kysymykset

Toimiiko menetelmä ilman Elementor Prota?

Ei. Popup Builder -moduuli sisältyy vain Elementor Prohon. Rakentajan ilmaisversiossa ponnahdusikkunat eivät ole käytettävissä. Jos käytät Free-versiota, tutustu Elementorin ja erillisen ponnahdusikkunalisäosan yhdistelmään (esimerkiksi Popup Maker), mutta asennus on siellä erilainen, jQuery-valitsimien kautta eikä tavallisen Open By Selectorin kautta.

Onko "Entire Site" -ehto pakollinen?

Kyllä, tämä on menetelmän keskeinen vaatimus. Jos jätät ehdon muotoon "On Specific Pages", ponnahdusikkuna näytetään vain valituilla sivuilla ja vain sivun latautuessa, ei ankkurin klikkauksesta. "Entire Site" -tila luovuttaa hallinnan Open By Selector -valitsimelle.

Voiko luoda useita erilaisia ponnahdusikkunoita eri ankkureilla?

Kyllä. Luo erillinen ponnahdusikkuna jokaiselle ankkurille. Esimerkiksi "Yhteystiedot"-ponnahdusikkuna valitsimella a[href="#contact"] ja "Ale"-ponnahdusikkuna valitsimella a[href="#sale"]. Molemmat ovat "Entire Site" -tilassa ja laukeavat itsenäisesti omalla ankkurillaan.

Miksi ponnahdusikkuna ei avaudu ankkurilla?

Tarkista kolme asiaa. Ensinnäkin: #your-anchor täytyy näkyä osoiterivillä, selain lisää sen vain, kun klikkaa <a>-elementtiä, jolla on vastaava href, suora näppäimistösyöttö ei välttämättä toimi. Toiseksi: Open By Selector -kentässä täytyy lukea täsmälleen a[href="#contact"], ilman ylimääräisiä välilyöntejä ja oikeilla lainausmerkeillä. Kolmanneksi: avaa selaimen konsoli (F12) ja etsi JavaScript-virheitä, ristiriita toisen lisäosan kanssa saattaa estää laukaisimen.

Vaikuttaako tämä hakukoneoptimointiin?

Ei. Ankkurilinkkejä, joissa on risuaita, hakukoneet eivät indeksoi erillisinä sivuina. Googlelle tämä on tekninen navigointielementti, ei duplikaattisisältöä.

Mitä tehdä, jos vakiolaukaisimet eivät riitä

Ankkurilinkki Open By Selectorin kautta on yleispätevin tapa avata Elementor-ponnahdusikkuna mistä tahansa sivustollasi. Se ei riipu siitä, millä sivulla kävijä on, eikä vaadi functions.php-tiedoston muokkaamista.

Jos tehtävä muuttuu monimutkaisemmaksi, esimerkiksi ponnahdusikkunan pitäisi avautua, kun vieritetään tiettyyn lohkoon tai 10 sekuntia sivustolle saapumisen jälkeen, käytä tavallisia Elementor-laukaisimia: On Scroll, On Page Load, On Exit Intent. Ne määritetään samalla näytöllä, jossa valitsimme "Entire Site", ja ne yhdistyvät täydellisesti ankkurimenetelmään.

Kokeile testisivustolla: luo ponnahdusikkuna, syötä a[href="#test"], sijoita painike tällä ankkurilla etusivulle. Koko prosessi vie alle viisi minuuttia.