Lohkojen lisääminen

Artikkeli ja sivu koostuvat lohkoista. Kun olet editoimassa sivua tai artikkelia, lisää lohko klikkaamalla + -merkkiä vasemmassa ylälaidassa. Voit myös lisätä lohkon toisten lohkojen väliin. Lisää lohko -painike tulee näkyviin osoittamalla hiirtä lohkojen välissä.

Lohkotyypit

Lohkot artikkeleihin (vaalealla pohjalla):

  • Otsikko
  • Kappale
  • Kuva
  • Lainaus
  • Lista
  • Klassinen (wysiwyg-editori)

Lohkot sivuille (harmaalla pohjalla):

Huom! Kaikki tässä dokumentissa olevat esimerkkilohkot löytyvät sivulta https://www.rsult.fi/testisivu/


Lohkojen kuvat

Lohkoihin lisättävät kuvat skaalautuvat automaattisesti, mutta hyvä on valita käytettäväksi resoluutioltaan aina reilusti lohkoa isompi kuva. Kannattaa kuitenkin välttää isojen esim. järjestelmäkameroiden alkuperäiskokoisten kuvien käyttöä (lukuunottamatta niitä lohkoja, joiden kuvat skaalatuvat automaattisesti), koska se hidastaa sivun latauaikaa käyttäjillä. Erityisesti huomiota kannattaa käyttää syvättyjen (PNG) kuvien resoluutiossa, koska ne ovat tiedostokooltaan muutenkin isompia.

Jokaisen lohko alla on myös lisätietoja siinä käytettävistä kuvista. Annetut ohjeet ovat suosituksia. Istuvuus kannattaa yleensä tarkistaa skaalaamalla selaimen koko eri resoluutioille.


Lohkojen muokkaus

Kun olet klikannut lisätäksesi lohkon, se näkyy oletuksena esikatselumoodissa (Preview). Harmaalla pohjalla lisättäviin lohkoihin ei ole saatavilla esikatselua. Voit siirtyä muokkausmoodin (Edit) klikkaamalla ensin lohkoa, ja sitten klikkaamalla kynän kuvaa.


Hero

Tyyppi:
– Lomitettu – Tekstiosa (pääotsikko ja alaotsikko) lomittuu kuvan kanssa hieman päällekkäin.
– Kiinteä – Tekstiosa ja kuvaosa vievät kummatkin noin puolet vaakasuuntaisesta alasta. Kuva ja teksti ei mene koskaan päällekäin.

Tausta:
– Vaaleansininen tausta
– Tummansininen tausta
– Vihreä tausta
– Violetti tausta
– Punainen tausta
– Sininen tausta (gradient)

Kuva:
– Lomitetussa: Näytettävän kuvan korkeus on 500px ja kuvasuhde voi olla mikä tahansa. Huomaa, että mitä leveämpi kuva, sitä enemmän se menee oikean puolen tekstin päälle. Suositus 1200×800 px syvätty kuva, vaakaresoluutio voi olla isompi tai pienempi.
– Kiinteässä: Näytettävän alueen koko on 600×500 px. Kuva skaalataan korkeuden mukaan, joten huomaa että kuvasuhteeltaan leveä kuva saattaa leikkaantua oikealta. Suositus 960×800 px, vaakaresoluutio voi olla pienempikin.

Taustavärit on valittu Rsult graafisen ohjeistuksen värien mukaan.

Esimerkki Hero -lohkosta

Kolme

Tyyppi:
– Valkoinen tausta kuvilla – valitse haluamasi kolme kuvaa
– Tummansininen tausta palloilla
– Tummansininen tausta renkailla
– Vaaleansininen tausta nuolilla ja renkailla

Kuvat:
Tarkoitettu lähinnä ikoneille. Kuvat skaalautuvat 90px leveyteen. Suositus 180×180 px syvätty kuva.

Esimerkki Kolme -lohkosta

Kolme plus

Tyyppi:
– Valitut kuvat – Näytetään alle määritellyt kuvat linkkeineen.
– Blogiartikkelit – Haetaan automaattisesti kuvat ja linkit uusimmista artikkeleista.
– Blogiartikkelit – Kuten edellä, mutta näytetään myös hakukenttä, jolla artikkeleita voi suodattaa.

Jos lisättyjä kuvia (tai artikkeleita) on enemmän kuin kuusi, on sen ylittävät piilotettuina sivulla, ja näytetään ”Lisää-teksti” -kentän painike, jota klikkaamalla ladataan seuraavat.

Kuvat:
Kuvista valitaan automaattisesti 450px leveä versio ja skaalataan 16:9 suhteeseen. Valittavia kuvia ei tarvitse pienentää erikseen. Suositeltu kuvasuhde 16:9 (tai esim. 3:2) ja vähintään 450px leveä. Suositus 800x450px

Esimerkki Kolme+ -lohkosta

20 riviä + kuva

Vaaleansinisellä taustalla, kuva vasemmalla, teksti oikealla.

Kuva:
Kuva korkeus skaalautuu syötettävän tekstin korkeuden mukaan ja leveys skaalautuu käyttäjän selainikkunan koon mukaan. Kuvista valitaan automaattisesti 1100px leveä versio. Valittavia kuvia ei tarvitse pienentää erikseen. Tätä osiota erityisesti kannattaa testata itse selaimen ikkunan kokoa skaalamalla, jotta mahdollisesti tärkeä osa kuvasta ei leikkaannu pois joillain resoluutioilla. Suositeltu vähintään 1100px leveä.

Esimerkki 20 riviä + kuva -lohkosta

Kartta

Tummansinisellä taustalla, teksti vasemmalla, kartta oikealla.

Tekstiä ennen on kiinteä kuva sijaintimerkistä.

Kartan sijainti on kiinteästi määritelty koodissa.

Esimerkki Kartta -lohkosta

Palaute

Vihreällä taustalla, teksti vasemmalla, lomake oikealla.

Palaute-lomakkeen sisältö on kiinteästi määritelty koodissa.

Palautteen vastaanottajan sähköpostiosoite on määriteltävissä Ohjauspaneelin Rsult – Asetukset valikossa.

Kuva:
Kuva näytetään ennen teksiosaa. Tarkoitettu lähinnä ikonille. Kuva skaalautuu 90px leveyteen. Suositus 180×180 px syvätty kuva.

Esimerkki Palaute -lohkosta

Henkilön tiedot

Henkilöiden yhteystietoja ja esittelyitä varten.

Kuvat:
Kuvien koko on noin 380×290 px, mutta vaihtelee riippuen selaimen ikkunan koosta. Kuvista valitaan automaattisesti 450px leveä versio ja skaalataan oikeaan kokoon. Valittavia kuvia ei tarvitse pienentää erikseen. Suositeltu vähintään 450px leveä.

Esimerkki Henkilön tiedot -lohkosta

1-n henkilöä

Kuten Henkilön tiedot -lohko, mutta hieman erilaisella asettelulla. Kuvasuhde on korkeampi ja yhteystiedot ovat vasta esittelytekstin jälkeen.

Tarkoitettu henkilöiden esittelyyn samalla sivulla Vimeo -lohkon kanssa.

Kuvat:
Kuvien koko on noin 280×280 px, kuvasuhde 1:1, mutta vaihtelee riippuen selaimen ikkunan koosta. Kuvista valitaan automaattisesti 450px leveä versio ja skaalataan oikeaan kokoon. Valittavia kuvia ei tarvitse pienentää erikseen. Suositeltu vähintään 450px leveä.

Esimerkki 1-n henkilöä -lohkosta

Vimeo

Harmaa tausta, video vasemmalla, teksti oikealla.

Huom! Syötetyssä videossa täytyy olla oikeudet sivulle upottamiseen (säädettävissä Vimeossa).

Esimerkki Vimeo -lohkosta