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.
En iyi sonuçlar ve daha az render sorunları için bu sırayı takip edin:
Ayarlar’da global stilleri yapılandırın
Satırlar kullanarak düzen yapısı ekleyin
İçerik blokları ekleyin
Kişiselleştirme ve bağlantılar ekleyin
Abonelik iptali bağlantısı ekleyin (pazarlama emailleri için)
Ş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, 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.
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.
Email yapısı oluşturmak için satır ekleme
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, 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.
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ği
Açıklama
Arka planlar
Satırın arkasındaki renk veya görsel. Önerilen: tutarlılık için Ayarlar’da arka plan rengini ayarlayın.
Kenarlıklar
Kenarlık rengi, genişliği ve stili.
Düzen
Satırları mobil veya masaüstünde göster veya gizle.
Sütunlar
Sütun ekle, kaldır veya yeniden boyutlandır ve sütun dolgusu ayarla.
Sil/Çoğalt
Bir 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 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.
Mevcut içerik blokları
İç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.
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.
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.
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:
Ç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 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
Her email istemcisi karanlık modu farklı uygular. Bu davranışı doğrudan kontrol edemezsiniz, ancak tüm modlarda iyi render edilen emailler tasarlayabilirsiniz.
İstemci
Davranış
prefers-color-scheme CSS’e saygı gösteriyor mu?
Apple Mail (iOS/macOS)
Tam renk ters çevirme
Evet
Gmail (iOS/Android uygulamaları)
Kısmi ters çevirme — açık arka planları değiştirir ama tüm renkleri değil
Hayır
Gmail (Web)
Karanlık mod render yok
Yok
Outlook (Windows)
Word render motoru kullanarak tam ters çevirme
Hayır — çoğu CSS geçersiz kılmasını yoksayar
Outlook (Mac/iOS)
Kısmi ters çevirme
Evet
Yahoo Mail
Kısmi ters çevirme
Hayır
Samsung Mail
Tam ters çevirme
Hayı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.
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.
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.
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.
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.
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.
