> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML ile e-posta tasarlama

> OneSignal'ın HTML Düzenleyicisi ile tam özel markalı e-postalar gönderin — desteklenen HTML kuralları, satır içi CSS, karanlık mod, abonelik iptali yönetimi ve istemci sınırlamaları.

## 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

<Info>
  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.
</Info>

### Ö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:

1. [E-posta Şablonu Yönlendirme](./email-template-forwarding) özelliğini kullanın
2. [Şablon Oluşturma API'si](/reference/create-template) ile şablonları programatik olarak oluşturun
3. HTML'nizi kopyalayıp HTML Düzenleyici'ye yapıştırın

<Tip> Sıfırdan HTML yazmak yerine kanıtlanmış bir şablonla başlayın. </Tip>

### Figma'da tasarlayın ve OneSignal'a aktarın

E-posta tasarımlarınız Figma'daysa, bunları HTML olarak OneSignal'a almanın iki yolu vardır:

* **[Email Love](https://emaillove.com/figma-plugin)**: Tasarımınızı üretime hazır HTML e-postaya dönüştüren ve doğrudan OneSignal şablonlarınıza yükleyen bir Figma eklentisi. Eklentinin dışa aktarma panelinde OneSignal App ID'nizi ve API anahtarınızı girin ve yükle'ye tıklayın.
* **[Figma MCP sunucusu](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server)**: MCP sunucusu aracılığıyla Figma'yı bir AI kodlama aracına bağlayın. E-posta tasarım çerçevenize yönlendirin ve HTML e-posta kodu oluşturmasını isteyin, ardından çıktıyı HTML Düzenleyici'ye yapıştırın.

<Warning>
  **Görüntüleme veya teslim edilebilirlik sorunlarına yol açan yaygın hatalar:**

  * **Eksik abonelik iptal bağlantısı** — pazarlama e-postaları için zorunludur. Bağlantı olmadan gelen kutusu sağlayıcıları e-postanızı spam olarak işaretleme ihtimalini artırır.
  * **Satır içi CSS yerine `<style>` blokları kullanmak** — çoğu e-posta istemcisi `<style>` etiketlerini kaldırır. Stillerinizi her zaman satır içi tanımlayın.
  * **Yedek yazı tipi belirtmemek** — özel web yazı tipleri yalnızca birkaç istemcide yüklenir. Her zaman sistem yazı tipi yedeklerini tanımlayın.
  * **Fazla büyük görseller** — 1 MB'ı aşan e-postalar yavaş yüklenir ve engellenebilir. Bireysel görseller 200 KB'ın altında olmalıdır.
  * **Desteklenmeyen HTML** — JavaScript, `<iframe>`, formlar ve gömülü medya e-posta istemcileri tarafından kaldırılır.
</Warning>

***

## HTML Düzenleyici'yi Kullanma

Bir e-posta mesajı oluştururken düzenleyici türü olarak **HTML Düzenleyici**'yi seçin.

1. HTML'nizi düzenleyiciye yapıştırın veya yazın.
2. İstemciler ve cihazlar genelinde görüntülemeyi önizlemek için **Test E-postası Gönder**'i kullanın.
3. Zamanlama veya göndermeden önce düzen sorunlarını düzeltin.

<Frame caption="Kod girişi ve canlı önizleme ile HTML düzenleyici">
  <img src="https://mintcdn.com/onesignal/tc0EvmtSSX56SX0c/images/docs/966f520-html-editor-preheader.png?fit=max&auto=format&n=tc0EvmtSSX56SX0c&q=85&s=ceece56a7c1c52b3a51badea42685768" alt="HTML editor with code input and live preview" width="1300" height="1238" data-path="images/docs/966f520-html-editor-preheader.png" />
</Frame>

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

<Columns cols={2}>
  <Card title="Bağlantılar" icon="link" href="./links#email">
    E-posta için bağlantı izleme, çoklu bağlantı izleme ve tıklama analitiğini yapılandırın.
  </Card>

  <Card title="Derin bağlantı" icon="arrow-up-right-from-square" href="./deep-linking">
    Alıcıları e-posta bağlantılarından uygulamanızdaki belirli ekranlara yönlendirin.
  </Card>
</Columns>

#### 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

<Tabs>
  <Tab title="OneSignal'ın varsayılan abonelik iptal bağlantısı">
    HTML'nizin herhangi bir yerine (genellikle alt bilgide) şu yer tutucuyu ekleyin:

    ```html HTML theme={null}
    <a href="[unsubscribe_url]">Aboneliği İptal Et</a>
    ```

    Tıklandığında bu bağlantı, alıcının OneSignal'daki e-posta [Aboneliğini](./subscriptions) iptal eder.
  </Tab>

  <Tab title="Özel abonelik iptali sayfası kullan (isteğe bağlı)">
    Kendi abonelik iptali sayfanıza bağlantı verebilirsiniz; ancak şunları yapmanız gerekir:

    * Abonelik iptal eylemini yakalayın
    * Alıcının e-posta Abonelik durumunu güncelleyin

    Daha fazla ayrıntı için bkz. [Özel abonelik iptali sayfası oluşturma](./create-custom-unsubscribe-page).

    <Warning> Özel bir abonelik iptal URL'si kullanır ve Aboneliği güncellemezseniz, kullanıcılar e-posta almaya devam eder. </Warning>
  </Tab>
</Tabs>

***

## 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](https://htmlemail.io/inline/)

### 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 `!important` eklemek, 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:

```html theme={null}
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
```

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

<Note>
  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](./design-emails-with-drag-and-drop#dark-mode-styling-with-drag-and-drop).
</Note>

### E-posta için önerilen görsel boyutları

<AccordionGroup>
  <Accordion title="En boy oranları">
    * Başlık/Banner görselleri: `3:1` veya `4:1` (ör. `600×200` veya `600×150`)
    * Hero görseller: `16:9` veya `2:1` (ör. `600×338` veya `600×300`)
    * Kare görseller: `1:1` (ör. `300×300`) — ürün ızgaraları için idealdir
    * Küçük resimler: `1:1` veya `4:3`
    * Maksimum genişlik: `600–700px` standarttır (çoğu e-posta istemcisi)
    * Retina ekranlar için `2x` çözünürlükte tasarlayın (ör. `1200px` genişliğinde, `600px`'de gösterilen)
  </Accordion>

  <Accordion title="Dosya boyutu">
    * Bireysel görselleri `100–200 KB` altında tutun
    * Toplam e-posta boyutu (görseller dahil) `1 MB` altında olmalı
    * Daha küçük görseller, daha hızlı yükleme süreleri ve daha iyi teslim edilebilirlik anlamına gelir
  </Accordion>

  <Accordion title="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
  </Accordion>

  <Accordion title="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 `width` hem de `height` özelliklerini ayarlayın
  </Accordion>
</AccordionGroup>

### 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

Etkileşimli veya multimedya içerik için harici sayfalara bağlantı kullanın.

### 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

<Check> E-postanız başlıca istemcilerde doğru görüntüleniyor ve abonelik iptali çalışıyorsa gönderilmeye hazırdır. </Check>

### 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" }}`

<Columns cols={2}>
  <Card title="Mesaj kişiselleştirme" icon="user-pen" href="./message-personalization">
    Kullanılabilir kişiselleştirme değişkenleri ve bunların nasıl kullanılacağı.
  </Card>

  <Card title="Liquid sözdizimi kullanma" icon="code" href="./using-liquid-syntax">
    Koşullar, filtreler, döngüler ve gelişmiş Liquid kalıpları.
  </Card>
</Columns>

***

## SSS

### Mevcut e-posta şablonlarımı yeniden kullanabilir miyim?

Evet. [E-posta Şablonu Yönlendirme](./email-template-forwarding) aracılığıyla OneSignal'a iletin, [Şablon Oluşturma API'si](/reference/create-template) 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](#e-posta-i̇stemcilerinin-karanlık-modu-nasıl-ele-aldığı) 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.

### E-postalarıma "tarayıcıda görüntüle" bağlantısı ekleyebilir miyim?

OneSignal, e-postanızın barındırılan bir web sürümünü oluşturmaz. "Tarayıcıda görüntüle" deneyimi sağlamak için e-posta içeriğini kendi web sitenizde barındırın ve o barındırılan sayfaya işaret eden standart bir HTML bağlantısı ekleyin.

### 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

<Columns cols={3}>
  <Card title="Sürükle-bırak ile e-posta tasarlama" icon="paintbrush" href="./design-emails-with-drag-and-drop">
    Tam HTML yazmadan e-posta tasarlamak için görsel e-posta oluşturucu.
  </Card>

  <Card title="E-posta genel bakışı" icon="envelope" href="./email-messaging">
    OneSignal ile e-posta göndermeye yönelik uçtan uca kılavuz.
  </Card>

  <Card title="E-posta şablonları" icon="copy" href="./templates">
    E-posta tasarımlarını kampanyalar arasında kaydedin ve yeniden kullanın.
  </Card>

  <Card title="Abonelik iptal bağlantıları" icon="link-slash" href="./unsubscribe-links-email-subscriptions">
    Uyumluluk için varsayılan veya özel abonelik iptal bağlantıları ekleyin.
  </Card>

  <Card title="Mesaj kişiselleştirme" icon="user-pen" href="./message-personalization">
    E-postaları etiketler, Liquid sözdizimi ve dinamik içerikle kişiselleştirin.
  </Card>

  <Card title="E-posta şablonu yönlendirme" icon="envelope-open-text" href="./email-template-forwarding">
    Mevcut HTML e-posta şablonlarını OneSignal'a aktarın.
  </Card>
</Columns>