Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 13 Next »

Tässä artikkelissa kerromme mitkä ovat yleisimmät kuvakoot mainoskaruselleissa ja mitkä kuvakoot sopivat eri paikoissa näytettäviin mainoskaruselleihin.

Huomioi, että sama kuvasuhde ei välttämättä toimi sekä työpöytä- ja mobiilinäkymässä. Suosittelemme lataamaan mobiilinäkymään erillisen kuvan tai piilottamaan mainoksen mobiilinäkymästä, mikäli mobiilissa näytetään muita mainoksia, joissa on eri korkuinen kuva.

Jätä karuselliin tulevan kuvan reunoille aina turva-alue, jonne et sijoita mitään olennaista. Kun mainoskaruselli skaalautuu eri kokoiselle näytöille sen reunoista saattaa jäädä osa piiloon.

Ylä- ja alakarusellin korkeuden määrittäminen

Ylä- ja alakarusellin korkeus määritetään verkkokaupan asetuksista, mutta bannerin leveys voi olla mikä tahansa. Käyttäjän näytön koko vaikuttaa siihen kuinka leveän bannerin käyttäjä näkee.

Yläkarusellin korkeuden voi määrittää verkkokaupan asetuksella “Yläkarusellin bannereiden suurin korkeus verkkokaupassa“

image-20240703-122459.pngimage-20240919-143822.png

Alakarusellin korkeuden voi määrittää asetuksella “Alakarusellin bannereiden suurin korkeus verkkokaupassa“

image-20240703-122705.png

image-20240919-143951.png

Muiden karusellien korkeutta ei voi muuttaa.

Muut karusellit verkkokaupassa sijaitsevat

  • sivumenun alla

  • sisältösivun alareunassa

  • tuotesivulla tuotekuvan alla

  • tuotesivulla ostoskorinapin alla

  • tuotekuvaus täbin alareunassa

  • tuotesivun alareunassa

Bannereiden yleisimmät leveydet ylä- ja alakarusellissa

Graafikkoidemme käyttämiä yleisimpiä bannerikuvien leveyksiä ovat:

  • 1903 px (maksimileveys karusellibannerin kuville)

  • 1740 px

  • 1140 px

  • 900 px

  • 577 px

  • 400 px

Mainoskuvan leveys voi olla mitä vaan 1903px asti. Kuva skaalautuu sen mukaan, mikä korkeus karusellissa on.

Huom! Jos haluat laittaa saman mainoksen yläkaruselliin ja tuotesivulle tuotekuvan alle, niin suosittelemme, että teet kaksi erikokoista kuvaa samassa mittasuhteessa.

Jos laitat ison yläkaruselliin tulevan kuvan myös tuotesivulle, jonka mainospaikka on pienempi, niin kuva kyllä skaalautuu oikean kokoiseksi mutta hidastaa sivun latautumista turhaan.

Jos teet bannerin jonka leveys on 1903 pikseliä ja käyttäjän näytön leveys on 1740 pikseliä, tällöin banneri ei näy kokonaan käyttäjälle vaan sen reunoista rajautuu osa pois. Ota tämä huomioon kun suunnittelet kuvia ja sommittele kuvan tärkeimmät elementit niin, että ne eivät rajaudu pois.

Esimerkkikuvia yläkaruselliin jos sen korkeus on 577px

image-20240919-134737.png

Esimerkkikuvia yläkaruselliin jos sen korkeus on 400 px

image-20240919-135042.png

Esimerkkejä eri kokoisista bannereista

image-20240823-120315.png
image-20240823-121004.png

Vasen sivupalkki - bannerin koko

Sivupalkin bannerin leveys on responsiivinen ja noudattaa sen yläpuolella olevan sivumenun leveyttä.

Voit käyttää tässä mainospaikassa esimerkiksi kuvakokoa 400x400px.

image-20240823-122233.png

Jos lisäät tähän mainospaikkaan vaakamallisen bannerin, se rajautuu neliön malliseksi ja kuvan reunat eivät näy.

Sivumenu ja sen alla oleva karuselli ei näy mobiilikäyttäjille.

Tuotesivun bannerikuvien koko

Tuotekuvan alla

Tuotekuvan alla oleva karuselli on responsiivinen ja sen koko muuttuu riippuen näytön leveydestä. Tässä esimerkissä mainokseen on lisätty kuva, jonka mitat ovat 1200x400px.

image-20240923-084311.png

Lisää ostoskoriin -napin alla

Tässä mainospaikassa voit käyttää joko karusellimainosta tai sisältömainosta.

image-20240923-084118.png

Tuotekuvaus-täbin alareunassa

Huomioi, että tämä mainospaikka ei näy jos tuotteella ei ole tuotekuvausta.

Jos käytössä on myös mainospaikka Tuotekuvauksen oikea reuna, niin karuselli asemoituu sen alapuolelle. Ota tämä huomioon, jos tuotekuvaus on kovin lyhyt ja oiekan reunan sisältömainos on pitkä. Tällöin tuotekuvauksen ja alareunan karusellin väliin jää tyhjää tilaa.

Jos oikean reunan sisältömainosta ei ole lainkaan, siloin karuselli asettuu heti tuotekuvauksen sisällön alapuolelle.

image-20240829-103158.png

image-20240829-103337.png

Tuotesivun alareuna

Tässä karusellissa on virhe, johon olemme pyytäneet korjausta. Virheen johdosta karuselliin laitettu rajautuu korkeussuunnassa.

Voit käyttää karusellin sijaan tässä mainospaikassa sisältömainosta.

Megamenun mainoskaruselli

  • Megamenun karusellin korkeus on aina 200px

  • Megamenun karusellin kuvan maksimileveys on 1903px

image-20240923-102634.png

image-20240923-102709.png

Taulukko eri karusellibannereiden mitoista

Taulukossa ilmoitettu max. mitta on karuselliaukon maksimimitta. VOit laittaa karuselliin leveämmänkin kuvan, mutta sen reunat jäävät kuva-alueen ulkopuolelle.

Yläkaruselli.
korkeus 400 tai 577px

Alakaruselli.
korkeus 577, 400, 300 tai 250px

Vasen sivupalkki

Tuotesivu
Lisää ostoskoriin - napin alla

Tuotesivu
Tuotekuvan alla

Tuotesivu
Tuotekuvaus täbin alareuna

Tuotesivu
Tuotekuvaus täbin oikea reuna

Infosivu,
korkeus 400px

Megamenu,
korkeus 200px

1903px

1903px

400x400px

max. 1487px

max. 1903px

1740px

1740px

1140px

1140px

900px

900px

577x577px

577x577px

400x400px

400x400px

300x300px

250x250px

  • No labels