Lohkoilla taittamisen periaatteita tavalliselle sisällöntuottajalle

25.3.2026

Virpi Blom

Katso YouTube-video ”Mitä verkkosivujen sisällöntuottajan pitää ymmärtää lohkoilla taittamisesta?”-webinaarista

Webinaarin näkökulma: sivupohjista lohkoilla tapahtuvaan taittoon

Vielä kymmenen vuotta sitten sisällöntuottajilla on ollut käytössään suhteellisen tiukat sivupohjat, joiden taitto oli valmiiksi määritelty.

Nykyiset lohkoihin (blocks) perustuvat julkaisujärjestelmät tarjoavat sisällöntuottajille paljon enemmän vapauksia taittaa verkkosivuja ja niiden elementtien asettelua. Tunnin mittaisessa webinaarissamme käsiteltiin tällaista lohkoilla taittamista sisällöntuottajan näkökulmasta.

Koska WordPress on kaikkein yleisin ja laajimmin tunnettu julkaisujärjestelmä, webinaarin esimerkit ja kuvakaappaukset ovat sen Gutenberg-editorista. Käsitellyt periaatteet ovat kuitenkin monin osin sovellettavissa myös muihin lohkopohjaisiin julkaisujärjestelmiin (kuten Drupal, Liferay tai Sharepoint).

Tähän artikkeliin on tiivistetty yhteenveto webinaarissa käsitellyistä asioista. Otsikoihin yhdistetyt numerot viittaavat tallennevideon aikaleimaan.

Mikä lohko on? (4:10)

Lohkoista puhumista hankaloittaa se, että mitä tahansa verkkosivulla näkyvää elementtiä tai elementtityyppiä tai elementtien ryhmää voidaan nimittää yhtälailla lohkoksi tai lohkomalliksi. Sivulla näkyviä elementtejä voidaan toteuttaa monin erilaisin ratkaisuin: tietty, samalta näyttävä elementti voi olla toisella sivustolla rakennettu eri tavoin kuin toisella.

Yleisesti ottaen erilaisia lohkoja on moneen lähtöön:

1. On yksinkertaisia lohkoja, joilla verkkosivulle syötetään sisältöä: otsikoita, tekstikappaleita, kuvia, luetteloja, nappeja jne.
2. On taittolohkoja, joilla muovataan sivun asettelua ja sisältöelementtien keskinäisiä suhteita: kuvien ja tekstien asettaminen rinnakkain palstoiksi, tekstikappaleiden erottaminen toisistaan, taulukko, tekstikappaleiden väliin jäävä tyhjä väli jne.
3. On toiminnallisia lohkoja, joihin sisältyy interaktioita, kuten ”haitari” eli laajennuspaneeli.
4. On dynaamisia lohkoja, joilla sivulle voidaan asettaa automaattisesti tuotavaa sisältöä: lohko voi ”noutaa” esimerkiksi aiheeseen liittyvät uutisotsikot, noston uusimmasta aiheeseen liittyvästä videosta tai sivulle valitun kirjoittajan esittelytiedot.
5. On lohkomalleja (patterns), joille on valmiiksi määritelty tiettyyn lohkoryhmään kuuluvien lohkojen keskinäinen asettelu ja ulkonäkö: esimerkiksi ”käyntikortin” tai ”etusivunostojen” tai ”kuvagallerian” tapainen ryhmä elementtejä muodostaa lohkomallin.
6. On monistettuja lohkomalleja: jokin lohkomalli voidaan asettaa täysin samansisältöisenä useammalle sivulle, ja sen sisältöjä päivitetään vain yhdessä keskitetyssä paikassa.
7. On ”koodattuja” lohkoja, jotka sisältävät ohjelmallista ”älyä” ja käyttäytyvät eri sivuilla eri tavoin, riippuen siitä, mitä parametrejä lohkolle on annettu, tai mille sivulle se on asetettu.

Osa lohkoista on julkaisujärjestelmässä vakioituna tuoteominaisuutena, osa parametrisoidaan tai räätälöidään asiakasta varten. Kaikkiin lohkoihin tuotetaan asiakkaan brändin mukainen ulkoasu ja taitto (värit, fontit, tekstikoot, marginaalit, asettelut jne.) tyylitiedostoilla, jotka tekninen toteuttaja määrittelee.

Lohkon variaatiot

Kustakin lohkosta voidaan tyylitellä erinäköisiä vaihtoehtoja sen ulkoasulle. Näitä valittavissa olevia tyylivaihtoehtoja lohkolle sanotaan tyypillisesti variaatioiksi. Vaikkapa tavallisen tekstikappaleen lohko voi muuntua ”korostetuksi tekstilaatikoksi”, jos sen taustaväri vaihdetaan valkoisesta värilliseksi.

Verkkosivun koostaminen lohkoista (17:00)

Miten sisällöntuottaja muotoilee verkkosivun lohkoja hyödyntämällä? Sisällöntuottaja asettelee sivulle allekkain sellaisia lohkoja, joita haluaa sivullaan näyttää, ja syöttää kuhunkin lohkoon ne materiaalit (tekstit, kuvat jne.) sekä parametrisoinnit (linkit, variaatiot, metatiedot jne.), joista lohko muodostuu.

Lohkoja on (tavallisesti) helppoa raahata uuteen järjestykseen, ja lohkojen väliin voidaan luoda uusia lohkoja, tai lohkoja voidaan vapaasti poistaa sivulta. Näin sisällöntuottajalla on helppokäyttöiset välineet, joilla vaikuttaa verkkosivun taittoon, asetteluun ja ulkoasuun.

Lohkovalikoiman suunnittelun ja rajaamisen kysymyksiä

• Miten suuri valikoima lohkoja sisällöntuottajille näytetään?
• Tajuaako tavallinen rivisisällöntuottaja, mitä lohkoa hänen pitäisi käyttää minkäkinlaisen sisällön näyttämiseen? Onko lohkot nimetty ja ryhmitelty ymmärrettävästi?
• Pitäisikö työkalusta karsia pois sellaiset vakio-ominaisuudet, joita sisällöntuottajien ei haluta käyttävän? Vai pidetäänkö ne julkaisujärjestelmässä, mutta sisällöntuottajat opetetaan sisäisen ohjeistuksen avulla jättämään ne käyttämättä? Yritetäänkö käyttöoikeuksien rajauksin kätkeä jotkin lohkot rivisisällöntuottajilta näkymättömiin?
• Miten vapaasti sisällöntuottaja saa valita lohkon parametrejä? Saako hän vaikkapa valita käyttämänsä värit runsaasta väripaletista, vai onko lohkosta tarjolla muutama valmis värivariaatio?
• Paljonko variaatioita on tarpeeksi? Pitäisikö variaatioita rakentaa mahdollisimman paljon tulevaisuudenkin tarpeisiin varautumiseksi? Vai minimaalinen, helposti ymmärrettävä perusvalikoima, jota laajennetaan myöhemmin vain tarpeen mukaan?

Hyvän perussivun muotoilu lohkoista (32:15)

Kun sisällöntuottaja voi lohkoeditorin välineillä käyttää luovuuttaan siihen, millaisen sivun muotoilee, on ilmeisenä vaarana sillisalaatin syntyminen: tavallinen rivisisällöntuottaja saattaa pahimmassa tapauksessa muotoilla työkaluillaan täysin sekavan, hankalasti hahmottuvan, huonosti luettavan ja visuaalisesti kömpelön sivun.

Niinpä jokaiselle sisällöntuottajalle pitäisi antaa koulutusta, tukea ja selkeä pelikirja siitä, millä tavoin taittolohkoja käytetään sivuston yhdenmukaisen konseptin ja ulkoasun säilyttämiseksi.

Tavallisella sisältösivulla olisi tärkeää pitää mielessä ne rauhallisen taiton periaatteet, joilla lukijan silmää ohjataan löytämään sivulta sen olennaisin informaatio:

• Runsailla väliotsikoilla tekstimassa paloitellaan osiksi, jotka on helppoa hahmottaa silmäilevässä lukutavassa.
• Pitkät sivut jaetaan osioihin, joiden vaihtuminen toiseksi esitetään vaikkapa tyhjällä tilalla, erotinmerkillä tai taustavärin vaihtumisella.
• Luetelmilla ja lihavoinneilla nostetaan tekstimassan joukosta esiin yksittäisiä teemasanoja.
• Korostettavat tekstikappaleet nostetaan esiin esimerkiksi taustaväriä muuttamalla tai niiden tekstikokoa kasvattamalla.
• Kuvaa tai erityistä taittoelementtiä käytetään ohjaamaan lukijan katse haluttuun, korostettuun tekstikohtaan.
• Linkkejä käytetään tekstikappaleiden lomassa tai lopussa ohjaamaan lisäsisältöihin esitellystä aiheesta.
• Korostettavat linkit, joihin käyttäjät halutaan erityisesti ohjata, esitetään linkkinappeina eli painikkeina (CTA eli call-to-action).
• Taittolohkoja hyödynnetään silloin, kun niiden muotokieli aidosti tukee esitettyä viestiä.
• Sivun lopussa esitetään yhdenmukaisella tavalla ohjaukset ja suositukset niistä sivuista, joita käyttäjän toivotaan lukevan seuraavaksi.

Visuaalisesti rikkaat sivut kannattaa luoda mallista (37:00)

Tekstipainotteinen, ”tavallinen” sisältösivu sisältää tavallisesti vain vähäisesti monipuolisia tai visuaalisesti rikkaita taittolohkoja. Niinpä niiden luominen tapahtuu helposti copy-pastella, jolla valmiin käsikirjoituksen tekstit kopioidaan verkkosivulle, ja väliin tarvittavat vähäiset lohkot lisätään ja parametrisoidaan yksi kerrallaan.

Mutta kun verkkosivulla korostuu visuaalisuus, ja kun sillä halutaan näyttää ulkoasultaan vaikuttavia, rikkaita, monimuotoisia lohkoja rytmikkäästi taitettuina, on sivun koostaminen lohkoja paikalleen raahaamalla turhan työlästä.

Valmiin sivun kopiointi pohjaksi (38:00)

Kun sisällöntuottaja lähtee luomaan myynti- ja markkinointitarkoituksessa visuaalisesti hyvin rikasta sivua, hän ottaa tyypillisesti lähtökohdakseen valmiin pohjan. Jonkun aiemmin julkaistun sivun lohkot ja lohkoryhmät voidaan kopioida oman sivun pohjaksi, ja näin syntyneeseen malliin ryhdytään vain vaihtamaan ”materiaalit” toisiksi:

• kuvien sijaan vaihdetaan oman sivun kuvat
• tekstien paikalle kopioidaan oman sivun tekstit
• elementtien värivariaatio voidaan vaihtaa
• dynaamisten elementtien parametrit voidaan vaihtaa.

Tällainen lohkoeditorin hyödyntäminen antaa sisällöntuotantoon samantyyppistä tehoa kuin aikaisemmat sivupohjat: sivut noudattavat samankaltaisia, brändinmukaisia ja loppukäyttäjälle opittavia taittoperiaatteita, ja ne on helppoa saada aikaan, mutta samalla niitä voidaan sovittaa joustavasti omien sisältöjen tarpeisiin soveltaen.

Jos mallipohjassa jokin esitystapa ei toimi omien sisältöjen esittämiseen, voidaan lohkoelementti vaihtaa suhteellisen helposti ja joustavasti toiseen elementtiin, joka istuu paremmin omiin tarpeisiin.

Hyvä kysymys on tietysti se, saako sisällöntuottaja valita ihan minkä tahansa sisältöelementin, joka tuntuu istuvan omiin tarpeisiin? Alkaako innostuksensa siivittämä sisällöntuottaja sekoitella sillisalaattia?

Kun sisällöntuottaja ottaa pohjakseen jonkin toisen sivun, on riskinä myös se, että muoto alkaa ohjata sisältöä. Sen sijaan että sisällöntuottaja ajattelisi ensisijaisesti omaa viestiään ja etsisi esitystavat sen muotoiluun, hän ryhtyykin mekaanisesti ”täyttämään sivupohjaa” omilla teksteillään. Tällaiseenkin tapaukseen sisällöntuottajille pitäisi antaa tarpeeksi ohjeistusta siihen, millaisia malleja, taittotapoja ja lohkoja kannattaisi käyttää oman sanottavansa muotoiluun.

Lohkomalli voi olla malli kokonaisesta sivusta (47:50)

Rikkaasti taitetun markkinointisivun sisällöntuotanto sujuu vaivattomasti myös silloin, kun sisällöntuottaja voi koostaa sivunsa muutamasta lohkomallista, joista kukin kattaa jonkin monipuolisen taittomallin esiteltäville sisällöille.

Lohkomalli voi myös olla kokonainen sivu, joka koostuu tiettyyn järjestykseen ladotuista lohkomalleista.

Lohkomalli (tai ”sivumalli”) on tässä mielessä yhtä toimiva kuin aikaisempien julkaisujärjestelmien sivupohjat. Sisällöntuottaja voi ottaa sen oman verkkosivunsa lähtökohdaksi, ja siitä löytyvät selkeät paikat erityyppisille sisältömateriaaleille, jotka sisällöntuottaja sivulle asettaa.

Aiempiin sivupohjiin verrattuna sivumalleissa on suurena etuna se, että malli ei ole kiveen hakattu. Sisällöntuottaja pääsee hyödyntämään mallia, mutta se ei sido käsiä: mallia voi soveltaa sivukohtaisesti, sen elementtejä voi jättää pois tai muuttaa toiseksi tai tuoda lisää.

Sivumallit auttavat rakentamaan yhdenmukaista, brändikäsikirjaa noudattavaa verkkosivustoa, mutta sivumallia voi soveltaa joustavasti. Ja malleja on helppoa luoda itsekin uusia tarpeen mukaan.

Sivun taitto suunnitellaan viesti, ei ulkoasu, edellä (51:05)

Luotaessa lohkomalleja sisällöntuottajille ei tärkein kysymys olekaan se, minkä näköisiä elementtejä verkkosivuille pitäisi pystyä asettamaan, vaan millaisia viestejä meidän pitäisi pystyä välittämään?

Hyvä lohkomalli jollekin brändinmukaisesti taitetulle sivulle syntyy sen ymmärtämisestä, mitä tällä sivulla halutaan sanoa! Valmiiksi suunniteltu sivumalli voi olla vaikkapa palvelusivu, tuotesivu, yksikön esittelysivu, asiantuntija-artikkeli tai tapahtuman esittelysivu, ja tämän sivun lohkoelementtien suunnittelu lähtee liikkeelle sivutyypin viestinnällisen konseptin linjaamisesta.

Sivutyypistä pitää suunnitella yhteismitallinen idea siitä, mitä viestejä sivu kertoo, mikä niiden tärkeysjärjestys on, ja miten viestit muotoillaan siten, että niiden esitystapa ja interaktiot tukevat ihanteellisesti viestin perillemenoa.

Ja tuota ihanteellista muotoilua ei voida suunnitella, jos ei tiedetä, keitä ovat ne käyttäjät ja kohderyhmät, joita varten sivun viesti on suunnattu. Ja kaikista tärkeintähän on tunnistaa se, miten haluamme sivullamme muuttaa noita kohderyhmiä: mitä haluamme heidän tekevän tämän sivun lukemisen jälkeen? Mikä on sivun tehtävä ja tavoite?

Miten sisällöntuottaja onnistuu tehtävässään? (55:00)

Sisällöntuottajat tulisi saada omaksumaan toimiva prosessi verkkosivun sisältöjen muotoilemiseksi: lohkoeditorin taittomahdollisuuksien hyödyntämisessä kyse ei niinkään ole sivujen ”taittamisesta”, vaan niiden funktion toteuttamisesta.

Ihan samasta käsikirjoitustekstistä voi tuottaa joko tekstipainotteisen tietosivun, rakenteisen sabloonan mukaan taitetun, informaatiota ja visuaalisuutta yhdistelevän sivun, tai sitten erityisen näyttävän, myynti- ja markkinointihenkisen esitesivun.

Yksittäinen sisällöntuottaja ei voi itse päättää sivunsa funktiota, tavoitetta tai kohderyhmää, vaan tämähän jalostuu koko verkkosivuston tavoitteista, jotka ovat palveluntarjoajan strategista suunnittelutyötä. Mutta sisällöntuottajan pitää ymmärtää ja sisäistää tuo tavoite, jotta hän voi luoda aiheestaan käsikirjoituksen, joka pyrkii samaan yhteiseen päämäärään. Ja jotta hän voi taittaa sisällöistään oikeanlaisen sivun, joka noudattaa yhteistä ”sisältöreseptiä”.

Tästä syystä lohkoista ja lohkomalleista rakennettavan verkkosivuston suunnittelu tapahtuu sekä johtotasolla että ruohonjuuritasolla.

Johtotason on huolehdittava linjauksista, ohjeistamisesta ja valvonnasta (59:20)

Viestintävastaavien on johtotasolla huolehdittava siitä, että verkkosivuille synnytetään palvelu- ja sisältökonseptit, sivutyyppien typologiat, sisältöreseptit sivutyypeille, sivumallit sivutyypeille sekä pelikirja tai selkeä ohjeistus sivumallien ja lohkomallien käyttämisestä sivujen luomiseksi. Mutta näistä johtotason linjauksista ei tule hyviä, jos niiden suunnitteluun ei osallisteta sisällöntuottajia.

Johtotason on tuettava ja opastettava sisällöntuottajia, kun nämä huolehtivat verkkosivujen luomisesta, tuottamisesta, muotoilemisesta ja päivittämisestä. Ja johtotason on myös valvottava ruohonjuuritasolla syntyvää työtä: vapaasti käytettävillä taittotyökaluilla saattaa syntyä sekavia, brändin vastaisia ja huonosti hahmottuvia sivuja, jotka eivät noudata eivätkä tue yhteisiä periaatteita. Tällöin jostain on löydyttävä valtuutettu ”poliisi”, jolla on mandaatti käydä muokkaamassa, siivoamassa ja korjaamassa verkkopalvelusta löytyviä sivuja.

Lohkopohjaisen taittamisen mahdollisuudet ja uhat

Kaikkineen julkaisujärjestelmien lohkoeditorit antavat sisällöntuottajille kauan odotetut työkalut verkkosivujen asettelun ja ulkoasun muovaamiseen. Näiden vapauksien myötä lisääntyvät myös riskit siitä, että sivuista tulee kirjavia ja hallitsemattomia: eheä konsepti on ehkä vaikeampaa pitää kasassa.

Lohkomaailmassa tarvitaan enemmän työtä mallien harkitsemiseen, suunnittelemiseen, jalkauttamiseen ja ohjeistamiseen.

Kun ”sivupohjat” tai ”leiskat” eivät enää ole sisällöntuotantoa sitovia, tekniseltä toteuttajakumppanilta suoraan tulevia niukkoja vaihtoehtoja, vaan yhteissuunnittelussa luotavien monikäyttöisten elementtien valtava varasto, on kaikenlaisissa rooleissa opeteltava uusia taitoja ja ymmärrettävä verkkosivujen designiin liittyviä kysymyksiä!

PS. Sinua voisi kiinnostaa tulossa oleva ilmainen webinaarimme: Askelmerkit tietojärjestelmäuudistukseen: isot päätökset, reittivaihtoehdot ja määrittelyn startti (13.5.2026 klo 10:00). Ilmoittaudu webinaariin

Lue palveluistamme Pyydä tarjous

• Jatkuvan kehityksen tuki
• Markkinoinnin verkkopalvelut
• Palvelumuotoilu ja konseptisuunnittelu
• Sisältöjen suunnittelu
• Tietosivustot
• Webinaarit ja koulutukset