Etusivu » Tuki » Ladattava teema: Kallela

Ladattava teema: Kallela

Starter Yes
Mini Yes
Active Yes
Pro Yes

Kallela teema on tyylitelty responsiivinen teema vasemmalla palkilla. Voit ladata sen kauppaasi ja ottaa sen käyttöön alla olevien ohjeiden mukaan. Kauppaan ladattavana teemana Kallela soveltuu parhaiten, jos sitä ei jatkomuokata kovin paljoa verkkokaupan asetuksista. Jos haluaa itse muokata ja rakentaa kauppansa ulkoasua enemmän, niin kannattaa valita jokin ulkoasun asetuksista suoraan löytyvistä teemoista. 

Normaalissa työpöytänäkymässä Kallela-teemassa on vasen palkki käytettävissä. Siihen voi lisätä ulkoasun yksityiskohtaisessa muokkauksessa lisätä elementtejä, kuten viimeksi katsotut tuotteet tai lisätä tekstilaatikoita otsikoilla ja vastaavia. Ylätunniste 2 -aluetta, jossa on kaupan logo, hakukenttä ja ostoskorin elementti ei kannata muokata kuin muokkaamalla logo-elementtiin oma logo esimerkin tilalle. Vaikka isolla näytöllä ylätunnisteissa näyttäisi olevan tyhjää tilaa, niin jos tälle alueelle lisää tai vaihtaa elementtejä, ne eivät välttämättä enää toimi responsiivisesti ja mahdu nätisti mobiililaitteen näytölle.

 

Tässä kyseisessä teemassa kapealla näytöllä esim. mobiililaitteillakatsoessa tuoteryhmävalikko muuttuu ns. hampurilaisvalikoksi vasempaan yläkulmaan ja vasen palkki tippuu etusivun sisällön alapuolelle.

   

 

Demo Lataa teema

Käyttöönotto

Saat lisättyä teeman kauppaasi seuraavasti...

1) Lataa teema tästä omalle koneellesi
2) Kaupan hallinnassa kohdassa Ulkoasu > Omat teemat napsauta alareunasta "Tuo teema" -nappia ja valitse teematiedosto.
3) Valitse "Korvaa etusivun sisältö" jos haluat, että teeman etusivun esimerkkisisältö tuodaan myös kauppaan. Huomaathan, että se korvaa kaupan etusivun sisällöt. (Kopioi tarvittaessa omat sisällöt turvaan kohdasta Sisältö/Tuoteryhmät > Lomakenäkymä > Yleinen.
4) Kun teema on ladattu kauppaan, niin se löytyy kohdasta Ulkoasu > Omat teemat listasta alimmaisena. Siellä sitä voi tarkastella, muokata ja/tai ottaa käyttöön kaupan aktiiviseksi teemaksi.

Huomaa! Jos kokeilet uutta teemaa, niin kaupasta kannattaa ottaa talteen sivuun kaupassa mahdollisesti olevat ulkoasukoodit sieltä kohdasta Asetukset > Yleiset asetukset > Lisäasetukset > HTML-koodin Head-alue. Nämä head-alueelle lisätyt koodit vaikuttavat kaikkiin kaupan teemoihin ja ulkoasuihin, joten uuden teeman käyttöönotossa voi olla ongelmia jos asetuksissa on aiemman teeman säätämiseen lisättyjä ulkoasukoodeja vielä.

Jos uutta teemaa halutaan testata vain kohdassa Ulkoasu > Omat teemat ottamatta sitä käyttöön kaupan asiakaspuolelle, niin tällöin kaupan Head-alueelta voidaan siirtää ulkoasukoodit nykyisen kaupan teeman ulkoasun elementtiin. Eli kaupan alatunnisteeseen voi lisätä "Testi(HTML)"-elementin ja kopioida kohdassa Asetukset > Yleiset asetukset > Lisäasetukset > HTML-koodin Head-alue olevat koodit sinne. Tällöin ne vaikuttavat vain kyseisen teeman ulkoasuun ja taustalla voi helpommin testata muita teemoja.

  

Suositellut asetukset

Tässä listattuna asetuksia sivujen ja tuotteiden asetteluihin. Teema on suunniteltu toimimaan tiettyjen asetuksien kanssa ja ei välttämättä näytä hyvältä kaikilla muilla asetteluilla.

1) Kohdassa Sisältö/Tuoteryhmät > Lomakenäkymä > Asettelu vaihda etusivun tekstin asetukseksi valinta, jossa on kuva ja kolme tekstikenttää:

2) Kohdassa Sisältö/Tuoteryhmät > Lomakenäkymä > Kuvat lataa toiseen kuvakenttään etusivun isoksi kuvaksi oma kuva. Saat ladattua kuvan ilman, että kauppa pienentää sitä automaattisesti ottamalla ensin pois ruksin kohdasta "Muuta kokoa latauksen yhteydessä". Suositeltu kuvakoko mitoiltaan on noin 1500x500px.

3) Etusivun sisällöistä "Pitkä kuvaus" kenttä on teemassa otettu kuvan päälle tulevan tekstin käyttöön. Otsikkotaso 2 muotoilulla teksti tulee ison bannerikuvan päälle esimerkin mukaisella erityismuotoilulla ja Pitkä kuvaus -kenttään lisätty linkki tulee näkyviin nappina. Pitkä kuvaus 2 kenttään laitettu sisältö näkyy sitten bannerikuvan alapuolella.

4) Kohdassa Asetukset > Yleiset asetukset aseta Mobiilinäkymä: Älä käytä. Koska teema on responsiivinen, niin erillistä mobiilinäkymää ei tarvita.

5) Tuotekuvien zoomaustoiminnallisuus kannattaa asettaa pois kohdassa Tuotteet > Tuoteasetukset > Käytä tuotekuvien zoomaustoimintoa: Ei

6) Lisää koriin nappina kannattaa käyttää mallia yksinkertainen kohdasta Asetukset > Ostoskorin asetukset > Lisää koriin -toiminnon näyttäminen: pelkkä "Painike"

 

Muokkasin teemaa ja nyt se ei toimi enää responsiivisesti

Jos teet muutoksia teeman elementteihin, niin sitä ennen kannattaa tehdä varmuuskopio teemasta kohdassa Ulkoasu > Omat teemat. Jos muokatessa teeman responsiivisuus rikkoutuu, niin tällöin on helppo palata aina aiempaan tilanteeseen. Teematiedoston voi myös ladata uudelleen kauppaan.

 

En osaa! En kerkiä! = Ei hätää!

Jos teeman käyttöönottaminen tuntuu liian hankalalta tai se tuntuu vievän ajallisesti liikaa aikaa, niin meiltä on mahdollista myös ostaa teeman asennuspalvelu 295€+ALV hintaan. Palvelu kattaa teeman asentamisen, logojen ja haluttujen värien asentamisen paikoilleen ja mahdollisen tarvittavan pienen hienosäädön. Isommat teeman jatkomuokkaukset eivät kuulu teeman asentamisen palveluun ja tällaisista tarvitsee sopia sitten erikseen tarkemmin.

 

Jatkomuokkauksen rajoitukset ja mahdollisuudet

Jos tiettyjä rakenteita tai alueita muokkaa liikaa, niin niiden kanssa tulee todennäköisemmin ongelmia varsinkin siinä miten teema muotoutuu automaattisesti pienempiin näyttöihin eli sen responsiivisuuteen. Ennen jatkomuokkauksia kannattaa kohdassa Ulkoasu > Omat teemat tehdä ulkoasusta varmuuskopio, jotta tarvittaessa pääsee helposti takaisinpäin.

Ylätunniste 1: Ylätunnisteen vasen puoli on suunniteltu linkkejä varten. Oikea puoli taas on suunniteltu tili- ja kirjautumiselementtejä, sekä kielivalintaa varten. Mobiililaitteilla oikea puoli siirtyy automaattisesti tuotteiden alapuolelle ja vasen puoli piilotetaan kokonaan. Ylätunnisteeseen ei suositella lisättävän elementtejä, sillä ylätunnistetta ei olla rakennettu tukemaan lisäelementtejä.

Ylätunniste 2: Ylätunniste on rakennettu tukemaan logoa, hakukenttää ja ostoskoskoria. Ylätunnisteeseen ei suositella lisättävän elementtejä, sillä ylätunnistetta ei olla rakennettu tukemaan lisäelementtejä. Ostoskori-ikoni on kovakoodattu teemaan, joten sitä ei voi muuttaa. Jos tarvitset teemaan valkoisen ostoskorin, niin ota yhteyttä tukeen tai lisää HTML-koodin Head-alueelle tämä koodipätkä:

 <style>
html body .GeneralLayout .HorizontalNavBar .BasketBox .fa-shopping-cart 
{ filter: invert(100%) brightness(200%);}
</style>

Ylä: Ylätunniste on pyhitetty megamenulle ja se on rakennettu tukemaan vain megamenu-elementtiä. Elementin taustavärejä, fontin värejä, kokoa yms. voi muuttaa, mutta teemaa ei olla rakennettu tukemaan megamenun siirtämistä tai vaihtamista toiseen elementtiin. Ylätunnisteeseen ei myöskään suositella lisättävän elementtejä. Mobiililaitteilla ylätunniste siirretään sivun ylimmäiseksi ja megavalikko muuttuu automaattisesti ns. hampurilaismenuksi.

Vasen: Vasen sivupalkki koostuu pitkälti HTML-elementeistä, joihin voi lisätä linkkejä ja ikoneja, sekä poistaa ja muokata olemassaolevia. Vasempaan palkkiin voi koittaa lisätä myös kaupan oletuslementtejä sillä varauksella, että kaikki elementit eivät ole responsiivia, joten ne eivät välttämättä skaalaudu oikein kaikille laitteille. Mobiililaitteilla vasenpalkki siirretään tuotteiden alapuolelle. Teema on suunniteltu toimimaan vasemman palkin ollessa käytössä, joten sitä ei myöskään kannata poistaa kokonaan ulkoasun asetuksista.

Ala: Alapalkissa ei oletuksena ole sisältöä, mutta sinne voi lisätä esim. tekstiä, linkkejä tai kuvia. 

Alatunniste: Alatunniste on jaettu neljään sarakkeeseen, eli 3 HTML-elementtiin ja 1 osoite-elementtiin. Voit halutessasi lisätä linkkejä ja ikoneja HTML-elementtien sisälle, sekä poistaa ja muokata olemassaolevia. Alatunnisteeseen ei suositella lisättävän uusi elementtejä, sillä teemaa ei olla rakennettu tukemaan niitä.  

 

Blogitoiminnallisuus Kallela-teemassa

Kallela-teeman blogi eroaa hieman muiden Vilkkaan kauppajen kanssa tarjottavien teemojen blogeista sillä tavoin, että Kallela-teeman blogi on optimoitu toimimaan etenkin mobiililaitteilla. Lisäksi blogin esikatselukuva on määritetty skaalautumaan pieneksi blogin yleisnäkymässä, ylläpitäen selkeän ja hyvin rytmitetyn yleisfiiliksen, ja avautumaan täysikokoiseksi kun lukija avaa tekstin.

Näin saat esikatselukuvan toimimaan halutulla tavalla:
1. Kirjoita blogiteksti (älä lisää kuvia vielä tässä vaiheessa)
2. Mene kirjoittamasi viestin Kuvat-välilehdelle
3. Ota ruksi pois kohdasta "Muuta kokoa latauksen yhteydessä"
4. Lataa kuva (blogin esikatselukuvan olisi hyvä olla vähintään 1000px leveä ja 500px korkea

 

 

Muutoshistoria:
Versio 1.91 (09-2018) - Hampurilaiskuvake mobiilissa suurennettu, ylätunnistetta tiivistetty
Versio 1.92 (10-2018) - Hakusuodattimen otsikko käännetty eri kieliversioissa oikein, hakusuodattimen toimita mobiilissa parannettu.
Versio 1.93 (11-2018) - Ristiinmyynnin tuotekuvat isompana ja asettelua parannettu
Versio 1.94 (01-2019) - Uusi fontti "Heebo" (vanha ei sisältänyt å-kirjainta), Ostoskori- ja tarjous-kuvakkeet uusittu (nyt svg-formaatissa), muita asettelukorjauksia
Versio 1.95 (07-2019) - Teeman koodit siirretty CDN-palvelimelle. Osta napin koko nyt vapaasti muokattavissa Asetukset > Ostoskorin asetukset -sivulla.

 

 

hakusanat: responsiivinen, moderni, uusi, teema, ulkoasu, layout, design

Jaa sisältö