Komponentit· Vuorovaikutteiset
Vuorovaikutteiset
Haitarit, välilehdet, karusellit, ponnahdusikkunat, visat, laskurit ja vaalikone. Kaikki toimivat myös näppäimistöllä.
11 komponenttia
Esimerkit toimivat testitilassa: mitään ei tallenneta oikealle sivustolle, viestejä ei lähetetä ja maksut ovat testimaksuja.
Haitari
Osio Kokeiltava accordion
Haitari: kysymykset ja vastaukset tai muu sisältö, joka avautuu otsikkoa painamalla. Sopii usein kysyttyihin.
Tyylit (5)
Valitse tyyli, niin esimerkki yllä vaihtuu siihen. Sisältö pysyy samana, vain ulkoasu vaihtuu.
Asetukset (2)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | – |
Tyyli design | Valinta | – |
Saavutettavuus
Avautuva sisältö on painike, jolla on nimi ja tila (aria-expanded tai valittu välilehti). Toimii näppäimistöllä: Tab siirtää, Enter ja välilyönti avaavat, Esc sulkee avautuvan. Sisältö on luettavissa myös ilman JavaScriptiä.
Käytössä 90 pohjassa
- Padel-halli
- Tennishalli
- Beach volley -halli
- Jooga- tai pilatesstudio
- Hieronta tai hoitola
- Parturi tai kampaamo
Kaikki 90 pohjaa
- Padel-halli
- Tennishalli
- Beach volley -halli
- Jooga- tai pilatesstudio
- Hieronta tai hoitola
- Parturi tai kampaamo
- Pienhotelli
- Majatalo ja B&B
- Mökki ja huvila
- Elämyspalvelut
- Välinevuokraus
- Verkkokauppa
- Kuntosali
- Personal trainer
- Urheiluseura tai klubi
- Liigajoukkue
- Joukkuelajiseura
- Yksilölajiseura
- Yhdistys
- Vaaliehdokas
- Juhlatila
- Häät
- Ravintola
- Autokorjaamo
- Rengasliike ja rengashotelli
- Autokoulu
- Katsastusasema
- Autopesula
- Vaihtoautoliike
- Kolarikorjaamo
- Autovuokraamo
- Hinauspalvelu
- Taksi
- Maatila ja suoramyynti
- Urheilija
- Kirjailija
- Eräseura
- Kirjailijaseura ja klassikko
- Kurssikeskus ja koulutusyritys
- Pianokoulu ja soitintunnit
- Musiikki- ja tanssikoulu
- Muusikko ja bändi
- Somevaikuttaja ja sisällöntuottaja
- Liiga tai sarja
- Valokuvaaja
- Kuljetus ja logistiikka
- Sähköasennus
- Putki- ja LVI-liike
- Rakennus- ja remonttiyritys
- Maanrakennus ja infra
- Siivouspalvelu
- Kiinteistöhuolto
- Konsultti ja valmentaja
- Asiantuntijatoimisto
- Suunnittelutoimisto
- Mainos- ja viestintätoimisto
- Lakitoimisto
- Ohjelmistotalo ja konsultointi
- IT-tuki pk-yrityksille
- Henkilöstöpalvelu
- Kiinteistönvälitys
- Tilitoimisto
- Kahvila ja leipomo
- Lounasravintola
- Pizzeria
- Hammaslääkäri
- Fysioterapia ja terapia
- Eläinlääkäri
- Kauneushoitola tai kynsistudio
- Kukkakauppa
- Polkupyöräkauppa
- Lähikauppa ja ruokakauppa
- Vaate- ja kenkäkauppa
- Sisustus- ja lahjakauppa
- Rauta- ja maatalouskauppa
- Erikoisliike
- Taloyhtiö
- Valmistaja ja tukku
- Maalari, katto, lattia ja puuseppä
- Hoivakoti ja päiväkoti
- Kirpputori
- Nuohooja
- Kortti- ja maksusovellus
- Kiipeilyhalli (A)
- Kiipeilyhalli (B)
- Tilaketju
- Apteekki
- Muotoilu, graafikko ja video
- Kääntäjä ja käännöstoimisto
- Vakuutusasiamies
Välilehdet
Osio Kokeiltava tabs
Välilehdet: saman aiheen osat (esim. hinnasto aikuiset/juniorit) vierekkäisinä välilehtinä.
Tyylit (4)
Valitse tyyli, niin esimerkki yllä vaihtuu siihen. Sisältö pysyy samana, vain ulkoasu vaihtuu.
Asetukset (5)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | – |
Välilehtien tyyli style | Valinta | – |
Välilehden kuva mediaMode | Valinta | – |
Avaa tämän päivän välilehti openToday | Päällä / pois | – |
Lounas päättyy klo todayUntil | Teksti | – |
Saavutettavuus
Avautuva sisältö on painike, jolla on nimi ja tila (aria-expanded tai valittu välilehti). Toimii näppäimistöllä: Tab siirtää, Enter ja välilyönti avaavat, Esc sulkee avautuvan. Sisältö on luettavissa myös ilman JavaScriptiä.
Kuvakaruselli
Osio Kokeiltava carousel
Kuvakaruselli: diat otsikoineen ja painikkeineen, selattavissa nuolilla ja pyyhkäisyllä. Ei automaattista vaihtoa oletuksena.
Asetukset (8)
| Asetus | Muokataan | Oletus |
|---|---|---|
Karusellin nimi (saavutettavuus) ariaLabel | Teksti | – |
Korkeus (px) height | Luku | 800 |
Korkeus mobiilissa (px) mobileHeight | Luku | 450 |
Automaattinen kuvanvaihto (millisekunteina, 0 = ei vaihtoa) autoplayMs | Luku | 0 |
Näytä nuolet showArrows | Päällä / pois | true |
Näytä pisteet showDots | Päällä / pois | true |
Kohdistus align | Valinta | Keskitys |
Aloitusosion leveys width | Valinta | Reunasta reunaan |
Saavutettavuus
Ei automaattista liikettä oletuksena. Jos omistaja kytkee liikkeen päälle, Tauko-painike on ensimmäinen ohjain ja prefers-reduced-motion pysäyttää liikkeen aina (WCAG 2.2.2). Ohjaimilla on suomenkieliset nimet.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Ponnahdusikkuna
Osio Kokeiltava popup
Ponnahdusikkuna: tarjous, uutiskirjeen tilaus tai tiedote, joka avautuu ajastettuna, vierittäessä tai linkistä.
Esimerkissä ponnahdusikkuna avautuu kolmen sekunnin kuluttua, kuten oikealla sivulla ajastettuna; sulje se ruksista tai Esc-näppäimellä.
Asetukset (10)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | Tilaa uutiskirje |
Sisältö body | Muotoiltu teksti | – |
Lomake formId | Lomake | – |
Avautumisehto trigger | Valinta | Viiveen jälkeen |
Viive (ms) delayMs | Luku | 3000 |
Vieritys (%) scrollPercent | Luku | 50 |
Poistumisaikeen popup exitIntent | Päällä / pois | – |
Kerran istunnossa oncePerSession | Päällä / pois | – |
Painikkeen teksti ctaLabel | Teksti | – |
Painikkeen linkki ctaUrl | Linkki | – |
Saavutettavuus
Avautuva sisältö on painike, jolla on nimi ja tila (aria-expanded tai valittu välilehti). Toimii näppäimistöllä: Tab siirtää, Enter ja välilyönti avaavat, Esc sulkee avautuvan. Sisältö on luettavissa myös ilman JavaScriptiä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Tietovisa
Osio Kokeiltava quiz
Tietovisa tai tuotevalitsin: kysymykset vaihtoehtoineen ja lopuksi tulos tai suositus pisteiden mukaan.
Asetukset (13)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | Tietovisa |
Johdanto intro | Pitkä teksti | Vastaa kysymyksiin ja katso tuloksesi. |
Visan tyyppi mode | Valinta | Tietovisa: pisteet ja selitykset |
Kysymykset ja tulokset quiz | Visan kysymykset | {"questions":[{"id":"q1","text":"Kirjoita ensim… |
Aloituspainikkeen teksti startLabel | Teksti | – |
Selitykset näytetään explain | Valinta | Heti vastauksen jälkeen |
Kysymykset satunnaisessa järjestyksessä shuffle | Päällä / pois | – |
Näytettävien kysymysten määrä pool | Luku | – |
Aikaraja sekunteina timeLimit | Luku | – |
Kun tuloksilla on yhtä paljon pisteitä tie | Valinta | – |
Jakoteksti shareText | Teksti | – |
Linkki, jos visa ei käynnisty: teksti fallbackLabel | Teksti | – |
Linkki, jos visa ei käynnisty: osoite fallbackUrl | Linkki | – |
Saavutettavuus
Jokaisella kentällä on näkyvä nimi, pakollisuus kerrotaan tekstinä, virheet luetaan ruudunlukijalle ja vievät kenttään, ja autocomplete täyttää tutut tiedot. Kosketusalueet ovat vähintään 44 px.
Laskuri
Osio Kokeiltava calculator
Laskuri: kävijä syöttää luvut (esim. pinta-ala, henkilömäärä) ja näkee hinnan tai tuloksen omalla kaavallasi.
Asetukset (11)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | Laske siivouksen hinta |
Johdanto intro | Pitkä teksti | Valitse asunnon koko ja siivousväli, niin näet … |
Kentät inputs | Pitkä teksti | pinta_ala | Asunnon pinta-ala | luku | min 20; … |
Tulokset outputs | Pitkä teksti | kerta | Hinta-arvio käynniltä | max(69, pinta_a… |
Huomautus hinnan alla disclaimer | Teksti | Hinta-arvio, lopullinen hinta tarjouksessa. |
Painikkeen teksti ctaLabel | Teksti | Pyydä tarjous |
Lomake, johon painike vie ctaForm | Lomake | – |
Tai sivu, johon painike vie ctaLink | Linkki | – |
Arvonlisävero vat | Valinta | Hinnat sisältävät alv:n |
Alv-prosentti vatRate | Luku | 25.5 |
Lomakkeen kenttä yhteenvedolle ctaSummaryField | Teksti | – |
Saavutettavuus
Jokaisella kentällä on näkyvä nimi, pakollisuus kerrotaan tekstinä, virheet luetaan ruudunlukijalle ja vievät kenttään, ja autocomplete täyttää tutut tiedot. Kosketusalueet ovat vähintään 44 px.
Käytössä 13 pohjassa
Muistilista
Osio Kokeiltava dateChecklist
Päivän mukainen muistilista: kävijä valitsee päivän ja näkee tehtävät päivämäärineen, ja valinnat säilyvät hänen omassa selaimessaan.
Asetukset (10)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | – |
Johdanto intro | Pitkä teksti | – |
Päivän nimi dateLabel | Teksti | – |
Kysymykset kävijälle choices | Pitkä teksti | – |
”Tee nyt” -lista, päiviä eteenpäin nowDays | Luku | 30 |
Otsikko: tee nyt labelNow | Teksti | – |
Otsikko: ennen päivää labelBefore | Teksti | – |
Otsikko: päivänä labelEvent | Teksti | – |
Otsikko: päivän jälkeen labelAfter | Teksti | – |
Huomautus listan alla disclaimer | Pitkä teksti | – |
Saavutettavuus
Jokaisella kentällä on näkyvä nimi, pakollisuus kerrotaan tekstinä, virheet luetaan ruudunlukijalle ja vievät kenttään, ja autocomplete täyttää tutut tiedot. Kosketusalueet ovat vähintään 44 px.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Asiakirjarakentaja
Osio Kokeiltava documentBuilder
Asiakirjarakentaja: kävijä täyttää asiakirjan vaihe vaiheelta, näkee vesileimatun esikatselun, maksaa ja lataa PDF:n. Asiakirjan tietoja ei tallenneta palvelimelle.
Asetukset (10)
| Asetus | Muokataan | Oletus |
|---|---|---|
Asiakirjapohja template | Valinta | – |
Otsikko heading | Teksti | – |
Johdanto intro | Pitkä teksti | – |
Hinta euroina (sisältää alv:n) price | Luku | – |
Maksupainikkeen teksti payLabel | Teksti | – |
Esikatselun vesileima watermark | Teksti | – |
Juristin haun osoite expertUrl | Linkki | – |
Tietosuojaselosteen osoite privacyUrl | Linkki | – |
Näytä kuvitteellinen esimerkki showSample | Päällä / pois | false |
Huomautus sivun alareunassa disclaimer | Pitkä teksti | Asiakirjapohja on tehty tavallisia tilanteita v… |
Saavutettavuus
Jokaisella kentällä on näkyvä nimi, pakollisuus kerrotaan tekstinä, virheet luetaan ruudunlukijalle ja vievät kenttään, ja autocomplete täyttää tutut tiedot. Kosketusalueet ovat vähintään 44 px.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Osamaksulaskuri
Osio Kokeiltava financing
Osamaksulaskuri: hinta, käsiraha, korko ja maksuaika antavat kuukausierän ja kokonaishinnan.
Asetukset (24)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | Maksa osissa |
Johdanto intro | Pitkä teksti | Jaa ostoksen hinta tasaisiin kuukausieriin. Las… |
Sivuston yrityksen rooli lenderRole | Valinta | – |
Luotonantaja lender | Teksti | – |
Hinnan otsikko priceLabel | Teksti | Ostoksen hinta |
Hinnan valinta priceControl | Valinta | Numerokenttä |
Esimerkin hinta (€) price | Luku | 2000 |
Pienin hinta (€) priceMin | Luku | 200 |
Suurin hinta (€) priceMax | Luku | 20000 |
Hinnan askel (€) priceStep | Luku | 50 |
Kysy käsirahaa askDownPayment | Päällä / pois | false |
Esimerkin käsiraha (€) downPayment | Luku | 0 |
Laina-ajat (kk) terms | Teksti | 6, 12, 24, 36 |
Esimerkin laina-aika (kk) term | Luku | 12 |
Nimelliskorko (% vuodessa) rate | Luku | 7.9 |
Koron tyyppi rateType | Valinta | Kiinteä |
Avausmaksu (€) openingFee | Luku | 39 |
Avausmaksu maksetaan openingFeeWhen | Valinta | Ensimmäisen erän yhteydessä |
Tilinhoito- tai laskutusmaksu (€/kk) monthlyFee | Luku | 6 |
Huomautus hinnan alla disclaimer | Teksti | Laskelma on suuntaa antava. Luoton myöntää ja s… |
Painikkeen teksti ctaLabel | Teksti | Kysy lisää |
Lomake, johon painike vie ctaForm | Lomake | – |
Tai sivu, johon painike vie ctaLink | Linkki | – |
Lomakkeen kenttä yhteenvedolle ctaSummaryField | Teksti | – |
Saavutettavuus
Jokaisella kentällä on näkyvä nimi, pakollisuus kerrotaan tekstinä, virheet luetaan ruudunlukijalle ja vievät kenttään, ja autocomplete täyttää tutut tiedot. Kosketusalueet ovat vähintään 44 px.
Kysely tuloksineen (äänestys)
Osio Kokeiltava poll
Kysely tuloksineen: kävijä äänestää yhtä vaihtoehtoa ja näkee heti, miten muut ovat vastanneet.
Esimerkki näyttää kyselyn ulkoasun; äänestyspainike ei ole käytössä, koska kysely kytkeytyy sivuston omaan, tallennettuun kyselyyn.
Asetukset (8)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | – |
Esittely intro | Muotoiltu teksti | – |
Kysymys question | Teksti | Mikä päivä sopii talkoisiin parhaiten? |
Vaihtoehdot (yksi riville) options | Pitkä teksti | Lauantai 9.5. Sunnuntai 10.5. Lauantai 16.5. |
Saa valita useamman multiple | Päällä / pois | false |
Tulokset sivulla results | Valinta | Kun on äänestänyt |
Kysely päättyy closesAt | Päivä ja aika | – |
Vain sisäänkirjautuneet asiakkaat customersOnly | Päällä / pois | – |
Saavutettavuus
Jokaisella kentällä on näkyvä nimi, pakollisuus kerrotaan tekstinä, virheet luetaan ruudunlukijalle ja vievät kenttään, ja autocomplete täyttää tutut tiedot. Kosketusalueet ovat vähintään 44 px.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Vaalikone (kyllä/ei)
Osio Kokeiltava vaalikone
Vaalikone: kävijä vastaa väitteisiin kyllä tai ei ja näkee, miten ehdokkaan kannat vastaavat hänen omiaan.
Asetukset (9)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | Vaalikone |
Johdanto intro | Pitkä teksti | Vastaa väitteisiin ja katso, missä olemme samaa… |
Ehdokkaan nimi tuloksissa candidateName | Teksti | – |
Kävijä voi merkitä kysymyksen itselleen tärkeäksi visitorWeights | Päällä / pois | true |
Ensimmäisen painikkeen teksti cta1Label | Teksti | – |
Ensimmäisen painikkeen osoite cta1Url | Linkki | – |
Toisen painikkeen teksti cta2Label | Teksti | – |
Toisen painikkeen osoite cta2Url | Linkki | – |
Jaa tulos -painike share | Päällä / pois | true |
Saavutettavuus
Jokaisella kentällä on näkyvä nimi, pakollisuus kerrotaan tekstinä, virheet luetaan ruudunlukijalle ja vievät kenttään, ja autocomplete täyttää tutut tiedot. Kosketusalueet ovat vähintään 44 px.