Elementtien perusasetukset

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

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

elementin-luominen---elementtilistausB

 

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.

Näyttökuva 2023-01-16 135942

Voit määritellä värin neljällä tavalla:

  • HEX: Määritä väri antamalla kuusinumeroinen HEX-arvo, jonka edessä on risuaita, esimerkiksi #000000.
  • Värinvalitsin: Klikkaa sinistä värinvalitsinkuvaketta (pipetti), ja valitse väri näytöltäsi värinvalitsimen avulla klikkaamalla.
  • 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