Digi-iltamat, jatkokurssi

Osa 1

Päivitetty 28.10.2025

Koulutuksesta

• Koulutuksen materiaali koottu tukipyyntöjen, palautteen ja toiveiden pohjalta.
• Ehdotuksia ja ideoita koulutukseen otetaan mielellään lisää
• Karjalanliitto.fi/digiklinikka sisältää kaikkien koulutusten materiaalit, ohjeet koulutuksiin ja yhteydenottolomakkeen

​

2

Ohjelma

• Kuvatiedostojen hallinta ja kuvagalleria
• Lomakkeen luominen ja hallinta
• Valikot
• Uudelleenohjaukset

3

Kuvatiedostojen hallinta ja kuvagalleria

4

Kuvatiedostojen hallinta ja kuvagalleria

• Kuvien tuominen sivustolle omalta laitteelta digiklinikan LianaCMS-ohjeissa (ohje 3)
• Kuvien käsittelyyn (koon muuttaminen, rajaus) Esa Mäkisen kirjoittamat oppaat löytyvät myös digiklinikasta.
• Myös 11min opasvideo samalla sivulla

​

​

​

5

Kuvakansioiden hallinta

• Kuvien määrän kasvaessa järkevä

kansiorakenne korostuu

• Tiedostot→ jäsenyhteisöt →

oman yhteisön juurihakemisto

6

Kuvakansioiden hallinta

• Uuden kansion luominen

7

Kuvakansioiden hallinta

• Uusi alakansio esimerkiksi tapahtuman kuville
• Alakansioilla voi olla lisää alakansioita kuten omalla tietokoneellakin. Esim “Kesäjuhlat” jonka alla “Kesäjuhlat 2023” ja “Kesäjuhlat 2024”
• Tiedosto-sivun kautta voi ladata useita kuvia kerralla, toisin kuin sivua editoidessa.

8

Kuvakansioiden hallinta

• Kuvien siirtäminen kuvan kohdalta oikealta toiminnoista “siirrä tai kopioi tiedosto” → valitse kohdekansio ja lopuksi “siirrä” (myös raahaamalla tiedostolistauksessa)
• Siirtäminen rikkoo linkityksen jos kuva on sivulla käytössä!

9

Kuvaus kuvatekstinä

• Automaattisen kuvatekstin saa

lisäämällä kuvalle “kuvauksen”

• Klikkaa tiedostonimeä tiedostojen

hallinnassa tai muokkaa kuvaa

• “Metatiedot”-välilehdessä

→ Lisää “Kuvaus”

→ Tallenna lopuksi

10

Kuvagalleria (kuvapankki)

• Kuvapankki on elementtilista jossa ainoat sallitut elementit ovat kuvia
• Sivun hallinnassa:

Lisää osio →

Osio: Kuvapankki

Nimeä lisäämäsi kuvapankki

​

11

Kuvagalleria (kuvapankki)

• Elementtilista-välilehdessä valitse “lisää uusi”

12

Kuvagalleria (kuvapankki)

• Nimeä kuvapankki.

Voit lisätä otsikon

ja editoriin tekstin

kuvaukseksi

ennen kuvagalleriaa

13

Kuvagalleria (kuvapankki)

• Lisää paikkoja kuville niin

monta kuin tarvitset

• Klikkaa ruudukkoa ja

valitse niihin kuvat

• Lopuksi “tallenna ja

lisää listalle”

14

Kuvat sivuston ulkopuolella?

• Suurien kuvamäärien kanssa voi harkita ulkopuolista vaihtoehtoa (toimii samalla varmuuskopiona)
• Esim pilvipalvelut: Google Drive / Photos, Microsoft OneDrive, Flickr, Dropbox, iCloud, Amazon…
• Toteutus linkillä tai nostolaatikolla

​

15

Muita hyödyllisiä listauksia

• Tiedostolistaus listaa kansion kaikki tiedostot
• Voi valita listattavat tiedostopäätteet jolloin listaa vain esim .pdf-tiedostot
• Lista päivittyy automaattisesti kun kansioon lisätään tiedostoja
• Käyttökohteena esim lista kokouspöytäkirjoista word-dokumentteina tai jäsenlehden julkaisut pdf-dokumentteina
• Ei näytä pikkukuvia, mutta tekee listan tiedostonimistä myös kuville
• Social on valmis työkalu somelinkeille
• Vapaamuotoiseen osoitekenttään koko url-osoite ja valitse oikea palvelu
• “http://www.twitter.com/tunnus”

16

Lomakkeen luominen

17

Lomakkeen käyttäminen

• Yhteydenotto
• Jäsenasiat,

liittyminen,

uutiskirje

18

Lomakkeen luominen

• Luo uusi osio,

valitse “Lomake”

19

Kentän luominen lomakkeeseen

• Valitse “Lisää kenttä”
• Valitse ensimmäisen kentän tyyppi ja “jatka”
• Jotkin kentän tyypit rajaavat käyttäjien vastauksia, esim sähköpostin tulee olla oikeanlainen sähköpostiosoite. Tekstikenttä tai tekstialue ei rajoita vastauksia.
• Kenttä tarvitsee ainakin otsikon, lisäksi voi lisätä esim:
• Oletustekstin joka näkyy kentässä valmiiksi ennen kuin käyttäjä kirjoittaa, esim “etunimi tähän”
• “Vaadittu” on pakollinen täytettävä kenttä että lomakkeen voi lähettää

20

Lomakkeessa voi olla useita kenttiä

21

Lomakkeen hallinnan välilehtiä

• Palautteet-välilehdeltä näkee välittömästi lähetetyt lomakkeet, helppo testata toimintaa
• Asetukset: voi valita mitä tapahtuu kun käyttäjä lähettää lomakkeen
• Sähköpostiasetukset: voi määrittää sähköpostin minne täytetyt lomakkeet lähetetään, lähetetäänkö lomakkeen täyttäjälle myös postia, yms

22

Valikot

23

Valikkonäkyvyys vaikuttaa myös listauksiin

• Jäsenyhteisöiden sivulista on myös valikko, jolloin yhteisön etusivun valikkonäkyvyys vaikuttaa listaan
• Jos jäsenyhteisön etusivulla ei ole valikkonäkyvyyttä, sivu katoaa listalta

24

Automaattinen valikko jäsenyhteisön sivulla

• 4-palstainen alasivu tekee automaattisesti valikon vasemmalle jos vasemman palstan jättää tyhjäksi
• Automaattisen valikon juurena on jäsenyhteisön etusivu, valitun sivun alasivut ovat laajennettuina
• Valikkonäkyvyys täytyy olla päällä jotta alasivu näkyy valikossa
• Palstalle voi lisätä muutakin sisältöä, tällöin automaattinen valikko katoaa

​

25

Kustomoitu valikko

• Valikon tilalle voi luoda editorin johon linkit luodaan itse vapaina linkkeinä. Tällöin voi lisätä linkkejä jäsenyhteisön sivujen ulkopuolelta tai vaikkapa pelkkää tekstiä ilman linkitystä
• Luomalla uuden valikon (tai minkä vaan osion) palstalle, se korvaa automaattisen valikon
• Valikko-osiota käyttäessä valitse valikon numeroksi “2”, kaikki jäsenyhteisöiden sivut ovat samassa valikkonumerossa
• Muokattu valikko katoaa näkyvistä jos asetuksissa on mitään pielessä antamatta syytä tälle, suositus on käyttää automaattista valikkoa

26

Yläreunan valikko

• Muista

valikkonäkyvyys!

27

Uudelleenohjaukset

28

Uudelleenohjaukset

• Sivustolla on määritetty uudelleenohjauksia helpommaksi vaihtoehdoksi pitkille url-osoitteille
• Esimerkki:
• karjalanliitto.fi/digiklinikka

ohjautuu: https://www.karjalanliitto.fi/viestinta/digiklinikka.html

• karjalanliitto.fi/alavudenkarjalaseura

ohjautuu: https://www.karjalanliitto.fi/karjalan-liitto/jasenyhteisot/karjalaseurat/alavuden-karjala-seura-ry.html

29

Ulkoasu ja käytettävyys

30

Etusivun ulkoasun vaihtoehtoja

Esimerkki 1:

Pelkistetty etusivu ja sisältö enemmän alasivuilla

-Siistimpi ilme

-Navigointi alasivuille niin että käyttäjät löytävät? (esim nostolaatikot vai ei?)

-Ajankohtaisin tai tärkein sisältö nousee esille

​

Esimerkki 2:

Sisältö jo etusivulla

-Helposti löydettävissä kun sisällön määrä on sopiva

-Jääkö alasivujen potentiaali käyttämättä?

-Pitkä etusivu voi näyttää sekavalta (erityisesti mobiilinäkymässä)

​

Lopulta ylläpitäjän oma valinta, molemmat kannattaa pitää mielessä

31

Etusivun asettelu

Mahdollinen navigointi ylimpänä?

Toisena vaihtoehtona lyhyt kuvaus ensimmäisenä?

Jos luo itse navigoinnin, se kannattaa sijoittaa ylös tai heti lyhyen kuvauksen jälkeen, muuten vierailija joutuu aina selaamaan sivun alas asti liikkuessaan

​

Sisällön määrä etusivulla, julkaisenko pitkän tiedotteen etusivulla vai luonko sille alasivun?

Myös lyhennelmä ajankohtaisesta uutisesta mahdollinen etusivulla ja koko artikkeli omalla sivullaan.

​

32

Alasivujen määrä

Yksittäisen sivun pituus <-> alasivujen määrä

Yleisiä: tapahtumat, toiminta, hallitus, yhteystiedot, historia, liittyminen, kuvat

​

Järkevä nimeäminen, määrä ja ryhmittely että navigointi pysyy helppona

​

Muista alemman tason alasivut, esim historia-alasivun alle voi luoda suurenkin määrän alasivuja jotka eivät laajenna yläpalkkia

33

Navigointi vierailijan näkökulmasta

-Nostolaatikot tai kuvanostot navigointina?

Useilla jäsensivuilla käytössä

Persoonallisempi ilme kuvien avulla?

Ainoastaan näkyvissä etusivulla: jos navigointipalkki ei ole kunnossa, vierailija joutuu navigoimaan aina etusivun kautta

Ainoastaan näkyvissä etusivulla: jos navigointipalkki ei ole kunnossa, vierailija joutuu navigoimaan aina etusivun kautta

-Jääkö yläreunan navigointipalkki huomaamatta?

-Palkkia ei voi muokata jäsenille sopivammaksi, näyttää liikaa KL etusivun osalta?

34

Nostolaatikoiden ulkoasu

Sopiva määrä tekstiä

​

Kuvia lisättäessä teksti muuttuu valkoiseksi, häviää erittäin vaaleaan taustaan kuvassa

(esim vanha valokuva jossa valkoinen tausta)

35

Asettelu mobiililaitteilla

Muista esikatsella välillä myös esikatselun mobiilitilassa tai puhelimella/tabletilla

​

Esim suuren kuvan skaalaaminen eri kokoisilla selaimilla kannattaa tarkistaa

​

Mobiililaitteen ruudulle sopii paremmin pystysisältö

​

​

​

36

Palaute, toiveita, ongelmia toiselle koulutuskerralle

37

• Toiveita koulutuksen aiheista?
• Ongelmia sivustolla?
• Toiveita ja lisäyksiä sivuston ominaisuuksiin

​

• Mahdollisuuksien mukaan lisätään koulutukseen ja selvitetään toteutusmahdollisuuksia

38

39