Karusellimainosten kuvakoko
- Hanna Lidman (Unlicensed)
Tässä artikkelissa kerromme mitkä ovat yleisimmät kuvakoot mainoskaruselleissa ja mitkä kuvakoot sopivat eri paikoissa näytettäviin mainoskaruselleihin.
- 1 Ylä- ja alakarusellin korkeuden määrittäminen
- 2 Bannereiden yleisimmät leveydet ylä- ja alakarusellissa
- 3 Bannerikuvien skaalautuminen
- 4 Esimerkkejä eri kokoisista bannereista
- 5 Vasen sivupalkki - bannerin koko
- 6 Tuotesivun bannerikuvien koko
- 7 Megamenun mainoskaruselli
- 8 Taulukko eri karusellibannereiden mitoista
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“
Alakarusellin korkeuden voi määrittää asetuksella “Alakarusellin bannereiden suurin korkeus verkkokaupassa“
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)
tämä leveys on koko ruudun levyinen laajakuvanäytöissä ja sitä pienemmissä
1740 px
1140 px
900 px
577 px
400 px
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.
Bannerikuvien skaalautuminen
Bannerikuvien koko muuttuu/skaalautuu näytön koon mukaan.
Huomioi kuitenkin seuraavat rajoitukset:
1903px leveä banneri näkyy kokonaan vain suurilla ja laajakuvanäytöillä
kuva siis rajautuu pienemmillä näytöillä vasemmasta ja oikeasta reunasta
1903px leveän kuvan reunoille ei kannata sommitella elementtejä, jotka ovat mainoksen kannalta olennaisia vaan ne kannattaa sommitella kuvan keskiosaan
1903px leveä kuva soveltuu parhaiten fiiliskuviin, jotka luovat tunnelmaa, eikä niiden rajautuminen muuta kuvan sanomaa
400px korkeassa mainoskarusellissa 1140px leveä kuva näkyy kaikilla näytöillä kokonaan
577px korkeassa mainoskarusellissa 1644px leveä kuva näkyy kaikilla näytöillä kokonaan
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.
Esimerkkimittoja 400px ja 577px korkeisiin mainoskaruselleihin
Esimerkkikuvia yläkaruselliin jos sen korkeus on 577px
Esimerkkikuvia yläkaruselliin jos sen korkeus on 400 px
Esimerkkejä eri kokoisista bannereista
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.
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.
Lisää ostoskoriin -napin alla
Tässä mainospaikassa voit käyttää joko karusellimainosta tai sisältömainosta.
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.
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
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. | Alakaruselli. | Vasen sivupalkki | Tuotesivu | Tuotesivu | Tuotesivu | Infosivu, | Megamenu, |
|---|---|---|---|---|---|---|---|
1903px | 1903px | 400x400px |
|
|
| max. 1487px | max. 1903px |
1740px | 1740px |
|
|
|
|
|
|
1140px | 1140px |
|
|
|
|
|
|
900px | 900px |
|
|
|
|
|
|
577x577px | 577x577px |
|
|
|
|
|
|
400x400px | 400x400px |
|
|
|
|
|
|
| 300x300px |
|
|
|
|
|
|
| 250x250px |
|
|
|
|
|
|