---
title: "Kuinka suunnitella osiot | Oppaat - GoodBarber"
description: "Hei ja tervetuloa uuteen GoodBarber-oppaaseen! \r Tänään opettelemme, miten sovelluksesi osioiden suunnittelu määritetään.\r \r Kullakin osiotyypillä on omat suunnitteluominaisuutensa, mutta niiden…"
canonical_url: "https://fi.goodbarber.com/tutorials/design/kuinka-suunnitella-osiot/"
lang: fi
---

# Kuinka suunnitella osiot | Oppaat - GoodBarber

[Takaisin](https://fi.goodbarber.com/tutorials/)

# Kuinka suunnitella osiot

Hei ja tervetuloa uuteen GoodBarber-oppaaseen!
Tänään opettelemme, miten sovelluksesi osioiden suunnittelu määritetään.

Kullakin osiotyypillä on omat suunnitteluominaisuutensa, mutta niiden asettaminen on aina sama prosessi.

Osioiden suunnittelua varten mennään kohtaan Oma sovellus > Suunnittelu > Osioiden suunnittelu.

Tässä esimerkissä päätämme suunnitella Paikallisuutiseni artikkeli-osion. app
Näet tässä, että artikkeliosio tarjoaa kaksi sivua asetettavaksi. Artikkeliluettelosivun ja artikkelin tietosivun.

Aloitetaan artikkeliluettelosta.

Ensin tässä on valittava ehdotettujen näyttömallien välillä. Näet muutokset livenä back office -esikatselussa.

Valitaan malli 2.

Voidaan valita malli 2.

Sitten asetamme sisältöalueen ulkoasun

Taustan väri, ja reunukset.

Tiedot, jotka näytämme luettelossa.

Elementtien fontit ja fontin värit.

Kerroksen eri elementtien fontit ja fontin väri.

Viimeiseksi pikkukuvan muoto.

Niin'se on jo tehty!

Tässä on lista artikkeleista valmiiksi suunniteltu!

Tehdään nopeasti sama myös artikkelin yksityiskohdat -sivulle.

Ja voila!

Nyt se on sinusta kiinni!

Nähdään pian uudessa opetusohjelmassa!

## Samanlaisia videoita

[SuunnitteluMiten otsikko asetetaan](/tutorials/design/miten-otsikko-asetetaan/)

![Miten otsikko asetetaan](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[SuunnitteluSovelluksen globaalin tyylin määrittäminen](/tutorials/design/sovelluksen-globaalin-tyylin-maarittaminen/)

![Sovelluksen globaalin tyylin määrittäminen](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[SuunnitteluSovelluksen aloitusnäytön mukauttaminen](/tutorials/design/sovelluksen-aloitusnayton-mukauttaminen/)

![Sovelluksen aloitusnäytön mukauttaminen](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[SuunnitteluSovelluksen navigointitilan määrittäminen](/tutorials/design/sovelluksen-navigointitilan-maarittaminen/)

![Sovelluksen navigointitilan määrittäminen](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[SuunnitteluValikon kuvakkeiden mukauttaminen](/tutorials/design/valikon-kuvakkeiden-mukauttaminen/)

![Valikon kuvakkeiden mukauttaminen](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[SuunnitteluKuinka kopioida osion muotoilu](/tutorials/design/kuinka-kopioida-osion-muotoilu/)

![Kuinka kopioida osion muotoilu](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[SuunnitteluKotisivun määrittäminen](/tutorials/design/kotisivun-maarittaminen/)

![Kotisivun määrittäminen](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[SuunnitteluMiten valita otsikon koko ?](/tutorials/design/miten-valita-otsikon-koko/)

![Miten valita otsikon koko ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)

[SuunnitteluSovelluksen taustan mukauttaminen](/tutorials/design/sovelluksen-taustan-mukauttaminen/)

![Sovelluksen taustan mukauttaminen](https://portal.ww-cdn.com/portal_static/images/thumbnail_background.01a5a9e37ad2.jpg)