Lappset.fi uudistus 2016

Transkriptio

1 Lappset.fi uudistus 2016 Lappset Group Ltd Versio 0.1 Tero Suihkonen TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, Espoo Rovakatu 17, 2 krs Rovaniemi Y-tunnus

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

3 1. KÄYTTÖLIITTYMÄ Käyttöliittymän asetukset BannerImage PageListImage Theme ShowBanner ShowPageTitle NarrowContent PageBottom Languagemenu Topmenu Footer MegaDropdown MODUULIT Asemoitu sisältö Accordion Article-intro Article promotion Author-comments-bar Carousel Content-blocks CTA-button Date-tags-bar Editor-media Footer Hero Icon-links Landingpage-intro Megadropdown Pagelist Persons Product-Categrories Promotion-Blocks Quote Reference-info Sivulista Default Article-promotions Carousel Grid Tabs Tuotekaruselli Uutiskirjeen tilaus CSS-luokat

4 4

5 1. Käyttöliittymä Uuden käyttöliittymän nimi on Lappset 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ä 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

6 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 , Tämän avulla kuvaan voidaan liittää Näytä kuvan tuotteet toiminto. 6

7 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

8 Sivulista: Carousel 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 9

10 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 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

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

12 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

13 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

14 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 Accordion Voidaan käyttää sisällön tiivistämiseen. 14

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

16 2.1.5 Carousel Karusellielementti, johon voi laittaa youtube video, kuvan ja otsikkoelementin. Otsikkoelementtiä ei näytetä videon yhteydessä 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 CTA-button 16

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

18 Hero Iso nostoelementti. Taustakuva, otsikkoelementti ja oikean laidan pikalinkit Icon-links Ikonilinkit palstoituksella. Ikonikirjasto: 18

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

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

21 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 Promotion-Blocks Nostoelementin eri kokoversioilla voi luoda erilaisia ruudukkoja. Jos elementissä Youtube video otsikkoelemettiä ei näytetä. Pystykuvan koko on 615x710px 21

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

23 Listaa valitusta sivuhaarasta sivut nostoelementteihin 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 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 Carousel Valitut sivut karusellielementtiin. 23

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

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

26 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

27 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