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.
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.
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
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ä.
Kartta
Tummansinisellä taustalla, teksti vasemmalla, kartta oikealla.
Tekstiä ennen on kiinteä kuva sijaintimerkistä.
Kartan sijainti on kiinteästi määritelty koodissa.
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.
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ä.
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ä.
Vimeo
Harmaa tausta, video vasemmalla, teksti oikealla.
Huom! Syötetyssä videossa täytyy olla oikeudet sivulle upottamiseen (säädettävissä Vimeossa).
