Komponentit· Elementit
Elementit
Käyttöliittymän pienet osat: ilmoituslaatikko, merkki, edistymispalkki, vaiheet, aikajana, taulukko, kaavio ja arviot.
27 komponenttia
Esimerkit toimivat testitilassa: mitään ei tallenneta oikealle sivustolle, viestejä ei lähetetä ja maksut ovat testimaksuja.
Ilmoituslaatikko
Lohko alert
Ilmoituslaatikko: tieto, onnistuminen, varoitus tai virhe omalla värillään ja kuvakkeellaan.
Tyylit (4)
Kaikki tyylit näkyvät esimerkissä rinnakkain: Tiedote, Onnistui, Varoitus, Virhe
Asetukset (3)
| Asetus | Muokataan | Oletus |
|---|---|---|
Tyyli variant | Valinta | Tiedote |
Otsikko title | Teksti | Huomio |
Teksti text | Pitkä teksti | Halli on suljettu juhannuksena. |
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 29 pohjassa
Kaikki 29 pohjaa
- Pienhotelli
- Majatalo ja B&B
- Mökki ja huvila
- Elämyspalvelut
- Personal trainer
- Taksi
- Maatila ja suoramyynti
- Urheilija
- Kirjailija
- Kirjailijaseura ja klassikko
- Kurssikeskus ja koulutusyritys
- Pianokoulu ja soitintunnit
- Musiikki- ja tanssikoulu
- Muusikko ja bändi
- Somevaikuttaja ja sisällöntuottaja
- Valokuvaaja
- Konsultti ja valmentaja
- Asiantuntijatoimisto
- Suunnittelutoimisto
- Mainos- ja viestintätoimisto
- Lakitoimisto
- Henkilöstöpalvelu
- Fysioterapia ja terapia
- Hoivakoti ja päiväkoti
- Kiipeilyhalli (A)
- Apteekki
- Muotoilu, graafikko ja video
- Kääntäjä ja käännöstoimisto
- Vakuutusasiamies
Merkki
Lohko badge
Merkki: pieni tunniste kuten Uusi, Tarjous tai Loppuunmyyty.
Tyylit (9)
Kaikki tyylit näkyvät esimerkissä rinnakkain: Pääväri, Toinen väri, Korostus, Tumma, Reunaviiva, Onnistui (vihreä), Varoitus (oranssi), Tieto, Vaara (punainen)
Asetukset (2)
| Asetus | Muokataan | Oletus |
|---|---|---|
Teksti text | Teksti | Uusi |
Tyyli variant | Valinta | Pääväri |
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 2 pohjassa
Edistymispalkki
Lohko progress
Edistymispalkki: tavoite ja tilanne, esimerkiksi keräyksen kertymä.
Asetukset (5)
| Asetus | Muokataan | Oletus |
|---|---|---|
Teksti label | Teksti | Keräys uuteen kenttään |
Arvo value | Luku | 6400 |
Tavoite (enimmäisarvo) max | Luku | 10000 |
Yksikkö unit | Teksti | € |
Näyttötapa display | Valinta | Palkki |
Saavutettavuus
Taulukoilla on otsikkosolut ja kuvateksti, listat ovat oikeita listoja ja päivämäärät luettavassa muodossa. Kaavion luvut ovat myös tekstinä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Tunnusluku
Lohko stat
Tunnusluku: iso numero ja selite.
Asetukset (3)
| Asetus | Muokataan | Oletus |
|---|---|---|
Teksti label | Teksti | Kävijöitä vuodessa |
Arvo value | Teksti | 42 000 |
Kuvaus description | Teksti | – |
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 68 pohjassa
- Padel-halli
- Beach volley -halli
- Jooga- tai pilatesstudio
- Hieronta tai hoitola
- Parturi tai kampaamo
- Pienhotelli
Kaikki 68 pohjaa
- Padel-halli
- Beach volley -halli
- Jooga- tai pilatesstudio
- Hieronta tai hoitola
- Parturi tai kampaamo
- Pienhotelli
- Mökki ja huvila
- Välinevuokraus
- Verkkokauppa
- Kuntosali
- Personal trainer
- Liigajoukkue
- Yhdistys
- Vaaliehdokas
- Ravintola
- Autokorjaamo
- Rengasliike ja rengashotelli
- Autokoulu
- Katsastusasema
- Autopesula
- Vaihtoautoliike
- Kolarikorjaamo
- Autovuokraamo
- Hinauspalvelu
- Taksi
- Maatila ja suoramyynti
- Urheilija
- Kirjailija
- Eräseura
- Kurssikeskus ja koulutusyritys
- Musiikki- ja tanssikoulu
- Muusikko ja bändi
- Somevaikuttaja ja sisällöntuottaja
- Valokuvaaja
- Kuljetus ja logistiikka
- Sähköasennus
- Putki- ja LVI-liike
- Rakennus- ja remonttiyritys
- Maanrakennus ja infra
- Siivouspalvelu
- Kiinteistöhuolto
- Lakitoimisto
- Ohjelmistotalo ja konsultointi
- IT-tuki pk-yrityksille
- Henkilöstöpalvelu
- Tilitoimisto
- Lounasravintola
- 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ö
- Säätiö
- Valmistaja ja tukku
- Maalari, katto, lattia ja puuseppä
- Nuohooja
- Kortti- ja maksusovellus
- Tilaketju
- Apteekki
- Muotoilu, graafikko ja video
- Vakuutusasiamies
Vaiheet
Lohko steps
Vaiheet: numeroitu eteneminen, esimerkiksi näin varaus toimii.
Asetukset (2)
| Asetus | Muokataan | Oletus |
|---|---|---|
Kohdat items | Pitkä teksti | Valitse aika|Katso vapaat vuorot kalenterista M… |
Suunta orientation | Valinta | Vaakasuora |
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Aikajana
Lohko timeline
Aikajana: vuosiluvut ja tapahtumat allekkain, esimerkiksi yrityksen historia.
Asetukset (1)
| Asetus | Muokataan | Oletus |
|---|---|---|
Kohdat items | Pitkä teksti | 2019|Halli avattiin|Kolme ensimmäistä kenttää 2… |
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Lähtölaskenta
Lohko countdown
Lähtölaskenta tapahtumaan tai tarjouksen päättymiseen.
Asetukset (3)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | Tarjous päättyy |
Päättymisaika (ISO) targetAt | Teksti | 2030-12-31T23:59:59Z |
Teksti kun päättynyt labelsDone | Teksti | Päättynyt |
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ä 2 pohjassa
Dynaaminen luku
Lohko dynamicNumber
Dynaaminen luku: sivuston elävä tieto, kuten vapaat paikat tai jäsenmäärä.
Asetukset (4)
| Asetus | Muokataan | Oletus |
|---|---|---|
Etuliite prefix | Teksti | – |
Lähde source | Valinta | Vapaat paikat |
Jälkiliite suffix | Teksti | – |
Vara-arvo fallback | Luku | 0 |
Saavutettavuus
Taulukoilla on otsikkosolut ja kuvateksti, listat ovat oikeita listoja ja päivämäärät luettavassa muodossa. Kaavion luvut ovat myös tekstinä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Ennen–jälkeen-kuva
Lohko Kokeiltava beforeAfter
Ennen–jälkeen-kuva: liukusäätimellä vertailtavat kaksi kuvaa.
Asetukset (9)
| Asetus | Muokataan | Oletus |
|---|---|---|
Kuva ennen before | Kuva | – |
Kuvaus kuvalle ennen beforeAlt | Teksti | – |
Kuva jälkeen after | Kuva | – |
Kuvaus kuvalle jälkeen afterAlt | Teksti | – |
Teksti kuvan päällä (ennen) beforeLabel | Teksti | Ennen |
Teksti kuvan päällä (jälkeen) afterLabel | Teksti | Jälkeen |
Jakajan aloituskohta (%) start | Luku | 50 |
Kuvasuhde aspect | Valinta | 16:9 |
Kuvateksti caption | Teksti | – |
Saavutettavuus
Jokaisella kuvalla on vaihtoehtoinen teksti tai se on merkitty koristeeksi. Suurennus ja kuvaselain toimivat näppäimistöllä (nuolet, Esc) ja kertovat kohdan (”Kuva 2 / 5”). Vain ensimmäinen näkyvä kuva ladataan heti.
Vaihtuva otsikkosana
Lohko textRotate
Vaihtuva otsikkosana: otsikon yksi sana vaihtuu muutaman vaihtoehdon välillä.
Asetukset (7)
| Asetus | Muokataan | Oletus |
|---|---|---|
Teksti ennen vaihtuvaa sanaa before | Teksti | Kotisivut |
Vaihtuvat sanat words | Pitkä teksti | yhdistykselle yritykselle urheiluseuralle |
Teksti vaihtuvan sanan jälkeen after | Teksti | – |
Otsikkotaso level | Valinta | h2 |
Kohdistus align | Valinta | – |
Sana vaihtuu (sekunnin välein) interval | Luku | 3 |
Korosta vaihtuva sana pääkorostusvärillä accent | Päällä / pois | true |
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.
Kasvokuvaryhmä
Lohko avatarGroup
Kasvokuvaryhmä: pienet kasvokuvat päällekkäin, esimerkiksi tiimi tai osallistujat.
Asetukset (14)
| Asetus | Muokataan | Oletus |
|---|---|---|
Kasvokuva 1 image1 | Kuva | – |
Kuvaus kasvokuvalle 1 (esim. nimi) image1Alt | Teksti | – |
Kasvokuva 2 image2 | Kuva | – |
Kuvaus kasvokuvalle 2 (esim. nimi) image2Alt | Teksti | – |
Kasvokuva 3 image3 | Kuva | – |
Kuvaus kasvokuvalle 3 (esim. nimi) image3Alt | Teksti | – |
Kasvokuva 4 image4 | Kuva | – |
Kuvaus kasvokuvalle 4 (esim. nimi) image4Alt | Teksti | – |
Kasvokuva 5 image5 | Kuva | – |
Kuvaus kasvokuvalle 5 (esim. nimi) image5Alt | Teksti | – |
Muita (näkyy muodossa +N) more | Luku | 120 |
Teksti text | Teksti | Yli 120 jäsentä pelaa meillä joka viikko |
Kuvien koko size | Valinta | Normaali |
Kohdistus align | Valinta | – |
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Taulukko
Lohko dataTable
Taulukko: rivit ja sarakkeet otsikkosoluineen, esimerkiksi hinnasto tai aikataulu.
Asetukset (7)
| Asetus | Muokataan | Oletus |
|---|---|---|
Taulukon otsikko caption | Teksti | Hinnasto |
Rivit rows | Pitkä teksti | Palvelu|Kesto|Hinta Perushuolto|45 min|49 € Laa… |
Ensimmäinen rivi on otsikkorivi headerRow | Päällä / pois | true |
Ensimmäinen sarake on rivin otsikko firstColumnHeader | Päällä / pois | – |
Joka toinen rivi raidoitettu striped | Päällä / pois | true |
Kävijä voi järjestää rivit sarakkeen mukaan sortable | Päällä / pois | false |
Puhelimella phone | Valinta | Vieritys sivusuunnassa |
Saavutettavuus
Taulukoilla on otsikkosolut ja kuvateksti, listat ovat oikeita listoja ja päivämäärät luettavassa muodossa. Kaavion luvut ovat myös tekstinä.
Käytössä 30 pohjassa
Kaikki 30 pohjaa
- Hieronta tai hoitola
- Välinevuokraus
- Verkkokauppa
- Liigajoukkue
- Yhdistys
- Häät
- Ravintola
- Rengasliike ja rengashotelli
- Autokoulu
- Katsastusasema
- Autopesula
- Autovuokraamo
- Maatila ja suoramyynti
- Urheilija
- Eräseura
- Liiga tai sarja
- Kuljetus ja logistiikka
- Maanrakennus ja infra
- Ohjelmistotalo ja konsultointi
- IT-tuki pk-yrityksille
- Lähikauppa ja ruokakauppa
- Vaate- ja kenkäkauppa
- Sisustus- ja lahjakauppa
- Rauta- ja maatalouskauppa
- Erikoisliike
- Valmistaja ja tukku
- Kirpputori
- Nuohooja
- Kiipeilyhalli (B)
- Tilaketju
Kaavio
Lohko chart
Kaavio: pylväs-, viiva- tai piirakkakaavio luvuista, luvut myös tekstinä.
Asetukset (5)
| Asetus | Muokataan | Oletus |
|---|---|---|
Kaavion otsikko title | Teksti | Jäsenmäärä vuosittain |
Kaavion tyyppi type | Valinta | Palkit |
Luvut data | Pitkä teksti | 2022|180 2023|240 2024|310 2025|420 |
Yksikkö unit | Teksti | – |
Mitä kaaviosta kannattaa huomata description | Teksti | – |
Saavutettavuus
Taulukoilla on otsikkosolut ja kuvateksti, listat ovat oikeita listoja ja päivämäärät luettavassa muodossa. Kaavion luvut ovat myös tekstinä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Tähtiarvosana
Lohko rating
Tähtiarvosana luvun kanssa, esimerkiksi 4,8 / 5.
Asetukset (6)
| Asetus | Muokataan | Oletus |
|---|---|---|
Arvosana (esim. 4,8) value | Teksti | 4,8 |
Tähtien määrä max | Luku | 5 |
Selite label | Teksti | Asiakkaiden antama arvosana |
Näytä arvosana numerona showValue | Päällä / pois | true |
Koko size | Valinta | Normaali |
Kohdistus align | Valinta | – |
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Asiakasarviot (esim. Google)
Lohko reviews
Asiakasarviot esimerkiksi Googlesta: tähdet, teksti ja arvioijan nimi.
Asetukset (8)
| Asetus | Muokataan | Oletus |
|---|---|---|
Arvostelujen lähde source | Valinta | Omat asiakaspalautteet |
Otsikko heading | Teksti | Asiakkaiden kokemuksia |
Mistä arviot ovat (esim. Google) sourceName | Teksti | – |
Arvosanojen keskiarvo (esim. 4,8) rating | Teksti | 4,8 |
Arvioita yhteensä count | Luku | 132 |
Arviot reviews | Pitkä teksti | Anna K.|5|maaliskuu 2026|Varaaminen oli helppoa… |
Osoite, jossa kaikki arviot ovat (esim. Google-profiili) profileUrl | Linkki | – |
Linkin teksti linkLabel | Teksti | – |
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Tunnisteet (chipit)
Lohko chips
Tunnisteet: pienet pyöreät merkinnät aiheista tai ominaisuuksista.
Tyylit (3)
Kaikki tyylit näkyvät esimerkissä rinnakkain: Pehmeä tausta, Reunaviiva, Täysi väri
Asetukset (5)
| Asetus | Muokataan | Oletus |
|---|---|---|
Kohdat items | Pitkä teksti | Padel Sulkapallo|/lajit/sulkapallo Tennis|/laji… |
Ryhmän nimi ruudunlukijalle label | Teksti | – |
Tyyli variant | Valinta | Pehmeä tausta |
Koko size | Valinta | Normaali |
Kohdistus align | Valinta | – |
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 12 pohjassa
Alasvetopainike
Lohko Kokeiltava dropdown
Alasvetopainike: painike, joka avaa listan linkkejä.
Tyylit (3)
Kaikki tyylit näkyvät esimerkissä rinnakkain: Ensisijainen, Toissijainen, Reunaviiva
Asetukset (4)
| Asetus | Muokataan | Oletus |
|---|---|---|
Painikkeen teksti label | Teksti | Valitse toimipiste |
Kohdat items | Pitkä teksti | Keskusta|/toimipisteet/keskusta Länsi|/toimipis… |
Tyyli variant | Valinta | Ensisijainen |
Kohdistus align | 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ä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Teksti ja lisätieto (vihje)
Lohko Kokeiltava infoTip
Teksti ja lisätieto: termin selitys aukeaa vihjeenä painettaessa.
Asetukset (2)
| Asetus | Muokataan | Oletus |
|---|---|---|
Teksti text | Teksti | Toimitus 5,90 € |
Lisätieto, joka aukeaa i-painikkeesta tip | Pitkä teksti | Toimitamme arkisin 1–3 päivässä. Yli 60 euron t… |
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.
Tumman tilan kytkin
Lohko Kokeiltava themeToggle
Tumman tilan kytkin: kävijä vaihtaa sivun vaaleaksi tai tummaksi.
Asetukset (2)
| Asetus | Muokataan | Oletus |
|---|---|---|
Kytkimen teksti label | Teksti | Tumma tila |
Kohdistus align | Valinta | Alku |
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.
Keskustelukuplat
Lohko Kokeiltava chat
Keskustelukuplat: kysymys–vastaus-keskustelu kuplina, esimerkiksi usein kysytyt.
Asetukset (2)
| Asetus | Muokataan | Oletus |
|---|---|---|
Viestit messages | Pitkä teksti | Asiakas|Hei! Onko teillä vapaita vuoroja lauant… |
Ryhmän nimi ruudunlukijalle label | 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.
Kääntyvä kortti (flip card)
Lohko Kokeiltava flipCard
Kääntyvä kortti: etupuolella kuva tai otsikko, takapuolella lisätieto.
Asetukset (9)
| Asetus | Muokataan | Oletus |
|---|---|---|
Kuva image | Kuva | – |
Vaihtoehtoinen teksti imageAlt | Teksti | – |
Etupuolen otsikko frontTitle | Teksti | Hieronta |
Etupuolen teksti frontText | Pitkä teksti | 60 min · 69 € |
Kääntöpuolen otsikko backTitle | Teksti | Mitä hoitoon kuuluu? |
Kääntöpuolen teksti backText | Pitkä teksti | Lihashuolto koko keholle. Kerro toiveesi hoidon… |
Linkin teksti linkLabel | Teksti | Varaa aika |
Osoite linkUrl | Linkki | /ajanvaraus |
Kääntöpainikkeen teksti flipLabel | 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ä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Lottie-animaatio
Lohko lottie
Lottie-animaatio: kevyt vektorianimaatio JSON-tiedostosta.
Lottie-animaatio tarvitsee animaatiotiedoston; ilman sitä esimerkki näyttää tyhjän paikan. Liike pysähtyy, kun kävijä on pyytänyt vähemmän liikettä.
Asetukset (6)
| Asetus | Muokataan | Oletus |
|---|---|---|
Lottie-tiedosto (.json) src | Linkki | – |
Kuvaus ruudunlukijalle label | Teksti | – |
Pysäytyskuva (näkyy ennen latausta) poster | Kuva | – |
Automaattinen toisto (mykistetty) autoplay | Päällä / pois | true |
Toista jatkuvasti loop | Päällä / pois | true |
Enimmäisleveys (px) maxWidth | Luku | – |
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.
3D-malli
Lohko Kokeiltava model3d
3D-malli: tuotetta tai kohdetta voi kääntää ja zoomata selaimessa; latautuu vasta pyynnöstä.
Esimerkissä ei näytetä mallia, koska 3D-malli on sivuston oma ladattu tiedosto (glb); ilman tiedostoa näkyy vain mallin paikka.
Asetukset (5)
| Asetus | Muokataan | Oletus |
|---|---|---|
3D-malli (GLB tai glTF) src | Linkki | – |
Juliste poster | Kuva | – |
Mikä tuote mallissa on alt | Teksti | – |
Kuvateksti caption | Teksti | – |
Käännä automaattisesti autoRotate | Päällä / pois | false |
Saavutettavuus
Jokaisella kuvalla on vaihtoehtoinen teksti tai se on merkitty koristeeksi. Suurennus ja kuvaselain toimivat näppäimistöllä (nuolet, Esc) ja kertovat kohdan (”Kuva 2 / 5”). Vain ensimmäinen näkyvä kuva ladataan heti.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Laskuri
Lohko Kokeiltava calculator
Laskuri lohkona: sama laskuri kuin laskuriosiossa, palstan sisällä.
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ä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Muistilistan aloitus
Lohko Kokeiltava dateChecklistStart
Muistilistan aloitus: kävijä valitsee päivän, ja painike vie muistilistan sivulle päivä valmiiksi täytettynä.
Asetukset (4)
| Asetus | Muokataan | Oletus |
|---|---|---|
Muistilistan sivu url | Linkki | – |
Päivän nimi dateLabel | Teksti | – |
Painikkeen teksti buttonLabel | Teksti | – |
Linkki ilman päivää linkLabel | 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.
Osamaksulaskuri
Lohko Kokeiltava financing
Osamaksulaskuri lohkona, esimerkiksi tuotteen tai auton vieressä.
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.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Ilmoitukset
Lohko Kokeiltava pushNotices
Ilmoitusten tilaus lohkona palstan sisällä.
Esikatselussa ilmoituksia ei tilata: painike kertoo, mitä se tekee oikealla sivustolla.
Asetukset (7)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | – |
Selitys painikkeen yllä body | Pitkä teksti | – |
Painikkeen teksti buttonLabel | Teksti | – |
Tietosuojahuomautus painikkeen alla note | Pitkä teksti | – |
Uutiskirjeen tilaussivu (vaihtoehto) newsletterUrl | Linkki | – |
Uutiskirjelinkin teksti newsletterLabel | Teksti | – |
Asettelu layout | Valinta | Pieni painike (alatunniste) |
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.