Kuinka suunnitella osiot

Osion ulkoasu

Sovelluksesi jokaisella osiolla on oma ulkoasunsa. Osion jokaiselle sivulle valitset mallin, sitten värit ja fontit sekä näytettävät tiedot ja kuvat. Näin se tehdään.

Avaa valikossa ”My App” kohta Structure.

Napsauta osiota, jonka ulkoasun haluat suunnitella, tässä artikkeliosio Local.

Siinä on kaksi sivua, artikkeliluettelo ja itse artikkeli, ja kummallakin sivulla on oma ulkoasunsa.

Artikkeliluettelo

Napsauta luettelon kohdalla ”Edit the design”.

Aloita mallista. Nykyisessä mallissa on valintamerkki; muut näet nuolilla.

Valitse ”Visual Card”… ja jokaisesta artikkelista tulee suuri kortti kuvineen.

Jokaisella tekstillä on oma fonttinsa, kokonsa ja värinsä. Tässä otsikoille uusi väri… ja kaikki otsikot saavat sen.

Valitse kohdassa Thumbnail kuvien muoto. ”Golden ratio”… antaa niille leveämmän ja matalamman muodon.

Koska korteilla on taustaväri, kuvat voivat ulottua reunasta reunaan. Napsauta ”Disable Edge-to-edge”… ja jokainen kuva on nyt korttinsa sisällä, marginaalin ympäröimänä.

Tokenit

Kohdassa Display valitset, mitä tietoja kukin kortti näyttää. Valitse ”Info below title”… ja jokaisen otsikon alle ilmestyy tiivistelmä.

Katso näitä kenttiä: hakasulkeissa olevat sanat ovat tokeneita. Sovellus korvaa ne kunkin artikkelin omilla tiedoilla, tässä päivämäärällä ja tiivistelmällä.

Kysymysmerkistä löydät ne kaikki: otsikko, kirjoittaja, kommenttien määrä, suhteellinen päivämäärä ja paljon muuta, jokaiselle sisältötyypille.

Yhdistele niitä omiin sanoihisi. Tässä sana ”Published” ja sen perässä suhteellisen päivämäärän token… ja kukin kortti näyttää nyt suhteellisen päivämäärän koko päivämäärän sijaan.

Artikkelisivu

Seuraavaksi artikkelisivu. Palaa osioon… ja napsauta ”Edit the design” kohdassa Article.

Artikkelisivulla on omat mallinsa, joissa työkalupalkki on alhaalla, ylhäällä tai sivussa. Valitse ”ToolBar Up”… ja työkalupalkki siirtyy ylös.

Valitse kohdassa Content, miten otsikko ja sen tiedot tasataan. ”Left alignment”… tasaa ne vasemmalle.

Valitse kohdassa Toolbar, mitä toimintoja lukijasi saavat. Poista valinta kohdasta ”Font size”… ja sen kaksi painiketta poistuvat työkalupalkista.

Täyden hallinnan saat sivun HTML-koodilla, joka käyttää samoja tokeneita: järjestä otsikko, päivämäärä, kirjoittaja ja sisältö haluamallasi tavalla.

Julkaisu

Hyvä tietää: kun otat värejä tai fontteja käyttöön kohdassa ”App style”, ne korvaavat jokaisen osion ulkoasun.

Jotta käyttäjäsi näkisivät muutokset, julkaise sovelluksesi päivitys Publish-valikosta.