Ulkoasu

HUOM! Muokattavat teemat poistuneet valikoimasta.

Kotisivuni.fi  kotisivupalvelu sisältää useita erilaisia teemoja, joita voi muokata lähes rajattomasti. Kaikki teemat ovat valmiiksi oletusasetuksilla, joita voi muokata omiin tarpeisiin sopiviksi. Valittavana on mm. sivupalkki oikeaan, vasempaan tai molempiin reunoihin, vimpainmoduuleja, navigaatiomoduuleja, HTML-moduuli, kuvamoduuli jne. jne.

Aloitetaan teeman muokkaus kuitenkin ihan alusta ja edetään askel askeleelta eteenpäin niin halutunlainen teema valmistuu käden käänteessä.

Teeman valinta

Aluksi valitaan käyttöön haluttu teema. Valittavana on useita erilaisia teemoja ja niitä lisätään aika ajoin lisää. Teemoja pääse valitsemaan menemällä hallintapaneelissa kohtaan Ulkoasu -> Teemat

Teeman alla on linkit, josta teemaa voi esikatsella mille sivusi näyttävät kyseisellä teemalla tai valita teeman suoraan käyttöön. Kun haluttu teema on valittu käyttöön, näkyy se välittömästi kotisivuillasi. Teema on siis oletusasetuksilla (ellet ole tehnyt jo muutoksia ulkoasujen asetuksiin ennen valintaa).

Ulkoasun muokkaus

Juuri valittua teemaa pystyy muokkaamaan monella tapaa. Olemme luoneet teemoihin yhden ulkoasun (alla punaisella nuolella merkittynä) , jota voit käyttää sellaisenaan, muokata sitä tai luoda kokonaan uuden ulkoasun. Ulkoasua pääset muokkaaman kohdasta Ulkoasumuokkain -> Muokkain

Muokkaimessa näet aloitussivulla luomamme ulkoasun.  Sarakkeissa näkyy ulkoasujen leveydet, onko vimpainalueet piilotettuna ja mikä ulkoasu on valittuna oletusulkoasuksi. Koska tehtynä on vain yksi ulkoasu, on se luonnollisesti myös oletusulkoasu. Ulkoasua voit tarvittaessa muokata, käyttää sellaisenaan tai poistaa. Huomaa, jos tehtynä on vain yksi ulkoasu, ei sitä voi poistaa koska aina on oltava vähintään 1 ulkoasu käytettävissä.

Seuraavassa esimerkissä luomme kokonaan uuden ulkoasun. Ulkoasu aloitetaan sivun yläreunassa klikkaamalla nappia Luo Ulkoasu. Avautuvaan ikkunaan rakennetaan haluttu ulkoasu. Ensimmäisenä annetaan ulkoasulle nimi. Voit nimetä sen miten tahansa, mutta kaikista viisainta on jos sen nimeää siten, että se on helposti tunnistettavissa. Tämä on tärkeää silloin, jos rakennat useita eri ulkoasuja niin pysyt selvillä mikä ulkoasu on mikäkin. Tässä mallissa annetaan nimeksi “Oikea Sivupalkki”.

Voit valita ulkoasullesi leveyden ja valittavana on 3 eri leveyttä. Jos mikään niistä ei sovi käyttöösi, voit valita itse haluamasi leveyden kohdasta Leveys -> muokattu. Piilota vimpainalueet kohta on tarpeellista silloin, jos olet rakentanut useita eri ulkoasuja ja ne jokainen sisältää useita vimpainalueita. Piilottamalla vimpainalueet helpotat työskentelyä vimpaineditorissa, jossa on näkyvillä kaikki vimpainalueesi. Jos käytössäsi on vain 1 tai korkeintaan muutama ulkoasu, ei vimpainalueen piilottaminen ole tarpeellista.

Ulkoasuissa käytetään seuraavia moduuleja:

  • Sisältö -> moduulissa näytetään sivujesi sisältöosa, kuten kirjoittamasi sivut, blogikirjoitukset, vieraskirja, kalenteri, galleria jne.
  • Ylätunniste -> tämä on sivujesi yläosa jossa voit näyttää mm. sivujesi nimen sekä kuvauksen.
  • HTML -> moduuliin voit lisätä mitä tahansa HTML-koodia. (edistyneille käyttäjille)
  • Kuva -> moduulissa näytetään kuva. Voit laittaa tämän moduulin esimerkiksi Ylätunnisteen tilalle jos haluat näyttää sivusi ylälaidassa kuvan otsikon ja kuvauksen sijaan.
  • Navigointi -> moduulissa näytetään sivujesi valikko.
  • Vimpainpalkki -> moduulissa näytetään vimpaimia, vimpaimet ovat eräänlaisia “lisäosia” joissa voi näyttää mm. tekstiä, kuvia, valikkoja, blogikirjoituksen otsikot, kommentteja, RSS-virtaa toisilta sivuilta jne.
  • Footer -> sivun alaosa

Yllä olevassa ulkoasussa on nimeksi annettu Oikea Sivupalkki, leveydeksi 960px ja vimpainalueet ovat näkyvillä. Style kohta kuuluu tyylimuokkaimelle, ja sen käyttöä käsitellään seuraavassa ohjeessa. Koska yhtään tyyliä ei ole vielä luotuna, ei sitä voi tässä ottaa vielä käyttöön. Tyyleillä voidaan hienosäätää sivuston fontteja, värejä, taustakuvia, linkkien värejä jne. Mutta palataan tähän tuonnenpana.

Voit rakentaa useita erilaisia ulkoasuja. Voit rakentaa esimerkiksi etusivulle täysleveän ulkoasun jossa ei ole sivupalkkeja lainkaan. Muille sivuille voit rakentaa ulkoasun, jossa on vaikkapa vasemmassa reunassa sivupalkki, blogiartikkeleille voit valita esimerkiksi oikeassa reunassa olevan sivupalkin. Voit rakentaa vaikka joka sivullesi omanlaisen ulkoasun. Pääsääntöisesti kuitenkin yksi ulkoasu riittää. Jos kuitenkin haluat käyttää useita ulkoasumalleja sivuillasi, valitaan haluttu malli käyttöön kyseisen sivun sivueditorissa oikeassa reunassa olevassa kohdasta Ulkoasu. Jos mitään ei valita, on käytössä automaattisesti oletusulkoasu. Yksi ulkoasu valitaan aina oletusulkoasuksi jota käytetään aina silloin, jos ei sivueditorissa muuta valita käyttöön.

Seuraavaksi ulkoasuun lisätään moduuleja. Aloitetaan sivun yläreunasta ja lisätään sivun yläreunaan Ylätunniste. Tämä tapahtuu klikkamaalla Lisää Moduuli linkkiä. Seuraavanlainen ikkuna avautuu.

Valitaan avautuvasta ikkunasta haluttu moduuli. Tässä kuvassa on valittuna Sisältö, mutta valitaan Ylätunniste ja klikataan Lisää Moduuli. Tämän jälkeen avautuu seuraavanlainen ikkuna, jossa voit muokata Ylätunnisteen asetuksia.

Anna moduulille nimi. Moduuli tulee oletusasetuksilla ja niitä ei ole tarvetta muuttaa jos et halua. Voit näyttää asetuksissa olevan otsikon (Asetukset -> Yleinen),  käyttää muokattua otsikkoa tai jättää otsikon näyttämättä. Sivun kuvaukseen on samat valinnat kuin otsikkoon. SEO kohta on “Search Engine Optimization” eli hakukoneoptimointi. Näillä asetuksilla voit muuttaa otsikoiden tärkeyttä hakukoneiden silmissä. Tässä emme perehdy sen tarkemmin näihin asetuksiin, vaan sivujen löydettävyyten hakukoneissa perehdytään toisessa artikkelissa. Tallenna tekemäsi muutokset ja Ylätunniste on asetettu ulkoasuun.
Seuraavaksi lisäämme navigaation. Klikkaa luomasi ylätunnisteen alapuolella Lisää Moduuli. Jälleen avautuu ikkuna jossa valitaan moduuli. Tällä kertaa valitaan Navigaatio ja klikataan Lisää Moduuli. Seuraavanlainen ikkuna avautuu.

Anna moduulille nimi. Moduuliin voidaan lisätä kotisivuillasi olevat sivut tai blogisi kategoriat. Valittavana on Asetuksissa lisätyt sivut, Asetuksissa valitut kategoriat tai Kaikki sivut. Asetuksissa lisätyt sivut lisäävät valikkoon kaikki ne sivut, jotka olet ruksittanut aktiiviseksi kohdassa Ulkoasumuokkain -> Asetukset. Asetuksissa lisätyt kategoriat lisäävät valikoon kaikki ne kategoriat, jotka olet ruksittanut aktiiviseksi kohdassa Ulkoasumuokkain -> Asetukset. Kaikki sivut valinta lisää valikkoon automaattisesti kaikki sivuillasi olevat sivut. Tallenna tekemäsi muutokset ja navigaatio on asetettu ulkoasuun.

Jos rakennat myöhemmässä vaiheessa oman kustomoidun valikon, tulee se myöskin valittavaksi navigaation asetuksiin. Voit koska tahansa muokata tekemääsi ulkoasua ja ottaa kustomoidun valikon käyttöön myöhemmin. Kustomoitu valikko tehdään kohdassa Ulkoasu -> Valikot.

Seuraavaksi ulkoasuun lisätään sisältöosa. Jälleen klikataan Lisää Moduuli linkkiä, tällä kertaa juuri tehdyn Navigaatiomoduulin alapuolella. Avautuvasta ikkunasta valitaan Sisältö ja klikataan Lisää Moduuli. Avautuvaan ikkunaan asetetaan sisältöosan asetukset.

Annetaan moduulille nimi ja valitaan minkälainen sisältöosa sivuille halutaan. Valittavana on sivupalkkeja oikella tai vasemmalla tai ei sivupalkkeja ollenkaan. Jos valitaan sivupalkki käyttöön, voidaan sinne laittaa vimpaimia. Vimpaimiin puolestaan voidaan laittaa vaikka tekstiä, kuvia, valikko, linkkejä… jne. Käytettävissä olevat vimpaimet löytyvät kohdasta Ulkoasu -> Vimpaimet. Kun olet päättänyt minkälaisen sisältöosan haluat/tarvitset sivuillesi, tallenna tekemäsi muutokset. Ulkoasuun on nyt asetettu sisältöosa.

Seuraavaksi lisäämme vimpainalueen. Klikataan Lisää Moduuli sisältosan alapuolella ja valitaan Vimpainpalkki. Seuraavanlainen ikkuna avautuu.

Annetaan moduulille nimi ja valitaan montako saraketta tarvitaan. Vimpainpalkin käyttö on esimerkiksi kätevää silloin, jos haluat laittaa sivusi sisältöosan alapuolelle bannerin jokaiselle sivulle. Laittamalla sisältöosan alapuolelle vimpainpalkin, saat lisättyä bannerin yhdellä kertaa jokaiselle sivustosi sivulle, eikä sitä tarvitse lisätä erikseen jokaiselle sivulle. Valitse ikkunasta sarakkeet kohdasta 1, niin saat 100% sisältöosan levyisen vimpainalueen. Tähän alueeseen voit sitten lisätä tekstivimpaimen ja laittaa sinne vaikka bannerin tai tekstiä jonka haluat olevan jokaisella sivulla. Jos valitset sarakkeet kohdasta 3, lisätään vimpainpalkkiin 3 vimpainaluetta. Tallenna tekemäsi muutokset ja vimpainpalkki on asetettu sivuillesi. Jos et tarvitse vimpainpalkkia, jätä tallentamatta jolloin sitä ei lisätä ulkoasuun.

Vielä on laittamatta sivun alaosa eli Footer. Klikataan Lisää Moduuli Vimpainpalkin alapuolella ja seuraavanlainen ikkuna avautuu.

Annetaan moduulille nimi. Myös Footer osioon voi valita käyttöön omat sivupalkit. Jos tarvitse sivun alaosaan esimerkiksi yhteystietoja jne. on ne kätevintä laittaa sivupalkkiin vimpaimena. Luonnollisesti voit myös jättää koko Footermoduulin pois. Tallenna tekemäsi muutokset.

Nyt vielä tallennetaan ulkoasu klikkammalla Tallenna Ulkoasu ja se on valmis otettavaksi käyttöön ja olet juuri rakentanut täysin omanlaisen ja uniikin ulkoasun. Huomaa, että voit koska tahansa muokata tai muuttaa ulkoasusi asetuksia jos tarpeet muuttuvat.

Seuraavassa artikkelissa käsittelemme tyylimanagerin käyttöä, jolla kotisivun ulkoasua voi vielä hienosäätää.

Vielä on jäljellä kuvamoduuli sekä HTML-moduuli joita ei tässä ulkoasussa otettu käyttöön. Kuvamoduulia voi käyttää esimerkiksi ylätunnisteen tilalla jos haluat näyttää sivun yläosassa kuvan otsikon sijaan. Poista Ylätunniste ja lisää Kuvamoduuli tilalle. Klikkaa Lisää Moduuli ja valitse Kuva. Seuraavanlainen ikkuna avautuu.

 

Anna moduulille nimi. Lataa haluamasi kuva ja laita linkki osoittamaan haluamaasi paikkaan. Jos käytät kuvamoduulia ylätunnisteen sijasta, kannattaa linkki laittaa osoittamaan sivusi etusivulle, jolloin kuvaa klikkaamalla pääsee aina sivustosi etusivulle. Kuvan koko kannattaa sovittaa ulkoasun leveyteen sopivaksi ennen latausta. Jos valitset 960px leveän ulkoasun, kannattaa myös kuva olla 960px leveä.Tähänkin moduuliin voit valita lisäksi sivupalkkeja käyttöön. Jos käytät sivupalkkeja, kuva kannattaa tietysti tällöin tehdä sivupalkin verran viemän tilan verran kapeammaksi. Tallenna muutokset ja kuvamoduuli on asetettu.

Edistyneimmille käyttäjille on vielä yksi moduuli jäljellä. HTML-moduuliin voi lisätä nimensä muokaisesti HTML-koodia.