Duyarlı e -posta tasarımları oluşturmak için e -posta için temel bir çerçeve nasıl kullanılır
Kolayca duyarlı bir e -posta tasarımı yapmanıza izin veren birçok pazarlama aracı vardır. Sorun şu ki, e -posta ekranınız üzerinde daha fazla kontrole sahip olmayı tercih edebilirsiniz ve bunu yapmanın en iyi yolu onu en baştan tasarlamaktır. E -postalar için vakıf gibi bir çerçeve kullanmak size olağanüstü bir uzlaşma sağlar. Her bileşeni başlangıçtan itibaren tasarlamanız gerekmeyecek, ancak nasıl, ne zaman ve nerede kullanılacağı konusunda tam kontrol sahibi olursunuz. Bu makalede, önce bir e -posta çerçevesinin ne olduğunu ve size nasıl yardımcı olabileceğini açıklayacağız. Ardından, e -postalar için vakıf tartışmasına ve kendi özel duyarlı e -posta kampanyanızı oluşturmak için nasıl kullanabileceğinize geçeceğiz. Hadi çalışalım!
E -posta çerçevesi nedir (ve daha iyi bir e -posta oluşturmanıza nasıl yardımcı olabilirler)
Genel olarak, çerçeve, belirli ürün türlerinin geliştirilmesine yardımcı olmak için tasarlanmış uygulama, dosyalar ve kodların bir derlemesidir. Onları, tekerlekleri herhangi bir zamanda yeniden keşfetmeme izin vererek karmaşık projeleri daha hızlı yapmanıza yardımcı olabilecek bir kod oluşturucu bloğu olarak düşünün. E -posta için de bir çerçeve var ve bu makalede konuşacağımız şey bu. Bazı faydaları keşfedelim:
Varsayılan öğe, e -postayı daha hızlı tasarlamanıza yardımcı olur. Şu anda, e -postaların çoğu resim ve metnin dışındaki öğeleri içerir, örneğin düğmeler ve menüler gibi. Bu öğelerin dahil edilmesi zaman alabilir, ancak çerçeve anında eklemenize ve ayarlamanıza izin verir. Kutunun dışına duyarlıdır. Giderek daha fazla insan mobil cihazlara yöneldiğinden, e -postanızın ekranlarında iyi görüntülendiğinden emin olmanız gerekir. Modern çerçevenin çoğu varsayılan olarak duyarlıdır, yani artık endişelenmenize gerek yoktur.
Şablonlar tasarımınızı başlatmanıza yardımcı olabilir. Birçok modern e -posta çerçevesi, kampanyalar yapmanıza yardımcı olacak çeşitli şablonlar içerir.
Gördüğünüz gibi, buradaki ortak tema, çerçevenin zaman kazanmanıza izin vermesidir. Proje kodunuzu sıfırdan yapmak istediğiniz birçok durum var, ancak daha yüksek kaliteli mümkün olan bir şeyi daha hızlı tamamlamanızı sağlayan bir çerçeve.
E -posta için temel çerçeveye giriş
Daha ileri gitmeden önce, çevrimiçi olarak iki temel çerçevenin bulunduğunu belirtmek önemlidir – e -posta için siteler ve temeller için temel – ve bu makale boyunca ikincisine odaklanacağız. Ana satış değeri duyarlı ızgara. Bu tür sistem devrimci değildir, ancak vakfın popülaritesi kullanım kolaylığına dayanmaktadır. Oldukça kolay bir çerçeve almak (bir kodlama deneyiminiz olmasa bile) ve biri basamaklı stil sayfalarına (CSS) ve diğeri Sass’a dayanan iki versiyon arasında seçim yapabilirsiniz. Tabii ki, SASS sürümü, stilleri tekrarlama ihtiyacını ortadan kaldırarak daha fazla zaman depolamanıza izin verir, ancak node.js.erah ile bir miktar samimiyet gerektirmez, e -posta temeli de düğmeler ve menüler gibi birçok desen sağlar İşinizi kolaylaştırmak için. Daha fazla zaman kazanmak için, düzeni en başından tasarlamak yerine şablonu bile kullanabilirsiniz. Ana özellik: Modern bir e -posta kampanyası oluşturmak için duyarlı kafes kullanmak.
CSS veya SASS’ın bir çerçeve sürümünü sunar.
E -postanıza hızlı bir şekilde genel öğeler eklemek için deseni kullanmanıza olanak tanır.
Bir e -posta yapma işlemini kolaylaştırmak için düzeni kullanın.
Fiyat: Ücretsiz | Modern tasarımlar (4 adımda) oluşturmak için e -postanın nasıl kullanılacağı hakkında daha fazla bilgi için, bahsettiğimiz gibi, e -postalar için vakıfın iki sürümü vardır. Bu bölüm için CSS varyasyonlarını kullanacağız çünkü hazırlamak için daha az iş gerektirir. Buna ek olarak, sonuç aynı görünecektir – değişen tek şey bunu başarma şeklinizdir.
Aksiyonun Sass sürümünü görmek veya nasıl kullanılacağı hakkında daha fazla bilgi edinmek istiyorsanız, bu harika öğretici ile başlayabilirsiniz. Adım #1: İlk e -posta dosyasının temelini indirin, e -posta başlamak için temel sayfasını açın ve CSS sürümünün altyazılarının altındaki Başlangıç Kiti İndir düğmesini tıklayın: Dosyayı aldıktan sonra içeriği açın ve çıkarın. yeni dosya. Bu aşamada, klasörünüz index.html dosyaları ve iki alt klasör içermelidir – biri CSS ve diğeri şablonunuz için. Şimdilik, en sevdiğiniz metin düzenleyicinizi çalıştırın ve Index.html dosyasını onunla açın. Oldukça açık olmalı, ama yakında düzelteceğiz.
Adım #2: Esnek bir ızgara sistemine dayanan e -mail duyarlılığı için ızgara temel sistemi ile kendinize alışın. Bir e -postayı sıfırdan derlerseniz, e -posta bölümünüzü gruplandırmak için kendi ızgaranızı oluşturabilirsiniz. Bunu yapmak için üç farklı bileşen kullanacağız: kap, satırlar ve sütun. Metin düzenleyicinize index.html dosyanızı açın ve gövdeye gidin:
<!–>
Gördüğünüz gibi, e -postanızın içeriği, dokunmayacağımız bir prassettel tablosu içerir. Bunun yerine, sadece kendi ızgara öğelerimizi <! Konteyner için kullanmanız gereken kodla başlayalım: >
Şimdi, oraya bir çizgi ekleyelim: </ho.
Son olarak, satırı sütunlara bölebiliriz:
Bir sütun
</h.
Her satırın 12 sütundan oluştuğunu unutmayın. Yukarıdaki kod, e-posta istemcinize, mobil cihazlar (Small 12) gibi küçük ekranlarda 12 tam sütun kullanarak içeriğinizi görüntülemesi gerektiğini, ancak masaüstünde yalnızca altı tane (büyük-6) gerektirdiğini söyler.
Sorun şu ki, e -postanız büyük bir ekranda görünürse altı boş sütun vardır, bu yüzden düzeltmek için ikinci tabloyu eklememiz gerekir:
Bir sütun
</h.
İkinci sütun
</h.
Gördüğünüz gibi, iki sütun temelde aynıdır. Ancak, ilk sütun ve son sütun olmak üzere iki farklı sınıfa sahiptir. Bu, satırınızdaki ilk ve son sütun olan e -postanızın istemcinize söyler ve bunların herhangi bir sütununu kullanmanız gerekmez. Şimdi tarayıcıda index.html dosyasını açarsanız, göreceğiniz şey budur:
Bu oldukça çıplak, evet, ancak mekanizma bu aşamada net olmalı. Her e -postanın istediğiniz kadar satırı olabilir ve her satır için en fazla 12 sütuna sahip olabilirsiniz. Şimdilik, istediğiniz düzeni bulana kadar bir kafes sistemiyle oynamaya devam edin ve öğeler eklemeye başlayana kadar tanımlamanıza yardımcı olmak için metin kapsayıcısını kullanın. Adım #3: Birçok bileşende bir e -posta paketi için e -posta temelinize bileşenler ekleyin ve en yaygın olarak kullanılan düğmeler, arka plan resimleri ve altyazılardır. Oldukça basitler, bu yüzden sırayla tartışalım. Bir düğme eklemek için, aşağıdaki kodu sütunlarınızdan birine veya birkaçında kullanmanız gerekir:
Bu kod, e -postanıza yeşil arka plan bulunan basit bir küçük düğme ekler. Buradaki kilit unsur küçük ve başarılı bir sınıftır. Birincisi düğmenizin boyutunu ve ikinci rengi ayarlayın. Burada mevcut olan tüm sınıfı eklemek yerine, sizi boş zamanınızda dikkatlice okuyabileceğiniz düğmedeki vakfın resmi kaynağına bağlayacağız. Şimdi arka plan görüntüsüne dönelim. Bu biraz daha karmaşıktır, çünkü satırınızın tüm genişliğini almasını sağlamak için sarma sınıfını kullanmanız ve CSS kullanarak özel bir arka plan ayarlamanız gerekir:
Son olarak, alt polar hakkında konuşalım. Bu en basit olanı – tek yapmanız gereken metninizi gerekli etiketlere sarmaktır:
h1. Bu çok büyük bir başlık.
H2. Bu büyük bir başlık.
H3. Bu orta bir başlık.
Bu kadar kolay!Bu üç öğeyi kullanmak iyi e -postalar yapmak için yeterlidir.Sır, elbette, CSS ile istediğiniz gibi düzenlemektir, bu da bizi son adıma götürür.Adım #4: E -posta stiliniz CSS kullanır Bazı e -posta istemcileri (Microsoft Outlook gibi) HTML dosyanızdan bazı stil etiketlerini silin.Bu, e -postanın sorunsuz görüntülenmesi ve güvenlik tehditleri potansiyelini ortadan kaldırması için yapılır.Ancak sonuç, doğrudan HTML’nize (veya satırınıza) CSS eklemediğiniz sürece e -postanızın çok sıkıcı görünmesidir.Bu şekilde, içeriğiniz ve stiliniz bir dosya olarak yüklenecek ve her ikisi de çoğu modern e -posta istemcisinde iyi çalışacaktır.HTML öğesinin CSS ile birlikte gösterilmesi aşağıdadır:
Bu biraz dağınık olabilir, bu nedenle HTML ve CSS dosyalarınızda ayrı ayrı çalışmalısınız, ardından sizin için birleştirmek için Foundation Inliner gibi araçları kullanmalısınız. Sadece kodunuzu yapıştırın, düğmeyi tıklayın, gerisi sizinle ilgilenir. Bir HTML dosya satırınız olduğunda, müşterilerinize göndermeden önce her zaman iyi bir fikir olan bir e -posta pazarlama aracı kullanarak devam edebilir ve test edebilirsiniz. Sonuç İşlevsel ve duyarlı e -posta oluşturmanın birçok yolu vardır. Bununla birlikte, esneklik arıyorsanız, EMITHS Vakfı gibi bir çerçeve kullanmak iyi bir seçimdir. Bu, daha önce yapılan bileşenleri kullanarak e -postalar tasarlamanıza veya bir şablonu kullanarak işlemi hızlandırmanıza olanak tanır. Seçtiğiniz şeyin yanı sıra, bir e -postayı büyük ölçüde yapmak için zamanınızı azaltacaktır. Yeniden özetleme için, e -posta için temel içeren modern bir e -posta oluşturmanız gereken dört adım şunlardır: Dosya Çerçevesi.
Izgara sistemi ile kendinize alışın.
E -postanız için bileşenleri kullanın.
E -posta stiliniz CSS kullanır.
Vakfı e -postalar için nasıl kullanacağınızla ilgili sorularınız var mı? Aşağıdaki yorumlar bölümünde sorun! Makale Küçük Resim Faberr Ink / Shutterstock.com.
