Osiot & asettelut -lohkot

Tämä ryhmä sisältää sivun rakenteelliset osiot — ne ovat usein sivuston vaikuttavimpia visuaalisia osia, kuten yläosan hero-banneri, esittelytekstit ja toimintakehotukset, jotka ohjaavat kävijää toimintaan.

Hero-osio

Iso bannerinomainen osio, joka tulee yleensä sivun yläosaan. Sisältää suuren otsikon, mahdollisen alaotsikon, taustakuvan ja painikkeen.

Kentät:

• Otsikko (pakollinen) — iso pääotsikko, esim. "Tervetuloa kauppaamme"
• Alaotsikko (valinnainen) — kuvaileva teksti otsikon alle
• CTA-painikkeen teksti (valinnainen) — esim. "Tutustu tuotteisiin"
• CTA-painikkeen linkki (valinnainen) — minne painike vie, esim. /products
• Taustakuva (pakollinen) — kuva, joka peittää koko hero-alueen taustan. Suositus: 1920×1080 pikseliä.

Vinkki: Valitse taustakuva, joka toimii myös tekstillä peitettynä — vältä kuvia, joissa on liikaa yksityiskohtia tärkeissä kohdissa. Päähuomio kuuluu otsikolle.

Kuva ja teksti

Klassinen "kahden palstan" lohko: kuva toisella puolella ja teksti toisella. Sopii esimerkiksi palvelun, tarinan, henkilön tai filosofian esittelyyn.

Kentät:

• Otsikko (valinnainen)
• Kuvaus — muotoiltu teksti (otsikot, lihavointi, listat, linkit)
• Kuva (pakollinen) — pääkuva
• Kuvan sijainti — Vasen tai Oikea (ohjaa, näkyykö kuva tekstin vasemmalla vai oikealla puolella)

Vinkki: Vaihtele kuvan sijaintia, jos sivulla on useita peräkkäisiä Kuva ja teksti -lohkoja — vasen, oikea, vasen — niin sivu näyttää eläväiseltä eikä jäykältä.

Toimintakehotus (CTA)

Toimintakehotus eli CTA-lohko ohjaa kävijää toimimaan. Tyypillisesti otsikko, kuvaus ja enintään kaksi painiketta, joista pääpainike vie tärkeimpään toimintoon ja toissijainen tarjoaa vaihtoehdon.

Kentät:

• Otsikko (valinnainen)
• Kuvaus (valinnainen)
• Ensisijainen painike — teksti ja linkki — esim. "Selaa kaikkia tuotteita" ja /products
• Toissijainen painike — teksti ja linkki — esim. "Ota yhteyttä" ja /contact

Vinkki: Käytä CTA:ta sivun lopussa, joko erottavana osiona tai juuri ennen alatunnistetta. Kävijä tarvitsee usein selvän "mihin klikkaan seuraavaksi" -ohjeen.

Esittelykategoria

Esittelee kolme tuotekategoriaa rinnakkain — jokaisella oma kuva, otsikko, kuvaus ja linkki kategoriasivulle. Sopii etusivulle ohjaamaan kävijöitä eri tuoteryhmiin.

Kentät:

• Osion otsikko (pakollinen) — esim. "Tutustu kategorioihin"
• Osion kuvaus (pakollinen) — lyhyt kuvaus
• 3 esittelykohdetta, jokaisella:
  • Otsikko (pakollinen) — kategorian nimi
  • Kuvaus (pakollinen) — lyhyt kuvaus
  • Kategoria (pakollinen) — valitse kauppasi kategoria pudotusvalikosta. Linkki ohjaa tähän kategoriaan automaattisesti.
  • Kuva (pakollinen) — kategoriaa kuvaava kuva

Vinkki: Valitse kolme kauppasi tärkeintä tai parhaiten myyvää kategoriaa. Käytä kuvina edustavia tuotekuvia tai mielikuvakuvia, jotka houkuttelevat klikkaamaan.

Liittyvät aiheet

• Sisällön muokkaaminen — käytännön työkulku
• Teksti & sisältö -lohkot — tekstilohkot
• Kuvat & media -lohkot — kuvalohkot
• Kauppa & tiedot -lohkot — tuotteet, aukioloajat, taulukot