Normaalisti lukija siirtyy sivulta toiselle, kun verkkosivustoa selailee. Joskus kuitenkin saattaa tulla vastaan tilanne, jolloin halutaan näyttää sisältöä modaali-ikkunassa niin että ikkunan sulkemisen jälkeen käyttäjä pystyy jatkamaan sivuston selailua siitä, mihin hän jäi avatessaan modaali-ikkunan. Esimerkin modaali-ikkunan toiminnasta näet Sofokuksen sivuilla, jos klikkaat alatunnisteesta Ota yhteyttä -nappia. Yhteydenottolomake avautuu modaali-ikkunaan, jonka voi tarvittaessa sulkea.

Easy Modal

Modaali-ikkunoiden teko vaatii yleensä JavaScript-osaamista, mutta onneksi WordPressiin on olemassa kätevä Easy Modal -lisäosa, jonka hoitaa tämän käyttäjän puolesta. Lisäosan asennuksen ja aktivoinnin jälkeen voi heti aloittaa modaali-ikkunoiden sisällön luonnin. Aktivointi lisää ylläpitoon uuden Easy Modal -osion.

easy-modal-valikko

Teema

Modaalin ulkoasua voi muokata helposti Theme-osiossa. Teeman avulla voi määrittää modaalin taustavärin ja läpinäkyvyyden. Sulkemisnapin värin ja sijainnin voi myös säätää haluamakseen. Näiden lisäksi voi vielä säätää modaalin reunoja, tilankäyttöä ja tekstien värejä.

modaali-yleiset-asetukset

Modaali

Kun teema on valmis, seuraavaksi voikin alkaa luoda uusia modaali-ikkunoita. Tämä onnistuu Modal-osiossa. Modaalille pitää määrittää nimi, otsikko ja sisältö. Sisältökenttä käyttää hyödyksi WordPressistä muutenkin tuttua sisältöeditoria.

Sitewide kohtaan voi määrittää, ladataanko modaali jokaisella sivulla. Jos modaalin avaus on esimerkiksi alatunnisteessa tai sivupalkissa, tällöin se kannattaa ladata jokaisella sivulla. Jos taas modaalin avaus tapahtuu vain tietyillä sivuilla, tällöin sitä ei kannata ladata jokaisella sivulla.

modaali-luonti

Options-välilehdeltä voi valita erilaisia modaaliin liittyviä asetuksia. Modaalille voi valita koon, animaation nopeuden, animaation tyypin ja sen sulkeutuuko modaali, jos painaa ESC-näppäintä tai modaalin ulkopuolella. Kun modaali on valmis, se pitää tallentaa.

modaali-luonti-asetukset

Tallennuksen jälkeen modaali pitää tietysti liittää johonkin sivustolla. Helpoiten tämä onnistuu, kun menee modaalin muokkausnäkymässä Examples-välilehdelle ja kopioi linkkiesimerkin.

Tämän jälkeen linkki pitää lisätä sinne, minne sen haluaa. Linkin voi ihan vapaasti lisätä johonkin sivulle tai vaikkapa vimpaimeen. Kannattaa muistaa, että esimerkki on HTML-koodia. Sisältöeditoriin se pitää siis lisätä Teksti-välilehdellä. Linkin teksti kannattaa toki muuttaa joksikin muuksi kuin Open Modal.

Huomaa, että jos valitsit modaalin ladattavaksi vain tietyllä sivulla, tällöin modaali pitää valita kyseisen sivun muokkausnäkymässä, tai muuten modaali ei lataudu ollenkaan.

modaalin-lisays-sivulle

Lisäosa toimii loistavasti myös Contact Form 7 -lomakkeiden kanssa. Lomakkeen voi lisätä modaaliin kopioimalla lomakkeen lyhytkoodin modaalin sisältökenttään. Alla kuvakaappaus valmiista toimivasta modaali-ikkunasta.

modaali-valmis

Kirjoittaja WP-opas ja WPWoofi yhteisö

Me ollaan Suomen suurin WordPressiin ja WooCommerceen erikoistunut Facebook-ryhmä joka käyttää WordPressiä ja WooCommercea bisnekseen päivittäin. Tule mukaan WPWoofin - Facebook-ryhmään. Ylläpidämme ja päivitämme myös WP-oppaan hyödyllisiä artikkeleita.

Lisää uusi kommentti

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *