Aslında Mükemmel Çalışan Özel Mailchimp Şablonları Nasıl Oluşturulur

Yayınlanan: 2021-06-22

Her e-postayı sıfırdan kodlamak çok uzun sürer, bu nedenle yeniden kullanılabilir, denenmiş ve gerçek bir e-posta şablonuna sahip olmak iş akışı verimliliğiniz için harikalar yaratabilir. Ancak, E-posta Hizmet Sağlayıcılarının Durumu raporumuza göre en popüler ikinci e-posta hizmet sağlayıcısı (ESP) olan Mailchimp için bile kendi şablonunuzu oluşturmak başlı başına bir macera olabilir.

E-posta geliştirmek için tercih ettiğiniz bir yol olabilir, ancak Mailchimp için özel şablonlar söz konusu olduğunda, şablonunuzu çalıştırmak için saatler kaybetmemek için çok özel bazı yönergeleri takip etmek önemlidir. Ve bunu kendim de saatlerce kaybetmiş olarak söylüyorum!

Size özel bir Mailchimp şablonu oluştururken yol gösterirken, kodu yapılandırma şeklinizin, düğmeleri nasıl oluşturduğunuz ve hatta görüntülerinizin boyutunun Mailchimp teknik bakış açısıyla ele alınması gerektiğini unutmayın.

Bu nedenle, Mailchimp şablonlarınızın gerçekten mükemmel şekilde çalışmasını sağlamak için bu blog gönderisinde Mailchimp ve diğer uzmanlarla işbirliği yaptık.

Mailchimp'in önceden oluşturulmuş şablonları ile özel şablonları arasındaki fark

Mailchimp, e-posta oluşturmak için kullanabileceğiniz önemli bir şablon kitaplığına sahiptir. Her biri, içeriğinizi düzenlemek için seçebileceğiniz bir sürükle ve bırak düzenleyicisi ve birden çok e-posta modülü içinde düzenlenebilir.

Peki neden özel bir şablon oluşturalım?

Mailchimp'in şablonları, herhangi bir markanın bunları kendi marka renkleri ve stilleriyle kullanabilmesi için son derece düzenlenebilir niteliktedir. Bu, kullanımlarını izlemeyi ve bir markanın kimliğinin e-postadan e-postaya tutarlı kalmasını zorlaştırabilir. Özel bir şablon oluşturmak, şablonda oluşturduğunuz stillerin çoğunun değiştirilmemesini sağlar.

Ayrıca, özel şablonlar için düzenleme ortamı farklıdır. Sürükle ve bırak düzenleyicisi yok. Bunun yerine, uyguladığınız şablon diline bağlı olarak çoğaltılabilen, değiştirilebilen veya kaldırılabilen modüller ve öğeler oluşturun. Bu, istenmeyen düzenlere ve düzenlemelere karşı korunmanın başka bir yoludur.

Özel bir Mailchimp şablonu nasıl kodlanır

Kendi Mailchimp e-posta şablonunuzu oluşturmaya hazır mısınız? Doğru yapmak için ihtiyacınız olan ipuçlarını ve püf noktalarını okumaya devam edin.

Hedeflerinizi ve son kullanıcılarınızı düşünün

Başlamadan önce, şablonun amacını ve onu kullanacak kişileri düşünmeniz önemlidir. Örneğin, çok fazla ayrıntı ve esnekliğe sahip bir şablona ihtiyacınız olabilir. Veya, ekibinizin daha az teknik üyesinin benimsemesi için basit ve kolay olması gerekebilir.

E-posta pazarlama danışmanı ve pazarlama motivasyoncusu Joolz Joseph şöyle diyor:

Joolz Joseph

“Kendinize 'Bununla neyi başarmaya çalışıyoruz?' diye sorun.

Birden çok e-posta türü için kullanılabilen, bu nedenle farklı bloklarla çok fazla esnekliğe ihtiyaç duyan bir hepsini yakalayan bir şablon mu? Veya promosyon şablonu, işe alım serisi veya haber bülteni gibi daha katı bir şey mi?

Uyarlanabilen çok sayıda bloğa sahip bir şablonun büyük bir avantajı vardır, ancak bazen 2 veya 3 daha kısa şablonun yönetimi, birçok seçenekten bunalan insanlar için daha kolaydır.

Başlangıçtaki bu kısa değerlendirme, hedef ve son kullanıcıyı göz önünde bulundurarak şablonunuzu oluşturmanıza olanak tanır.

Örneğin, bir promosyon şablonunun birincil amaca ve harekete geçirici mesaja (CTA) odaklanması gerekirken, bir bültenin hepsi farklı olan birden fazla CTA'sı olabilir.

Bunların hepsinin şablon tasarımınıza yansıtılması gerekir. Ayrıca, bir promosyon yürüten birinin seçenekleri sınırlıysa ilgili içeriği bırakmasını da kolaylaştıracaktır!

Her olasılığı yakalayan tek bir şablon yapmak, markayla ilgili ancak olabileceği kadar etkili olmayan bir e-postayla sonuçlanabilir, bu nedenle önce bu adımı atmaya ve ne elde etmek istediğinize ve ne tür bir şablona (veya ne tür bir şablona) bakmakta fayda var. şablonlar) bunu yapmanıza en iyi şekilde yardımcı olacaktır.”

Bahşiş için teşekkürler Joolz! Şablonunuzun hedeflerini öğrendikten sonra inşa etmeye başlayabilirsiniz.

CSS stilinizi gömün

Bahsetmeye değer ilk şeylerden biri, şablonunuzu platforma kaydettiğinizde Mailchimp'in gömülü CSS stillerinizi otomatik olarak satır içi yapmasıdır. Geliştirme çalışmasına başladığınızda, tüm stillerinizi yerleştirmeyi ve kod şişmesini sınırlamayı daha kolay bulabilirsiniz.

Modül satırları oluşturun

Kodunuzu yapılandırırken, düzenlenebilir olmasını istediğiniz blokları, özellikle de yeniden sıralayabilmek istediğiniz blokları düşünün. Bu bloklar sıralar içinde oturmalıdır, örneğin:

<!--modules that can be re-ordered-->
<!--module 1-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 1-->
<!--module 2-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 2-->

Üst tabloyu kapattığınızda, bu noktadan sonra satırlarınızı yeniden sıralayamazsınız.

Düğme sınırlamalarını göz önünde bulundurun

Bir düğmeyi kodlamanın birçok yolu vardır. Ancak, özel Mailchimp şablonunuzda çalışacak olan yalnızca dolgulu düğmedir. Bunun nedeni, düzenlenebilir düğmelerin bağlantı etiketlerine uygulanan birçok stilin otomatik olarak kaldırılmasıdır. VML kodunun formatı ve bağlantı etiketinize yerleştirdiğiniz herhangi bir yayılma alanı da ayarlanabilir.

Dolgulu düğme yöntemi, dolgunuzu ve diğer düğme stilinizi bir üst tablo hücresine uygulamanız gerektiğinden, yalnızca düğmenizin metninin tıklanabilir olacağı anlamına gelir. Mailchimp'in kapsamlı belgeleri, düğme kodu (ve merak ediyorsanız diğer HTML e-posta sınırlamaları) hakkında daha fazla ayrıntı sağlar.

Düzenlenebilir yer tutucular için tam boyutlu resimler kullanın

Düğmeler gibi, resimler de düzenlenebilir hale getirildiğinde küçük bir kod bırakır. Bu sefer, kaldırılan genişlik ve yüksekliği tanımlayan HTML nitelikleridir. Outlook bunlara dayanır ve Mailchimp düzenleme ortamı, siz bu öznitelikleri düzenleyiciyi kullanarak geri koyana kadar görüntünün gerçek boyutunu da oluşturur.

Bu, e-postada küçültülmek üzere kendi boyutlarının iki katı olan retina görüntülerini kullanmayı biraz zorlaştırıyor.

Şablonunuza kodladığınız tüm yer tutucular için 1x görüntü kullanmanızı öneririm. Ardından şablon bir kampanya için kullanıldığında, görüntü düzenleyicinin ayarlar sekmesinde genişlik ve yüksekliği tanımlayarak 2x görüntü (retina görüntüsü) için yer tutucunuzu değiştirin.

Mailchimp'in şablon dilini uygulayın

Şablonunuz içinde düzenlenebilir alanlar tanımlamak için Mailchimp'in şablon dilini uygulamanız gerekir. Oluşturduğunuz şablonun türüne bağlı olarak, eklemeniz gerekenleri özetleyen bol miktarda belge bulunmaktadır.

Birden fazla marka tarafından kullanılabilecek son derece özelleştirilebilir şablonlar için CSS stillerini düzenlenebilir hale getirebilirsiniz. Bunu yapmak için Mailchimp'in düzenlenebilir stiller hakkındaki kılavuzunu izleyin.

Bu adımın amaçları doğrultusunda, düzenlenebilirliği yalnızca içerikle sınırlayan bir şablonun nasıl oluşturulacağına bakacağız. Bunu yapmak için, şablon içindeki HTML öğelerine aşağıdaki dili eklememiz gerekiyor:

mc:edit , bir şablon içindeki belirli bir öğe için içerik düzenleme eylemi sağlamak için kullanılır. Şablonunuzda bunun her örneği için benzersiz bir ad kullandığınızdan emin olun.

mc:hideable , bir şablon içindeki belirli bir öğe için bir gizle/göster eylemi sağlamak için kullanılır.

mc:label , uygulama içinde düzenlenebilir bir bölümü adlandırmak için kullanılan isteğe bağlı bir etikettir.

mc:repeatable , bir şablon içindeki belirli bir öğe için çoğaltma eylemi sağlamak için kullanılır.

mc:variant , ayrı HTML blokları arasında geçiş yapmanın bir yolunu sağlamak için kullanılır.

Mailchimp şablon dili hakkında daha ayrıntılı bilgi için bu benim başvuru belgem.

Mailchimp birleştirme etiketlerini dahil et

Şablonlar ve kampanyalar içinde yararlanabileceğiniz çok sayıda birleştirme etiketi vardır. Uygulamanızı önerdiğim etiketler:

*|MC_PREVIEW_TEXT|*
Kampanya kurulumu sırasında önizleme metin alanına eklenen içeriğin e-postaya eklenmesini sağlamak için bu önizleme metni birleştirme etiketini yapınıza ekleyin. Önizleme metnimiz Mailchimp içinde çalışmadığında boşluk oluşturmak için genellikle Litmus e-postalarına eklediğimiz önizleme metni kesmesi. Korkma. Mailchimp, özel şablonlar için bunu yapmanın ideal yolunu belgelemiştir.

*|UNSUB|*
İnsanların istedikleri takdirde kendilerini listenizden çıkarabilmelerini sağlamak için şablonunuzun üstbilgisinde ve/veya altbilgisinde bu birleştirme etiketini abonelikten çıkma bağlantınıza ekleyin. Ayrıca, bu yasal bir zorunluluktur, bu yüzden bunu kesinlikle unutmak istemezsiniz.

*|GÜNCELLEME_PROFİL|*
Abonelere bilgilerini güncelleme veya tercihlerini yönetme fırsatı verin.

*|ARŞİV|*
İnsanlara e-postanızı web tarayıcılarında görüntüleme fırsatı sunmak için bu birleştirme etiketini bir 'çevrimiçi görüntüle' bağlantısına ekleyin.

Şablonunuzu Mailchimp'e nasıl eklenir

Artık şablonunuzu kodladığınıza göre, onu çalıştırmaya hazırsınız.

"Kampanyalar > E-posta şablonları"na gidin ve şablonunuzu içe aktarmak için "Şablon oluştur" düğmesini tıklayın.

Şablonunuzu Mailchimp'e getirmenin en kolay yolu, HTML'nizi ve resimlerinizi içeren bir zip yüklemektir, çünkü Mailchimp resim yollarını sizin için yönetecektir.

Mailchimp: şablonunuz için bir başlangıç noktası seçin

Şablonunuzu adlandırdıktan ve zip dosyanıza gittiğinizde, şablonunuz şablon düzenleyicide açılır. Burada ayarlamalar yapabilir, görüntülerin ve diğer varlıkların depolandığı içerik stüdyosuna erişebilir ve şablon oluşturma işleminizi test edebilirsiniz.

Bu düzenleyicide işiniz bittiğinde kaydedip kapatabilirsiniz ve şablonunuz kullanıma hazırdır.

Şablonunuzun Mailchimp'te çalıştığından emin olun

Pek çok yaygın HTML hatası vardır, bu nedenle, Mailchimp'i ekibinize, müşterilerinize veya kullanması için diğer kişilere göndermeden önce düzenleme deneyiminin nasıl olduğunu görmek iyi bir fikirdir. Bunu yapmak için ana menüde 'Oluştur'a gidin, ardından 'e-posta'yı seçin ve 'düzenli kampanya' ile devam edin.

Konu satırı ve önizleme metni gibi bazı kampanya ayrıntılarını ekleyebilirsiniz. Bu size, birleştirme etiketinizin olup olmadığını kontrol etme ve metin kodunun doğru şekilde uygulanıp uygulanmadığını kontrol etme fırsatı verecektir.

'Tasarım E-postası'nı tıkladığınızda, kullanmak istediğiniz şablonu seçebileceksiniz. 'Kayıtlı Şablonlar' sekmesinde özel şablonunuzu bulun.

Mailchimp'te bir şablon seçin

Şablonunuzu seçtikten sonra, düzenlenebilir tüm bölümlerinizi teste tabi tutabileceğiniz Mailchimp düzenleme ortamına yönlendirileceksiniz.

Düzenlenebilir bir öğeyi düzenlemek için üzerine tıklamanız yeterlidir; sağ tarafta bir düzenleme bölmesi görünecektir.

Mailchimp şablonunuzda bir öğeyi düzenleme

Unutulmaması gereken bir şey : Bazen içerik bloklarımı yeniden düzenlemek işe yaramaz, bu nedenle bir bloğa tıkladığınızda yukarı ve aşağı oklu simgeyi göremiyorsanız, yeniden sıralamak istediğiniz bloğu kopyalamayı deneyin. Yeni konumuna taşımak istediğiniz bloğu sürükledikten sonra istenmeyen ekstra bloğu silebilirsiniz.

Mailchimp şablonunuzdaki blokları yeniden düzenleme

E-posta oluşturmayı test etmeyi unutmayın

Her zaman olduğu gibi, özellikle bir e-posta kampanyası oluşturmak için kullanıldıktan sonra, farklı e-posta istemcilerinin şablonunuzu nasıl oluşturduğunu görmek çok önemlidir.

Bu tür testler sayesinde şablonlarımla ilgili sorunları tespit ettim ve Mailchimp'in bazı kod kaldırma tuhaflıklarıyla karşılaştım. Kapsamlı, otomatik ön gönderme testi için gelen kutunuza veya Litmus test adresinize 'Önizleme' ve 'Test e-postası gönder' seçeneğine giderek hem kampanya hem de şablon düzenleyicilerinde kolayca test edebilirsiniz.

Litmus ve Mailchimp ayrıca, e-postalarınızı olabildiğince kapsamlı ve verimli bir şekilde test etmenize yardımcı olmak için çeşitli şekillerde entegre olur. Mailchimp'te Gelen Kutusu Önizlemelerinde Litmus destekli e-posta testini çalıştırmak için 'Önizleme moduna girin'e gidin ve 'Gelen Kutusu' sekmesini seçin. Litmus Plus veya Enterprise planıyla, Chrome'da Litmus Uzantısı ile oluştururken önemli ön gönderme öğelerini test etme ve Litmus ile Mailchimp arasında e-postaları senkronize etme yeteneği de dahil olmak üzere ek test ve zaman kazandıran entegrasyonlara erişim elde edersiniz.

Kullanıma hazır özel şablonlar edinin

Hemen kullanabileceğiniz düzenlenebilir Mailchimp şablonları arıyorsanız, arkanızdayız.

Ücretsiz Litmus tarafından oluşturulmuş Mailchimp şablonu

Başlamanıza yardımcı olmak için Karanlık Mod için optimize edilmiş, özel bir Mailchimp şablonu oluşturduk. Tekrarlanabilir satırları, değişken bir içerik bloğu ve Mailchimp dostu bir düğmesi vardır.

Mailchimp şablonumuzu indirin →

Litmus'tan ücretsiz Mailchimp e-posta şablonu

Ücretsiz Litmus tarafından oluşturulmuş Mailchimp şablonunuzu (.zip dosyası) alın. Ardından, Mailchimp'te düzenlenebilir ücretsiz Abone Aşkı e-posta şablonlarımızın mini bir sürümünü yapmak için Mailchimp'in şablon kodunu nasıl uyguladığımızı görmek için kodu inceleyin.

Mailchimp iş ortağı tarafından oluşturulan e-posta şablonları

Daha da fazla seçenek için Mailchimp Hizmet Ortakları tarafından tasarlanan güzel e-posta şablonlarıyla Mailchimp Marketplace'e göz atın.

Mailchimp Marketplace'teki Mailchimp şablonları

Yeni aboneler kazanmak veya yeni bir ürünün tanıtımını yapmak olsun, pazarlama hedefinize göre e-posta şablonlarını arayabilirsiniz. Size en uygun şablonu seçip satın alın, ardından markanıza göre özelleştirmeye başlayın. Kurulum veya kodlama gerekmez.

Mükemmel özel Mailchimp şablonunuz elinizin altında

İster kendi düzenlenebilir şablonunuzu kodlayın, ister başka birinin şablonunu özelleştirin, daha verimli bir e-posta oluşturma sürecine doğru yoldasınız ve marka üzerinde hatasız e-postalar oluşturmak için güvenebilirsiniz.

yeşil bir onay işareti ve gülen yüz ile e-posta grafiği

Mailchimp şablonunuzun harika göründüğünden emin olun

Markaya uygun, hatasız bir abone deneyimi sağlamak için Litmus ile 90'dan fazla e-posta istemcisinde, uygulamasında ve cihazında e-postalarınızı önizleyin. Her zaman.

Litmus'un ücretsiz deneme sürümünü edinin →