Aihekuvakkeet parantavat vastauskokemusta ja lisäävät brändin näkyvyyttä kyselyssä. Voit luoda ja lisätä kuvakkeita itse tai tilata niitä meiltä omaan tyyliisi ja tarpeeseesi muokattuna. Ota meihin yhteyttä Ota yhteyttä -sivuiltamme.
Kuvakkeiden luonti
Jotta aihekuvakkeet toimivat tarkoitetulla tavalla, kuvatiedoston tulisi olla osittain läpinäkyvä. Luodessasi tiedostoa tallenna se PNG-muodossa jotta läpinäkyvyys säilyy ja tiedosto on ladattavissa työkalun kuvapankkiin.
Suositellut kuvan mittasuhteet ovat 200 x 200 pikseliä kun kuvakkeita lisätään elementtiin neljä samalle riville. Jos tarkoitus on lisätä vähemmän kuvakkeita samalle riville, yksittäisen kuvan mittasuhteet voivat olla suuremmat.
Kuvatiedostoa luodessa itse kuvakkeen ympärille on hyvä jättää tyhjää tilaa. Surveypalin luomat aihekuvakkeet noudattavat seuraavia mittoja:
- Kuva-ala: 200 x 200 pikseliä
- Kuvakkeen korkeus/leveys (valitaan suurempi): 120 pikseliä
- Kuvakkeen ja kuvan reunojen välinen tyhjä tila: 40 pikseliä
Kuvakkeen tulisi olla keskitetty kuva-alaan nähden.
Kuvavalintaelementin luominen
1. Lisää Suunnittelu-näkymässä kuvavalinta-elementti kyselyyn
2. Lisää aiemmin luomasi kuvakkeet kuvavaihtoehdoiksi elementtiin
3. Lisää kuvakkeiden alle kuvaustekstit
4. Muokkaa elementin asetuksia käyttötarpeeseen sopivaksi:
- Jos halutaan että on mahdollista valita useampi kuin yksi vaihtoehto, muokataan asetusta Valittavien vaihtoehtojen määrä
- Jos lisättyjä vaihtoehtoja on eri määrä kuin oletuksena, samalla rivillä näytettävien vaihtoehtojen määrää voidaan muokata asetuksesta Suurin sallittu vierekkäisten kuvien määrä
- Jos lisätyt kuvat eivät ole muodoltaan neliöitä, jätetään Rajaa kuvat valitsematta
- Näytä kuvatekstit -asetus tulisi jättää valituksi elleivät käytetyt kuvakkeet ole itsestäänselviä tai kuvaus sisältyy itse kuvaan
- Elementin ratas-valikosta voidaan valita vaihtuuko kyselyn sivu kun jokin vaihtoehto valitaan. Jos kysymykseen voi valita vain yhden vaihtoehdon vastaukseksi, tämä asetus lisää vastauskokemuksen sujuvuutta
5. Lisää seuraava CSS-koodi Ulkoasu-näkymän Mukautettu CSS -kenttään:
.element[data-elementname="p0e1"].eimageselection .option.selected { background-color: rgba(0, 0, 0, 0); }
.element[data-elementname="p0e1"].eimageselection .option .image { background-color: #e1e2e3; border-radius: 0px; }
.element[data-elementname="p0e1"].eimageselection .option.selected .image { background-color: #6CCFF6; }
Muokkaa koodia elementtisi mukaan:
- Vaihda elementtikoodi “p0e1” vastaamaan kyselysi kuvaelementin koodia kaikissa kolmessa kohdassa (lisätietoa elementtikoodeista)
- Muokkaa valitsemattomien aihekuvien taustaväriä vaihtamalla väriarvo .eimageselection .option .image jälkeen (esimerkkikoodissa # e1e2e3)
- Muokkaa valitun aihekuvan korostusväriä vaihtamalla väriarvo .eimageselection .option.selected .image jälkeen (esimerkkikoodissa #6CCFF6)
- Aihekuvakkeen taustan muotoa voi muuttaa kulmikkaasta pyöreämmäksi muuttamalla arvoa border-radius .eimageselection .option .image jälkeen
6. Viimeiseksi, varmista että elementin asetukset ja ulkoasu ovat oikein testaamalla valintojen tekemistä Esikatselu-näkymässä