Ana içeriğe atla

​
Genel Bakış

OneSignal Sürükle ve Bırak Email Oluşturucusu, tam HTML yazmadan duyarlı emailleri tam olarak alıcıların gelen kutularında göründüğü gibi görsel olarak tasarlamanızı sağlar. Üç temel bileşen kullanarak email oluşturursunuz:
  • Ayarlar – tüm emaile uygulanan global stiller ve düzen
  • Satırlar – yapı ve duyarlılığı kontrol eden yatay düzen konteynerleri
  • İçerik – metin, resim, düğme ve HTML gibi bireysel bloklar
Aşağıdaki bölümler her bileşeni ve email oluşturmak için önerilen sırayı kapsar.
Şunları yapmak istiyorsanız Sürükle ve Bırak Email Oluşturucuyu kullanın:
  • Tam HTML yönetmeden emailleri görsel olarak tasarlamak (HTML blokları mevcuttur)
  • Kampanyalar arasında satırları veya şablonları yeniden kullanmak
  • Teknik olmayan ekip üyelerinin içeriği güvenle düzenlemesine izin vermek
Tam HTML kontrolüne, her yerde özel fontlara veya gelişmiş karanlık mod mantığına ihtiyacınız varsa, bunun yerine HTML Editörü kullanın.

​
Önerilen oluşturma akışı

En iyi sonuçlar ve daha az render sorunları için bu sırayı takip edin:
  1. Ayarlar’da global stilleri yapılandırın
  2. Satırlar kullanarak düzen yapısı ekleyin
  3. İçerik blokları ekleyin
  4. Kişiselleştirme ve bağlantılar ekleyin
  5. Abonelik iptali bağlantısı ekleyin (pazarlama emailleri için)
  6. Şablon olarak kaydedin veya gönderin
Tamamlandığında, emailiniz:
  • 600px’den geniş olmamalı
  • Mobil ve masaüstünde temiz bir şekilde render edilmeli
  • Gerekli uyumluluk bağlantılarını içermeli
Render veya teslim edilebilirlik sorunlarına neden olan yaygın hatalar:
  • Eksik abonelik iptali bağlantısı — pazarlama emailleri için zorunludur. Olmadan, gelen kutusu sağlayıcıları emailinizi spam olarak işaretleme olasılığı daha yüksektir.
  • 600px’den geniş email — mobilde yatay kaymaya neden olur ve birçok istemcide düzeni bozar.
  • Satırlardaki arka plan görselleri — Outlook ve birçok mobil istemci bunları render etmez. Bunun yerine Görsel blokları kullanın.
  • Yedek font yok — özel web fontları yalnızca birkaç istemcide yüklenir. Her zaman sistem font yedeklerini bildirin.
  • Aşırı büyük görseller — 1 MB üzeri emailler yavaş yüklenir ve engellenebilir. Bireysel görseller 200 KB’ın altında olmalıdır.

​
Ayarlar

Ayarlar, emailinizin temel düzenini ve stillerini tanımlar. Bu değerler, açıkça geçersiz kılınmadığı sürece satırlara ve içerik bloklarına kademeli olarak uygulanır.
Global settings panel in the Drag and Drop Editor
Tasarım AyarıAçıklama
İçerik alanı genişliğiEmailin piksel cinsinden genişliği. Önerilen: 600px.
İçerik alanı hizalamasıİçeriği sola veya ortaya hizalayın.
Arka plan rengiİçerik alanının arkasındaki renk.
İçerik alanı arka plan rengiİçerik alanının içindeki renk.
Varsayılan fontGeçersiz kılınmadığı sürece tüm metne uygulanır. Özel fontlar HTML gerektirir.
Bağlantı rengiTüm bağlantılar için varsayılan renk.
DilErişilebilirlik için HTML lang özniteliğini ayarlar. Varsayılan İngilizce.
Önerilen varsayılan: Tutarlılığı sağlamak ve blok başına geçersiz kılmaları azaltmak için Ayarlar’da mümkün olduğunca fazla stil yapılandırın.

​
Satırlar

Satırlar, emailinizin yatay düzenini tanımlar. Her satır bir veya daha fazla sütun içerebilir ve her sütun içerik blokları içerebilir. Yapınızı oluşturmak için editörde satırları sürükleyip bırakın.
Adding rows to structure an email
Düzeni ve boşluğu kontrol etmek için satırları kullanın. Önemli düzen kararları için bireysel içerik bloklarına bağımlı olmaktan kaçının.

​
Kaydedilmiş satırlar

Kaydedilmiş satırlar, emailler ve şablonlar arasında başlıkları, altbilgileri veya tekrar eden bölümleri yeniden kullanmanızı sağlar. Bir satırı kaydetmek için satırdaki kaydet simgesine tıklayın.
Saving a row for reuse
Rows > Saved rows bölümünden kaydedilmiş satırlara erişin.
Selecting a saved row
Kaydedilmiş satır kategorileri:
  • Empty – boş satır şablonları
  • My Saved Rows – siz veya ekibiniz tarafından oluşturulan satırlar
  • Sample Rows – OneSignal örnekleri

​
Satır özellikleri

Satır düzeyindeki ayarları düzenlemek için satırın dış kenarına tıklayın.
Üzerine geldiğinizde Satır yerine İçerik görüyorsanız, bir içerik bloğu seçmişsinizdir. Etiket Satır gösterene kadar dış konteyner kenarına tıklayın.
Satır ÖzelliğiAçıklama
Arka planlarSatırın arkasındaki renk veya görsel. Önerilen: tutarlılık için Ayarlar’da arka plan rengini ayarlayın.
KenarlıklarKenarlık rengi, genişliği ve stili.
DüzenSatırları mobil veya masaüstünde göster veya gizle.
SütunlarSütun ekle, kaldır veya yeniden boyutlandır ve sütun dolgusu ayarla.
Sil/ÇoğaltBir satır seçin ve kaldırmak veya kopyalamak için sil veya çoğalt simgelerini kullanın.
Satırlarda arka plan görselleri kullanmaktan kaçının. Email istemci desteği tutarsızdır. Satır yalnızca bir görsel içeriyorsa, bunun yerine Görsel Bloğu kullanın.

​
İçerik

İçerik blokları, alıcıların gördüğü unsurlardır — metin, görseller, düğmeler, ayırıcılar ve HTML. Bir içerik bloğunu satır sütununa sürükleyin. Sütun genişliğine otomatik olarak uyum sağlar.
Available content blocks
İçerik blokları için karar kuralları:
  • Çoğu metin için Metin blokları kullanın.
  • Görseller veya özel tipografi için Görsel blokları kullanın.
  • HTML blokları yalnızca gelişmiş stil veya davranış gerektiğinde kullanın.

​
Özel fontlar

Sürükle ve Bırak Editörü varsayılan olarak sistem fontlarını destekler. Özel fontlar kullanmak için bir HTML bloğu kullanmanız gerekir.
HTML block
<!-- Place this into a HTML block at the top of your email -->
<style type="text/css">
  /* Declare Bebas Neue (only loads in clients that support web fonts) */
  @font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhzg.ttf') format('truetype');
  }
</style>

<h1 style="font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
           font-size:36px; line-height:1.2; margin:0; text-transform:uppercase;">
  Hoş geldiniz!
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  Abone olduğunuz için teşekkürler.
</p>
Birçok email istemcisi (Gmail ve Windows için Outlook dahil) web fontlarını yüklemez. Gövde metni için sistem fontlarını kullanın ve özel fontları yalnızca başlıklar için ayırın. Her zaman yedek fontlar ekleyin veya garantili tipografi için görseller kullanın.

​
Görseller ve video

Ekibinizin yeniden kullanabilmesi için görselleri doğrudan OneSignal kontrol paneline yükleyin. Editör kırpma, filtreleme ve diğer efektleri destekler. Ayrıca harici olarak barındırılan görsel ve videolara URL ile başvurabilirsiniz — her URL’nin herkese açık olduğundan emin olun.

​
Email için önerilen görsel boyutları

  • Başlık/Banner görselleri: 3:1 veya 4:1 (örn. 600×200 veya 600×150)
  • Hero görseller: 16:9 veya 2:1 (örn. 600×338 veya 600×300)
  • Kare görseller: 1:1 (örn. 300×300) — ürün ızgaraları için iyi
  • Küçük resimler: 1:1 veya 4:3
  • Maksimum genişlik: 600–700px standarttır (çoğu email istemcisi)
  • Retina ekranlar için 2x tasarım yapın (örn. 1200px genişliğinde, 600px’de görüntülenir)
  • Bireysel görselleri 100–200 KB altında tutun
  • Toplam email boyutu (görseller dahil) 1 MB altında olmalı
  • Daha küçük görseller daha hızlı yüklenme ve daha iyi teslim edilebilirlik sağlar
  • JPG — fotoğraflar için en iyi
  • PNG — grafikler, logolar ve şeffaflığı olan görseller için en iyi
  • GIF — basit animasyonlar için (dosya boyutunu küçük tutun)
  • WebP — emailde henüz yaygın olarak desteklenmiyor; kullanmayın
  • Erişilebilirlik ve görseller yüklenemediğinde kullanıcılar için her zaman alt metin ekleyin
  • Stil 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 hepsi farklı render eder
  • Outlook genellikle görsel boyutlarını yoksayar, bu nedenle HTML’de hem width hem height özniteliklerini ayarlayın

​
Bağlantılar

OneSignal varsayılan olarak bağlantı takibini etkinleştirir ve çoklu bağlantı takibini destekler.

Links

Email için bağlantı takibi, çoklu bağlantı takibi ve tıklama analitiğini yapılandırın.

Deep linking

Email bağlantılarından alıcıları uygulamanızdaki belirli ekranlara yönlendirin.

​
Abonelik iptali bağlantıları

Tüm pazarlama emailleri bir abonelik iptali bağlantısı içermelidir. İçermeyen emailler, gelen kutusu sağlayıcıları tarafından spam olarak işaretlenme olasılığı daha yüksektir. Bir alıcı varsayılan OneSignal abonelik iptali bağlantısına tıkladığında, email Aboneliği otomatik olarak iptal edilmiş olarak ayarlanır. [unsubscribe_url] etiketini emailinize iki yöntemden biriyle ekleyin:

Abonelik iptali bağlantıları

Uyumluluk gereksinimleri ve OneSignal’ın abonelik iptallerini nasıl ele aldığı.

Özel abonelik iptali sayfası

Varsayılan abonelik iptali akışını kendi markalı sayfanızla değiştirin.

​
HTML blokları

Sürükle ve bırak içerik bloklarının sağlayamadığı kontrol için HTML blokları kullanın:
  • Karanlık mod geçersiz kılmaları — prefers-color-scheme CSS ekleyin. Aşağıdaki Karanlık mod stillemesi bölümüne bakın.
  • Özel fontlar — yedek yığınlarıyla @font-face kuralları bildirin.
  • Gelişmiş düzenler — çok sütunlu ızgaralar, koşullu içerik veya Outlook’a özgü işaretleme.
JavaScript emailde desteklenmez. Satır içi CSS kullanın — birçok istemci <style> etiketlerini, sınıfları ve ID’leri kaldırır.

​
Kişiselleştirme

İsimler, etiketler veya yedek değerler gibi aboneye özgü içerik eklemek için Liquid şablonlamayı kullanın. Örnek: {{ first_name | default: "there" }}
Using Liquid templating to personalize messages

Mesaj kişiselleştirme

Kullanılabilir kişiselleştirme değişkenleri ve nasıl kullanılacağı.

Liquid sözdizimi kullanma

Koşullar, filtreler, döngüler ve gelişmiş Liquid kalıpları.

​
Karanlık mod

Çoğu email, değişiklik yapılmadan karanlık modda kabul edilebilir şekilde render edilir. Ancak marka renkleri, beyaz arka planlar üzerinde logolar veya renkli bölümler içeren emailler genellikle ayarlamalar gerektirir.

​
Karanlık mod stillemesine ihtiyacım var mı?

Emailiniz aşağıdakilerden herhangi birini içeriyorsa karanlık mod geçersiz kılmaları ekleyin:
  • Marka renkli bölümler — doygun renkler karanlık modda sert görünür ve okunabilirliği bozar
  • Beyaz/açık arka planlardaki logolar veya simgeler — görsel açık kalırken arka plan ters çevrilebilir, bu da onu görünmez kılar
  • Renkli arka planlardaki metin — ters çevrilen arka planlar ters çevrilmemiş metin renkleriyle çakışabilir
  • Harekete geçirici mesaj düğmeleri — düğme arka planları beklenmedik renklere dönüşebilir
Emailiniz minimum stillemeli ağırlıklı olarak metinden oluşuyorsa, varsayılan render genellikle kabul edilebilirdir.

​
Editörde karanlık modu önizleme

Karanlık mod renderının genel bir önizlemesini elde etmek için Önizleme Modu düğmesini kullanın. Bu önizleme bir yaklaşımdır — gerçek render, gelen kutusu sağlayıcısına göre değişir (aşağıdaki istemci davranış tablosuna bakın).
Preview mode in the Drag and Drop Editor
Light and dark mode toggle in the Drag and Drop Editor

​
Email istemcileri karanlık modu nasıl ele alır

Her email istemcisi karanlık modu farklı uygular. Bu davranışı doğrudan kontrol edemezsiniz, ancak tüm modlarda iyi render edilen emailler tasarlayabilirsiniz.
İstemciDavranışprefers-color-scheme CSS’e saygı gösteriyor mu?
Apple Mail (iOS/macOS)Tam renk ters çevirmeEvet
Gmail (iOS/Android uygulamaları)Kısmi ters çevirme — açık arka planları değiştirir ama tüm renkleri değilHayır
Gmail (Web)Karanlık mod render yokYok
Outlook (Windows)Word render motoru kullanarak tam ters çevirmeHayır — çoğu CSS geçersiz kılmasını yoksayar
Outlook (Mac/iOS)Kısmi ters çevirmeEvet
Yahoo MailKısmi ters çevirmeHayır
Samsung MailTam ters çevirmeHayır
Dikkat edilmesi gereken yaygın karanlık mod hataları:
  • Kaybolan logolar — şeffaf PNG üzerindeki koyu logo, koyu arka planda görünmez hale gelir. Beyaz veya açık bir dış çizgi ekleyin veya yerleşik açık arka planlı bir sürüm kullanın.
  • Okunamayan metin — açık arka plan üzerindeki koyu metin, arka plan ters çevrildikten sonra koyu kalabilir. Metin rengi geçersiz kılmalarını her zaman arka plan geçersiz kılmalarıyla eşleştirin.
  • Çakışan marka renkleri — beyazda harika görünen doygun marka renkleri koyu arka planlarda sert görünür. Doygunluğu azaltılmış veya daha yumuşak alternatifleri test edin.
  • Görünmez düğmeler — marka renkli arka plan üzerinde koyu metinli CTA düğmeleri, kısmi ters çevirmeden sonra kontrastı kaybedebilir.
Tasarım ipuçları:
  • Saf beyaz (#FFFFFF) ve saf siyahtan (#000000) kaçının. Tam ters çevirmeli istemcilerin etkisini azaltmak için beyaza yakın tonlar ve koyu griler kullanın.
  • Şeffaf PNG’leri dikkatli kullanın. Herhangi bir arka planla iyi uyum sağlarlar, ancak şeffaf arka planlardaki koyu logolar karanlık modda görünmez hale gelir. Logolar için açık bir dış çizgi ekleyin veya yerleşik arka planlı bir sürüm kullanın.
  • Metin içeren görsellerde, okunabilirliği sağlamak için koyu metni beyazla anahat içine alın. Koyu arka plan üzerinde beyaz metin için siyahla anahat içine alın.

​
Sürükle ve bırak ile karanlık mod stillemesi

Yalnızca birkaç öğe karanlık modda kötü render ediliyorsa, bunları HTML blokları ile değiştirerek CSS sınıfları ve !important bildirimleri kullanarak stili doğrudan geçersiz kılabilirsiniz.
1

Emailinizin üstüne bir HTML bloğu ekleyin

Emailinizin ilk satırına bir HTML bloğu sürükleyin.
Adding an HTML block to the top of your email
2

Karanlık mod CSS'i ekleyin

Aşağıdakileri HTML bloğuna yapıştırın. prefers-color-scheme: dark medya sorgusu stilleri yalnızca alıcının email istemcisi karanlık moddayken uygular.
HTML block
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<style>
  :root {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    .email-body {
      background-color: #1a1a1a !important;
      color: #f0f0f0 !important;
    }

    .email-header {
      background-color: #2d2d2d !important;
    }

    .email-button {
      background-color: #0a84ff !important;
    }
  }
</style>
3

Sorunlu içeriği HTML bloklarıyla değiştirin

Karanlık modda doğru render edilmeyen içerik bloklarını, yukarıda tanımlanan CSS sınıflarını kullanan HTML bloklarıyla değiştirin.
<div class="email-header" style="background-color: #f5f5f5; padding: 0; text-align: center;">
  <img src="https://dashboard.onesignal.com/assets/email/your-email-strategy-starts-here.jpg"
       alt="Your email strategy starts here"
       width="600"
       style="display: block; width: 100%; max-width: 600px; height: auto;" />
</div>
Karanlık mod stillerinin doğru uygulandığını doğrulamak için önizleme moduna dönün.

​
Çalışmanızı kaydedin

Email tasarımınızı gelecekte kullanmak üzere bir şablon olarak kaydedin.
Save email as a template

​
SSS

​
Özel bir abonelik iptali bağlantısını nasıl eklerim?

Varsayılan [unsubscribe_url]’yi kendi URL’nizle değiştirin. Bir alıcı aboneliğini iptal ettiğinde OneSignal’daki email Abonelik durumunu güncellemeniz sizin sorumluluğunuzdadır. Kurulum ayrıntıları için Özel abonelik iptali sayfası oluşturma sayfasına bakın.

​
Emailim neden Outlook’ta farklı görünüyor?

Windows’taki Outlook, modern CSS’i desteklemeyen Microsoft Word render motorunu kullanır. Yaygın sorunlar arasında yoksayılan max-width, çökmüş arka plan görselleri ve eksik web fontları yer alır. Outlook’ta özellikle test edin ve görsellerde açık width ve height öznitelikleriyle satır içi CSS kullanın.

​
Maksimum email boyutu nedir?

Toplam email boyutunu (HTML + görseller) 1 MB altında tutun. 102 KB’ın üzerinde HTML içeren emailler Gmail tarafından kırpılır ve “Mesajın tamamını görüntüle” bağlantısının arkasına içerik gizlenir. Bu eşiğin altında kalmak için görselleri optimize edin ve kullanılmayan kodu kaldırın.

​
Bir emailin parçalarını birden fazla kampanyada yeniden kullanabilir miyim?

Evet. Satırdaki kaydet simgesine tıklayarak herhangi bir satırı Kaydedilmiş Satır olarak kaydedin. Kaydedilmiş satırlar Rows > My Saved Rows altında görünür ve herhangi bir emaile sürüklenebilir. Tam email yeniden kullanımı için tüm tasarımı bir şablon olarak kaydedin.

​
Göndermeden önce emailimi nasıl önizlerim?

Desktop ve mobilde emailinizin nasıl render edildiğini görmek için üst araç çubuğundaki Önizleme düğmesini kullanın. Canlı test göndermek için Test Emaili Gönder’e tıklayın ve bir alıcı adresi girin. Test emailleri gerçek email istemcilerinde render, bağlantılar ve kişiselleştirmeyi doğrulayabilmeniz için gelen kutusuna teslim edilir.

​
Emojiler emaillerde çalışıyor mu?

Evet, ancak email istemcileri arasında farklı render edilirler. Windows’taki Outlook en tutarsız olanıdır — emojiler siyah-beyaz dış çizgiler veya kutular olarak görünebilir. Emojiler konu satırınızın veya CTA metninizin bir parçasıysa, göndermeden önce istemciler arasında test edin.

​
Mevcut bir HTML email şablonunu nasıl içe aktarırım?

Mevcut HTML şablonlarını OneSignal’a üç şekilde getirebilirsiniz:
  1. Email Şablonu yönlendirme kullanarak emaili OneSignal’a iletin
  2. HTML’yi programatik olarak yüklemek için Şablon Oluştur API’si’ni kullanın
  3. HTML’nizi doğrudan HTML Editörü’ne kopyalayıp yapıştırın

​
İlgili sayfalar

Email genel bakışı

OneSignal ile email göndermeye baştan sona kılavuz.

HTML ile email tasarlama

Tam HTML kontrolü, karanlık mod geçersiz kılmaları ve gelişmiş stil.

Email şablonları

Kampanyalar arasında email tasarımlarını kaydedin ve yeniden kullanın.

Abonelik iptali bağlantıları

Uyumluluk için varsayılan veya özel abonelik iptali bağlantıları ekleyin.

Mesaj kişiselleştirme

Etiketler, Liquid sözdizimi ve dinamik içerikle emailleri kişiselleştirin.

AB testi

Etkileşimi optimize etmek için konu satırlarını, içeriği ve gönderme sürelerini test edin.