Ana içeriğe atla

​
Genel Bakış

OneSignal Sürükle ve Bırak Email Builder, email’leri kullanıcılarınızın gelen kutularında tam olarak nasıl görüneceğine göre görsel olarak tasarlamanıza olanak tanır. Üç temel bileşenden oluşur:
  • Settings – mesajınız genelinde uygulanan global yapılandırmalar
  • Rows – içeriği yatay olarak düzenlemek için yapısal konteynerler
  • Content – resimler, metin ve düğmeler gibi bireysel bloklar
Bu kılavuz, her bileşeni ve email’inizi oluşturmak için bunları nasıl kullanacağınızı açıklayacaktır. Ek özelliklerle ilgili ayrıntılar için:

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

Zaten email şablonlarınız var mı? Bunları aşağıdaki seçeneklerle OneSignal uygulamanıza ekleyebilirsiniz:
  1. Email Template forwarding
  2. Create Template API
  3. HTML’nizi HTML Editor’e kopyalayın ve yapıştırın

​
Settings

Settings, mesajınızın temel stil ve düzenini kontrol eder. Bu ayarlar, açıkça geçersiz kılınmadığı sürece satırlara ve içerik bloklarına yayılır.

Builder için ayarları gösteren görsel

Tasarım AyarlarıAçıklama
Content area widthEmail’in piksel cinsinden genişliği. Varsayılan 600px’dir.
Content area alignmentİçeriği sola veya ortaya hizalayın.
Background colorİçerik alanının arkasındaki arka plan rengi.
Content area background colorİçerik alanı içindeki arka plan rengi.
Default fontSatır veya içerik seviyesinde özelleştirilmedikçe email genelinde uygulanan font. Özel fontlar HTML gerektirir.
Link colorTüm köprü metni için renk.
LanguageErişilebilirlik için HTML’de lang özniteliğini ayarlar. Varsayılan İngilizce’dir.

​
Rows

Rows, email düzeninizin yatay yapı taşlarıdır. Her satır birden fazla sütun ve içerik bloğu içerebilir. Onları eklemek için satırları email editörüne sürükleyip bırakın.

Birden fazla satır kullanma yeteneğini gösteren görsel

Her satır ve sütunları global ayarları geçersiz kılabilir, bu da size tasarım ve duyarlılık üzerinde ayrıntılı kontrol sağlar.

​
Satırları silme ve çoğaltma

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

Satırları silme ve çoğaltma yeteneğini gösteren görsel

​
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.

Bir satırı kaydetme

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

Kaydedilmiş satırı seçin

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

Özellikleri düzenlemek için bir satıra tıklayın. Satırın üzerine geldiğinizde “Row” kelimesini gördüğünüzden emin olun. Aksi takdirde, Content bloğunu seçeceksiniz.
Satır ÖzellikleriAçıklama
Backgroundsİçerik alanının arkasındaki arka plan rengi veya resmi. Önerilen: Tutarlılık için Settings’de arka plan rengini ayarlayın. Tıklanabilir içerik yoksa, satır arka plan resmi yerine bir Image Block kullanmayı düşünün.
BordersKenarlık rengi, genişliği ve stili.
LayoutMobil ve masaüstünde satırı özelleştirin veya gizleyin.
ColumnsSatır içindeki sütunları ekleyin, kaldırın, ayarlayın ve daha fazla Content bloğu ekleyin. Sütuna özel dolguyu ayarlayı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.

Email'inizi tasarlamak için sürükle ve bırak Content bloklarını seçme

​
Ö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:
  1. Email’inizin üstüne bir HTML bloğu ekleyin ve snippet’i yapıştırın.
  2. 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

Email'inize unsubscribe link'ini ekleme

​
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" }}

Etiket değiştirme kullanımını gösteren görsel

Daha fazla ayrıntı:

​
Emoji’ler

Emoji’ler email platformları arasında farklı şekilde görüntülenebilir.

Emoji'lerin farklı email istemcilerinde nasıl görüntülendiğini gösteren görsel

​
Çalışmanızı kaydedin

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

Şablon olarak nasıl kaydedileceğini gösteren görsel

​
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.

​
İlgili makaleler