Ev - Tasarımcı ipuçları
Html e-posta şablonları. E-posta bültenleri için şablonlar ve şablon düzenleyicileri

Resimlerin boyutunu belirtmenin gerekli olup olmadığını henüz anlamadım, dolayısıyla bu konuda hala bir kaos var. Bir yere koyuyorum, koymadığım bir yere. Testlerden sonra işleri düzene koyacağım. Kodu kısaltmak için ya tamamen kaldıracağım ya da postalardan birinde düzgün görüntülenmezse her yere eklemek zorunda kalacağım.

Bu kodla "içerik" tablosuna bir sütunlu bir satır ekliyorum ve içine "Smartlanding" yazan bir resim yerleştiriyorum:

Şimdi mektup şöyle görünüyor:



Bütün bunlar içerik arasında boşluk olacak şekilde yapılır. HTML kodu içerikle şöyle görünür:

Artık makalenin duyurusunu uygulamanız gerekiyor, bu oldukça basit bir şekilde yapılıyor. 1 satır, 1 sütun ve içindeki metin:

Metin ve başlıklar için tamamen aynı işaretlemeyi yapıyorum:

Ve şimdi son adım kaldı, altbilgiyi yapmak. Bunun için yeni bir tablo oluşturmadım, ancak onu içeriğe yerleştirdim, yalnızca yeni bir satır ve sütun ekledim:

Mektup bu şekilde ortaya çıktı. Şimdi önümüzde birçok test var. Düzeni aşağıdaki e-posta hizmetlerinde ve programlarında test etmeyi planlıyorum:

  • gmail
  • yandex
  • başıboş
  • mozilla gök gürültüsü kuşu
  • görünüm 2007
  • görünüm 2013
  • yarasa

Test sırasında başlıklara ve metinlere stil ekleyeceğim, özellikleri sıfırlayacağım ve diğer ayarlamaları yapacağım. Daha sonra bu konuyla ilgili ayrıntılı bir yazı daha yazacağım. Belki bir sonraki makalede bir şeyler değişecektir, bu nedenle ilgileniyorsanız güncellemelere abone olun bu konu ve yeni materyalleri kaçırmak istemezsiniz.

Html mektupları oluşturma deneyiminiz varsa, lütfen yorumunuzu yazın ve hataları belirtin. Sana çok minnettar olacağım. Ve bugünlük bu kadar. Güle güle!

(Farklı arama motorlarında html harflerinin ön testlerine göz atın)

İnternet kullanıcı sayısının artmasıyla birlikte e-posta pazarlaması her yıl ivme kazanmaya devam ediyor. Şirketlerin veritabanları büyüyor, her müşteriye manuel olarak mektup göndermek yıpratıcı bir iş haline geliyor. E-posta pazarlaması, e-posta gönderme sürecinin daha rahat, daha hızlı olmasına yardımcı olur ve yaratıcılığın temelini oluşturur. Postalama için HTML ve normal e-posta şablonları kullanılır.

Eğer konuşursak basit bir dille e-posta pazarlaması, veritabanında bulunan e-posta adreslerine mektup göndermek için iyi düşünülmüş bir sistemdir.

Bu tür pazarlama, mektup şablonlarına ve harflerin içine yerleştirilmiş sayfalara dayanır.

E-posta şablonları 2 türde gelir:

  • Sade olanlar, nadiren yaratıcı biçimlendirmeyle, ekleri olan veya olmayan yalnızca birkaç cümlelik metin e-postalarıdır. Bu e-posta şablonları iş yazışmalarında yaygın olarak kullanılır.

  • HTML mektup şablonları parlaktır, mektuba gömülü olan web sayfasında dikkat çekmek ve ilgi yaratmak için tasarlanmıştır.

Avantajları ve dezavantajları nelerdir?

Her zamanki şablonlarla başlayalım.

Çok sayıda “artı” iyi bir göstergedir. Ancak bir müşteriyle, özellikle de sıradan biriyle ilk iletişim sırasında bu tür mektupları satabilmeleri pek mümkün değildir. HTML e-postalarının aksine.

Yeterli hazırlık olmadan kendi başınıza HTML e-postaları oluşturmak zordur, ancak tam da bu tür güzel, kartpostal benzeri mesajlar, basit "siyah beyaz" olanlardan çok daha fazla dikkat çeker. HTML mektupları ve e-postaları için şablonlar, kullanıcılara mektup göndermeyi düzenlemek için uzun süredir bu işlevi zorunlu olarak içeren posta hizmeti sitelerinde doğrudan oluşturulabilir.

Temel hizmetler

E-posta haber bültenleri için ana siteleri tanımlarken, bunları en önemli özelliklerine göre karşılaştırmak mantıklı olacaktır.

Stripo teklifleri geniş seçim ücretsiz şablonlar e-posta bültenleri. Özel etkinlikler, tatiller vb. gibi iş alanı ve kategoriye göre gruplandırılırlar. Şablonlarımız her türlü tetikleyici mesaj, hukuk ve danışmanlık hizmetleri, tanıtım mesajları ve diğer mesaj türleri için önceden tasarlanmıştır.

Burada ihtiyaçlarınıza ve zevkinize uygun e-posta pazarlama şablonlarını bulacaksınız.

Neden bundan bu kadar eminiz:

    Duyarlı Web Tasarımı

    Tüm Stripo şablonları tamamen duyarlıdır. Bu, tüm mobil cihazların ve çoğu e-posta istemcisinin bunları doğru şekilde görüntülediği anlamına gelir.
    Ancak e-posta şablonlarınızın belirli öğelerinin değişmeden kalmasını istiyorsanız herhangi bir görüntüyü, bloğu veya yapıyı seçip yanıt vermemesini sağlayabilirsiniz.
    Ayrıca ücretsiz e-posta şablonlarımızın açık HTML kodu sayesinde, mobil cihazlarda hangi görsellerin ve blokların görüntüleneceğini ve hangilerinin yalnızca masaüstü cihazlarda görüntüleneceğini seçmek mümkündür.
    Çok çeşitli pazarlama kampanyaları için HTML mesaj şablonlarımızı kullanın.

    İki editör bir arada

    Yeni nesil aracımız, açık HTML/CSS kodunu ve sürükle ve bırak düzenleyiciyi birleştirir.
    Bu özellik, aracın bazı kısımlarını sürükleyip bırakarak görsel öğeler ve metin tasarlama olanağı sağlar. HTML koduyla, bülten şablonunuza videolar ve etkileşimli öğeler gömebilir ve düzenleyiciden ayrılmadan görseller tasarlamaya geri dönebilirsiniz.

    Banner oluşturma

    Stripo ile kolaylıkla bannerlar oluşturabilir, bunları editörde işleyebilir ve bannerın üstüne metin yerleştirebilirsiniz. Bu özellik sayesinde bannerları birden fazla kez kullanma imkanına sahip olursunuz. Artık duyarlı HTML şablonunuzu yaratıcı ve isteklerinize göre özelleştirilmiş hale getirmek için herhangi bir ek araca (fotoğraf düzenleyiciler gibi) ihtiyacınız yok.
    E-posta sağlayıcılarının dekoratif yazı tiplerini web'de güvenli olanlarla değiştirdiği yaygın olarak bilinmektedir. Aynı zamanda e-posta tasarımınız özel çekiciliğini kaybeder. Ancak Stripo, editörümüzde mevcut olanlardan istediğiniz herhangi bir yazı tipini kullanmanıza olanak tanır. Bu nasıl yapılır? Metni banner'ın üstüne yerleştirin ve seçin uygun renk ve en sevdiğiniz dekoratif yazı tipini metne uygulayın.
    E-posta istemcileri, herhangi bir görselin üstüne eklenen metni, görselin bir öğesi olarak ele alır. Bu şekilde aboneleriniz metninizin ücretsiz HTML şablonunuza tam olarak amaçlandığı gibi eklendiğini görecektir.

    İş otomasyonu - benzersiz akıllı unsurlarımız

    Ürün kartları oluşturmak oldukça meşakkatli bir süreçtir. Ancak Stripo bu işi sizin için kolaylaştırmak için her şeyi yapıyor. Akıllı öğelerin bazı özelleştirmelerinden sonra, bağlantıyı istediğiniz satıra yapıştırmanız yeterli olacaktır. Açıklama, maliyet, ürün numunesi uygun alanlara otomatik olarak eklenecektir. Size kolaylık sağlamak için bazı HTML mesaj şablonlarına akıllı öğeler ekledik. Stripo zamandan tasarruf etmenizi sağlar!

    Stripo'daki kişisel modül kütüphanesi

    Kişisel kitaplığınızda içerik blokları/yapıları/şeritler/kapsayıcılar oluşturun, düzenleyin ve kaydedin. Yeni bir e-posta kampanyası başlattığınızda bunları istediğiniz zaman kullanabilirsiniz.
    Mevcut ücretsiz şablonlarımız otomatik olarak kişisel kitaplığınızda mevcut olan modüllere bölünür.

    Kolay ihracat

    Stripo'nun duyarlı mesaj şablonları çoğu e-posta sağlayıcısına ve Gmail ve Outlook gibi popüler e-posta istemcilerine kolayca aktarılır.
    Harika haber: E-posta şablonlarımız dışa aktarıldıktan sonra bile düzenlenebilir. Gelişmiş entegrasyon ile HTML kodunda, metinde ve görsel öğelerde her türlü değişikliği yapabilirsiniz. Bu seçenek, Stripo'nun duyarlı HTML şablonlarını e-posta istemcileri ve sağlayıcıları için kolay hale getirir.
    Size kolaylık sağlamak için e-posta şablonlarınızı klasörler halinde de sıralayabilirsiniz.

    E-posta pazarlaması bizim tutkumuzdur ve bu nedenle Stripo, profesyonel e-posta şablonlarını gerçek tutkuyla tasarlar.

Daha fazlasını göster

İyi bir e-posta kampanyası e-posta tasarımıyla başlar. Günümüzde çoğu e-posta istemcisi ve platformu e-posta yeni web standartlarını destekleyerek, masaüstü ve mobil cihazları kullanan tüm abonelere duyarlı e-postalar gönderebiliriz. Uyarlanabilir HTML şablonu S mektuplar, haber bültenimizin hangi cihazda okunduğuna bakılmaksızın aboneler tarafından eşit şekilde algılanmasını sağlar.

Bunu yapmanıza yardımcı olmak için doğru seçim e-posta pazarlaması için en popüler mektup şablonlarından bir seçki sunuyoruz. Burada yalnızca şablonlara değil, aynı zamanda kendi şablonlarınızı oluşturmak için kullanabileceğiniz uyarlanabilir çerçevelere de bakıyoruz.

Cerberus

Sıfırdan bir bülten e-posta şablonu oluşturmak başlı başına bir zorluk olabilir. kolay bir iş değil. Ve ne zaman hakkında konuşuyoruz duyarlı bir düzen oluşturma konusunda ayrıca daha fazla nüans bunun dikkate alınması gerekir. Bu nedenle Cerberus gibi bir çerçeve işinize yarayabilir.

Bu kompakt kitaplık, abonelerinize unutulmaz bir e-posta görüntüleme deneyimi sağlayacak bir e-posta oluşturmak için kullanıcıların birkaç HTML şablonu kullanmasına yardımcı olmak üzere tasarlanmıştır. ile oluşturulan küçük şablonlar HTML kullanarak, bunların nihai sonuç olarak kullanılması amaçlanmamıştır. Cerberus geliştiricileri, kendi varyasyonlarınızı oluşturmak için HTML koduyla denemeler yapmanızı önerir.

Turnusol


Bu ünlü marka Etkinliği test etmeyi ve analiz etmeyi sevenler arasında e-posta pazarlama kampanyalar. Litmus ekibi topluluğa düzenli olarak çeşitli ücretsiz kaynaklar sağlamasıyla ünlüdür; bunlardan biri bir dizi duyarlı e-posta şablonudur.

Setteki beş şablonun tümü farklı kategorilere aittir. Bunlar arasında bir HTML bülten e-posta şablonu, yeni bir ürün duyuru şablonu, mali bildirimler için bir makbuz şablonu, kısa mesaj duyuruları ve hatta normal bir e-posta şablonu bulunur. E-postalarının basit ama duyarlı olmasını isteyen kullanıcılar için mükemmeldir.

Duyarlı HTML E-posta Çerçevesi


Bu, duyarlı e-posta bültenleri oluşturmak için tam özellikli bir çözümdür. Çerçeve, geliştiricilere içerik için bir dizi ızgara, modül, blok ve çizgi, öğeler, düğmeler, görüntü çizgileri ve kusursuz bir e-posta şablonu geliştirmek için kullanılabilecek diğer öğeler arasındaki mesafeyi ayarlama işlevi sağlar. Tüm popüler e-posta istemcilerinde test edilmiştir.

E-posta Vakfı


Bu, web geliştirmeyi optimize etmek için çeşitli çerçeveler ve platformlar kümesidir. Foundation, geliştiricilere ve tasarımcılara hızlı bir şekilde etkili, duyarlı e-postalar oluşturmalarına olanak tanıyan, kullanımı kolay bir CSS çerçevesi sağlar.

Her HTML e-posta şablonu düzenleyicisi, Foundation tarafından sağlanan ızgara sistemini yerel olarak kullanır. Daha sonra bu amaçlar için yaygın olarak kullanılan çeşitli unsurlarla desteklenebilir. İster e-ticarette ister ticari markalamada çalışıyor olun, Foundation duyarlı şablonlar oluşturmanıza yardımcı olabilir e-postalar.

Antwort


Antwort kendisini bir çerçeve olarak konumlandırmıyor, kendilerini sabit hatlara uyum sağlayabilecek hazır e-posta şablonları kaynağı olarak adlandırıyor ve mobil cihazlar. iOS ve Android'in yanı sıra Yahoo!, Gmail ve Outlook gibi önemli e-posta istemcilerinde kusursuz bir şekilde çalışır.

Outlook'un en eski sürümlerinden bazılarında bile. Düzenler, içeriğin dinamik olarak eklenmesine uyum sağlayacak şekilde tasarlanmıştır. Aynı zamanda harf tasarım stili minimalisttir.

ZURB'dan Oyun Alanı


Bu bir geliştirme şirketidir HTML5 çerçeve Temeli, ayrıca Ink adlı bir hizmetin operatörü. Bugün daha çok Vakıf E-postası olarak biliniyor.

ZURB's Playground, her ekran boyutuna ve cihaza kolayca uyum sağlayan, arasından seçim yapabileceğiniz beş farklı e-posta şablonu sunar. Tüm şablonlar ayrı stil sayfaları ve HTML belgeleriyle birlikte gelir. Bu şablonlar herhangi bir büyük e-posta platformuyla uyumlu olacaktır. Bu şablonları kullanabileceğiniz bir hizmeti kolayca bulabilirsiniz.

Mozaik


Herhangi bir kullanıcının uyarlanabilir, güzel HTML e-posta şablonları oluşturmasına olanak tanıyan bir platform. Mosaico, özel öğeleri yönetmek için araçlar sağlar ve uyarlanabilir tasarım. Bir düğmeye tıklayarak tüm düzenlerinizi kişiselleştirmenize olanak tanırlar.

Yerleşik kontrol sistemi, yapılan tüm değişiklikleri geri almanıza ve yeniden yapmanıza olanak tanır. Hatta kendi e-posta şablonlarınızı yükleyebilir ve bunları Mosaico'da özelleştirebilirsiniz. Platform açık kaynaktır ve herkesi projenin geliştirilmesinde yer almaya teşvik eder.

Açık Kaynak E-posta Şablonları


Pazarlamacılara ve blog yazarlarına, kullanımı kolay bir ortamda şablonlarını oluşturma ve pazarlama olanağı sunan ünlü bir e-posta pazarlama platformu. Pazarlama topluluğuna bir teşekkür olarak SendWithUs, kullanıcılara on duyarlı şablondan oluşan bir kitaplık sağlar.

Tüm şablonlar açık kaynaktır ve kendi takdirinize bağlı olarak herhangi bir değişiklik ve ayarlama yapmanıza olanak tanır. Bu şablonlar ücretsiz olmasına rağmen yalnızca müşterilere fatura ve bildirim düzenlemek için uygundur.

Duyarlı E-posta Kalıpları


Brian Graves duyarlı e-postalar oluşturmak ve bunlarla çalışmak için sağlam bir temel oluşturdu. Duyarlı E-posta Kalıpları projesi, favori e-posta platformunuzda veya doğrudan e-posta istemcinizde kullanmak üzere hızlı bir şekilde duyarlı e-postalar oluşturmak için kullanabileceğiniz bir dizi takılabilir şablondur. Şablonlar listeler, medya, gezinme ve ızgaralar gibi öğeleri içerir.

HTML E-posta Şablonları


Yüzbinlerce çevrimiçi pazarlamacının e-posta kampanyalarıyla en iyi sonuçları elde etmesine yardımcı olan saygın bir e-posta pazarlama hizmeti. Campaign Monitor, e-posta kampanyalarını test etme işlevinin yanı sıra bir e-posta tasarımcısı ve bir HTML e-posta şablonları koleksiyonu da sağlar. Hemen hemen her duruma uygun 20'den fazla benzersiz şablona sahiptir. Ortaklıklar kurmak için şablonlar, iş görüşmeleri, geleneksel haber bülteni şablonları ve etkinlik duyuruları için şablonlar.

HTML E-posta Tasarımlarından E-posta Tasarımı İlhamı


Bu, en iyi teknoloji şirketlerinden bazılarının haber bültenlerinde kullanılan en iyi e-posta şablonlarının deposudur: Dropbox, Udemy, Moo, DigitalOcean ve çok daha fazlası. Bu örnek şablonların en güzel yanı gerçek kullanıcılara gönderilmiş olmalarıdır. Bu, şablonları sağlayan uygulama özelliklerini daha iyi anlamak için şablonların yapısını kolayca analiz etmenize olanak tanır. yüksek verimlilik. Başlamak için yüzlerce e-posta şablonu.

MJML - Duyarlı E-posta Çerçevesi


Geliştiricilerin hızlı bir şekilde duyarlı şablonlar oluşturmasına yardımcı olmak için tasarlanmış bir çerçeve ve yerleşik özel işaretleme dilidir. MJML'in amacı duyarlı e-postalar tasarlamayı kolaylaştırmaktır. MJML kullanarak oluşturduğunuz işaretleme daha sonra otomatik olarak tamamen HTML5 uyumlu koda dönüştürülür. Herhangi bir e-posta istemcisinde kullanabilirsiniz. Çeşitli önceden ayarlanmış şablonlar da mevcuttur.

Yeniden e-posta


Karmaşık çerçevelerle uğraşmak istemeyenler için Respmail basit, duyarlı bir e-posta pazarlama çözümüdür. Size beğeninize göre özelleştirebileceğiniz tek bir şablon sunar. Başlangıcından bu yana, HTML e-posta şablonu tüm önemli e-posta istemcileriyle uyumluluğu sağlayacak şekilde geliştirildi ve geliştirildi.

Tutku


Bu, modern web tasarım konseptlerini kullanan gelişmiş bir e-posta şablonudur. Bu şablonun genişletilebilirliği çok etkileyici. Çeşitli unsurlarşablonlar ayrı bileşenlerdir ve bülten e-postalarınız için neyin gerekli olduğunu düşündüğünüzü kolayca seçebilirsiniz.

Ücretsiz Bülten Şablonu


Ücretsiz bülten şablonu. Bu, basit bir e-posta düzeni isteyenler için zarif ve minimalist bir çözümdür. Bize göre bu şablon, mektubunu modern karmaşık unsurlarla aşırı yüklemeden mesajlarını iletmek isteyen blog yazarları, sanatçılar ve yazarlar için yararlı olabilir.

Posta Portföyü


MailPortfolio, yukarıda açıklanan HTML e-posta şablonuyla aynı felsefeyi izler. Tek fark, MailPortfolio'nun daha çok temel kırmızı renklere odaklanmasıdır. Ama geri kalan her şey tamamen aynı görünüyor. Altbilgide, çoğu e-posta pazarlama platformu için zorunlu olan şirket hakkında gerekli bilgileri belirtebilirsiniz.


Sevgililer Günü hızla yaklaşıyor! Bu nedenle incelemeye çok güzel bir şablon eklemeye karar verdik. Sevgililer Günü E-posta Şablonu Bu gün tekliflerinizi ve haberlerinizi tanıtmak için kullanılabilir. Pek çok özelliğe sahip bu şablonu farklı kullanım durumları için özelleştirebilirsiniz.

EDM TASARIMI


Bu şirket, topluluğun ihtiyaçlarına tam olarak uyum sağlamak için çok zaman harcadı. Sonuç, e-posta oluşturmak için işlevsel bir platformdur. Sürükle ve bırak arayüzü, geliştiricilerin güzel düzenler oluşturmasına yardımcı olur. Artık aynı içeriği tekrar tekrar oluşturarak zaman kaybetmenize gerek yok. EDMDESIGNER ile yalnızca harf şablonlarını değil aynı zamanda tek tek öğeleri de kaydedebilirsiniz. Daha sonra bunları gelecekteki herhangi bir kampanyanızda tekrar kullanabilirsiniz.

Modern HTML E-postası


Ücretsiz şablonlar listemizi bir kitapla tamamlamak istiyoruz. Bu en iyi yol Duyarlı e-posta şablonlarının nasıl oluşturulacağını öğrenin. Bunlardan birinin yazarı Jason Rodriguez. Kitap, tüm cihazlarda, tüm istemcilerde ve tüm tarayıcılarda mükemmel şekilde çalışacak modern ve güzel HTML e-posta şablonları oluşturmanıza yardımcı olacaktır. Kitap, e-posta oluşturmanın temellerinin yanı sıra, e-posta kampanyalarının nasıl test edileceğini ve analiz araçlarını ve raporlarını kullanarak bunların nasıl optimize edileceğini kapsar.

Premium Duyarlı HTML E-posta Şablonları

Premium segmentteki HTML bültenleri için duyarlı e-posta şablonlarından bahsetmek istiyoruz. Fiyatları gerçekten oldukça düşük ( bu iş için bir tasarımcıya ödeyeceğiniz parayla karşılaştırıldığında). Ve gerçekten harika şablonlar bulduk.

Fikir


Mevcut olanların tümünü sağlayan işlevsel şablon modern unsurlarŞablonun kendisine gömülebilen HTML5. Tüm süreci basitleştiren yerleşik unsurlarla fiyatlarınızı, ürün özelliklerinizi kolayca iletebilirsiniz. Şablon, harika e-postalar oluşturmanıza yardımcı olacak yerleşik bir sürükle ve bırak modülü içerir. Ayrıca önde gelen e-posta pazarlama sağlayıcılarıyla da tamamen uyumludur.

Vibgyor


Vibgyor çok amaçlı bir şablon olarak tanımlanabilir. çeşitli endüstriler. Profesyonel dış görünüş Vibgyor'u bu iş kolları için çekici kılıyor. Şablonun herhangi bir bölümünü kendi takdirinize bağlı olarak değiştirmeyi ve optimize etmeyi kolaylaştıran bir sürükle ve bırak oluşturucu içerir.

Herkese selam. Geçen gün html harflerinin nasıl yazıldığını bulmaya karar verdim. İnternette birkaç saat geçirdim, bu konuyla ilgili onlarca makale okudum ve bunun çok zor bir iş olduğu sonucuna vardım.

Ama arzu oradaydı, bu yüzden daha fazla kazmaya başladım. Belki blogda, yakında feedburner'dan gelen e-posta aboneliğini (makalelerin altında) daha çekici hale getirebileceğim başka bir şeyle değiştireceğim. Önemli olan, e-posta istemcileri için düzenin tüm nüanslarını hesaba katmaktır ve inanın bana, bunlardan epeyce var.

Posta için html mektupları oluşturmanın önemi

Posta en çok kullanılan yöntemlerden biridir etkili yollar mal satmak, müşterilere haberleri iletmek, promosyonlar hakkında konuşmak ve ek hizmetler. Ayrıca, bir müşteri tabanınız olduğunda “eski” müşterileri geri getirebilir ve başka bir satış yapabilirsiniz.

Müşterilerinizin ilk satın alımlarından sonra ilgilenebilecekleri ek hizmetler hakkında materyal gönderebilirsiniz.

Ve elbette büyük sayılar teorisi burada da işe yarıyor. 20.000 aboneye bir şey satmak için teklif gönderirseniz, 1000 tanesi teklifi okuyacak, en az 10 tanesi satın alacak ve maliyeti 0 olacak. Az önce bir mektup gönderdiniz!

Ama biri mektubu açmadı, biri açıp okumadı çünkü metin biraz dağınıktı, kimine göre resimler açılmadı, kimine göre sayfa düzeni berbattı. Bu olur. E-posta programlarının tarayıcıların yanı sıra CSS'yi de desteklememesi nedeniyle. Javascript'e gelince, genellikle sessizim.

Ve html harfleri oluşturan düzen tasarımcıları için pek çok sorun var.

Ancak bugün size, mektuplarınızın çekici görünmesi ve müşteri kaybetmemeniz için tüm tarayıcılarda (mobil dahil) ve e-posta programlarında eşit derecede iyi açılacak bir HTML mektubunun nasıl oluşturulacağını anlatmaya çalışacağım. Bu son yazı değil, eğer görüntüde sorun olursa daha sonra ya bunu düzeltirim ya da devamını yazarım. Sorunların test edilmesine ve belirlenmesine yardımcı olabilecek herkese de minnettar olacağım.

HTML e-posta düzeniyle ilgili sorunlar

Posta hizmetlerinin olmaması nedeniyle genel kurallar HTML harflerini görüntülerken düzen tasarımcısının 90'lı yılların düzen kurallarını kullanması gerekir. Bazı insanların buna alışması gerekmiyor, ancak itiraf etmeliyim ki, hiçbir zaman bir html belgesinin içine stiller yazmadım ve yalnızca bir html belgesinin içine şunu kullanarak yazmadım:, yani satır içi, her öğe için ayrı ayrı.

Bazı e-posta programı geliştiricileri, yukarıda açıklandığı şekilde stil sayfaları ve stil sayfaları desteğini tamamen devre dışı bırakmıştır. Bunu, harflere özel olarak metin için ihtiyaç duyulduğunu söyleyerek savunuyoruz. Yani her öğe için ayrı ayrı stil yazmanız gerekecek.

Bir başka sürpriz de pek çok e-posta hizmetinin kayan nokta, kenar boşlukları ve dolguyu desteklememesiydi. Beğendiniz mi? Div(ler)e dayalı üç sütunlu harika bir HTML mektubu oluşturduğunuzu ve kullanıcının ondan ne istediğini anlamadan o kadar saçma bir şeyle geldiğini ve onu hemen sildiğini hayal edin.

Evet, evet. Doğru duydun! E-postanızı doğru şekilde açamayan binlerce kullanıcıyı feda etmek istemiyorsanız tabloları kullanmak zorunda kalacaksınız. Günümüzde tarayıcılar arası uyumluluğa ulaşmanın tek yolunun tablolar olduğu ortaya çıktı.

Sitelerden birinde yazdıkları gibi:

Şu gibi korkunç şeyleri hatırlamanız gerekecek: Hücre dolgusu, hücre aralığı, colspan

Benim durumumda, hiç tablo kullanmadığım için bunları öğrenmem gerekecek. Harfleri nasıl biçimlendireceğimi bulmaya karar vermeseydim belki de asla bunu yapmak zorunda kalmayacaktım :)

Resimler için alt ayarı yapma alışkanlığınız yoksa, bazı e-posta istemcilerinde resimlerin gösterimi varsayılan olarak kapalı olduğundan ve elinizde çok sayıda resim varsa, bunu harflerin düzeni için geliştirmeniz gerekecektir. harf, kullanıcı boş çerçeveler görecek ve böylece içlerinde metin olacak.

Benim için bir başka sorun da, eğer bağlantı olarak ayarlandıysa resimlerin kenarlıkları gibi birçok değeri sürekli sıfırlamak zorunda kalmam.

Şimdilik bu kadar! Başka bir şey çıkarsa, ilerledikçe anlatacağım. Şimdi ise yazı tipi, renk, metin boyutu vb. tasarım stillerini eklemeden şu ana kadar yaptıklarımı size göstermek istiyorum. Bunlar sadece doğru yerlerdeki unsurlardır. Bir sonraki yazımda farklı e-posta servislerindeki test sürecini ve yapılması gereken değişiklikleri anlatacağım.

Gördüğünüz gibi üzerinde çalışılacak bir şey var. Yerleşim sürecini biraz anlatayım. Bu konuyu derinlemesine incelemenin bir anlamı yok; bir sonraki makalede çok şey değişecek. Aslında her şey basit gibi görünüyor ama bir yandan da bu aktivite çok zamanımı aldı.

Bir html mektubu nasıl oluşturulur

Başlangıç ​​olarak, e-postanın tüm içeriği için %100 genişliğe ve mavi arka plana sahip bir tel çerçeve tablosu oluşturdum. İki alt tablo içerir. Biri başlık için (id=header"), ikincisi içerik için (id=content"):

Siteden haber bülteni



Zaten fark ettiğiniz gibi, sarmalayıcı tablo için cellpadding = "40" ayarladım. Bu, başlıktan sorumlu tabloya 20 piksellik bir dolgu ayarladım ve tabloya bir iç dolgu ekledim. içerik konumlandırılacak. Ayrıca tüm tabloları ortalayarak hizaladım.

Şimdi şapkayı 2 parçaya ayırmanız gerekiyor. Birine logoyu yerleştiriyorum, diğerine ise 3 sütunlu başka bir plaka oluşturup oraya sosyal ağ bağlantılarını yerleştiriyorum.

Png" alt="logo" width="84" height="84"/> !}

Harici bağlantıların indekslenmesi nasıl engellenir

Merhaba arkadaşlar. Bugün, ağırlığın aktarılmaması ve sayfanızda kalması için açılış sayfanızdaki harici bağlantıları nasıl güvenli bir şekilde kapatacağınızdan bahsedeceğiz. Artık muhtemelen bildiğiniz gibi, bağlantıyı kapatsanız bile statik ağırlık aktarılır ve bu nedenle sayfanızdan kaldırılır.

Şimdi 3 sütunlu bir yapı oluşturmanız gerekiyor. Float(s) kullanamadığımız için 5 sütun yapmamız gerekecek. Resim içeren içerik için 3 (150 piksel) ve aralarındaki boşluğu ayarlamak için 2 (60 piksel).

png" />

UTM etiketleri nasıl yapılır ve ne işe yarar? Blog güncellemeleri ve mini optimizasyon raporu AB testi için komut dosyası

Akıllı İniş | 2014

Şablon sayısı

Şablon kalitesi

Harika

Harika

Harika

Harika

Mevcut konular

Tatiller

- İşletme

Çevrimiçi mağaza

– Turizm

– Genel vb.

-Tatiller

- Restoran

– Turizm

- İşletme

Çevrimiçi mağaza vb.

- Genel

Tatiller

– Turizm

- İşletme

Çevrimiçi mağaza

-Çevrimiçi mağaza

– Güzellik ve sağlık

– Turizm

- Tatiller

Çevrimiçi mağaza

– Turizm

Yazının farklı ekranlara uyarlanması

Evet (100 adrese 1.500'e kadar mektup)

Evet (2.000 adrese 15.000'e kadar mektup)

Evet (5.000 adrese 6.000'e kadar mektup)

Şablonların ücretsiz kullanımı

Daha önce kullanılan şablonları kullanma yeteneği

  1. UniSender.

E-posta bültenleri oluşturmak için en popüler Rusça hizmetlerden biri. 3 düzenleyici mevcuttur: blok şablonları için (metin ve görsel içerik sizin takdirinize göre değiştirilebilir), hazır temel ve HTML şablonları için, kendi HTML e-posta şablonunuzla çalışmak için. Editörleri anlamak zor değil, sistem ipuçları veriyor, hepsi bu gerekli araçlarçalışma sayfasının üst kısmında bulunur.

  1. Pulse Gönder

HTML harf şablonları oluşturmak ve hazır şablonlarla çalışmak için aynı derecede popüler, anlaşılır ve kullanışlı bir site. İncelenenler arasında en büyük ücretsiz pakete ve başarılı bir haber bülteni oluşturmak için oldukça fazla şablona sahiptir.

Site, basitleştirilmiş bir HTML düzenleyicide, tasarımcıda veya kendi şablonunuzu bilgisayarınızdan indirerek kendi şablonlarınızı oluşturmanıza olanak tanır. Tasarımcının anlaşılması kolaydır; resimleri, yazı tiplerini bağımsız olarak seçip hepsini istediğiniz yere yerleştirerek "sıfırdan" güzel bir mektup oluşturabilirsiniz.

  1. Rumailer

İyi şablonlara ve nispeten büyük bir ücretsiz pakete sahip, tasarım açısından mütevazı bir site. Çalışmak için işlevsellik sınırlı miktarşablonlar deneyimli kullanıcıların istediği kadar geniş değil. Kullanışlı bir blok düzenleyici kesinlikle yoktur.

Hizmetin avantajı ihracat yapan aboneler için büyük fırsatlara sahip olmasıdır. Etkinliğe, sayfaya ve ayrıca bir e-posta adresindeki oturum açma bilgilerine veya etki alanına göre indirilebilirler.

  1. Yanıt Al

Hizmetiyle ünlüdür çok sayıda 24 kategoride mevcut şablonlar. Sitenin hoş arayüzü, müşterilere mektuplar için hazır ve özel HTML şablonlarından oluşan kullanıcı dostu bir blok düzenleyici ile tamamlanmaktadır.

Editörün kullanımı kolaydır. Bloklar kolayca sürüklenebilir, yeniden düzenlenebilir, silinebilir veya eklenebilir. Bloğa tıkladığınızda, resimler ve metin içeriğiyle temel eylemleri gerçekleştirmek için düğmelerin bulunduğu bir çalışma menüsü belirir.

Şablonları görüntülemek için gönderenin bilgilerini ve mektubun konusunu girerek posta listesiyle çalışmaya başlamanız ve ardından "E-posta oluşturucuyu engelle" düğmesini seçmeniz gerekir. Eğer kullanıcı kendi şablonuyla çalışmak istiyorsa “HTML Code Editor” seçeneğini seçmesi gerekmektedir.

  1. Mailerlit

Birçok kullanıcının en basit olarak adlandırdığı bir e-posta dağıtım sitesi. Şablonlarla çalışmanın işlevselliği oldukça sınırlıdır, ancak temel eylemler yapılabilir. Yeni başlayan biri bile editörü anlayabilir çünkü... basit ve açıktır. Tıpkı diğer platformlarda olduğu gibi e-posta bültenleri için HTML şablonlarınızı yükleyebilir, düzenleyebilir ve kullanabilirsiniz.

Uygun bir HTML harf şablonu nasıl seçilir?

E-posta dağıtımı için bir hizmet ve şablon seçmek, akıllıca yaklaşılması gereken sorumlu bir konudur, çünkü... ticari bir kuruluşun veya girişimcinin daha fazla başarısı kısmen buna bağlıdır. Bir hizmet seçerken, yukarıdaki özelliklere, internetteki arkadaşlarınızdan veya kullanıcılardan gelen incelemelere, sitedeki çalışma örneklerine ve belirli bir hizmetle çalışmaya ilişkin kendi duygularınıza güvenebilirsiniz.

"Hangi şablonu seçeceğinizi nasıl anlarsınız?" sorusuna ek bir yanıt. En popüler hizmetlere ilişkin istatistikler hizmet edebilir. Olabilir, ancak kabul edelim ki açılışların, geçişlerin, tıklamaların ve abonelikten çıkmaların yüzdesi pratik olarak hizmete bağlı değildir. Dikkat ettiğimiz tek şey, örneğin SandPulse'da (lüks ücretsiz limitler), e-postaların biraz daha yüksek bir yüzdesinin gelen kutusu yerine "spam" klasörüne düşmesiydi. Ve ampirik olarak izole edilmiş durumlar dışında hiç kimse hizmetlerin kendileri tarafından yayınlanan hataların yüzdesini kontrol edemez.

Posta hizmetlerinin ücretsiz yetenekleri hakkında ayrıntılı olarak yazdık.

Hangisi olduğunu nasıl öğrenebilirim? e-posta şablonu Her özel durumda uygun mu? Bu ancak farklı şablonlarla çalışarak yapılabilir. en iyi tasarım ve içerik. Birçok firma ilk kez kullanıyor hazır şablonlar, bunları değiştirin ve ardından kendilerininkini oluşturun. Bu iyi seçenek eğer yazma becerisi Harflerin ve sayfaların HTML'si hayır ama haber bülteni yararlı bir araç gibi görünüyor.

İş için internet hizmetleri.
Malzemeye bir bağlantı gereklidir!


Merhaba sevgili okuyucular - site!

Bugün size E-posta bülteniniz için nasıl güzel bir e-posta bülteni hazırlayacağınızı göstereceğim.

Tüm İnternet işinin E-posta pazarlaması üzerine kurulu olduğu uzun zamandır kimse için bir sır değildi.

Bilgi işadamları ve blog yazarları, haber bültenlerinin yardımıyla her gün aboneleriyle iletişime geçerek onlara çeşitli ürün ve hizmetler sunuyor.

Ancak böyle bir teklifin fark edilmesi ve hemen spam klasörüne gönderilmemesi için buna dikkat çekmeniz gerekiyor.

Bunu yapmak için güzel tasarlanmış bir HTML harf şablonu oluşturmak uygun olacaktır.

Özellikle sizin için görsel yardımcı olacak bir test şablonu seçtim.

Neyi ve nasıl yapacağız?

Bir ana iletişim kutusu ve iki ikincil sütundan oluşacak en basit HTML e-posta şablonunu () oluşturacağız.

Tel çerçeve ve konteyner tablosu oluşturma

Öncelikle mektubumuz için bir HTML çerçevesi oluşturmamız gerekiyor. Şunun gibi görünecek:

HTML mektup şablonu

HTML mektup şablonu



Lütfen masanın genişliğini %99'a ayarladığımı ve etrafında küçük bir boşluk bıraktığımı unutmayın. Bu benim kişisel arzum değil, Gmail ve Yahoo gibi bazı Web posta istemcilerinin bir gereğidir. E-postamızın geri kalanı ortadaki tablo hücresinde olacak.

Bir sonraki adım, mektubun asıl içeriğini içeren bir tablo sarmalayıcı oluşturmaktır. Maksimum tasarım boyutunu 600 pikselden fazla tutmayın:

HTML mektup şablonu



Beyaz arka plandaki açık gölgeyle birlikte e-posta şablonumuz 640 piksele genişletildi, ancak çalışma alanı hala 600 piksele eşit kalıyor.

Başlık oluşturma

Artık ana tablo oluşturulduğuna göre, onu gerekli içerikle doldurmaya başlamanın zamanı geldi. Mektup şablonunun en başından başlayacağım ve yavaş yavaş aşağıya doğru ilerleyeceğim.

En üst satır

Artık önceden yazılmış kodları (tablo çerçeveleri) hariç tutacağım.

Yani e-tablonun ilk satırında beyaz yazı tipiyle mavi bir arka plan ve e-postanın web sürümüne bir bağlantı bulunur. Mektubunuza böyle bir bağlantı eklemek çok önemlidir, çünkü tüm e-posta istemcileri içeriğini eşit derecede doğru şekilde görüntülemez.

Ve görünümünden CSS stili sorumludur:

/* Yazı Tipleri ve Tipografi */ .footer ( yazı tipi ailesi: Arial,Helvetica,sans-serif; yazı tipi boyutu: 11 piksel; renk: #fff; dolgu-sağ: 20 piksel; )

Sosyal medya logosu ve simgeleri

Aşağı indiğimizde aynı seviyede bulunan ve logosunu görüyoruz.

Aşağıdaki kod çıktılarından sorumludur:

Ayrıca HTML e-posta şablonundaki tüm görsellerimize aşağıdaki stiller eklenir:

/* Arka Planlar */ .email_background ( genişlik: 640 piksel; arka plan: url("email_images/email_bg.jpg") tekrar-y; ) /* Resimler */ img ( display: blok; kenarlık: yok; )

Bu şekilde sosyal simgeler kendi iç içe geçmiş tablo hücrelerinde yerlerinde oturur ve mektubun diğer bölümleriyle hiçbir ilişkisi yoktur. Bu, ihtiyaç duyulduğunda değiştirilmelerine olanak tanır.

İçerik ekleme

Öncelikle bu tasarımda 560x210px boyutunda olan ilk görseli ekleyerek başlayacağız. Ayrı olarak yapılan görüntünün altında sevimli, deforme olmuş gölgeyi de görebilirsiniz; bu, gölgeyi kaybetmeden görüntüleri hızlı bir şekilde değiştirmenize olanak tanır. Kodlara geçelim:

Burada büyük görselleri görüntülemek için yeni bir satır oluşturduk, genişliği 560 piksele ayarladık ve her iki tarafa da 20 piksel dolgu ekledik. Aynı işlemleri gölge için de yaptık.

Başlık ve içerik ekleme

Aşağıya doğru ilerlediğimizde ana materyalin başlığını ve içeriğin kendisini görüyoruz. Burada içeriğin görüntülenmesinden aşağıdaki kod sorumludur:

Bu sizin öne çıkan hikayeniz

Amerikalı denizcilerin burada sık sık tatil yapması nedeniyle Pattaya'nın popüler bir tatil yeri haline geldiğine dair bir görüş var, ancak burada hala çok sayıda var ve her zaman birkaç Taylandlı tarafından çevreleniyorlar. Doğal olarak yurttaşlarımız arasında Mısır ve Türkiye'den daha az popüler. Ancak yerel konuşma burada her yerde duyulabilir)) hem alışveriş merkezlerinde alışveriş yaparken hem de birçok yerel barda)). Pattaya özellikle gece hayatı, denizi ve tekstil ürünleriyle ünlüdür. Elbette burada diğer şeylerin yanı sıra birçok ilginç şey de bulabilirsiniz. Burada cip ve scooter dahil her türlü aracı kiralayabilirsiniz. Motosiklet tutkunları için burası bir cennettir. Motosiklet kiralamak için ehliyete bile ihtiyacınız olmayabilir; sadece 100-500 baht (artı 2.000 baht depozito) karşılığında iyi bir scooter kiralayabilir ve kendi zevkiniz için kullanabilirsiniz!

Bir harf şablonunun başlığının ve metninin görünümünü değiştirmek için aşağıdaki stilleri kullanmanız yeterlidir:

H1 ( renk: #e95f03; yazı tipi ailesi: Futura, Verdana, Sans-Serif; dolgu: 0; kenar boşluğu: 0; yazı tipi boyutu: 24 piksel; yazı tipi ağırlığı: normal; ) .content ( dolgu: 0; kenar boşluğu: 0 ; ) p (yazı tipi ailesi: Arial, Helvetica, sans-serif; yazı tipi boyutu: 13 piksel; satır yüksekliği: 20 piksel;)

Ek İçerik

Şimdi şablonumuzun ek içeriğine geçiyoruz. Daha önce fark ettiğiniz gibi iki sütuna bölünmüştür. Her sütunda bir fotoğraf, bir başlık ve küçük bir önizleme bulunur. Bütün bunlar aşağıdaki kod kullanılarak oluşturulur:

Bu ikincil bir başlıktır

Bu ikincil bir başlıktır

Pattaya'nın mahvolmuş itibarına rağmen, burada kötü şöhretli Tay masajının sadece genelevleri örtmek olmadığını öğrenebilirsiniz. Tayland'da gerçekten güzel masajlar yapıyorlar ve en iyi uzmanlar Bu sanatta kör ustalar dikkate alınır. Onların sırrı parmakların artan hassasiyetinde yatmaktadır.

Pattaya'nın kimseyi kayıtsız bırakmayan ana caddesi ve kalbi. Yerel Arbat, Times Meydanı ve Sodom ve Gomorrah bir arada, Walking Street hem yerel halk hem de ziyaretçiler için gerçek bir sevgi ve nefret kaynağıdır. Pattaya derken Walking Street'i kastediyoruz.

Burada hala ek bir stil eklememiz gerekiyor. İşte:

H2 ( renk: #e95f03; yazı tipi ailesi: Futura, Verdana, Sans-Serif; dolgu: 0; kenar boşluğu: 0; yazı tipi boyutu: 18 piksel; yazı tipi ağırlığı: normal; )

HTML e-posta şablonunu kapatma

Böylece desenimizin sonuna yaklaşıyoruz. Burada görseli ve aşağıdaki kodu kullanarak ana pencereyi kapatmamız gerekiyor:

En çok biri önemli yönler, bu tür mektupları almaktan vazgeçmek için mektup şablonunun sonuna bir bağlantının eklenmesidir (). Evet evet biliyorum, abonelerinizi kaybetmek istemezsiniz. Ama aynı zamanda onları sinirlendiremezsiniz. Müşterilerinize, uzun süredir sıkıcı gelen postaları almayı reddetme fırsatını sunmalısınız. Aynı zamanda size yazarın kim olduğunu da hatırlatayım.

Burada aşağıdaki koda ihtiyacınız var:

Haber bülteni: Ivanov Ivan
Blog yazarı: Ivan.ru

Abonelikten çıkmak mı istiyorsunuz? buraya tıklayın

Çözüm

Sevgili arkadaşlar, herkese göstermek için grafik elemanları mektup şablonunda herhangi bir çevrimiçi sunucuya yüklenmeleri gerekir ve karşılık gelen kod satırlarına bu resimlere benzersiz bir yol yazmalısınız.

Test HTML harf şablonu, istediğiniz zaman zevkinize ve renginize göre değiştirebileceğiniz bir kılavuz olarak verilmiştir.

Bugünlük bu kadar. Umarım beğenmişsinizdir.

Yeni yazılara kadar...

Saygılarımla, Denis Çernikov!



 


Okumak:



Bütçe ile yerleşimlerin muhasebeleştirilmesi

Bütçe ile yerleşimlerin muhasebeleştirilmesi

Muhasebedeki Hesap 68, hem işletme masraflarına düşülen bütçeye yapılan zorunlu ödemeler hakkında bilgi toplamaya hizmet eder hem de...

Bir tavada süzme peynirden cheesecake - kabarık cheesecake için klasik tarifler 500 g süzme peynirden Cheesecake

Bir tavada süzme peynirden cheesecake - kabarık cheesecake için klasik tarifler 500 g süzme peynirden Cheesecake

Malzemeler: (4 porsiyon) 500 gr. süzme peynir 1/2 su bardağı un 1 yumurta 3 yemek kaşığı. l. şeker 50 gr. kuru üzüm (isteğe bağlı) bir tutam tuz kabartma tozu...

Kuru erikli siyah inci salatası Kuru erikli siyah inci salatası

Salata

Günlük diyetlerinde çeşitlilik için çabalayan herkese iyi günler. Monoton yemeklerden sıkıldıysanız ve sizi memnun etmek istiyorsanız...

Domates salçası tarifleri ile Lecho

Domates salçası tarifleri ile Lecho

Kışa hazırlanan Bulgar leçosu gibi domates salçalı çok lezzetli leço. Ailemizde 1 torba biberi bu şekilde işliyoruz (ve yiyoruz!). Ve ben kimi...

besleme resmi RSS