Otsikot vaihdettavissa

Esimerkki muokattavasta infolaatikosta

Voit lisätä sivuille eripaikkoihin tämän kaltaisia "infolaatikoita" jotka voivat sisältää otsikon, tekstiä, kuvan ja linkkinapin. Laatikon luot lisäämällä sivulle uuden listaelementin nimeltään "infolaatikko". Luo listaan uusi elementti ja täytä elemenin tiedot.

Linkki

Sivupohjat

Paperilliton sivuilla käytetään neljää sivupohjaa. "Etusivu", "1 palsta", "2 palstaa juokseva teksti" ja "2 palstaa kapea teksti".

  1. Sivupohja: Etusivu
    Sivupohja "Etusivu" on tarkoitettu ainoastaan etusivun pohjaksi.(Katso etusivu)

  2. Sivupohja: 1 palsta
    Sivupohjaa "1 palsta" tulee käyttää sivulla silloin kun halutaan että sivun oikean palstan sisällön leveys on koko oikean palstan levyinen ja palstan oikeaan reunaan ei haluta infolaatikoita tai valikkoja sivun alisivuille. Tällaisia sivuja ovat esimerkiksi uutislistaussivut (Katso esimerkki sivu)

  3. Sivupohja: 2 palstaa juokseva teksti
    Sivupohjaa "2 palstaa juokseva teksti" käytetään sillon kun tekstisisällön oikealla puolella sivun oikeassa reunassa halutaan näyttää lisäinfoa infolaatikoilla tai sivulla on alisivuja joiden valikko halutaan näyttää palstan oikessa reunassa. Erona alla olevaan "2 palstaa kapea teksti" on se että palstassa oleva sisältö "juoksee" oikeassa laidassa olevien laatikoiden ja valikoiden alla jos teksti on korkeampaa kuin laatikot. Esimerkiksi tämä sivu käyttää tätä sivupohjaa. (Katso esimerkki sivu)

  4. Sivupohja: 2 palstaa kapea teksti
    Joskus halutaan että sisältö ei juokse oikealla olevien laatikoiden ja valikkojen alla vaan pysyy saman levyisenä palstan vasemmassa reunassa. Tällöin käytetään tätä sivupohjaa. Sivun sisältö on tällöin usein jotain muuta kuin pekkää tekstiä (lista, lomake tms.) ja lisäksi sivun oikeassa laidassa tulee olla alisivujen valikko ja/tai infolaatikoita (Katso esimerkkisivu)

Ingressi eli johdanto

Ingressiä eli johdantoa käytetään sivulla heti 1. tason otsikon jälkeen tiivistämään sivulla oleva sisältö muutamaan lauseeseen. Ingressin teet valitsemalle editorin "Tyylit" alasvetovalikosta "ingressi" ja kirjoittamalla tekstin editoriin. Vaihtoentoisesti voit maalata jonkun jo editorissa olevan tekstin ja valita "Tyylit" alasvetovalikosta "ingressi" jolloin teksti muuttuu isommaksi ingressitekstiksi.

Otsikko taso 1

Otsikko tasoa 1 tulee käyttää aina sivun ensimmäisenä ja tärkeimpänä otsikkona. Otsikko tason 1 teet valitsemalle editorin "Muotoilu" alasvetovalikosta "Otsikko 1" ja kirjoittamalla otsikon editoriin. Vaihtoentoisesti voit maalata jonkun jo editorissa olevan tekstin ja valita "Muotoilu" alasvetovalikosta "Otsikko 1" jolloin teksti muuttuu 1. tason otsikoksi.

Otsikko taso 2

Otsikko tasoa 2 käytetään sivujen pääasiallisessa sisällössä väliotsikkona sekä pääasiallisena otsikkona kapeammissa palstoissa. Otsikko tason 2 teet valitsemalle editorin "Muotoilu" alasvetovalikosta "Otsikko 2" ja kirjoittamalla otsikon editoriin. Vaihtoentoisesti voit maalata jonkun jo editorissa olevan tekstin ja valita "Muotoilu" alasvetovalikosta "Otsikko 2" jolloin teksti muuttuu 2. tason otsikoksi.

Otsikko taso 3

Otsikko taso 3 on sivuston pienin mahdollinen otsikko. Tätä pienempiä otsikoita ei tule käyttää. Otsikko tasoa 3 käytetään pääasiallisessa siällössä harvoin jos tarvitaan otsikoita väliotsikoiden (Otsikko taso 2) alle. Otsikko tasoa 3 käytetään myös kapeammissa palstoissa väliotsikkona. Otsikko tason 3 teet valitsemalle editorin "Muotoilu" alasvetovalikosta "Otsikko 3" ja kirjoittamalla otsikon editoriin. Vaihtoentoisesti voit maalata jonkun jo editorissa olevan tekstin ja valita "Muotoilu" alasvetovalikosta "Otsikko 3" jolloin teksti muuttuu 3. tason otsikoksi.

Listat

Järjestämätön lista

Järjestämätöntä (bullet list) listaa voit käyttää listataksesi asioita sivulla hieman erottuvammin. Järjestämättömän listan saat tehtyä klikkaamalla editorin valikosta "Järjestämätön lista" nappia ja kirjoittamalla editoriin listan yksittäiset elementit. Enterin painallus luo aina uuden listaelementin. Jos haluat listaan samaan elementtiin uuden rivin paina Shift+Enter. Listasta pääset pois klikkamalla uudestaan "Järjestämätön lista" nappia kun kursori on tyhjässä listaelementissä. 

  • Listaelementti
  • Listaelementti
  • Listaelementti

Järjestetty lista

Järjestetyn listaa voit käyttää listataksesi sivulla numeroituja asioita. Järjestetyn istan saat tehtyä klikkaamalla editorin valikosta "Järjestetty lista" nappia ja kirjoittamalla editoriin listan yksittäiset elementit. Enterin painallus luo aina uuden listaelementin jotka numeroidaan automaattisesti. Jos haluat listaan samaan elementtiin uuden rivin paina Shift+Enter. Listasta pääset pois klikkamalla uudestaan "Järjestetty lista" nappia kun kursori on tyhjässä listaelementissä. 

  1. Listaelementti
  2. Listaelementti
  3. Listaelementti

Lista väliviivoilla

Voit listata myös asiota taulukon tapaisella listalla jossa jokaisen elementin välissä on väliviiva. Listan väliviivoilla saat tehtyä tekemällä ensin normaalin järjestämättömän listan (Katso ylhäältä "Järjestämätön lista"), maalamalla kaikki listan elementit ja valitsemalla "Tyylit" alasvetovalikosta "lista".

  • Listaelementti
  • Listaelementti
  • Listaelementti

Lista väliviivoilla ja ikoneilla

Voit listata myös asiota taulukon tapaisella listalla jossa jokaisen elementin välissä on väliviiva ja elementtien edessä on punainen ikoni. Tällaisen listan saat tehtyä tekemällä ensin normaalin järjestämättömän listan (Katso ylhäältä "Järjestämätön lista"), maalamalla kaikki listan elementit ja valitsemalla "Tyylit" alasvetovalikosta "ikonilista ".

  • Listaelementti
  • Listaelementti
  • Listaelementti

Taulukko

Taulukkoa voit käyttää jos tarvitset listauksessa monta saraketta. Taulukkoa tulee käyttää varoen koska taulukon vaatima leveys voi helposti sotkea sivuston responsiivisuutta pienillä mobiililaitteiden ruuduilla katsottuna koska taulukko ei välttämättä sovi leveyssuunnassa pienelle ruudulle. Jos käytät taulukkoja niin sivun responsiivisuuden toimiminen tulee aina testata jollain pienellä mobiilinäytöllä ennen sivun julkaisemista. Taulukon teet klikkamalla editorin työkaluista "Lisää uusi taulukko" nappia. Kun klikkaat nappia aukeaa uusi ikkuna josta voi määrittää taulukon rivien ja sarakkeiden määrän. Kun klikkaat ikkunasta "Lisää" nappia ilmestyy taulukko editoriin. Kirjoita nyt taulukon tekstit haluttuihin soluihin. Taulukon otsikko soluina voi käyttää normaalia lihavoitua tekstiä jonka saat tehtyä maalamalla tekstin ja klikkaamalla edirista "Lihavoitu" (B) nappia. Taulukon rivejä, sarakkeita yms. voi muokata myöhemmin myös valikosta joka ilmestyy kun klikkaa hiiren vasempaa nappia taulukon päällä.

Taulukon otsikko Taulukon otsikko Taulukon otsikko
Taulukon solu Taulukon solu Taulukon solu
Taulukon solu Taulukon solu Taulukon solu

Laatikko

Voit käyttää sivuilla myös laatikoita nostamaan jotain asiaa erottuvammaksi muusta sisälllöstä. Laatikon saat tehtyä kirjoittamalla normaalia leipätekstiä editoriin, maalamalla sitten koko tekstin ja valitsemalla "Tyylit" alasvetovalikosta "laatikko". Laatikosta pääset pois klikkaamalla uudestaan "Tyylit" valikosta "laatikko" kun kursori on laatikon sisällä.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est risus, convallis in est at, fringilla sagittis lacus. Aenean id congue nisi, id adipiscing tellus. Suspendisse potenti. Duis id est porta, sollicitudin sapien at, malesuada neque. Ut ac sodales augue. Quisque et justo tempus, fringilla dui ac, scelerisque mauris. Pellentesque viverra molestie lacus nec ultrices. Aliquam ligula urna, molestie sit amet lorem sit amet, tincidunt tempus purus"

Jos haluat laatikon sisään muutakin kuin pelkkää leipätekstiä (Otsikoita, listoja tms.) niin sinun tulee tehdä laatikosta ensin taulukko. Klikkaa tällöin editorin työkaluista "Lisää uusi taulukko". Laita taulukon riveiksi 1 ja sarakkeeksi 1. Valitse taulukon "Luokka" alasvetovalikosta "laatikko". Kun painat ikkunasta "Lisää" nappia näkyy laatikko editorissa taulukkona jonka sisään voi tehdä erilaisia elementtejä halusi mukaan.

Laatikon otsikko

  • Listaelementti
  • Listaelementti
  • Listaelementti

Esimerkki muokattavasta infolaatikosta

Voit lisätä sivuille eripaikkoihin tämän kaltaisia "infolaatikoita" jotka voivat sisältää otsikon, tekstiä, kuvan ja linkkinapin. Laatikon luot lisäämällä sivulle uuden listaelementin nimeltään "infolaatikko". Luo listaan uusi elementti ja täytä elemenin tiedot.

Linkki

Nuolilinkit

Voit tehdä linkkejä joita ennen tai joiden jälkeen on musta nuoli johonkin suuntaan. Kirjoita ensin editoriin linkin teksti. Maalaa tämän jälkeen teksti ja klikkaa editorin työkaluista "Lisää/muokkaa linkkiä" nappia. Napista aukeaa linkinhallinta ikkuna josta voit valita linkin osoitteen. Kun olet sulkenut ikkunan laita kursori linkin tekstin oikealle puolelle. Paina välilyöntiä (Spacebar) 2 kertaa niin että tekstin jälkeen tulee 2 tyhjää välilyöntiä. Maalaa viimeinen lyömäsi tyhjä välilyönti ja valitse "Tyylit" alasvetovalikosta esimerkiksi "nuoli-oikealle". Linkin perään pitäisi tällöin ilmestyä musta nuoli joka osoittaa oikealle. Klikkaa vielä nuolta ja valitse uudestaan alasvetovalikosta samaa "nuoli-oikealle" tyyliä jotta pääset jatkamaan normaalin leipätekstin kirjoittamista. Voit tehdä nuolia myös ennen linkkiä tekemällä tyhjiä merkkejä ennen linkin tekstiä ja maalaamalla ne.

Ehkä helpoin tapa tehdä tällainen linkki on kuitenkin maalata tällä sivulla oleva esimerkki elementti, kopioimalla se hiiren oikealla napilla ja liittämällä se hiiren oikealla napilla haluamaasi kohtaa jotain muuta sivua (editoria). Tällöin saat ulkoasun kopiotuna valmiina ja voi muokata vain elementin tekstiä ja linkkiä. HOX! Editorin työkaluissa oleva nappi "Liitä pelkkänä tekstinä" ei saa olla tällöin päällä tai tyylien kopionti ei toimi.

Linkki  

  Linkki

Linkki  

Linkki  

Napit

Voit luoda sivuille erivärisiä nappeja nuolilla ja ilman. Normaalin napin saat tehtyä luomalla ensin normaalin linkin ja valitsemalla linkinhallinta ikkunasta "Luokka" alasvetovalikosta luokaksi joko "nappi", "punainen-nappi" tai "musta-nappi".

Linkki

Linkki

Linkki

Napin nolella saat tehtyä kirjoittamalla ensin linkin tekstin ja laittamalla tekstin perään tai ennen tekstiä 2 tyhjää välimerrkkiä. Tee tämän jälkeen nappi normaalisti maalamalla teksti ja tyhjät merkit ja valitsemalla linkin luokakasi nappi", "punainen-nappi" tai "musta-nappi". Maalaa nyt linkin sisällä tekstin vieressä olevista tyhjistä välilyönneistä ulommaisin ja valitse editorin "Tyylit" alasvetovalikosta esim "nuoli-oikealle". Napin sisään pitäisi ilmestyä nuoli. Pois napin sisältä pääset klikkaamalla nuolta ja valitsemalla uudestaan "nuoli-oikealle" tyylin.

Linkki  

  Linkki

Linkki  

Ehkä helpoin tapa tehdä tällainen napi on kuitenkin maalata tällä sivulla oleva esimerkki elementti, kopioimalla se hiiren oikealla napilla ja liittämällä se hiiren oikealla napilla haluamaasi kohtaa jotain muuta sivua (editoria). Tällöin saat ulkoasun kopiotuna valmiina ja voi muokata vain elementin tekstiä ja linkkiä. HOX! Editorin työkaluissa oleva nappi "Liitä pelkkänä tekstinä" ei saa olla tällöin päällä tai tyylien kopionti ei toimi.

Kartan lisäys

  1. Mene osoitteeseen https://www.google.fi/maps/
  2. Kirjoita karttahakuun haluamasi osoite esim "Mannerheimintie 30, 00100 Helsinki" ja hae paikka kartalle.
  3. Klikkaa kartan vasemmassa alakulmassa olevaa hammasratasikonia.
  4. Valitse aukeavasta valikosta "Jaa ja upota kartta"
  5. Valitse aukeavasta ikkunasta "Upota kartta" välilehti
  6. Kopioi kartan upotettava koodi (<iframe src="https://www.google.com/maps/embed...."></iframe>) 
  7. Lisää sivulle "Editori"-moduuli ja klikkaa moduulia.
  8. Mene "Asetusten kopionti" välilehteen, poista kaikki ruksit ja tallenna. 
  9. Mene välilehteen "Asetukset" ja valitse "Käytettävä editori" kohtaan "HTML" ja tallenna.
  10. Mene "Editori" välilehteen ja liitä kopiomasi karttakoodi HTML kenttään ja tallenna.

Esimerkki muokattavasta infolaatikosta

Voit lisätä sivuille eripaikkoihin tämän kaltaisia "infolaatikoita" jotka voivat sisältää otsikon, tekstiä, kuvan ja linkkinapin. Laatikon luot lisäämällä sivulle uuden listaelementin nimeltään "infolaatikko". Luo listaan uusi elementti ja täytä elemenin tiedot.

Linkki

Esimerkki muokattavasta infolaatikosta

Voit lisätä sivuille eripaikkoihin tämän kaltaisia "infolaatikoita" jotka voivat sisältää otsikon, tekstiä, kuvan ja linkkinapin. Laatikon luot lisäämällä sivulle uuden listaelementin nimeltään "infolaatikko". Luo listaan uusi elementti ja täytä elemenin tiedot.

Linkki