Komponentit· Sivuston osat
Sivuston osat
Ylävalikon mallit, alatunnisteet, navigaatio, tiedotepalkki, kelluvat painikkeet, haku ja evästeseloste.
24 komponenttia
Esimerkit toimivat testitilassa: mitään ei tallenneta oikealle sivustolle, viestejä ei lähetetä ja maksut ovat testimaksuja.
Yhteystiedot aiheittain
Osio contactTopics
Yhteystiedot aiheittain: myynti, huolto, laskutus ja muut aiheet, kullakin henkilö tai tiimi, puhelin, sähköposti, palveluajat ja linkki oikeaan lomakkeeseen. Korttiruudukkona tai haitarina, kun aiheita on monta.
Asetukset (4)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | – |
Esittely intro | Pitkä teksti | – |
Asettelu layout | Valinta | Kortit |
Sarakkeet columns | Luku | 3 |
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ä 1 pohjassa
Murupolku
Osio breadcrumbs
Murupolku: etusivu, yläsivut valikon mukaan ja tämä sivu. Blogikirjoitus on uutissivun ja tapahtuma tapahtumasivun alla. Hakukoneet saavat saman polun. Sivuston asetus näyttää polun kaikilla alasivuilla; osio sijoittaa sen haluttuun kohtaan.
Asetukset (1)
| Asetus | Muokataan | Oletus |
|---|---|---|
Puhelimessa mobile | Valinta | – |
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Ylätunniste
Osio header
Sivun yläosa osiona: nimi tai logo, valikko ja painike. Sivuston oma ylävalikko valitaan Ulkoasusta (mallit alla).
Asetukset (14)
| Asetus | Muokataan | Oletus |
|---|---|---|
Logo logo | Kuva | – |
Vaihtoehtoinen teksti logoAlt | Teksti | – |
Logon leveys (px) logoWidth | Luku | – |
field_logoWidthMobile logoWidthMobile | Luku | – |
Logon korkeus (px) logoHeight | Luku | – |
Valikko menu | Valinta | Päävalikko |
Näytä kielivalitsin showLocaleSwitcher | Päällä / pois | true |
Mobiilivalikko mobileNav | Valinta | Sivupaneeli (off-canvas) |
field_headerToggleSize headerToggleSize | Luku | – |
field_mobileNavBackground mobileNavBackground | Teeman väri | – |
field_mobileNavColor mobileNavColor | Teeman väri | – |
field_mobileNavFontSize mobileNavFontSize | Luku | – |
field_mobileNavFontWeight mobileNavFontWeight | Luku | – |
field_mobileNavItemHeight mobileNavItemHeight | Luku | – |
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Tiedotepalkki
Osio announcement
Tiedotepalkki sivun yläreunassa: poikkeusaukiolot, tarjous tai tärkeä uutinen, halutessa suljettavana.
Tyylit (3)
Valitse tyyli, niin esimerkki yllä vaihtuu siihen. Sisältö pysyy samana, vain ulkoasu vaihtuu.
Asetukset (8)
| Asetus | Muokataan | Oletus |
|---|---|---|
Teksti text | Teksti | Tiedote |
Linkin teksti linkLabel | Teksti | – |
Linkki linkUrl | Linkki | – |
Kuvake icon | Kuvake | – |
Tyyli variant | Valinta | Korostusväri |
Kävijä voi sulkea dismissible | Päällä / pois | false |
Lisää tiedotteita more | Pitkä teksti | – |
Vaihda tiedote itsestään rotate | Valinta | – |
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 15 pohjassa
Kelluva toimintopainike
Osio floatingCta
Kelluva toimintopainike, joka pysyy näkyvissä vierittäessä: Varaa, Soita tai Tilaa.
Asetukset (4)
| Asetus | Muokataan | Oletus |
|---|---|---|
Teksti label | Teksti | Varaa |
Osoite url | Linkki | /varaa |
Puhelin phone | Teksti | – |
Piilota puhelimessa hideOnPhone | Päällä / pois | false |
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 2 pohjassa
Takaisin ylös -painike
Osio scrollTop
Takaisin ylös -painike, joka ilmestyy pitkällä sivulla.
Asetukset (2)
| Asetus | Muokataan | Oletus |
|---|---|---|
Painikkeen nimi ruudunlukijalle label | Teksti | Takaisin sivun alkuun |
Kulma side | Valinta | Oikea alakulma |
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Kelluva yhteydenottopainike (WhatsApp)
Osio Kokeiltava contactButton
Kelluva yhteydenottopainike: WhatsApp, puhelu tai sähköposti yhdellä painalluksella.
Asetukset (7)
| Asetus | Muokataan | Oletus |
|---|---|---|
Painikkeen teksti label | Teksti | Ota yhteyttä |
WhatsApp-numero maatunnuksella (esim. +358 40…) whatsapp | Teksti | – |
Valmiiksi kirjoitettu viesti message | Teksti | Hei! Minulla olisi kysymys. |
Puhelin phone | Teksti | – |
Käytä sivuston puhelinnumeroa useSitePhone | Päällä / pois | – |
Sähköposti email | Teksti | info@esimerkkiyritys.example |
Kulma side | Valinta | Vasen alakulma |
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Evästeseloste (taulukko)
Osio cookiePolicy
Evästeseloste: taulukko, joka täyttyy sivuston käyttämistä palveluista ja evästeistä itsestään.
Asetukset (2)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | – |
Sisältö intro | Muotoiltu 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.
Sivustohaku
Osio Kokeiltava siteSearch
Sivustohaku: hakukenttä ja tulokset sivuston sivuista, uutisista ja tapahtumista.
Asetukset (4)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | – |
Ohjeteksti kentässä placeholder | Teksti | – |
Painikkeen teksti buttonLabel | Teksti | – |
Näytä tulokset tällä sivulla showResults | 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.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Ilmoitukset
Osio Kokeiltava pushNotices
Ilmoitukset: kävijä voi tilata selaimeen tai puhelimeen ilmoituksen uusista tapahtumista ja uutisista.
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 | Kortti |
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ä 3 pohjassa
Kirjaudu tai liity
Osio Kokeiltava accessGate
Kirjaudu tai liity: jäsenille tarkoitettu sisältö näkyy vasta kirjautuneelle, muille tarjotaan liittymistä.
Asetukset (4)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko heading | Teksti | Vain jäsenille |
Esittely intro | Muotoiltu teksti | – |
Kehotteen teksti lead | Teksti | – |
Kenelle sisältö on audience | Valinta | Vain jäsenille |
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.
Ylävalikko: Klassinen
Ylävalikko classic
Nimi vasemmalla, valikko keskellä, painike oikealla
Yleisin malli: nimi tai logo vasemmalla, valikko keskellä ja toimintopainike oikealla. Puhelimella valikko aukeaa paneelina.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 48 pohjassa
Kaikki 48 pohjaa
- Padel-halli
- Tennishalli
- Beach volley -halli
- Pienhotelli
- Elämyspalvelut
- Välinevuokraus
- Verkkokauppa
- Kuntosali
- Personal trainer
- Vaaliehdokas
- Juhlatila
- Autokoulu
- Autopesula
- Vaihtoautoliike
- Autovuokraamo
- Urheilija
- Kirjailija
- Kirjailijaseura ja klassikko
- Kurssikeskus ja koulutusyritys
- Pianokoulu ja soitintunnit
- Musiikki- ja tanssikoulu
- Muusikko ja bändi
- Sisustusarkkitehti
- Somevaikuttaja ja sisällöntuottaja
- Sähköasennus
- Rakennus- ja remonttiyritys
- Maanrakennus ja infra
- Siivouspalvelu
- Konsultti ja valmentaja
- Asiantuntijatoimisto
- Suunnittelutoimisto
- Mainos- ja viestintätoimisto
- Ohjelmistotalo ja konsultointi
- Henkilöstöpalvelu
- Kiinteistönvälitys
- Tilitoimisto
- Sisustus- ja lahjakauppa
- Erikoisliike
- Valmistaja ja tukku
- Maalari, katto, lattia ja puuseppä
- Kirpputori
- Nuohooja
- Kortti- ja maksusovellus
- Kiipeilyhalli (B)
- Tilaketju
- Muotoilu, graafikko ja video
- Kääntäjä ja käännöstoimisto
- Vakuutusasiamies
Ylävalikko: Keskitetty
Ylävalikko centered
Nimi keskellä, valikko omalla rivillään
Nimi keskellä ja valikko omalla rivillään sen alla; sopii kahvilalle, juhlille ja kirjailijalle.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Ylävalikko: Kuvan päällä
Ylävalikko overlay
Läpinäkyvä ison kuvan päällä, kiinteä vierittäessä
Läpinäkyvä palkki ison kuvan päällä, joka muuttuu kiinteäksi vierittäessä.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Ylävalikko: Kompakti
Ylävalikko compact
Matala palkki, valikko pyöreänä nauhana
Matala palkki, jossa valikko on pyöreänä nauhana: paljon tilaa sisällölle.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Ylävalikko: Kaksirivinen
Ylävalikko topbar
Ylärivillä aukioloajat, puhelin ja some
Kaksirivinen: ylärivillä aukioloajat, puhelin ja some, alla nimi ja valikko.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 22 pohjassa
Kaikki 22 pohjaa
- Autokorjaamo
- Rengasliike ja rengashotelli
- Katsastusasema
- Kolarikorjaamo
- Hinauspalvelu
- Taksi
- Maatila ja suoramyynti
- Kuvaajan hakemisto
- Fysioterapia: varaus ensin
- Kuljetus ja logistiikka
- Putki- ja LVI-liike
- Kiinteistöhuolto
- Lakitoimisto
- IT-tuki pk-yrityksille
- Hammaslääkäri
- Fysioterapia ja terapia
- Eläinlääkäri
- Polkupyöräkauppa
- Lähikauppa ja ruokakauppa
- Rauta- ja maatalouskauppa
- Hoivakoti ja päiväkoti
- Apteekki
Ylävalikko: Valikkopainike
Ylävalikko drawer
Kaikki sivut avautuvassa paneelissa
Valikkopainike: kaikki sivut avautuvat paneeliin; sopii, kun sivuja on paljon.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 5 pohjassa
Alatunniste: palstat
Alatunniste columns
Palstat: yhteystiedot, valikko, aukioloajat ja some omissa palstoissaan.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 94 pohjassa
- Padel-halli
- Tennishalli
- Beach volley -halli
- Jooga- tai pilatesstudio
- Hieronta tai hoitola
- Parturi tai kampaamo
Kaikki 94 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
- Kuvaajan hakemisto
- Sisustusarkkitehti
- Fysioterapia: varaus ensin
- 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ö
- Säätiö
- 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
Alatunniste: pelkistetty
Alatunniste minimal
Pelkistetty: yksi rivi nimeä, linkkejä ja tekijänoikeutta.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Alatunniste: keskitetty
Alatunniste centered
Keskitetty: nimi, linkit ja some keskitettyinä allekkain.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Alatunniste: pinottu
Alatunniste stacked
Pinottu: isot yhteystiedot ensin, valikko ja oikeudelliset linkit niiden alla.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.