Ulkoasun muokkaus
      Takaisin aloitussivulle
      1. Tukisivusto
      2. Ympäristön käyttöliittymä
      3. Ulkoasun muokkaus

      Muokkaa etusivun ulkoasua ja kurssitarjotinta

      Muokkaa ympäristösi etusivua brändisi näköiseksi ja tuo kurssitarjontasi visuaalisesti esille.

      Tämä artikkeli koskee toimintoja: Etusivun bannerikuva ja kuvakaruselli (slideshow), MM Flix, MM Grid Catalogue, MM Tagcloud sekä MM Slick.

      Artikkelin sisältö:

      1. Sivuston yläosan bannerikuva sekä kuvakaruselli
        1. Bannerikuva
        2. Kuvakaruselli eli Slideshow

      2. Etusivun kurssitarjotin (MM Flix)

      3. Kiinteiden kuvakorttien lisääminen etusivulle (Grid-näkymä)
      4. Tagcloud

      5. Kustomoitava navigaatiolohko (MM Slick)

      Aiheeseen liittyvää: Kuvakokojen määrittäminen ympäristössä.


      1. Sivuston yläosan bannerikuva sekä kuvakaruselli

      Voit lisätä vapaavalintaisen kuvabannerin tai kuvakarusellin (slideshow) ympäristön etusivulle sekä omat kurssit -osioon (toiselta nimeltään Työpöytä). Banneri tulee näkyviin sivuston yläosaan, ja siihen on mahdollista lisätä kuvia, tekstiä ja linkkejä.

      ulkoasun_muokkaus_kuvakaruselli

      Mikä on bannerin ja kuvakarusellin ero? 💡

      Banneri = Koostuu yhdestä staattisesta kuva- ja tekstiosiosta.
      Kuvakaruselli = Koostuu useammasta kuva- ja tekstiosiosta, joka vaihtuu tasaisin väliajoin.


      Banneriosion lisääminen

      Banneri koostuu yhdestä staattisesta kuva- ja tekstiosiosta. Ottaaksesi bannerin käyttöön, seuraa näitä ohjeistuksia:

      1. Avaa sivuston vasemmanpuoleinen valikko ja valitse Teeman asetukset > Banneri.

      ulkoasun_muokkaus_banneri_slideshow_teeman_asetukset

      2. Banneri-välilehdellä sinulle avautuu joukko erilaisia asetuksia. Ensimmäisessä osiossa määritetään Bannerin asetukset.

      ulkoasun_muokkaus_teeman_asetukset_banneri

      • Näytä banneri = Valitse näytetäänkö vai piilotetaanko banneri.
      • Select element display page = Valitse millä sivulla kyseinen banneri näytetään: Omat kurssit -sivulla vai ympäristön etusivulla.
      • Banner height = Määritä banneriosion koko pikseleissä (oletus on 350px).
      • Select banner width = Määritä näytetäänkö banneri koko sivun leveydellä vai kapeammalla alueella. Suositus on Täysi leveys.  
      • Tekstin taustaväri. Määritä tekstialueen taustaväri värikoodilla (RGBA tai #-arvolla).
      • Tekstin väri. Määritä fontin väri.

      3. Tämän jälkeen määritetään Bannerin sisältö:

      • Bannerin otsikko, leipäteksti ja kuva = Lisää haluamasi teksti- ja kuvasisällöt, jotka tulevat näkyviin banneriin (Katso esimerkkikuva alapuolelta).
      • Vaihtoehtoinen teksti kuvalle = Lisää kuvalle vapaavalintainen lisäteksti saavutettavuuden parantamiseksi. Tämän kentän voi jättää myös tyhjäksi.
      • Näytä koko kuva bannerissa = Valitse, muutetaanko bannerin korkeutta kuvan mukaan. Oletuksena tämä asetus ei ole päällä.

      ulkoasun_muokkaus_teeman_asetukset_banneri_esimerkki

      4. Kun olet tehnyt tarvittavat määritykset, muista klikata sivun lopussa Tallenna muutokset.


      Kuvakaruselli (Slideshow)

      Bannerista poiketen kuvakarusellilla voidaan näyttää useampi erilainen bannerinäkymä vaihtuvilla teksteillä ja kuvilla. Kuvakarusellin näkymä vaihtuu itsekseen määrätyin aikavälein tai manuaalisesti selaamalla. Ottaaksesi kuvakarusellin käyttöön, seuraa näitä ohjeita:

      1. Avaa sivuston vasemmanpuoleinen valikko ja valitse Teeman asetukset > Slideshow.

      ulkoasun_muokkaus_banneri_slideshow_teeman_asetukset

      2. Avautuvalla sivulla, määritä aluksi yleiset Asetukset:

      • Näytä karuselli = Valitse näyttääksesi tai piilottaaksesi karusellin.
      • Karusellin korkeus = Määritä karusellin koko pikseleissä (oletus on 350px).
      • Kuvien määrä karusellissa = Määritä kuinka monta eri kuvanäkymää eli "slaidia" haluat karusellissa näkyvän.
      • Intervalli = Määritä kuinka nopealla aikavälillä kuvanäkymät vaihtuvat (oletus on 5000 millisekuntia).
      • Missä karuselli näkyy = Näytetäänkö kuvakaruselli sivuston etusivulla vai omat kurssit -osiossa (toiselta nimeltään Työpöytä)?
      • Valitse karusellin leveys = Määritä näytetäänkö kuvakaruselli koko sivun leveydellä vai kapeammalla alueella. Suositus on Täysi leveys. 
      • Sisältöalueen taustaväri = Määritä tekstialueen taustaväri värikoodilla (RGBA tai #-arvolla).
      • Tekstin väri = Määritä fontin väri.

      3. Seuraavassa osiossa määritellään kuva- ja tekstisisällöt karuselliin. Karuselli koostuu useasta eri "slaidista", joissa sisällöt vaihtelevat slaidin mukaan (ks. esimerkkikuva alta).

      ulkoasun_muokkaus_teeman_asetukset_kuvakaruselli

      Ottaaksesi haluamasi määrän slaideja käyttöön, varmista ensin, että olet aiemman ohjeiden mukaisesti syöttänyt oikean lukumäärän kohtaan: "Kuvien määrä karusellissa". Klikkaa tämän jälkeen Tallenna muutokset sivun alaosassa. Kun sivu on päivittynyt, asetuksiin ilmestyy puuttuvat slaidit ja voit aloittaa sisällön lisäämisen.

      4. Määritä kullekin Slaidille seuraavat asetukset:

      • Elementin otsikko, teksti ja kuva = Lisää haluamasi teksti- ja kuvasisällöt, jotka tulevat näkyviin slaidille (vastaavaan tapaan kuin bannerissa).

      • Vaihtoehtoinen teksti kuvalle = Lisää kuvalle vapaavalintainen lisäteksti saavutettavuuden parantamiseksi. Tämän kentän voi halutessaan jättää tyhjäksi.

      • Linkin otsikko = Mikäli haluat tekstiosion alapuolelle erillisen linkin, voit nimetä painikkeen tähän kenttään (esim. "Siirry tästä webinaariin").

      • Linkki = Lisää url-osoite, johon kyseinen linkki ohjaa. Kyseessä voi olla mikä tahansa sivusto: organisaatiosi verkkosivut, blogi, uutiset, linkki tietylle kurssille, tms. 

      • Uusi välilehti = Valitse, haluatko avata sivun uuteen välilehteen.

      5. Kun olet tehnyt tarvittavat määritykset, muista klikata sivun lopussa Tallenna muutokset.


      2. Etusivun kurssitarjotin (MM Flix)

      MM Flix tuo kurssitarjontasi esille "Netflix"-tyylisillä visuaalisilla kuvakorteilla. Kursseja voidaan järjestellä kategorioittain ja opiskelijat pääsevät näkemään kurssien kuvaukset suoraan kuvakorteilta.

      kuvituskuva-flix

      Kurssitarjontaa voidaan myös nopeasti filtteröidä erilaisten tunnisteiden avulla, joka suodattaa näkymään ainoastaan valitun aihe-alueen kurssit (esimerkiksi kaikki "perehdytysaiheiset" kurssit).

      tunnisteet-flix

      Kurssin kuvakortille haetaan kurssin asetuksista kuvaus-otsikon "Kurssin kuvituskuva" -kentästä.

      Flix-toiminnon käyttöönotto

      Järjestelmän hallinoija voi lisätä lohkon ympäristön etusivulle seuraavilla ohjeilla:

      1. Ympäristösi etusivulla, aseta Muokkaustila päälle.

      Muokkaustila-etusivu

      3. Vasemman laidan navigaatiosta, valitse Lisää lohko > MM Flix.

      mmflix-lisaalohko

      5. Lohko ilmestyy aluksi sivun oikeaan laitaan, mutta voit raahata sen sivun keskiosaan.

      Flix-toiminnon asetukset

      Päästäksesi lohkon asetuksiin, siirry Muokkaustilaan ja klikkaa lohkon Hammasratas-ikonia gear-cog > Muokkaa lohkoa MM Flix.

      mmflix-muokkaa

      Asetukset

      • Lohkon otsikko. Minkä otsikon haluat näkyvän käyttäjille
      • Kuinka monta kurssia vierekkäin? Määrittää rinnakkain näytettävien kurssien lukumäärän
      • Kuinka monta uutta kurssia haetaan, kun klikataan nuolta?. Kuinka monta kurssia kerrallaan kategorian rivi liikkuu sivuttaissuunnassa kun sen päässä olevia painikkeita painetaan.
      • Rivejä per kategoria. Kuinka monta riviä kursseja näytetään per kategoria
      • Näytä tunnisteet. Näytetäänkö tunnisteet suodattimet kurssien nimien yläpuolella.
      • Pallukat. Määrittää kurssien alapuolella näkyvät ympyränmuotoiset navigaatiopainikkeet, joilla voi selata kursseja sivuttaissuunnassa.


      3. Kiinteiden kuvakorttien lisääminen etusivulle (Grid-näkymä)

      Useimmissa tapauksissa lohkoa käytetään ruudukkomallisen navigaation rakentamiseen joko sivuston etusivulle tai työpöydälle. Esimerkki valmiista Grid-näkymästä:

      Nimetön-5

      Huom! Lohkon lisäämisen vaaditaan hallinnoijan oikeudet.

      Lohkon lisääminen

      Lohko otetaan käyttöön lisäämällä se muokkaustilassa halutulle sivulle. Muokkaustilan saat päälle klikkaamalla hallintatyökaluista Muokkaustila päälle. Lohko lisätään vasemman reunan navigaatiosta valitsemalla Lisää lohko > MM Grid Catalogue. 

      Tässä vaiheessa lohkosta puuttuu asetukset, jolloin lohkossa on sisältönä vain teksti Yhtään elementtiä ei ole vielä lisätty. Lohkolle määritetään ominaisuudet lohkon muokkaussivun kautta painamalla Muokkaa lohkoa MM Grid Catalogue.

      Lohkon asetukset

      Muokkaustila sisältää asetukset lohkon otsikolle, elementtien linkeille, linkkiteksteille sekä ruutujen taustakuville. Taustakuvien sijaan voidaan haluttaessa käyttää myös värejä. Linkit, tekstit ja kuvat erotellaan toisistaan rivinvaihdolla.
       

      suomi1
       
      • Lohkon otsikko -kenttään voidaan määrittää näkyviin tuleva lohkon nimi.
      • Elementtien linkit -kenttään määritetään jokaisen elementin osoitelinkki. Jokainen linkki lisätään omalle rivilleen.

      Linkin voi avata myös toiseen välilehteen lisäämällä loppuun " target="_blank Esimerkiksi: help.mediamaisteri.com" target="_blank

      Voit myös rajoittaa linkin näkyvyyttä sähköpostidomainin tai kohortin mukaan kirjoittamalla tiedot pystyviivan jälkeen
      esimerkiksi: help.mediamaisteri.com|@mediamaisteri.com|kohortti1

      • Link headers -kenttään määritetään mikä on yksittäisen elementin otsikko.
      • Linkkikuvaukset -kentässä voidaan määrittää yksittäisen elementin otsikon alle tuleva teksti.
      • Elementtien kuvat -kentästä voidaan määrittää yksittäisen elementin kuva. Tähän kenttään voi laittaa linkin kuvaan tai värikoodin HEX -muodossa, joka tulee elementtiin taustaväriksi tai ladata kuvan. Mikäli olet ladannut kuvan, niin riittää kun lisäät ladatun kuvan nimen.

      Esimerkit erilaisista kuvien lisäämistavoista:
      Linkki: https://cdn.pixabay.com/photo/2019/08/09/23/13/forest-4395993_960_720.jpg

      Värikoodi: #444333

      Ladattu kuva: kuva.jpg


      4. MM Tagcloud

      MM Tagcloud on Flix-toiminnon edeltäjä, joten lähtökohtaisesti emme enää suosittelemme käyttämään Tagcloudia, vaan siirtymään uuteen Flix-toimintoon.

      Samaan tapaan kuin Flix-lohko, myös Tagcloud mahdollistaa kurssien listaamisen mille tahansa sivulle. Erona Flix-toimintoon on kuitenkin se, että Tagcloudissa ei voida jaotella kursseja kategorioittain, eikä siellä ole omaa kohtaa "Uusille" ja "Suositelluille" kursseille.

      Tagcloudin käyttöönotto ja asetukset

      Lohko otetaan käyttöön samalla tavalla kuin Flix-näkymä: aseta Muokkaustila päälle > Lisää lohko > MM Tagcloud. Lohko käyttää kurssien kuvia, nimiä ja kurssikuvausta korttien esittämiseen.

      tagcloud

      Kuvassa ylhäällä näkyy lohkon otsikko (tässä tapauksessa "MM Tagcloud"). Otsikon alapuolella näkyvät tunnisteet eli tagit. Tunnisteiden alapuolella hakupalkki, jonka avulla voi hakea kursseja kurssin nimellä.

      Muokkaustila sisältää asetukset lohkon otsikolle, kurssien järjestykselle ja kurssikorttien ulkonäölle. Lohkon oikeassa yläkulmassa olevaa Hammasratas-ikonia gear-cog klikkaamalla aukeaa pudotusvalikko, jonka kautta pääsee muokkaamaan lohkon asetuksia:

      • Lohkon otsikko: Tästä kentästä voidaan määrittää tagcloudin otsikko.
      • Kurssien järjestys: Tästä kentästä voidaan määrittää, missä järjestyksessä kurssit näytetään.
      • Choose theme for cards: Tästä kentästä voidaan valita kurssien korttien muotoilu.

       

      5. Kustomoitava navigaatiolohko (MM Slick)

      MM Slick mahdollistaa navigaatiokorttien luontia mihin voit listä yhden tai useamman kuvakortin. Kortit sisältävät kuvauksen ja linkin sivuston kurssille tai kustomoidun kortin haluamallasi sisällöllä.

      Kurssikortti

      Kustomoitava navigaatiolohko on ainoastaan saatavilla Moodle 4.1 versiossa.

      Slickin käyttöönotto

      Pääset lisäämään kyseisen lohkon laittamalla muokkaustilan päälle ja valitsemalla oikealla sivulla olevasta valikosta "Lisää lohko". Valitse listasta "Kustomoitava navigaatiolohko".

      Lisää lohko

      Valitse lohko-1

      Lohko tulee oletuksena tyhjänä näkyviin. Pääset muokkaamaan sen asetuksia ja lisämään sisältöä painamalla lohkonimen oikealla sivulla olevaa hammasratasta ja valitsemalla "Muokkaa lohkoa Kustomoitava navigaatiolohko".

      Muokkaa lohkoa-1

      Lohkon asetukset

      • Kustomoitava navigaatiolohko: Minkä otsikon nimellä haluat että lohko näkyy käyttäjille.
      • Valitse asettelu: Kaksi valintaa "carousel" tai "grid".
        • Carousel luo karusellimaisen näkymän kursseista.
        • Grid näyttää kaikki listatut kurssit ruudukkona.
      • Hallinnoi kortteja: Tämän asetuksen kautta pääset lisäämään tai poistamaan uusia kurssikortteja.
      • Kustomoitavan navigaatiolohkon asetukset: Jos asettelu on "carousel" pystyt näissä asetuksissa muokata kuinka monta korttia näkyy vierekkäin, kuinka monta uutta korttia haetaan kun klikkaa nuolta ja rivien määrää.

      Lohkon asetukset

      Hallinnoi kortteja kohdassa pääset lisämään uusia kortteja näkymään "Lisää uusi kortti" valinnan kautta. Kun luot uuden kortin voit valita joko "Kurssikortti" tai "Kustomoitu kortti". Kurssikorttin kautta haet "Valitse kortille kurssi" valikosta sivustolla olemassa olevan kurssin. Kurssin kuvaus ja taustakuva tulee automaattisesti näkyviin korttiin. Kustomoidussa kortissa voit itse valita mitä haluat näyttää kortissa. Voit itse muokata otsikkoa, kuvausta, kortin osoitetta (eli mihin kortti ohjaa sinut) ja kortin kuvaa.

      Hallinnoi kortteja

      Kun olet valinnut sopivan kurssikortin tai muokannut kustomoitua korttia paina sivun lopussa "Tallenna muutokset" niin kortti luodaan.