Tyylit (CSS)
Tyylien muokkaaminen on helppoa LiquidBloxilla. Ilmettä, kuten taustavärejä ja -kuvia, muokataan visuaalisella editorilla, eikä CSS-koodin teknistä osaamista vaadita. Tässä esimerkissä opit tekemään näyttävän hero banner -elementin tyylejä hyödyntäen.
Lähtökohta
Sivulle on luotu uusi blokki, joka on pilkottu kolmeen sisältöalueeseen. Ylempään sisältöalueeseen on lisätty teksti-, keskelle navigaatio-sisältötyyppi (painike) ja alimpaan nuoli alaspäin -ikoni.
Katso alta, miten vaihdat taustakuvan ja lisäät väliä reunoille.
Vaihe 1 - Siirry tyyli-tilaan
Klikkaa sivellin-ikonia (style editor) yläpalkissa.
Vaihe 2
Aktivoi oikea blokki klikkaamalla sen päällä
- Tyylit koko sivustolle
- Tyylit aktiiviselle sivulle
- Oletustaustaväri kaikille uusille blokeille
- Klikkaa blokkia muokataksesi sen tyylejä
Vaihe 3 - Näin vaihdat tai lisäät taustakuvan
Valitse uloin alue taustakuvan lisäämiseksi (taustakuva voi sijaita joko wrapper- tai block-alueella). Viereinen kuvake ilmaisee, että blokissa on käytössä taustakuva.
Kuvan sijaan voit käyttää halutessasi myös taustavideota.
Vaihe 4
- Klikkaa Edit background, lataa taustakuva* ja klikkaa OK
- Tallenna klikkaamalla Save-nappia yläpalkissa
* Teksti säilyy helposti luettavana, kun käytät tummaa taustakuvaa ja vaaleaa tekstiä (tai toisinpäin).
Vaihe 5 - Näin lisäät väliä reunoihin
Valitse oikea sisältöalue muokattavaksi.
Vaihe 6
- Lisää Padding-arvoa nuoli alaspäin -kuvakkeen sisältävään alueeseen. Padding-arvolla säädetään sisällön väliä sisältöalueen reunoihin. Border-valinnalla voit säätää sisältöalueen reunaviivan paksuutta, tyyliä ja väriä sekä kulmien kaarevuutta (Border-radius).
- Tallenna muutokset klikkaamalla Save tai klikkaa or style next -linkkiä muotoillaksesi sivun muita alueita.
Valmis hero banner -elementti.
Lue kuinka lisäät kustomoitua CSS-koodia sivustolle
Lue taustavideon lisäämisestä elementtiin
