> ## 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. # Sürükle ve bırak ile email tasarlama > OneSignal'ın Sürükle ve Bırak Email Oluşturucusu ile duyarlı emailler görsel olarak oluşturun — ayarlar, satırlar, içerik blokları, kişiselleştirme ve uyumluluk bağlantıları. ## 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ü](./design-emails-with-html) 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ği | Emailin 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 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ı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ğ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 İç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 HTML block theme={null}

Hoş geldiniz!

Abone olduğunuz için teşekkürler.

``` 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 ` ``` 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. ```html email-header theme={null} ``` ```html email-body theme={null} ``` ```html email-button theme={null} ``` 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**](./templates) 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](./create-custom-unsubscribe-page) 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](./templates) 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](./email-template-forwarding) kullanarak emaili OneSignal'a iletin 2. HTML'yi programatik olarak yüklemek için [Şablon Oluştur API'si](/reference/create-template)'ni kullanın 3. HTML'nizi doğrudan [HTML Editörü](./design-emails-with-html)'ne kopyalayıp yapıştırın ## İlgili sayfalar OneSignal ile email göndermeye baştan sona kılavuz. Tam HTML kontrolü, karanlık mod geçersiz kılmaları ve gelişmiş stil. Kampanyalar arasında email tasarımlarını kaydedin ve yeniden kullanın. Uyumluluk için varsayılan veya özel abonelik iptali bağlantıları ekleyin. Etiketler, Liquid sözdizimi ve dinamik içerikle emailleri kişiselleştirin. Etkileşimi optimize etmek için konu satırlarını, içeriği ve gönderme sürelerini test edin.