Açık Kaynak İşlem E-posta Şablonları

Yeni bir SendGrid hesabı kurarken, hesabınız için bir dizi e-posta şablonu oluşturmak, tamamlanması gereken en önemli görevlerden biridir. Uygulamanız veya hizmetiniz için API'miz aracılığıyla e-posta göndermeyi planlıyorsanız, büyük olasılıkla birkaç farklı e-posta şablonuna ihtiyacınız olacaktır. En yaygın olanlardan bazıları parola sıfırlama, e-posta onayları ve makbuzlardır.

Web'de önceden hazırlanmış çok çeşitli e-posta şablonları bulunurken, markanıza uyacak şekilde özelleştirmesi kolay bir set bulmak her zaman kolay değildir.

Ortak e-posta istemcilerindeki şablonları kapsamlı bir şekilde test etmek de önemlidir. Bu süreç zaman alıcı olabilir ve SendGrid hesabınızı kurma ve e-posta göndermeye başlama sürecini yavaşlatabilir.

SendGrid'deki ekibin, kullanıcıların bu yaygın kullanım durumlarını kapsamak için yararlanabilecekleri açık kaynaklı bir e-posta şablonları seti oluşturarak müşterilerimize değer sağlayabileceğini fark ettim. Yalnızca şablonları özelleştirmek kolay olmakla kalmaz, aynı zamanda hızlı bir şekilde hazır olacak ve göndereceksiniz!

"Yapıştır" adını verdiğimiz şablon setimiz 5 kullanım durumunu kapsar:

• Şifre sıfırlama
• E-posta Onayı
• karşılama mektupları
• Gelirler
• Özetler (günlük, haftalık veya aylık)

Şablonları GitHub'dan indirin

Yapıştır şablonlarımızı kullanmaya başlamak için GitHub'a gidin ve depoyu klonlayın veya Şablonları Yapıştır klasörünü indirin. Bu şablonların, diğer SendGrid kullanıcılarının en son Hacktoberfest'imiz sırasında katkıda bulunmasına yardımcı olduğu açık kaynaklı bir e-posta şablonları deposunda yaşadığını da belirtmekte fayda var.

Yapıştır şablonlarını özelleştirme

Yapıştır şablonlarının yerel bir kopyasına sahip olduğunuzda, bunları tercih ettiğiniz kod düzenleyicide açın (VSCode veya Atom'u öneririm; ikisi de ücretsizdir).

Diğer şablonların çoğunda bulunan yeniden kullanılabilir bileşenlerin çoğunu içerdiğinden base.html ile başlamanızı tavsiye ederim. Bu şablonların tümü, HTML için ortak bir yapıyı paylaşır ve belgede birkaç temel stil olsa da, stillerin çoğu satır içinde bulunur.

HTML'yi tararken, blokların nerede başlayıp nerede bittiğini gösteren birçok HTML yorumu göreceksiniz. Bunlar, şablonları taradığınızda ve bunları değiştirmeye başladığınızda size yardımcı olacak önemli notlardır.

Ayrıca arka plan renkleri, tipografi, boşluk vb. için HTML öğelerinde stiller fark edeceksiniz. Bu şablonların görünümünü ve verdiği hissi nasıl değiştirdiklerini anlamak için bunlarla denemeler yapmanızı tavsiye ederim.

Logonuzu şablonlara ekleyin

Yapmak isteyeceğiniz ilk şeylerden biri, şablonları yapıştırın logosunu kendi logonuzla değiştirmektir. Logo bloğunu, başlangıç ​​yerini belirten HTML yorumunu arayarak hızlıca bulabilirsiniz:

Bu blok içinde, bağlantı etiketini (<a> ) bulmak ve HREF'yi URL'nizle değiştirmek isteyeceksiniz. Şablon, varsayılan olarak SendGrid'in ana sayfasına bağlanmalıdır.

URL'yi ayarladıktan sonra Yapıştır logosunu kendi logonuzla değiştirelim. Logonuzun web sunucunuz veya CDN gibi kolayca bağlantı kurabileceğiniz bir yerde saklanmasını tavsiye ederim. Logo kaynağını değiştirdikten sonra, genişlik/yükseklik doğru olacak şekilde satır içi stilleri ayarlayın; bu, logonuzun en boy oranına bağlı olacaktır. Varsayılan olarak, Yapıştır logosu 48 piksel karedir, bu nedenle genişlik stillerini 48 piksel olarak ayarladık.

Örnek vermek:

Bu örnekte, istenen boyut olan 48 piksele ayarlamak için bazı genişlik stilleriyle birlikte Logo Yapıştır URL'sine başvurulmaktadır. Keskin göründüğünden emin olmak için bu değerleri kendi logonuz için ayarlayın.

Arka plan renklerini özelleştirme

Yukarıda belirtildiği gibi, arka plan rengi, Yapıştır şablonlarının (griler ve beyazlar) varsayılan stilini oluşturmak için çeşitli bloklarda ayarlanır. Bunu markanızın renklerine uyacak şekilde kolayca değiştirebilirsiniz (ve yapmalısınız).

Bu stiller arasında geçiş yapmanın en kolay yolu, satır içi stilleri, bgcolor ve arka plan rengini aramak için düzenleyicinizi kullanmaktır. Bu özelliklerin değeri, onaltılık değerler (örn. #000000) veya renk adları (örn. siyah) ile değiştirilebilir. Bu değişiklikler üzerinde çalışırken, şablonlardan birini tercih ettiğiniz tarayıcıda açarsanız ve değişiklik yaptıkça yenilerseniz, bazı şeyleri takip etmek kolaydır.

Örnek vermek:

Bu örnekte, gövde etiketinin stili açık gri arka plan rengiyle yapılmıştır. Bu renk değeri ve şablondaki diğerleri markanıza uyacak şekilde özelleştirilmelidir.

Düğmeleri özelleştirme

Düğmeler, e-posta şablonlarındaki en yaygın arabirim bileşenlerinden biridir. Bunları, bir kullanıcının gerçekleştirmesini istediğiniz en önemli eylemi, örneğin e-posta adresini onaylamak gibi vurgulayarak, harekete geçirici mesaj olarak kullanacaksınız.

Varsayılan olarak, Yapıştır'ın düğmeleri, köşeleri yuvarlamak için ince bir kenarlık yarıçapına sahip mavi bloklar olarak biçimlendirilir. Bu düğmeleri markanıza uyacak şekilde özelleştirmek, şablonumuzun arka plan renginde yaptığımız değişikliklere benzer. Sizin için eklediğimiz HTML yorumunu kullanarak bloğu arayın:

Düğmenin etrafında blok oluşturmak için beyaz arka plana sahip (#ffffff) birkaç tablo hücremiz var, ancak aşağıdaki stilleri içeren tablo hücresini bulmak isteyeceksiniz.

Örnek vermek:

Bu örnekte, <td>, köşeleri zarif bir şekilde yuvarlamak için kenarlık yarıçapıyla birlikte düğmenin rengini ayarlamak için kullanılan bir bgcolor'a sahiptir. Markanızla eşleşen düğmeleriniz için benzersiz bir görünüm elde etmek için bu stilleri deneyin.

Düğmemizin ikinci kısmı, yukarıda gösterilen tablo hücresi içindeki çapadır (<a> ).

Bu bağlantı, tıklandığında düğmenizin gideceği URL'yi ve ayrıca etiketin metin stillerini kontrol eder. Etiketi tercihlerinize ve markanızla eşleşenlere göre ayarlamak için stilleri ayarlayabilirsiniz.

Tipografiyi özelleştirme

Varsayılan olarak, Yapıştır şablonları, Google Yazı Tipleri aracılığıyla Source Sans Pro web yazı tipine yüklenir. Google'ın koleksiyonundan farklı bir web yazı tipi kullanabilir veya bu günlerde çoğu bilgisayarda bulunan standart yazı tipi setini kullanabilirsiniz (Arial, Georgia, Times, vb.).

Farklı bir web yazı tipi kullanmayı planlıyorsanız, bazı yararlı ipuçları için e-posta geliştirme ipuçları ve püf noktaları gönderime göz atın. Yazı tipi ailesine başvuran ve tercihlerinize göre ayarlanan tüm satır içi stiller için HTML'yi taradığınızdan emin olun.

Örnek vermek:

Bu örnekte, <td>, Source Sans Pro'yu kullanmak üzere ayarlanmış bir yazı tipi ailesi stiline sahiptir ve web yazı tipinin yüklenmemesi durumunda bazıları daha standart yazı tiplerine geri döner.

Biten düşünceler

Umarım bu işaretçiler, bu şablonları markanıza uyacak şekilde özelleştirmenize ve SendGrid platformunda çalışmaya başlamanıza yardımcı olur. Gelecekte, e-posta şablonları depomuzu daha fazla şablonla ve aynı zamanda özelleştirme sürecini çok daha hızlı hale getirecek bir oluşturma aracıyla genişletmeyi umuyorum.

Yol boyunca herhangi bir sorunla karşılaşırsanız, lütfen GitHub deposuna karşı bir sorun gönderin ve katkıda bulunmak istiyorsanız lütfen bir çekme isteği gönderin. Denemek için daha fazla şablon mu arıyorsunuz? SendGrid'in ücretsiz duyarlı HTML e-posta şablonlarını deneyin.