Sürükle ve bırak ile email tasarlama

Genel Bakış

OneSignal sürükle ve bırak email oluşturucu, kullanıcıların gelen kutularında tam olarak nasıl görüneceklerine göre duyarlı email’leri görsel olarak tasarlamanıza olanak sağlar—eksiksiz HTML yazmadan. Üç temel bileşen kullanarak email’ler oluşturursunuz:

Ayarlar – tüm email’e uygulanan global stiller ve düzen
Satırlar – yapı ve duyarlılığı kontrol eden yatay düzen konteynerler
İçerik – metin, resim, düğme ve HTML gibi bireysel bloklar

Bu kılavuz size her bileşen konusunda rehberlik eder ve baştan sona bir email oluşturmanın önerilen yolunu gösterir.

Sürükle ve bırak email oluşturucu kullanın:

Eksiksiz HTML yönetmeden email’leri görsel olarak tasarlamak için (HTML blokları mevcut)
Kampanyalar arasında satırları veya şablonları yeniden kullanmak için
Teknik olmayan ekip üyelerinin içeriği güvenle düzenlemesine izin vermek için

Eksiksiz HTML kontrolü, her yerde özel fontlar veya gelişmiş karanlık mod mantığına ihtiyacınız varsa, bunun yerine HTML Editörü kullanın.

Önerilen inşa akışı (varsayılan)

En iyi sonuçları almak ve render sorunlarını azaltmak için bu sırayı takip edin:

Ayarlar’da global stilleri yapılandır
Satırlar kullanarak düzen yapısını ekle
İçerik bloklarını ekle
Kişiselleştirme ve bağlantıları ekle
Abonelik iptali bağlantılarını ekle (pazarlama email’leri için)
Şablon olarak kaydet veya gönder

Tamamlandığında, email’iniz şunları yapmalı:

600px veya daha az genişlikte olmalı
Mobil ve masaüstünde net şekilde render edilmeli
Gerekli uyum bağlantılarını içermeli

Kendi şablonlarınızı içe aktarın

Zaten HTML email şablonlarınız varsa, bunları OneSignal’a şu şekillerde ekleyebilirsiniz:

Email Template forwarding
Create Template API
HTML Editörü’ne HTML kopyala ve yapıştır

Settings

Ayarlar, email’inizin temel düzenini ve stilini tanımlar. Açıkça geçersiz kılınmadığı sürece bu değerler satırlara ve içerik bloklarına kademeli olarak uygulanır.

Tasarım Ayarları	Açıklama
İçerik alanı genişliği	Email’in genişliği (piksel). Önerilen: `600px`.
İçerik alanı hizalama	İçeriği sola veya ortaya hizalar.
Arka plan rengi	İçerik alanının arkasındaki renk.
İçerik alanı arka plan rengi	İçerik alanı içindeki renk.
Varsayılan font	Geçersiz kılınmadığı sürece tüm metne uygulanır. Özel fontlar HTML gerektirir.
Bağlantı rengi	Tüm bağlantılar için varsayılan renk.
Dil	Erişilebilirlik için HTML `lang` özniteliğini ayarlar. Varsayılan İngilizce.

Önerilen varsayılanlar: Tutarlılığı sağlamak ve blok bazında geçersiz kılmaları azaltmak için ayarlarda mümkün olduğunca çok stil yapılandırın.

Rows

Satırlar, email’inizin 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.

Düzen ve aralığı kontrol etmek için satırları kullanın. Temel düzen kararları için bireysel içerik bloklarına bağımlı olmaktan kaçının.

Satırları silme ve çoğaltma

Satırı seçin ve delete ve duplicate simgelerini kullanın.

Kaydedilmiş satırlar

Herhangi bir satırdaki save icon’a tıklayarak onu şablonlar arasında yeniden kullanın. Kaydedilmiş bir satırdaki güncellemeler isteğe bağlı olarak onu kullanan tüm şablonlara uygulanabilir.

Kaydedilmiş satırlara erişmek için Rows sekmesine gidin ve kaydedilmiş satırlar açılır menüsünü açın:

Açılır menü kategorileri:

Empty – boş satır şablonları
My Saved Rows – kaydettiğiniz satırlar
Sample Rows – OneSignal tarafından önceden oluşturulmuş şablonlar

Satır özellikleri

Satır seviyesi ayarları düzenlemek için satırın dış kenarına tıklayın.

Fare üzerindeyken Satır yerine İçerik görüyorsanız, bir içerik bloğu seçmişsiniz. Etiket Satır gösterene kadar dış konteyner kenarına tıklayın.

Satır Özellikleri	Açıklama
Arka plan	Satırın arkasındaki renk veya görsel. Önerilen: Tutarlılık için ayarlarda arka plan rengini ayarlayın.
Kenarlar	Kenar rengi, genişliği ve stili.
Düzen	Satırı mobil veya masaüstünde göster veya gizle.
Sütunlar	Sütun ekle, kaldır veya yeniden boyutlandır ve sütun dolgusunu ayarla.

Satırlarda arka plan görselleri kullanmaktan kaçının. Email istemci desteği tutarsız. Bir satır yalnızca görsel içeriyorsa, bunun yerine Görüntü Bloğu kullanın.

Content

Content blokları mesajınızın özünü temsil eder — resimler, metin, düğmeler ve daha fazlası. Bir içerik bloğunu bir satır sütununa sürükleyin ve genişliğe göre ayarlanacaktır. Her bloğun dolgu, font boyutu ve hizalama gibi kendi ayarları vardır.

Özel fontlar

Settings’de bulunamayan bir font gerekiyorsa, HTML bloğunu kullanarak özel fontlar ekleyebilirsiniz. Örneğin:

<!-- Email'inizin üstündeki bir HTML bloğuna bunu yapıştırın -->
<style type="text/css">
  /* Bebas Neue'yi bildirin (yalnızca web fontlarını destekleyen istemcilerde yüklenir) */
  @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;">
  Welcome!
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  Thanks for subscribing.
</p>

Sürükle ve Bırak editöründe nasıl kullanılır:

Email’inizin üstüne bir HTML bloğu ekleyin ve snippet’i yapıştırın.
Bebas Neue ile daha fazla başlık istiyorsanız, ya:
- Ek HTML blokları kullanın ve aynı h1 stilini kopyalayın, veya
- Bir Text bloğu kullanın ve Inline CSS’ini font-family:'Bebas Neue', Arial, Helvetica, sans-serif; olarak ayarlayın.

Birçok email istemcisi (örneğin, Gmail, Windows için Outlook) web fontlarını yüklemez. Otomatik olarak yukarıdaki yığından Arial/Helvetica’ya geri döneceklerdir.Belirli bir fontu “zorlamak” için, bunun yerine istenen fontla resimler kullanmayı düşünün ve resmi email’e ekleyin. Bu bazı durumlarda daha fazla kontrol sağlar.

Resimler ve video

Yüklenen resimlere ekibiniz genelinde erişilebilir. Kırpma, filtreleme ve daha fazlası gibi resimlere doğrudan editörde efektleri değiştirin ve uygulayın. Resim ve videolara URL’ler kullanılabilir. Sağlanan URL aracılığıyla kullanılabilir olduklarından emin olun.

Link’ler

Link izleme varsayılan olarak etkindir. Çoklu link izleme mevcuttur. Daha fazla ayrıntı için Links ve Deep Linking’e bakın.

Unsubscribe link’leri

Tüm pazarlama email’leri bir unsubscribe link’i içermelidir. Unsubscribe link’i olmadan, email’lerinizin spam olarak işaretlenme olasılığı daha yüksek olacaktır. Daha fazla ayrıntı için Unsubscribe links’e bakın. OneSignal, kullanıldığında kullanıcının email Subscription’ını abonelikten çıkaracak varsayılan bir unsubscribe link’i sağlar. İsterseniz kendi özel unsubscribe URL’nizi de ekleyebilirsiniz. Sadece email Subscription’ı doğru şekilde yönettiğinizden emin olun (ayrıntılar Create a custom unsubscribe page’de). OneSignal’ın varsayılan [unsubscribe_url]’ini email’lerinize şu yollarla ekleyin:

HTML Block: <a href="[unsubscribe_url]">Unsubscribe</a>
Metninizi seçin ve editördeki Special links seçeneğini kullanın veya URL alanında [unsubscribe_url] ayarlayın

HTML blokları

HTML Blokları ile özel HTML ekleyin. JavaScript desteklenmez. Inline CSS önerilir. Bazı email istemcileri class veya ID özniteliklerini kaldırır.

Özel HTML blokları, dark mode geçersiz kılmaları gibi gelişmiş stil eklemenin en iyi yeridir. Rehberlik için Dark mode styling best practices’e bakın.

<div style="background: red;">This now has custom styling!</div>

Kişiselleştirme

Mesajları kişiselleştirmek için liquid templating kullanın. Örnek: {{ first_name | default: "there" }}

Daha fazla ayrıntı:

Emojiler

Emojiler farklı email platformlarında farklı şekilde render edilebilir.

Çalışmanızı kaydedin

Email tasarımınızı gelecekte kullanmak üzere bir template olarak kaydedebilirsiniz.

SSS

Dark mode’u nasıl hesaba katarım?

Çoğu email dark ve light modda doğru şekilde görünecektir ancak test etmeyi öneririz! Ek rehberlik için Dark mode styling best practices’e bakın.

Özel bir unsubscribe link’i nasıl eklerim?

Ayrıntılar için Create a custom unsubscribe page’e bakın.

İlk adımlar & ayarlar

Mesaj kanalları

Journey'ler

Hedeflenen & özel olaylar

Analitik ve Entegrasyonlar

Gizlilik & Güvenlik

Sürükle ve bırak ile email tasarlama