Genel Bakış
HTML Düzenleyici, kendi HTML’nizi kullanarak tamamen özel, markalı e-postalar göndermenizi sağlar. Şu durumlarda HTML Düzenleyici’yi kullanmalısınız:- Düzen, boşluk ve stilleme üzerinde tam kontrole ihtiyaç duyduğunuzda
- Hazır HTML e-posta şablonlarınız zaten mevcutsa
- E-posta istemci sınırlamaları içinde çalışmaya alışkınsanız
HTML e-postalar web sayfalarıyla aynı değildir. Birçok HTML ve CSS özelliği, e-posta istemcileri arasında desteklenmez veya tutarsız biçimde görüntülenir.
Ön Koşullar
HTML Düzenleyici’yi kullanmadan önce aşağıdakileri sağladığınızdan emin olun:- Duyarlı HTML e-postalar oluşturma deneyiminiz var
- Tüm görseller herkese açık erişilebilir URL’lerde barındırılıyor (siteniz, CDN, S3 vb.)
Beklenen Sonuç
Kurulumun ardından e-postanız:- Başlıca istemcilerde (Gmail, Outlook, Apple Mail) tutarlı biçimde görüntülenir
- Bağlantı tıklamalarını doğru şekilde izler
- Çalışan bir abonelik iptal mekanizması içerir
- Spam ve teslim edilebilirlik kontrollerini geçer
Kendi şablonlarınızı içe aktarın
Hazır HTML e-posta şablonlarınız varsa bunları OneSignal’a aşağıdaki yollardan biriyle ekleyebilirsiniz:- E-posta Şablonu Yönlendirme özelliğini kullanın
- Şablon Oluşturma API’si ile şablonları programatik olarak oluşturun
- HTML’nizi kopyalayıp HTML Düzenleyici’ye yapıştırın
HTML Düzenleyici’yi Kullanma
Bir e-posta mesajı oluştururken düzenleyici türü olarak HTML Düzenleyici’yi seçin.- HTML’nizi düzenleyiciye yapıştırın veya yazın.
- İstemciler ve cihazlar genelinde görüntülemeyi önizlemek için Test E-postası Gönder’i kullanın.
- Zamanlama veya göndermeden önce düzen sorunlarını düzeltin.
Bağlantılar ve izleme
Bağlantı izleme, HTML e-postalar için varsayılan olarak etkindir. Çoklu bağlantı izleme desteklenir ve tıklamalar mesaj raporlarında görünür.Bağlantılar
E-posta için bağlantı izleme, çoklu bağlantı izleme ve tıklama analitiğini yapılandırın.
Derin bağlantı
Alıcıları e-posta bağlantılarından uygulamanızdaki belirli ekranlara yönlendirin.
Abonelik iptal bağlantıları
Tüm pazarlama e-postaları bir abonelik iptal bağlantısı içermelidir. Geçerli bir abonelik iptal seçeneği olmayan e-postalar için şu ihtimaller daha yüksektir:- Spam olarak işaretlenme
- Gönderen itibarına zarar verme
- Gelen kutusu sağlayıcıları tarafından engelleme
- OneSignal'ın varsayılan abonelik iptal bağlantısı
- Özel abonelik iptali sayfası kullan (isteğe bağlı)
HTML’nizin herhangi bir yerine (genellikle alt bilgide) şu yer tutucuyu ekleyin:Tıklandığında bu bağlantı, alıcının OneSignal’daki e-posta Aboneliğini iptal eder.
HTML
HTML e-posta en iyi uygulamaları
Her zaman satır içi CSS kullanın
Çoğu e-posta istemcisi<style> bloklarını ve harici stil sayfalarını kaldırır.
Bu aracı deneyin: Responsive Email CSS Inliner
Karanlık mod stilleme
Birçok e-posta istemcisi, karanlık mod etkinken otomatik renk ters çevirme uygular. Bu durum öngörülemeyen sonuçlara yol açabilir — düğmeler siyah arka plan ve siyah metinle görünebilir ya da logolar kaybolabilir. Bu sorunları önlemek için e-postanızın hem açık hem de karanlık modda nasıl görünmesi gerektiğini açıkça tanımlayın.E-posta istemcilerinin karanlık modu nasıl ele aldığı
| İstemci | Davranış | prefers-color-scheme CSS’yi destekler mi? |
|---|---|---|
| Apple Mail (iOS/macOS) | Tam renk ters çevirme | Evet |
| Gmail (iOS/Android uygulamaları) | Kısmi ters çevirme — açık arka planları değiştirir ancak tüm renkleri değiştirmez | Hayır |
| Gmail (Web) | Karanlık mod oluşturma yok | Geçerli değil |
| Outlook (Windows) | Word oluşturma motoru kullanarak tam ters çevirme | Hayır — çoğu CSS geçersiz kılmayı yoksayar |
| Outlook (Mac/iOS) | Kısmi ters çevirme | Evet |
| Yahoo Mail | Kısmi ters çevirme | Hayır |
| Samsung Mail | Tam ters çevirme | Hayır |
En iyi uygulamalar
- Temel stilleri satır içi tanımlayın. Varsayılanlara veya saydamlığa güvenmek yerine arka plan ve metin renklerini her zaman doğrudan öğelerde ayarlayın.
- Karanlık mod için medya sorguları kullanın.
@media (prefers-color-scheme: dark)’ı destekleyen istemciler (Apple Mail, Outlook Mac/iOS), karanlık mod için stilleri geçersiz kılmanıza olanak tanır. !important’ı dikkatli kullanın. Karanlık mod geçersiz kılmalarına!importanteklemek, gelen kutularının özel stillerinizin üzerine ters çevirme kuralları yığmasını önlemeye yardımcı olur.- Tema desteğini bildirin. Otomatik ters çevirmeyi azaltmak için HTML
<head>bölümünüze şu meta etiketlerini ekleyin:
- Saf beyaz ve saf siyahtan kaçının. Tam ters çevirme istemcilerinin etkisini azaltmak için kırık beyaz ve koyu gri tonları kullanın.
- Saydam PNG’leri dikkatli kullanın. Saydam arka planda koyu logolar, karanlık arka planda görünmez hale gelir. Açık bir anahat ekleyin veya yerleşik arka planlı bir sürüm kullanın.
Sürükle-bırak Düzenleyici kullanarak karanlık mod CSS eklemenin adım adım açıklaması için bkz. Sürükle-bırak ile karanlık mod stilleme.
E-posta için önerilen görsel boyutları
En boy oranları
En boy oranları
- Başlık/Banner görselleri:
3:1veya4:1(ör.600×200veya600×150) - Hero görseller:
16:9veya2:1(ör.600×338veya600×300) - Kare görseller:
1:1(ör.300×300) — ürün ızgaraları için idealdir - Küçük resimler:
1:1veya4:3 - Maksimum genişlik:
600–700pxstandarttır (çoğu e-posta istemcisi) - Retina ekranlar için
2xçözünürlükte tasarlayın (ör.1200pxgenişliğinde,600px’de gösterilen)
Dosya boyutu
Dosya boyutu
- Bireysel görselleri
100–200 KBaltında tutun - Toplam e-posta boyutu (görseller dahil)
1 MBaltında olmalı - Daha küçük görseller, daha hızlı yükleme süreleri ve daha iyi teslim edilebilirlik anlamına gelir
Dosya formatları
Dosya formatları
- JPG — fotoğraflar için en iyi seçenek
- PNG — grafikler, logolar ve saydamlık içeren görseller için en iyi seçenek
- GIF — basit animasyonlar için (dosya boyutunu küçük tutun)
- WebP — e-postada henüz yaygın olarak desteklenmiyor; kullanmaktan kaçının
Genel ipuçları
Genel ipuçları
- Erişilebilirlik için ve görseller yüklenmediğinde her zaman alt metin ekleyin
- Stilleme için satır içi CSS kullanın (birçok istemci
<style>etiketlerini kaldırır) - Arka plan görsellerinden kaçının (istemci desteği tutarsızdır)
- İstemciler arasında test edin — Gmail, Outlook ve Apple Mail farklı görüntüler
- Outlook görsel boyutlarını genellikle yoksayar; bu nedenle HTML’de hem
widthhem deheightözelliklerini ayarlayın
Görsellere alt metin ekleyin
Alt metin erişilebilirliği artırır ve görseller engellendiğinde ya da yüklenemediğinde bilgilerin iletilmesini sağlar. Başlıca e-posta istemcilerinin çoğu alt metni görüntüler ve biçimlendirir:| E-posta İstemcisi | Görselleri Engeller mi? | Alt Metin Gösterir mi? | Alt Metni Biçimlendirir mi? |
|---|---|---|---|
| AOL | Evet | Evet | Evet |
| Gmail | Evet | Evet | Evet |
| Yahoo | Evet | Evet | Evet |
| Outlook | Bazen | Evet | Evet |
Yalnızca desteklenen HTML kullanın
E-posta istemcileri şunları desteklemez:- JavaScript
<iframe>- HTML formları
- Gömülü ses veya video
- CSS konumlandırma veya katmanlama teknikleri
Göndermeden önce doğrulayın
Göndermeden önce şunları kontrol edin:- Tüm bağlantılar çalışıyor (bozuk bağlantılar teslim edilebilirliği düşürür ve spam filtrelerini tetikleyebilir)
- Abonelik iptal bağlantısı doğru çalışıyor
- Test e-postaları Gmail, Outlook ve Apple Mail’de doğru görüntüleniyor
- Karanlık mod görüntülemesi kabul edilebilir durumda
- HTML, erişilebilirlik ve sürdürülebilirlik için anlamsal etiketler ve uygun girintileme kullanıyor
E-postanız başlıca istemcilerde doğru görüntüleniyor ve abonelik iptali çalışıyorsa gönderilmeye hazırdır.
Kişiselleştirme
Aboneye özgü içerikleri (adlar, etiketler veya yedek değerler gibi) doğrudan HTML’nize eklemek için Liquid şablonlama kullanın. Örnek:{{ first_name | default: "there" }}
Mesaj kişiselleştirme
Kullanılabilir kişiselleştirme değişkenleri ve bunların nasıl kullanılacağı.
Liquid sözdizimi kullanma
Koşullar, filtreler, döngüler ve gelişmiş Liquid kalıpları.
SSS
Mevcut e-posta şablonlarımı yeniden kullanabilir miyim?
Evet. E-posta Şablonu Yönlendirme aracılığıyla OneSignal’a iletin, Şablon Oluşturma API’si ile yükleyin veya HTML’yi doğrudan düzenleyiciye kopyalayıp yapıştırın.Özel yazı tipleri kullanabilir miyim?
Evet, ancak destek değişkenlik gösterir. Özel yazı tiplerini@font-face ile tanımlayın ve her zaman sistem yazı tipi yedeklerini belirtin. Windows’ta Outlook, web yazı tiplerini tamamen yoksayar ve sistem varsayılanlarına geri döner.
E-postam neden karanlık modda farklı görünüyor?
Her e-posta istemcisi karanlık modu farklı uygular — bazıları renkleri tamamen ters çevirir, bazıları kısmen ters çevirir, Gmail web ise karanlık mod uygulamaz. Ayrıntılar için yukarıdaki istemci davranış tablosuna bakın. Görüntülemeyi kontrol etmek için açık ve karanlık mod stillerini açıkça tanımlayın.E-postada desteklenmeyen HTML ve CSS özellikleri nelerdir?
JavaScript,<iframe>, HTML formları, gömülü ses/video ve CSS konumlandırma desteklenmez. Tüm stilleme için satır içi CSS kullanın — çoğu istemci <style> bloklarını ve harici stil sayfalarını kaldırır.
Maksimum e-posta boyutu nedir?
Toplam e-posta boyutunu (HTML + görseller) 1 MB altında tutun. 102 KB’ı aşan HTML içeren e-postalar Gmail tarafından kırpılır; alt kısımdaki içerik “Tüm mesajı görüntüle” bağlantısının arkasında gizlenir.İlgili Sayfalar
Sürükle-bırak ile e-posta tasarlama
Tam HTML yazmadan e-posta tasarlamak için görsel e-posta oluşturucu.
E-posta genel bakışı
OneSignal ile e-posta göndermeye yönelik uçtan uca kılavuz.
E-posta şablonları
E-posta tasarımlarını kampanyalar arasında kaydedin ve yeniden kullanın.
Abonelik iptal bağlantıları
Uyumluluk için varsayılan veya özel abonelik iptal bağlantıları ekleyin.
Mesaj kişiselleştirme
E-postaları etiketler, Liquid sözdizimi ve dinamik içerikle kişiselleştirin.
E-posta şablonu yönlendirme
Mevcut HTML e-posta şablonlarını OneSignal’a aktarın.