Sisältömallisivu

Varsinainen sivun tekstisisältö luodaan sisältöalueeseen, mihin voi lisätä myös kuvia, taulukoita, videoita ym. Sivupalkkiin voi lisätä liite- ja linkkilistoja sekä esimerkiksi yhteystietokortin. Ingressi-tekstin ylläpitoalue löytyy muokkaustilassa alimmaisena.

Automaationa enter-lyönti lisää aina uuden tekstikappaleen. Kappaleen plus-merkistä voit vaihtaa lisätyn kappaleen muotoa esim. kuvapaikaksi, otsikkotasoksi tai taulukoksi jne.

Katso myös Landing page -mallisivu sekä Landing page sivuvalikolla -mallisivu.

Ennen kun luot uuden sivun!!!

• Tarkasta, onko jo saman niminen sivu olemassa – tämä ei ole suotavaa eikä saavutettavaa!
• Tarkasta, ettei sivua suht vastaavalla sisällöllä ole jo olemassa. Jos on, tee yhteistyötä!
• Anna sivulle lyhyt ja kertova otsikko, jotta se toimii myös hyvänä valikkonimenä.
• Kiinnitä uusi sivu rakenteessa johonkin yläsivuun, näin sivu löytyy myös valikkojen kautta ja on helppoa palata murupolun kautta edelliselle sivulle.
• Jos sivulla ei ole emosivua ja sille antaa merkilleen samannimisen lyhytosoitteen, ne kumoavat toisensa, eikä kumpikaan sivu näy julkisella puolella (siis kiinnitä sivu yläsivuun!).
• Max. 9 kohdan valikko on vielä silmäiltävä, pidempien asiasisällön hahmottaminen on vaikeaa (saavutettavuus).

Muista otsikkohierarkia – tässä otsikkotaso 2

Muista saavutettavuus – käytä otsikkotasoja loogisesti. Otsikko 1:n jälkeen ei voi tulla otsikkotaso 3.

• Otsikko 1 = H1
• Otsikko 2 = H2
• Otsikko 3 = H3
• Otsikko 4 = H4
• Otsikko 5 = H5
• Otsikko 6 = H6

Otsikkotason hierarkian määrittää asiasisällön keskinäinen hierarkia. Samantasoiset eli arvoltaan rinnakkaiset asiat otsikoidaan samantasoisilla otsikkotyyleillä. Alemman tason otsikoitukappale tehdään seuraavaksi alemmalla otsikkohiearkiatyylillä jne.

Kuva (tässä käytetty otsikkotasoa 3)

Kuvan monikäyttöisyyden takia kuvituskuviin ei kannata antaa mediakirjastossa alt-tekstiä tai kuvatekstiä. Kuvateksti kannattaa lisätä vain kuviin, joilla tuodaan sivun sisältöön jotakin oleellista lisäarvoa. Esimerkiksi, jos kuva esittää jotain tiettyä tilannetta, tiettynä aikana ja siinä on henkilöitä, joiden nimet on hyvä kertoa kuvan yhteydessä.

Kun kuvalla on kuvateksti, se ei tarvitse enää erillistä alt-tekstiä tai alt-tekstin tulee olla merkittävästi eri sisältöinen kuin kuvateksti.

Kaikki oleellinen tieto tulee kertoa sivun sisällössä, kuva voi olla lisänä tai tukemassa informaatiota, mutta sisältö ei saa olla kuvainformaation varassa.

Älä käytä Galleriaa! (H4)

Kuvagalleria on toistaiseksi saavutettavuuden kannalta ongelmallinen, sitä ei kannata käyttää. Mieluummin tuodaan vaikka peräkkäin kuvia sivulle.

YouTube-videoupotus (otsikkotaso 3)

Ole hyvä ja salli kaikki evästeet nähdäksesi tämän sisällön tai katso sisältö täältä.

Anna videolle kuvaava otsikko eli title YouTubessa, sillä sitä ei saa WordPressissä lisättyä YouTube-upotukseen.

Tekstimuotoiluelementtejä (H2)

Lista (H3)

Luettelomaiset tekstin osat kannattaa muotoilla listoiksi, se helpottaa luetteloiden lukemista. Lista tehdään erottamalla jokainen listakohta enter-lyönneillä ja muuttamalla tekstin tyyli Listaksi.

• Listan voi myös muotoilla
• erottamalla tekstistä listaosuuden enter-lyönneillä
• ja muuttamalla sen tyylin listaksi
• ja sen jälkeen pilkkoa teksti enterillä useammaksi listakohdaksi.

Lainaus-elementti (H3)

”Kouvola ei ole ainoastaan kauppala. Asemalta kävellessä kaunista lehtokujaa pitkin kohoavat äkkiä eteen uljaat kivirakennukset. Meillä Suomessa lienee kaupunkeja, jotka eivät kykene tarjoamaan yhtä imponeeraavaa ja nykyaikaista näkyä. Kouvola – tulevaisuuden kaupunki –
tervehdin sinua! Sinä kuulut niihin onnellisiin paikkakuntiin, joiden historia on edessäpäin eikä takana. Ja jokainen tämän paikkakunnan asukas tekee omalla tavallaan, ehkä itse tietämättä, historiaa. Suomalaisen kauppalan romaani – ehkä se kirjoitetaan juuri täällä.”

Mika Waltari 1934

Näin luonnehti Mika Waltari vuonna 1934 nuorta kasvavaa kauppalaa.

Tekstinosto -elementti (H4)

– Olin eilen ihan fiilareissa kun herätessäni huomasin kaverin viestin, jossa oli Kouvola-meemi. Jaoin sen Kill Armanin Facebook-sivuilla ja siitä se sitten lähti kunnolla leviämään.

– Arman Alizad-

Media ja teksti -elementti (H5)

Alaotsikko taso 5 (H5)

Pienin otsikkotyyli on (H6)

Ja tämähän on sitten aika pientä, itseasiassa samaa fonttikokoa kuin leipätekstikin eli ei tyylillisesti näkevälle erotu. Melko harvoin tarvinnee otsikkotasoja näin alas. Sivulla lienee jo melkoisesti pituutta tässä vaiheessa.

Muita elementtejä (H2)

Liite-elementti (H3)

Kun lisäät liitteen sisältösivulle liite-elementillä, määritä pois näkyvistä erillinen latauspainike. Anna kertova otsikko liitteelle jo mediapankissa. Kirjoita liitelinkin loppuun sulkeisiin liitteen muoto ja koko, esimerkiksi (pdf, 20 kt).

Taulukko (H3)

Määrittele taulukolle otsikkorivi Lohko-osion työkalulla. Saat työkalut näkyviin ratas-kuvakkeesta. Aseta kursori taulukon ensimmäiselle riville ja valitse ”Otsakkeen alue”.

Käytä taulukkoa vain taulukkomuotoisen sisällön esittämiseen. Taulukkoa ei saa käyttää sisällön asetteluun eikä tyhjiä rivejä saa jättää taulukkoon.

Taulukon ensimmäisessä solussa pitää aina olla sisältöä, joka kertoo taulukon sisällöstä. Se voi olla vaikkapa taulukon nimi.

Kouvolan asukasluku	Vuosi
A2	B2
A3	B3
A4	B4
A5	B5

Lyhytkoodi eli shortcode

Lisää sivulle Shortcode-elementti ja lisää ulkoinen sisältö koodilla, esimerkiksi karttasovellus. Lisää koodiin Title lisäämällä koodiin title=”” ja hakasulkeiden sisälle sisällön kertova otsikko, sekä lisäksi tieto, jos sisältö ei ole saavutettava, esimerkiksi ”karttasovellus, ei saavutettava”.

Saavutettavat linkit

Saavutettava linkki kertoo riittävästi linkin kohteesta. Linkitetty tekstiosuus siis kertoo selvästi, mihin linkki vie. Linkki voi viedä

• sivuston sisällä toiselle sivulle (asetetaan aukeamaan samaan välilehteen)
• jollekin toiselle sivustolle (ulkoinen linkki, asetetaan aukeamaan uuteen välilehteen)
• tai se voi viedä liitetiedostoon (asetetaan aukeamaan uuteen välilehteen).

Kun linkitetään sivuston sisällä toiselle sivulle, tehdään linkitetyssä tekstiosuudessa selväksi, mitä aihetta koskevalle sivulle linkki vie. Esimerkiksi: Siisti Sitiin ilmoittautumalla osallistut arvontaan.

Kun linkitys tehdään sivuston ulkopuolelle, tulee linkkitekstissä ilmetä, minkä tahon sivustolle linkki vie. Esimerkiksi kerromme, että vaikka Poikilo-museot esittelee juuri avautuneessa näyttelyssä Kouvolan teatteritoimintaa. Edellinen linkkiteksti on jo huomattavan pitkä ja voi alkaa haitata luettavuutta näkevälle. Tekstin voisi muotoilla toisin, jotta oleelliset sanat ovat lähempänä toisiiaan.

Viittauksen ulkoiseen sivustoon voi tehdä myös näin: Jos tulot muuttuvat, kannattaa tarkastaa oikea veroprosentti laskurilla (Vero.fi). Linkitetyn tekstin lopussa voi sulkeissa lukea, että linkki vie toiselle sivustolle vaikkapa esityslistan kohdalla (Dynasty) tai kyselylinkin kohdalla (Webropol). Kokonaista linkkiosoitetta (url-osoite) ei kuitenkaan saa sivulle lisätä, sen kuunteleminen ruudunlukijalla on epämiellyttävää. Vero.fi tai Otakantaa.fi -muodossa osoiteviittaukset ovat vielä ihan ok.

Mikäli linkitys tehdään liitetiedostoon, liitteeseen viittaavan linkin perään lisätään sulkumerkkien sisään tiedoston muoto ja koko, esimerkiksi Kouvolan kaupungin yleistietoja esittelevä infograafi (pdf, 2 Mt).

Sivun lyhytosoite

Jos sivua mainostetaan printissä tai esim. Instagramissa, missä linkkiä ei saa tuotettua selaajalle toimivasti, voit luoda sivulle lyhytosoitteen eli short url:in. Tarkasta aina, ettei suunnittelemasi osoite ole jo käytössä! Kaksi samaa lyhytosoitetta kumoaa toisensa, eli osoite ei toimi kummallakaan sivulla.

Lyhyt-osoite kenttään annetaan mahdollisimman lyhyt ja kertova loppuosa osoitteelle ilman väliviivoja, tyhjiä välejä, erikoismerkkejä tai ääkkösiä esim. ”paivakodit”. Tällöin jaettavan osoitteen muoto olisi www.kouvola.fi/paivakodit tai kouvola.fi/paivakodit.

Testausta

Alaotsikko H3

Alaotsikko H4

Alaotsikko H5

Otsikkotaso 6