Sisältölohkot ja elementit

Mistä lohko koostuu?

Row Layout

Tämä tarkoittaa lohkon rakennetta rivimuodossa. Row Layout määrittää, miten sisältö jakautuu vaakasuunnassa — esimerkiksi kuinka monta saraketta rivillä on ja miten sisältö sijoittuu niiden sisälle.

Section

Section-lohko toimii sisällön jäsentelyyn. Section-lohko sisältyy automaattisesti Row Layout -lohkoihin, mutta sitä voi käyttää myös itsenäisesti Row Layoutin ulkopuolella. Section-lohkoon voi lisätä minkä tahansa muun lohkon ja muokata sen ulkoasua lohkon asetuksilla.

Lohkon lisääminen

Valmiiden lohkojen käyttö:

  1. Avaa sivun muokkaustila
    Avaa Dashboardilta Pages ja avaa yksittäisen sivun muokkaustila
  2. Avaa Design Library
    Design Library löytyy yläreunan työkalupalkista.
  3. Valitse UTU -välilehti.

Valmiit lohkot

Hero

  • Verkkosivun näyttävä aloitusosio, yleensä heti headerin alla.
  • Tavoitteena herättää huomio ja kertoa nopeasti, mistä sivussa on kyse.

Accordion

  • Avautuva/sulkeutuva sisältöalue, eli ”haitarivalikko”.
  • Näyttää otsikot, ja kun klikkaat yhtä, sisältö avautuu.

Lists

  • Luettelot, jotka esittävät asioita järjestyksessä tai ilman järjestystä.

Buttons

  • Klikattava painike, joka suorittaa toiminnon.

Highlights

  • Korostettuja elementtejä, jotka tuodaan esiin visuaalisesti. Esimerkkinä teksti ja kuva vierekkäin.

Post lists

  • Lista blogipostauksista, uutisista tai artikkeleista.

Lohkon lisäasetukset

  1. Avaa asetukset
    Avaa asetukset ja tarkemmin välilehti ”Block”
  2. Säädä haluamiasi asetuksia
    Asetukset jakautuvat kolmeen kategoriaan: General, Style, Advanced
    Huomaathan, että osa asetuksista löytyy kolmen pisteen valikon takaa. Löydät tämän valikon joidenkin osioiden otsikon oikeasta reunasta, esimerkiksi kohdassa ’Typography’

    General = Yleisiä asioita, esim.
    Size = Elementin koko
    Width = Leveys
    Typography = Tekstin asetuksia, kuten koko ja muotoilu.

    Style = Tyyliin liittyviä asioita, esim.
    Background Color/Image = Taustaväri/-kuva
    Border = Border on reuna elementin ympärillä. Se näkyy elementin ulkoreunana ja voi olla vaikka musta viiva. Border Radius pyöristää reunoja.
    Hover = Hover tarkoittaa sitä, mitä tapahtuu, kun hiiren kursori menee jonkin elementin päälle – esimerkiksi napin tai linkin.

    Advanced = Harvemmin käytettyjä, esim.
    Padding = Padding tarkoittaa sisätilaa elementin sisällön ja reunojen (borderin) välillä. Se ”työntää” sisältöä kauemmas reunoista.
    Margin = Tila elementin ulkopuolella, joka erottaa sen muista elementeistä.

.