Uuden elementin lisääminen sisältömalliin tai sisältöön

Sisältömallit ja sisällöt koostuvat elementeistä: Nelikulmio, Teksti, HTML, Kuva, Unsplash, Video, YouTube, Vimeo ja Ääni. Voit lisätä ja muokata elementtejä tarpeittesi mukaan.


Elementtien perusasetukset | Nelikulmio | Teksti | HTML | Kuva | Unsplash | Video | Youtube ja Vimeo | Ääni | Elementtien kloonaus ja poistaminen |Sisältömallin tallennus |

Tämä ohje koskee päivittäjärooleja ylempiä käyttäjärooleja. 

Käyttäjäroolilla Päivittäjä on rajatuimmat oikeudet. Voidaksesi esim. lisätä tai poistaa elementin, tai muuttaaksesi elementin sijaintia, tulee käyttäjäroolisi olla Julkaisija, Taiteilija, Mallinluoja tai Ylläpitäjä. 

Sisällöt ja mallipohjat koostuvat elementeistä. Voit lisätä, muokata ja poistaa elementtejä napsauttamalla valikossa haluamasi elementin kuvaa.

elementin-luominen---elementtilistausB

Elementtien perusasetukset

Elementtityypistä riippuen eri elementeillä on erilaisia asetuksia, mutta lisäksi kaikilla elementeillä on samanlaiset perusasetukset.

Nimi

Voit muokata elementin nimeä kentässä Nimi.

elementin-nimiElementin nimeä käytetään vain työskentelyn helpottamiseksi editorissa eikä sitä koskaan näytetä infonäyttösisällössä. Elementin nimi tulee näkyviin elementtivalikkoon

elementtilista1

ja suosittelemme, että elementit nimetään vastaamaan elementin sisältöä esimerkiksi:   

    elementtilista2

Elementin nimeäminen on erityisen tärkeätä, kun suunnittelet mallipohjia suurelle käyttäjäryhmälle. Looginen nimi helpottaa mallipohjien käyttöä.


Elementin sijainti

Voit siirtää elementtiä haluamaasi kohtaan mallissa raahaamalla sitä. Jos kuitenkin haluat määritellä sijainnin tarkemmin, käytä siihen X- ja Y-kenttiä elementin asetusvalikossa. X-akseli merkitsee elementin sijaintia vaakasuunnassa ja Y-akseli pystysuunnassa. Sijainti asetetaan malliin pikseleinä siten, että vasen yläkulma on arvoltaan 0 molemmilla akseleilla. Full HD -mallien koko on vaakamalleissa 1920x1080 pikseliä ja pystymalleissa 1080x1920 pikseliä.


Voit käyttää sijoitteluun myös kenttien vieressä olevaa valmista ruudukkoa, jonka avulla elementti sijoitetaan.

elementin-asetukset-x-ja-y-sijainti

Elementin koko

Määritä elementin koko Leveys- ja Korkeus-kentissä pikseleinä. Voit muuttaa elementin koon tarvittaessa koko näytön kokoiseksi Koko sivu -painikkeella.

elementin-asetukset-leveys-ja-korkeus


Peittävyys

Oletusarvoisesti uusi elementti peittää alueen täydellisesti eli alla olevia elementtejä ei näe ylempien läpi. Voit kuitenkin muuttaa elementtien läpikuultavuutta valikossa Peittävyys. Täysin peittävä elementti on arvoltaan 100 (prosenttia), kun taas täysin läpinäkyvän peittävyysarvo on 0. Muuta peittävyyttä siirtämällä liukusäädintä tai kirjoittamalla haluamasi arvo välillä 0-100 kenttään.


elementin-asetukset-peittävyys

Kulmien pyöreys

Uusi elementti luodaan aina teräväreunaisena nelikulmiona. Voit kuitenkin pyöristää kulmia vähän tai jopa muuttaa elementin soikion tai ympyrän muotoon valikon Kulmien pyöreys avulla. Voit määrittää kulmien pyöreyden pikseleinä tai prosentteina.

elementin-asetukset-pyöreys

  • Määritä pyöreys pikseleinä ilmoittamalla numeroarvo ja perään px ilman välilyöntiä, esimerkiksi 10px.
    • Voit myös määritellä kunkin kulman pyöreyden erikseen järjestyksessä: 1) Vasen ylänurkka, 2) oikea ylänurkka, 3) oikea alanurkka ja 4) vasen alanurkka.
      Pyöreysarvot alla olevalle esimerkille ovat 0px 40px 0px 80px (arvot erotellaan välilyönnillä toisistaan)

      kulmapyöristykset-järjestys
  • Määritä pyöreys prosentteina ilmoittamalla numeroarvo ja perään prosenttimerkki ilman välilyöntiä, esimerkiksi 50%.
    • Luo soikio antamalla pyöreydeksi 50%. Ympyrän saat antamalla pyöreydeksi 50% ja muuttamalla leveyden ja korkeuden keskenään yhtä suuriksi.

Kierto

Uusi elementti luodaan aina vaakasuunnassa. Voit kiertää elementtiä Kierto-valikon avulla. Muokkaa kiertoa liukusäätimen avulla tai kirjoittamalla haluamasi kiertokerroin asteina kenttään.

elementin-asetukset-kierto

  • Kierrä elementtiä myötäpäivään siirtämällä liukusäädintä oikealle tai antamalla kentässä kierron aste positiivisena lukuna numeroin, esim 45.
  • Kierrä elementtiä vastapäivään siirtämällä liukusäädintä vasemmalle tai antamalla kentässä kierron aste negatiivisena lukuna numeroin, esim. -45.

Sijoittelu ja kuvasuhde

Normaalisti elementin sijoittelu on rajoitettu ja kuvasuhde vapaa. Rajoitettu elementin sijoittelu tarkoittaa, etteivät sen reunat voi olla sisällön ulkopuolella. Painamalla Vapaa sijoittelu voit vapauttaa sijoittelun, jolloin elementin voi sijoittaa mihin tahansa sisällössä, myös siten, että osa siitä on näkyvän sisällön ulkopuolella.


Elementtien kuvasuhde puolestaan on oletusarvoisesti vapaa. Jos muokkaat elementin kokoa raahaamalla sen kulmasta, kuvasuhde voi muuttua. Painamalla Lukitse kuvasuhde kuvasuhde säilyy samana, kun muokkaat kuvan kokoa raahaamalla. Voit lukita kuvasuhteen raahatessa myös painamalla Shift- eli vaihtonäppäintä pohjassa muokkauksen ajan.

elementin-asetukset-vapaasijoittelu-lukitsekuvasuhde

Väriasetukset

Perusasetuksien lisäksi teksti- ja nelikulmioelementeissä voit mallinluojana määritellä myös värin, jota alempien oikeuksien päivittäjät ja julkaisijat eivät voi muuttaa.

elementin-asetukset-väri

Voit määritellä värin kolmella tavalla:

  • HEX: Määritä väri antamalla kuusinumeroinen HEX-arvo, jonka edessä on risuaita, esimerkiksi #000000.
  • RGB: Määritä väri ilmoittamalla punaisen, vihreän ja sinisen värin arvot numeroina kentissä R, G ja B.
  • Liukusäätimellä: Valitse sävy oikeanpuolimmaisella liukusäätimellä siirtämällä sitä ylös- tai alaspäin. Muokkaa sitten sävyn kylläisyyttä ja kirkkautta siirtämällä valitsinta vapaasti vasemmanpuoleisella värialueella.

Lisäksi voit lisätä omia mukautettuja värejä painamalla kenttää Väri.


Kun luot malleja, oppiva editori tallentaa käyttämäsi värit ja tuo ne jatkossa käyttöösi helposti ja nopeasti. Käytä tallennettuja värejä elementeissä napsauttamalla väriä valikossa.

elementin-asetukset-oppivaväri


Nelikulmio

elementtilista-nelikulmioNelikulmiota käytetään tyypillisesti sisällön taustavärinä, tekstilaatikon taustavärinä tai muun elementin taustana.

Nelikulmion värin lisäksi voit määritellä elementin perusasetuksia.

Esimerkkisisällössä sininen alennusympyrä on luotu asetuksella pyöristys 50 % ja vihreä tekstin tausta asetuksilla pyöristys 40px ja peittävyys 70

nelikulmioesimerkki


Tekstielementti

elementtilista-tekstiVoit määritellä perusasetusten lisäksi sisältömalliin tekstielementin asetukset, joita päivittäjät eivät voi muuttaa.

Päivittäjäroolin käyttäjillä tekstielementin asetukset ovat rajatut, he voivat vaihtaa itse tekstisisältöä, sen kokoa, tasausta sekä kirjainvälistystä

Laajemmilla oikeuksilla voit lisäksi muokata fonttia ja fonttityyliä. Editorissa on saatavilla yli kymmenen erilaista fonttia. Lisäksi editori mahdollistaa oman organisaation fontin käytön. Ottaaksesi käyttöön oman fonttisi, ota yhteyttä tukeemme osoitteella tuki@idid.fi.

tekstielementti-asetuksetLisäksi voit muuttaa tekstin riviväliä valikossa Rivi kirjoittamalla haluamasi riviväli kenttään. Oletusarvoisesti riviväli on 1.5, mikäli haluat esim. otsikkoelementin rivit tiiviimmäksi kokeile arvoa 1.3.

Voit tarvittaessa muokata tekstielementin reunojen ja tekstisisällön välistä kehystilaa valikossa Kehystila kirjoittamalla arvo kenttään.

Kirjoitussuuntaa voit vaihtaa oikealta vasemmalle, jos esim. tekstisisältöön kirjoitetaan kielellä, jossa teksti kirjoitetaan oikealta vasemmalle ja johon sisältyy kieliä, jotka vaativat kontekstisidonnaisia merkkejä, kuten arabia tai hebrea.

 




 


HTML-elementti 

elementtilista-HTMLHTML-elementissä muokattavia ominaisuuksia perusasetusten lisäksi ovat osoite, esitystapa sekä muotoilu.

Elementissä esitettävä osoite määrittelee verkkosivun, joka sisällössä esitetään. Mallinluojan lisäksi myös päivittäjät ja muut julkaisijat voivat muokata verkko-osoitetta, mikäli elementtiä ei lukita.

elementin-asetukset-html

Joissakin tapauksissa, jos esitettävä verkkosivusto on raskas tai toistintietokoneen kapasiteetti on rajattu (esim. sisäisiä toistimia käytettäessä) voit esittää valitsemasi verkkosivun staattisena Kuvana. Tällöin verkkosivustosta otetaan iDiD-palvelimella ruutukaappaus ja se esitetään HTML-elementissä. Verkkosivustosta otettava kuva päivittyy tällöin pari kertaa tunnissa.

Määritteet Selailtava ja Vierityspalkit liittyvät kosketusnäyttösisältöihin. Asetuksella Selailtava HTML-elementistä saadaan kosketusnäytöllä dynaaminen ja selailtava HTML-elementti. Mikäli elementtiin halutaan vierityspalkit näkyviin, aktivoidaan valinta myös siihen.

Voit muotoilla esitettävän verkkosivuston ulkoasun infonäytöille sopivaksi tai poimia haluamasi aineiston kuten ruokalistan käyttämällä CSS-muotoiluja. Lisää muotoilut Inject CSS -kenttään.

 


Kuvaelementti

elementtilista-kuvaKuvaelementissä perusasetusten lisäksi muokattavat ominaisuudet ovat kuvan tyyppiin ja sijoitukseen liittyvät asetukset. 

Kuvan lisättyäsi voit vaihtaa sen toiseen napsauttamalla Vaihda kuva-painiketta.

 

kuvaelementin-asetukset

Voit muokata kuvasisällön asettelua valikossa Kuvan sijoitus. Oletusarvoisesti kuvan asetteluna on Sovita, jolloin kuvaa ei rajata vaan se pienennetään siten, että se sopii elementtiin kokonaisuudessaan. Kuvaelementin alueet, joita kuva ei sovittamisen vuoksi peitä, ovat läpinäkyviä, eli esimerkiksi kuvan takana oleva tausta näkyy niissä kohdin normaalisti. Valikossa Kuvan sijainti voit siirtää kuvaa elementin sisällä esimerkiksi sen ylä- tai alaosaan.

Voit myös rajata kuvaa Kuvan sijoitus-kohdassa asettelulla Täytä & rajaa. Tällöin kuvaa suurennetaan siten, että se peittää koko elementin alueen. Tällöin osa kuvasta saattaa rajautua alueen ulkopuolelle eikä sitä näy sisällössä.
Voit määritellä, mikä osa kuvasta näkyy elementistä käyttämällä Kuvan sijainti -valikkoa.

 


Unsplash-elementti

elementtilista-unsplashVoit hyödyntää sisältöjä ja malleja tehdessäsi Unsplash-kuvapankin kuvituskuvia. Unsplash-elementissä perusasetusten lisäksi muokattavat ominaisuudet ovat samat kuin iDiD-hallintaan lisätyn kuvan sijoitukseen liittyvät asetukset.

Lue lisää Unsplash-elementistä tästä ohjeartikkelista

 


Videoelementti

elementtilista-videoVideoelementissä perusasetusten lisäksi muokattava ominaisuus on videon äänenvoimakkuuteen liittyvä asetus.

Luo uusi videoelementti ja valitse mediakirjastosta haluamasi video tai lataa uusi video. Mikäli valitsemasi video on erikokoinen tai kuvasuhteeltaan erilainen kuin videoelementti, se sovitetaan elementtiin automaattisesti.

videoelementin-asetuksetVideoista ei leikata tai rajata osia pois vaan ne pienennetään siten, että ne sopivat elementtiin kokonaisuudessaan. Videoelementin alueet, joita video ei kuvasuhteen vuoksi peitä, ovat läpinäkyviä.

Voit vaihtaa luotuun elementtiin uuden videon painikkeella Vaihda video.

Äänenvoimakkuus-kohdassa voit määritellä esitettävän videon äänenvoimakkuuden. Jos haluat videossa toistuvan äänen pois valitse äänenvoimakkuuden arvoksi 0. 

Videoita ei voi esikatsella sisältöeditorissa.

Huomaathan, että kaikki toistinkoneet eivät tue videoiden käyttöä. Etenkin sisäisissä toistimissa on rajauksia videoiden toistokyvyssä.

 


YouTube ja Vimeo

Huomaathan, että kaikki toistinkoneet eivät tue videoiden käyttöä. Etenkin sisäisissä toistimissa on rajauksia videoiden toistokyvyssä.

elementtilista-youtube-vimeoVoit näyttää infonäyttösisällössä suoraan YouTubessa tai Vimeossa julkaistua videomateriaalia tarkoitusta varten luodulla elementillä. Video näytetään sisällössä kertaalleen alusta loppuun ja sen kesto määrittelee sisällön keston.

 


Lisää YouTube-video lisäämällä YouTube-elementti:
  • Määritä näytettävä YouTube-video käyttämällä sen yksilöllistä tunnusta. Hae haluamasi video YouTubesta ja kopioi videon tunnus sen URL-osoitteesta kohdassa v=.
    Esimerkki: 

Huom. Käytä videon lisäämiseen pelkästään videon yksilöllistä tunnusta, ei koko URL-osoitetta.

  • Jos kopioit tunnuksen upotetusta videosta, kopioi videon tunnus kohdan /embed/ jälkeen.
  • Jos video on upotettu tai esimerkiksi osa soittolistaa, sen osoitteen lopussa voi olla lisäparametreja. Kopioi videon tunnus vain kohdan v= tai /embed/ ja kysymysmerkin & väliseltä alueelta.
  • Hyväksy valinta painamalla kentän viereistä plusmerkkiä (+) tai peru valinta painamalla rastia (x).

HUOM! (1.2.2019) YouTuben käyttöehtomuutosten vuoksi mainoksia ei voida enää ohittaa ohjelmallisesti iDiDin YouTube-materiaaleissa.

 

Lisää Vimeo-video lisäämällä Vimeo-elementti:

  • Määritä näytettävä Vimeo-video käyttämällä sen yksilöllistä tunnusta. Hae haluamasi video Vimeosta ja kopioi videon tunnus URL-osoitteesta kohdan com/ jälkeen.

  • Kopioi ja liitä tunnus elementtiasetusten kenttään ID.
  • Hyväksy valinta painamalla kentän viereistä plusmerkkiä (+) tai peru valinta painamalla rastia (x).

Äänielementti

elementtilista-ääniVoit lisätä sisältöösi myös äänitiedoston MP3-muodossa. Ääntä toistetaan sisällön ajan, joten sisällön oletuskestoksi muodostuu äänitiedoston kesto. Suosittelemme, että 10 sekunnin sisältöä varten käytät 10 sekunnin pituista äänitiedostoa. Mikäli äänitiedoston kesto on pitempi, voit toki sisällön tallennuksen jälkeen muokata sisällön kestoa lyhyemmäksi. Huomaathan, että aina kun muokkaat kyseistä sisältöä, sen kestoksi palautuu äänitiedoston keston mukainen esitysaika. 

Huomaathan, että äänitiedosto näytetään myöhäisempää muokkaustarvetta silmälläpitäen sisältöeditorissa näkyvänä mediatoistin-elementtinä. Tämä mediatoistinelementti ei näy varsinaisessa esityksessä. Voit asetuksissa myös vaihtaa äänitiedoston sekä vaikuttaa äänitiedoston äänenvoimakkuuteen.

äänitiedosto-editorinäkymä


Elementtien kloonaaminen ja poistaminen

Voit kloonata mallissa tai sisällössä käyttämiäsi elementtejä sekä poistaa niitä.

Mikäli kloonattu elementti ei tule näkyviin elementtilistauksessa päivitä selainta (F5 tai selaimen refresh-painike)


Valitse haluamasi elementti valitsemalla se elementtilistalta tai sisällöstä.


elementtilista-valittu-elementti
  • Mikäli et halua muokata elementtiä, paina Poista valinta.
  • Kopioi elementti sisältöineen ja asetuksineen painamalla Kloonaa.
  • Poista elementti mallista tai sisällöstä painamalla Poista.

Jos haluat poistaa tai kloonata useita elementtejä yhtä aikaa, paina Valitse useita (voit valita useita elementtejä myös sisältönäkymästä Ctrl-nappi pohjassa). Paina sen jälkeen kaikkia elementtejä, joita haluat käsitellä tai poista valinta kaikista painamalla Poista valinta. Valittuasi kaikki haluamasi elementit suorita haluamasi toimenpide.


Mallin tallentaminen

Muista tallentaa malli lopuksi. Mikäli olit tekemässä sisältöä voit tallentaa sen myös malliksi.

Uusi malli ilmestyy tasollesi vasemmanpuolimmaiseksi oikean malliresoluution alle ja on heti kaikkien käyttäjien käytössä.

 

Muokattu: Pe, 12 Helmi, 2021 at 9:26 AM
Muokattu 19.8.2021 PL
Muokattu 20.8.2021 PL