Lappset.fi uudistus 2016

Lappset.fi uudistus 2016 Lappset Group Ltd Versio 0.1 Tero Suihkonen TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, 02150 Espoo Rovakatu 17, 2 krs. 96100 Rovaniemi Y-tunnus 1008465-8 www.tietotalo.fi

Päivämäärä Versio Kuvaus Tekijä 28.6.2016 0.1 Kuvataan käyttöliittymän toiminnot sekä moduulit Tero Suihkonen 30.6.2016 0.2 Bannerkuvan asemointi Tero Suihkonen Asemoidut sivupohjat: - Accordion - Reference-info 11.7.2016 0.3 Asemoidut sivupohjat: Tero Suihkonen - Persons - CTA-button CTA -linkin lisääminen seuraaviin sivupohjiin - Landinpage-intro - Editor-media 2

1. KÄYTTÖLIITTYMÄ... 5 1.1 Käyttöliittymän asetukset... 5 1.1.1 BannerImage... 5 1.1.2 PageListImage... 7 1.1.3 Theme... 8 1.1.4 ShowBanner... 10 1.1.5 ShowPageTitle... 10 1.1.6 NarrowContent... 11 1.1.7 PageBottom... 12 1.2 Languagemenu... 12 1.3 Topmenu... 13 1.4 Footer... 13 1.5 MegaDropdown... 13 2. MODUULIT... 14 2.1 Asemoitu sisältö... 14 2.1.1 Accordion... 14 2.1.2 Article-intro... 15 2.1.3 Article promotion... 15 2.1.4 Author-comments-bar... 15 2.1.5 Carousel... 16 2.1.6 Content-blocks... 16 2.1.7 CTA-button... 16 2.1.8 Date-tags-bar... 17 2.1.9 Editor-media... 17 2.1.10 Footer... 17 2.1.11 Hero... 18 2.1.12 Icon-links... 18 2.1.13 Landingpage-intro... 19 2.1.14 Megadropdown... 19 2.1.15 Pagelist... 20 2.1.16 Persons... 20 2.1.17 Product-Categrories... 21 2.1.18 Promotion-Blocks... 21 2.1.19 Quote... 22 2.1.20 Reference-info... 22 2.2 Sivulista... 22 2.2.1 Default... 23 2.2.2 Article-promotions... 23 2.2.3 Carousel... 23 2.2.4 Grid... 24 2.2.5 Tabs... 24 2.3 Tuotekaruselli... 25 2.4 Uutiskirjeen tilaus... 26 2.5 CSS-luokat... 26 3

4

1. Käyttöliittymä Uuden käyttöliittymän nimi on Lappset-16. 1.1 Käyttöliittymän asetukset Käyttöliittymäasetukset ovat käyttöliittymään sidoksissa olevia asetuksia. Ne löytyvät jokaisen sivun yläosan työkalupalkissa olevasta välilehdestä. 1.1.1 BannerImage Sivun ylätunnisteen kuva. Kuva perityyy automaattisesti alasivuilla. Tätä kuvaa käytetään sivulista moduulin nostokuvana, jos PagelistImage kuva ei ole määritetty. Poikkeuksena täysleveä Article-promotion pohja, jossa tämä bannerikuva oletuksena. Kuvan koko: 1600x900px (16:9) Huom! Tiedostojen latauksessa muista ottaa Muokkaa suuret kuvat web-kokoon (1200x900) valinta poist päältä! Kuvan päälle tulostuu automaattisesti sivun nimi ja otsikko. Jos sivun otsikko määritetty, niin se tulostuu pääotsikkona ja sivun nimi siirtyy apuotsikoksi. 5

BannerImagePosition Kuvasta näytetään vain osa, joten kohdistaminen onnistuu BannerImagePosition asetuksella. ImageProducts Tähän kenttää voi määrittää kuvassa olevat tuotteet tuotenumerolla pulkulla erotettuna esim. 120100,120200. Tämän avulla kuvaan voidaan liittää Näytä kuvan tuotteet toiminto. 6

1.1.2 PageListImage Tätä kuvaa käytetään sivulistamoduulissa listauskuvana. Voi hyödyntää myös asemoiduissa sisältöpohjissa. Kuvan koko: 960x540px (16:9) Muutama esimerkki käyttötapauksista sivulista moduulin sivupohjista: Sivulista: Grid 7

Sivulista: Carousel 1.1.3 Theme Oletusvärinä sininen. none (sininen) blue pink green Teema vaikuttaa muutamien sisältöelementtien väritykseen: Bannerin otsikon taustaväri Alareunan kaarielementin väri Nostojen otsikon taustaväri Moduuliotsikon alareunan viivan väri Lainausmerkin väri yms 8

9

1.1.4 ShowBanner Asetuksella määritetään näytetäänkö ylätunnisteen banneria. Oletuksena aktiivisena. Tämä asetus pois päältä tilanteissa, kun sisältöa halutaan korostaa tai muuten saada ylemmäs. Esim. Etusivulla banneria ei tarvita, koska sivusisällössä iso nostoelementti. 1.1.5 ShowPageTitle Asetuksella määritetään näytetäänkö sisällössä ylätunniste. Sisällön ylätunnisteeseen tulostuu: sivun julkaisupäivämäärä, avainsanat, addthis, nimi/otsikko sekä kuvaus. Käytetään esim. artikkeleissa ja blogeissa. 10

1.1.6 NarrowContent Asetuksella voidaan määrittää kapeampi sisältöalue. Käytetään esim. Artikkeleissa ja blogeissa. 11

1.1.7 PageBottom Asetuksella voidaan määrittää sisältöalueen alatunnisteen sisältö. Käytetään esimerkiksi referenssi osiossa, jossa automaattisesti jokaisen referenssisivun alaosaan tulee sivulistassa ehdotuksen muista referensseistä sekä CTA elementit. 1.2 Languagemenu ui/languagemenu nimiseltä sivulta. 12

1.3 Topmenu ui/topmenu nimiseltä sivulta. 1.4 Footer Sisältö haetaan ui/footer nimiseltä sivulta. Ko. sivulla asemoidut sivupohjat Footer 1.5 MegaDropdown Sisältö haetaan ui/megadropdown nimiseltä sivulta. 13

Ko. sivulla asemoidut sivupohjat MegaDropDown 2. Moduulit 2.1 Asemoitu sisältö Asemoidut sisällöt ovat käyttöliittymään sidoksissa olevia sisältöversiokohtaisia sisältöpohjia. Tällä moduulilla on pyritty helpottamaan sisällöntuotantoa (vähentää editorin käyttöä) ja tyypittämään sisältöä paremman responsiivisuuden saavuttamiseksi. 2.1.1 Accordion Voidaan käyttää sisällön tiivistämiseen. 14

2.1.2 Article-intro Voidaan käyttää tapauksissa, joissa halutaan erilainen sisältö kuin ShowPageTitle toiminnolla. 2.1.3 Article promotion Suuri täysleveä nostoelementti. Kuvan koko 1600x900px. 2.1.4 Author-comments-bar Voidaan käyttää esim. blogien yhteydessä kirjoittajan tietojen esittämiseen. 15

2.1.5 Carousel Karusellielementti, johon voi laittaa youtube video, kuvan ja otsikkoelementin. Otsikkoelementtiä ei näytetä videon yhteydessä. 2.1.6 Content-blocks Yleiskäyttöinen pohja, jolla voi tehdä palstoitettua sisältö. Elementteinä youtube video, kuva, kuvateksti ja editor. Palstajaottelu 100%, 66%, 50%, 33%, 25%. Rivitys tulee automaattisesti. 2.1.7 CTA-button 16

Tällä voi toteuttaa yksinkertainen painike-linkin. Painikkeeseen tulee automaattisesti sivun teemaväri. Oletusväri sininen. 2.1.8 Date-tags-bar Tällä saa sivulle asetetut avainsanat, julkaisupäivämäärän sekä addthis jakopainikkeet. 2.1.9 Editor-media Yleiskäyttöinen malli, jolla saa helposti tekstin ja kuvan/videon palstoitettua. 2.1.10 Footer Tätä käytetään alatunnisteen sisällön rakentamiseen. Pohjaa käytetään ainoastaan ui/footer sivulla. 17

2.1.11 Hero Iso nostoelementti. Taustakuva, otsikkoelementti ja oikean laidan pikalinkit. 2.1.12 Icon-links Ikonilinkit palstoituksella. Ikonikirjasto: http://zavoloklom.github.io/material-design-iconic-font/icons.html 18

2.1.13 Landingpage-intro Alasivujen alussa käytettävä malli, jossa esittelyteksti sekä oikeassa laidassa pikalinkit. 2.1.14 Megadropdown Päävalikon pudotusvalikkojen sisältö. Moduuli tulee asettaa jokaiselle päävalikkolinkille ja olla allekkain samassa järjestyksessä. 19

2.1.15 Pagelist Nostoelementti, jossa sama ulkoasu kuin sivulista moduulin oletuspohjassa. Eli voi tehdä manuaalisesti linkkejä esim. ulkoisiin palveluihin. 2.1.16 Persons Käytetään henkilöiden esittelyyn. Kuvan koko: 300x400px 20

2.1.17 Product-Categrories Käytetään tuotekategorioiden listaukseen. Linkit suoraan tuotehakuun parametrisoituna. Viimeiseeen elementtiin tulee laittaa linkki, joka listaa kaikki tuotteet. Tälle elementille ei tule määrittää kuvaa, vaan nuoli-ikoni tulee automaattisesti. 2.1.18 Promotion-Blocks Nostoelementin eri kokoversioilla voi luoda erilaisia ruudukkoja. Jos elementissä Youtube video otsikkoelemettiä ei näytetä. Pystykuvan koko on 615x710px 21

2.1.19 Quote Lainaustekstielementti. 2.1.20 Reference-info Rerenssikohteen perustiedot sekä kartta 2.2 Sivulista 22

Listaa valitusta sivuhaarasta sivut nostoelementteihin. 2.2.1 Default Ensisijainen nostolistaus. Tiedot haetaan sivun tiedoista: sivun nimi tai otsikko, kuvaus sekä nostokuva. Ensisijaisesti PageListImage kuva. Jos tätä ei määritetty käytetään BanneriImage kuvaa. 2.2.2 Article-promotions Täysleveä nostoelementti. Tämän aina vain yksi valinta. Ensisijaisesti BanneriImage kuva. Jos tätä ei määritetty käytetään PageListImage kuvaa. 2.2.3 Carousel Valitut sivut karusellielementtiin. 23

2.2.4 Grid Nostoelementit tiiviimmin esitettynä. Otsikkoelementti kuvan päälle. 2.2.5 Tabs Valitut sivun välilehtiin. Käytetään mm. etusivun tuotekategoria-esittelyssä. 24

2.3 Tuotekaruselli Tuotenostomoduuli, jossa kaksi erilaista ulkoasumallia: basic ja promotion. Basic 25

Promotion 2.4 Uutiskirjeen tilaus 2.5 CSS-luokat Moduulin ulkoasua voi muokata myös asetuksista löytyvän CSS-luokka kentän kautta (ks. kuva jäljempänä). Ulkoasu muokkautuu seuraavilla määrityksillä: CSS-luokka Kuvaus 26

content-wide remove-bottom-margin gray-bg Täysleveä sisältö. Tällä voidaan poistaa moduulin alaosan marginaali esim. jos halutaan moduuli kiinni alatunnisteeseen. Moduulialueelle harmaa taustaväri. Käytetään esim. etusivun somenostoissa. 27