Shoupapp
E-ticaret banner ölçüleri diye arama yaptığınızda, birbiriyle çelişen uzun piksel listeleriyle karşılaşırsınız. Sebebi basit: piksel ölçüsü mağaza temanıza ve ekrana göre değişir; bir banner'ın işe yarayıp yaramayacağını asıl belirleyen şey ise oranıdır. Bu rehber, neredeyse tüm e-ticaret banner'larını kapsayan beş en boy oranıyla başlıyor; ardından bir oranı piksele nasıl çevireceğinizi, her şeklin ne kadar metin taşıyabileceğini ve tek bir kampanyayı bütün formatlarda nasıl yürüteceğinizi gösteriyor.
| Şekil | En boy oranı | Nerede kullanılır |
|---|---|---|
| Site hero görseli | 16:9 | Ana sayfanızın veya bir iniş sayfasının en üstü |
| Geniş | 2:1 | Kategori başlıkları ve e-posta başlıkları |
| İnce | 3:1 | Kampanya şeritleri ve dar başlık alanları |
| Kare | 1:1 | Akış gönderileri ve pazaryeri kampanya kutuları |
| Hikâye | 9:16 | Instagram ve Facebook hikâyeleri, dikey reklamlar |
Piksel listeleri neden birbirini tutmuyor
Her tema banner bölümlerini kendi genişliğinde gösterir, her ekran da bunları farklı bir boyutta görüntüler. Bir rehberin hero banner için bir piksel ölçüsü, başka bir rehberin bambaşka bir ölçü önermesinin nedeni budur. Hatta bazı listeler ölçüleri yanlış oranla etiketler: 2.048 × 1.024 piksele sık sık 16:9 denir, oysa bu 2:1'dir. Bir şekle göre tasarlanan banner başka bir şekle yüklendiğinde kırpılır.
Bu yüzden şu sırayı izleyin: temanızdaki bölümün kullandığı oranı bulun, o orana göre tasarlayın, sonra temanızın önerdiği genişlikte dışa aktarın.
Oranı piksele çevirmek
Oranı ve genişliği bildiğinizde yükseklik kendiliğinden çıkar. Genişliği oranın ilk sayısına bölün, ikinci sayısıyla çarpın.
| Oran | Örnek genişlik | Yükseklik |
|---|---|---|
| 16:9 | 1.920 px | 1.080 px |
| 2:1 | 2.048 px | 1.024 px |
| 3:1 | 1.800 px | 600 px |
| 1:1 | 1.080 px | 1.080 px |
| 9:16 | 1.080 px | 1.920 px |
Her bölüm için önerilen genişliği temanızın dokümantasyonunda bulabilirsiniz. Örneğin Shopify'ın kendi rehberi, görsellerin 5.000 × 5.000 px'e kadar olabileceğini ve 20 MB'ın altında kalması gerektiğini belirtir; bu da net banner'lar için fazlasıyla yer bırakır.
Şekle göre tasarlayın, şekle kırpmayın
16:9 bir hero ile 9:16 bir hikâye, aynı kampanyanın birbirinden tamamen farklı iki çerçevesidir. Birini tasarlayıp diğerine kırpmak neredeyse her zaman başlığı, ürünü ya da butonu keser. Piksel ölçüleri ölçeklenebilir; oran ise bir şeyden ödün vermeden değiştirilemez. Her şekli kendi başına kurgulayın; ürünü ve metni o çerçeveye göre yerleştirin.
Her banner için metin bütçesi
Banner'lar genelde metnin azlığından değil, fazlalığından başarısız olur. İşe yarar bir bütçe:
| Öğe | Yaklaşık sınır |
|---|---|
| Başlık | 60 karakter |
| Alt başlık | 100 karakter |
| Destekleyici metin | 180 karakter |
| Buton yazısı | 30 karakter |
Kısa şekillerde daha azını kullanın. 3:1 bir şeritte genellikle bir başlık ve bir butondan fazlasına yer yoktur. Masaüstü hero'ya sığan bir başlık, telefonda ince bir banner'da okunamaz hâle gelebilir.
Şekle göre güvenli alanlar
- 16:9 hero: Metni dış kenarlardan uzak tutun; birçok tema buralara menü, ok işaretleri veya katmanlar yerleştirir. Bölümün mobilde nasıl kırpıldığını da kontrol edin.
- 2:1 ve 3:1: Ürünü ve metni orta bantta tutun; bu banner'lar çoğu zaman çok düşük yüksekliklerde gösterilir.
- 1:1: Ortalanmış kompozisyonlar en güvenlisidir, çünkü akışlar ve kutular köşeleri yuvarlatılmış veya kırpılmış bir önizleme gösterebilir.
- 9:16 hikâye: Üst ve alt kısmı platformun profil adı, butonları ve yanıt çubuğu için boş bırakın; ürünü orta üçte bire yerleştirin.
Hedefe göre stil
| Hedef | Uyan stil | Metnin vurgusu |
|---|---|---|
| Ürün lansmanı | Sade veya premium | Ürün adı ve tek bir fayda |
| İndirim duyurusu | İddialı | Teklifin başlıkta yer alması |
| Bir faydayı öne çıkarma | Yaşam tarzı | Kullanım hâlinde gösterilen fayda |
| Bilinirlik oluşturma | Premium | Az metin, çoğu zaman butonsuz |
Yapay zekâ banner metinleri neden bozuluyor
Tamamen görsel olarak üretilen banner'lar çoğunlukla metinde çuvallar: bir kelimeye benzeyen ama tam olmayan harfler, tek karakteri yanlış yazılmış bir marka adı. Güvenilir yöntem, görseli hiç metin olmadan üretmek; başlığı, alt başlığı ve butonu üzerine gerçek yazı olarak yerleştirmektir. Böylece ne yazdıysanız her şekilde birebir o görünür.
Tek kampanya, beş şekil
Bir ürün lansmanı genellikle tek bir ürün fotoğrafıyla baştan sona karşılanabilir:
- Başlığı bir kez yazın, yukarıdaki bütçeye uyarak.
- Ana sayfa için 16:9 hero'yu hazırlayın.
- Lansman e-postası için 2:1 başlık görselini hazırlayın.
- Sosyal medya için 1:1 gönderiyi ve 9:16 hikâyeyi hazırlayın.
- Kategori sayfası veya site geneli kampanya çubuğu için 3:1 şeridi kullanın.
Aynı başlığı ve aynı buton rengini her yerde koruyun; böylece kampanyanızı nerede görürlerse görsünler insanlar tanır.
Tek ürün fotoğrafından bütün seti çıkarmak
Shoupapp'in ürün banner hazırlama aracı, kitaplığınızda zaten bulunan bir fotoğraftan çalışır. Hedefi (ürün lansmanı, indirim duyurusu, bir faydayı öne çıkarma, bilinirlik oluşturma), formatı ve stili (sade, yaşam tarzı, premium veya iddialı ya da seçimi ona bırakın) siz belirlersiniz. Kendi başlığınızı yazabilir ya da boş bırakırsanız başlık sizin için İngilizce, İspanyolca, Almanca, Fransızca, İtalyanca, Portekizce, Felemenkçe, Türkçe veya Lehçe olarak yazılır.
Her format kendi şekline göre kurgulanır ve metin görselin üzerine gerçek yazı olarak yerleştirilir; yani yazım her zaman doğrudur. Buton isteğe bağlıdır ve marka renginizi alır; yazı rengi okunur kalsın diye otomatik seçilir. İhtiyacınız olan her şekil için aynı fotoğrafı bir kez çalıştırın. Her banner, orijinalin yanında yeni bir dosya olarak kaydedilir; indirmeye ya da fotoğraf editöründe son rötuşları yapmaya hazırdır. Banner üretimi bir otomasyonun adımı da olabilir; böylece yeni ürünler fotoğrafları gelir gelmez kendi banner'ına kavuşur.
Mağazadaki banner türleri
| Banner | Tipik şekil | Neye ihtiyacı var |
|---|---|---|
| Ana sayfa hero | Masaüstünde 16:9, mobilde genellikle daha uzun | Ürün, başlık, buton |
| Koleksiyon veya kategori başlığı | 2:1 veya 3:1 | Koleksiyon adı, tek bir ürün veya doku |
| E-posta başlığı | 2:1 | Teklif ve tek bir ürün; önizleme panelinde okunabilmeli |
| Kampanya kutusu | 1:1 | Teklif, büyük puntoyla |
| Hikâye veya dikey reklam | 9:16 | Ortada ürün, güvenli alanda metin |
Masaüstü ve mobil hero görselleri
Birçok tema ana sayfa hero'sunu telefonlarda farklı bir şekilde, çoğu zaman 16:9'dan daha uzun gösterir ve masaüstü görselini bu çerçeveye kırpar. Temanızın ayrı bir mobil görsel yüklemenize izin verip vermediğini kontrol edin. İzin veriyorsa mutlaka hazırlayın: aynı mesajın uzun çerçeveye göre kurgulanmış hâli. İzin vermiyorsa ürünü ve başlığı 16:9 banner'ın ortasında tutun; kırpmadan zarar görmeden çıkan bölge orasıdır.
Dosya formatı ve boyutu
Banner'lar genellikle bir sayfadaki en büyük görsellerdir; dolayısıyla sayfanın açılma hızını en çok onlar etkiler. Fotoğraf içeren banner'ları JPG veya WebP olarak kaydedin; aynı banner'ın PNG hâli çok daha büyüktür. Temanızın gösterdiği genişlikte dışa aktarın, daha büyüğünde değil. Sonra sayfayı mobil bağlantıyla kontrol edin: hero, sayfanın geri kalanından gözle görülür şekilde sonra beliriyorsa dosya fazla ağırdır.
Banner soruları
Shopify mağazası için en iyi banner ölçüsü nedir?
Temaya ve bölüme göre değişir. Genişlik için temanın dokümantasyonuna bakın ve bölümün kullandığı orana göre tasarlayın.
JPG mi, PNG mi, WebP mi kullanmalıyım?
Fotoğraf içeren banner'larda JPG veya WebP dosyaları küçük tutar. PNG'yi yalnızca şeffaflığa ihtiyacınız olduğunda kullanın.
Aynı banner'ı her ölçüde yeniden kullanabilir miyim?
Dosyayı değil, mesajı yeniden kullanın. Her şekli kendi başına kurgulayın.