Mallipohjat koostuvat elementeistä. Voit lisätä, muokata ja poistaa elementtejä painamalla valikossa haluamasi elementin kuvaa.



Perusasetukset

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


Nimi

Voit muokata elementin nimeä kentässä Name. Elementin nimeä käytetään vain työskentelyn helpottamiseksi editorissa eikä sitä koskaan näytetä infonäyttösisällössä.


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 koko

Määritä elementin koko Leveys- ja Korkeus-kentissä pikseleinä. Voit muuttaa kokoa helposti myös kenttien alla olevilla painikkeilla Koko sivu ja Puolet sivusta.


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.


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.

  • Määritä pyöreys pikseleinä ilmoittamalla numeroarvo ja perään px ilman välilyöntiä, esimerkiksi 10px.
  • 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.

  • 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.


Alla olevassa esimerkissä on nelikulmio 50% pyöreydellä ja 45 asteen kierrolla sekä tekstielementti -45 asteen kierrolla.


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.


Väriasetukset

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

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.


Elementtikohtaiset asetukset

Yllä olevien yleisten asetusten lisäksi kullakin elementtityypillä on sille ominaiset asetuksensa.


Teksti

Voit määritellä tekstielementin asetukset, joita sisällönmuokkaajat ja muut muokkaajat eivät voi muuttaa. Alempien tasojen päivittäjät voivat vaihtaa itse tekstiä, sen kokoa sekä tasausta.

Mallinluojana 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 support@idid.fi.


Lisäksi voit muuttaa tekstin riviväliä valikossa Rivi kirjoittamalla haluamasi riviväli kenttään tai käyttämällä kentän oikean laidan nuolipainikkeita. Muokkaa elementin reunojen ja tekstin välistä kehystilaa valikossa Kehystila kirjoittamalla arvo kenttään.




HTML

Html-elementissä muokattavia ominaisuuksia 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.

Jos haluat esittää valitsemasi verkkosivun staattisena kuvana, valitse Kuvana. Odota hetki, editori muuntaa sivun kuvaksi.

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



YouTube

Voit esittää sisällössäsi videosisältöä suoraan YouTubesta.

Lisää YouTube-video käyttämällä sen yksilöllistä tunnusta. Hae haluamasi video YouTubesta ja kopioi videon tunnus kohdassa v=.


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



Elementtien kloonaaminen ja poistaminen

Voit kloonata mallissa käyttämiäsi elementtejä sekä poistaa elementtejä.


Valitse haluamasi elementti painamalla sitä mallissa tai sen nimeä elementtivalikossa.



Mikäli et halua muokata elementtiä, paina Poista valinta.

Kopioi elementti sisältöineen ja asetuksineen painamalla Kloonaa.

Poista elementti mallista painamalla Poista.


Jos haluat poistaa tai kloonata useita elementtejä yhtä aikaa, paina Valitse useita. 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

Tallenna malli lopuksi painamalla vihreäpohjaista oikein-merkkiä.


Voit myös poistua tallentamatta milloin tahansa painamalla punapohjaista rastia.


Uusi malli ilmestyy tasollesi vasemmanpuolimmaiseksi oikean malliresoluution alle ja on heti kaikkien tason päivittäjien ja julkaisijoiden käytössä.


Tutustu myös artikkeliin Elementtien järjestys ja piilottaminen