Divi'nin E-posta Katılım Modülü ile Oluşturabileceğiniz 5 E-posta Katılım Tasarımı

Hepimiz e-posta listemize yeni aboneleri seviyoruz. Ve yeni aboneler edinmenin başlıca yollarından biri, ziyaretçilerinize iyi tasarlanmış bir e-posta katılım formu sağlamaktır. Bu nedenle, bu eğitimde, bu güçlü ve esnek modülle neler yapılabileceğine dair hayal gücünüzü harekete geçirmenize yardımcı olmak için Divi e-posta katılım modülü ile beş farklı tasarımı nasıl gerçekleştireceğinizi göstereceğim.

Gizlice Bakış

İşte bugün ele alacağımız beş Divi E-posta Katılım Modülü tasarımının bir önizlemesi.

#1 Gölge Yığınları Etkinliği

1 Numarayı Tasarlamaya Başlayın

#2 Büyük ve Minimal Katılım

#2'yi Tasarlamaya Başlayın

3. Sıska Katılım

#3'ü Tasarlamaya Başlayın

#4 Kitap Teklifi Kaydı

#4'ü Tasarlamaya Başlayın

#5 Kesikli Çerçeve Katılımı

#5 Tasarlamaya Başlayın

Başlamak için Gerekenler

Youtube Kanalımıza Abone Olun

Bu eğitim için ihtiyacınız olan tek şey Divi. Her birini sıfırdan inşa edeceğiz, böylece önceden hazırlanmış bir düzene gerek yok. Ancak, bazı yerleşim paketlerimizden birkaç resim kullanacağım, ancak isterseniz kendi resimlerinizi de kullanabilirsiniz.

Ayrıca, e-posta katılım modülünüze bir e-posta sağlayıcısı/listesi atayana kadar canlı sitede katılım formu alanlarını göremeyeceğinizi bilmek önemlidir. Bunu, E-posta Hesabı altındaki e-posta tercih ayarlarınızda yapabilirsiniz.

Şimdi gelelim o tasarımlara!

#1 Gölge Yığınları Etkinliği

Bu tasarım, formu öne çıkaran benzersiz bir yığınlama efekti için Divi e-posta katılım modülüne iki kutu gölgesi ekler. İlk kutu gölgesi, e-posta katılım modülüne eklenir ve ikinci kutu gölgesi, çalışması için özel boyut ve kenarlığa sahip satıra eklenir.

İşte nasıl yapıldığı.

Önce tek sütunlu bir satır içeren yeni bir bölüm oluşturun ve e-posta katılım modülünü satıra ekleyin.

E-posta katılım ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Rengi: #1a0a38
Düzen: Gövde Üstte, Form Altta
Alanlar Yuvarlatılmış Köşeler: 0px
Metin Yönü: Merkez
Başlık Yazı Tipi Ağırlığı: Hafif
Başlık Metin Boyutu: 36px
Düğme Metin Rengi: #ffffff
Düğme Arka Plan Rengi: #00ac69
Düğme Kenar Genişliği: 0px
Düğme Sınır Yarıçapı: 0px
Özel Dolgu: 3vw üst, 3vw alt, 5vw sol, 5vw sağ

Şimdi ilk kutu gölge katmanımızı e-posta katılım modülümüzün arkasına ekleyelim.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 25px
Kutu Gölgesi Dikey Konumu: -25px
Gölge Rengi: rgba(26,10,56,0.82)

Şimdi forma varsayılan olarak eklenen sol dolguyu çıkarmak için küçük bir özel CSS parçası ekleyelim. Gelişmiş sekmesine gidin ve Opt-in Formu altına aşağıdaki CSS'yi ekleyin.

padding-left: 0px !important;

Bu, e-posta katılım modülü ayarlarıyla ilgilenir. Şimdi satırımızı düzenleyelim. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Özel Genişlik: 600 piksel
Özel Dolgu: 25 piksel üst, 0 piksel alt, 25 piksel sağ
Alt Kenar Genişliği: 25px
Alt Kenar Rengi: rgba(0,0,0,0)
Sol Kenar Genişliği: 25px
Sol Kenar Rengi: rgba(0,0,0,0)

Şimdi kutu gölgesini satıra ekleyebiliriz.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konum: 50px
Kutu Gölgesi Dikey Konumu: -50px
Kutu Gölge Yayılma Gücü: -25px
Gölge Rengi: rgba(26,10,56,0.55)

Şimdi son tasarımı kontrol edelim.

#2 Büyük ve Minimal Katılım

Bu e-posta katılım tasarımı minimal, temiz ve büyüktür. Form alanları, tüm cihazlarda harika görünmesi için tarayıcının boyutuna göre ölçeklenir. Ve kullanıcıyı kaydırmaya zorlayacak kadar büyük değil.

İşte nasıl yapılacağı.

Önce tek sütunlu bir satır içeren yeni bir bölüm oluşturun ve e-posta katılım modülünü satıra ekleyin.

E-posta katılım ayarlarını açın ve içeriği Başlık ve Altbilgi metninizi içerecek şekilde güncelleyin.

Ardından arka planı koyu bir renk veya görüntü ile güncelleyin:

Arka plan rengi: #121212
Arka Plan Resmi: Bu isteğe bağlıdır. Podcast Düzen Paketinden birini kullanıyorum

Daha fazla kişiselleştirme için tasarım sekmesine geçmeden önce, ekleyeceğimiz büyük form öğelerine yer açmamız gerekiyor. Bunu yapmak için satır ayarlarına gidin ve aşağıdakileri güncelleyin:

Özel Genişlik: %100

İpucu: %100 özel genişlik kullanmak, tasarımınızın mobil cihazlarda sağ veya sol kenar boşluğunu almadığından emin olmanın harika bir yoludur. "Tam Genişlik Yap" seçeneğini kullanırsanız, maksimum genişliğiniz %89 olur, bu nedenle mobilde hala marjlarınız olur.

Şimdi E-posta Katılım Modülü Ayarlarına geri dönün ve aşağıdaki tasarımı güncelleyin:

Düzen: Gövde Üstte, Form Altta

Form Alanı Arka Plan Rengi: rgba(0,0,0,0)
Alanlar Yuvarlatılmış Köşeler: 0px
Alanlar Alt Kenar Genişliği: 2px
Alanlar Alt Kenarlık Rengi: #ffffff

Metin Yönü: Merkez

Başlık Yazı Tipi: Lato
Başlık Yazı Tipi Ağırlığı: Hafif
Başlık Yazı Tipi Stili: TT
Başlık Metin Boyutu: 4vw
Başlık Satırı Yüksekliği: 1em

Alan Metin Rengi: #ffffff
Alan Yazı Tipi: Lato
Alan Yazı Tipi Ağırlığı: Hafif
Alan Metin Boyutu: 3.5vw
Alan Harf Aralığı: 0.1em
Alan Çizgi Yüksekliği: 1.3em

Gövde Harf Aralığı: 0,5em

Düğme Metin Boyutu: 4vw
Düğme Sınır Yarıçapı: 0px
Düğme Harf Aralığı: 0.1em
Düğme Yazı Tipi: Lato
Yazı Tipi Ağırlığı: Hafif
Özel Dolgu: 10vw üst, 10vw alt, 10vw sol, 10vw sağ

Yazı tipi boyutu için vw uzunluk biriminin, satır yüksekliği ve harf aralığı için em uzunluk birimiyle birlikte kullanımına dikkat edin. Bu, tarayıcınızı ayarlarken metnin ve tasarımın sorunsuz bir şekilde ölçeklenmesini sağlar.

Son adım, tasarımı cilalamak için birkaç özel CSS parçacığı içerir. Gelişmiş sekmesine gidin ve Opt-in Form Alanları altına aşağıdaki Özel CSS'yi ekleyin:

font-size: 3.5vw;

Bu, yazarken metnin boyutunun form alanlarınızdaki yer tutucu metinle eşleşmesini sağlar.

Ardından, biraz nefes alma alanı sağlamak için düğmenin üzerine biraz özel kenar boşluğu ekleyelim. Abone Ol Düğmesinin altına aşağıdakileri ekleyin:

margin-top: 3.5vw;

Şimdi son tasarımı kontrol edelim.

3. Sıska Katılım

Bu sonraki tasarım, gönderilerinde veya açılış sayfalarında biraz dikey alan kazanmak isteyen şirketler ve bloglar için kesinlikle popüler bir çözüm olacaktır. Divi'nin Email Opt-in modülü daha geleneksel dikey formlar için en iyisi olsa da, aslında sadece küçük bir CSS pasajı ile formu ince yatay bir forma dönüştürebilirsiniz.

İşte nasıl yapılacağı.

Tek sütunlu bir satırla yeni bir bölüm oluşturun ve e-posta katılım modülünü satıra ekleyin.

E-posta katılım ayarlarını açın ve içeriği bir Başlık içerecek ancak başka bir şey içerecek şekilde güncelleyin.

Ardından tasarımı bir arka plan ve bir düğme rengiyle aşağıdaki gibi güncelleyin:

Arka Plan Rengi: #54677d
Düzen: Gövde Üstte, Form Altta
Metin Yönü: Merkez
Düğme Arka Plan Rengi: #b0c94f
Düğme Kenar Genişliği: 0px

Şimdi özel CSS zamanı. Sıska form tasarımını yalnızca masaüstünde (mobilde değil) istediğimizden, form stilini hedeflemek için Özel bir CSS Kimliği kullanarak CSS'yi sayfaya (sayfa ayarları altında) ekleyeceğiz.

Bunu yapmak için gelişmiş sekmeye gidin ve katılım modülüne özel bir CSS kimliği verin.

CSS kimliği: sıska

Bu, sayfaya ekleyeceğimiz harici CSS ile bu formu hedeflemek için kullanılacaktır.

Şimdi Divi Builder sayfa ayarlarını açın ve Gelişmiş sekmesinin altına aşağıdaki CSS'yi ekleyin.

@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
  flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
  flex-basis: 23%;
}
}

#skinny .et_pb_newsletter_form {
  padding-left: 0px;
} 

Divi, forma arka uçta stil vermek için zaten flex kullandığından, bu CSS, form alanlarının dikey olarak hizalanmasına neden olan flex-wrap özelliğini ortadan kaldırır. Sonuç, form alanlarının yatay bir düzenidir. Esnek temel özelliğinin %23'e ayarlanması, temel olarak form alanlarının her birinin genişliğini ayarlar. Ve CSS'yi bir medya sorgusunun içine eklediğimiz için, tasarım yalnızca mobilde görüntülenen formun varsayılan düzeniyle masaüstünde gerçekleşecek.

İşte son tasarım.

#4 Kitap Teklifi Kaydı

Bu tasarım, kaydolmak için ücretsiz bir kitap teklifini tanıtmak amacıyla e-posta katılım modülünde birkaç resim içermektedir. Bunu yapmak için tek yapmanız gereken, açıklama ve altbilgi içeriği eklemek için yerleşik wysiwyg düzenleyicisini kullanarak bir resim eklemek. Aynı tasarımı, e-posta katılım modülünü diğer modüllerle iki sütunlu bir satırda birleştirerek gerçekleştirebileceğiniz doğrudur, ancak bunların hepsini aynı modülde nasıl yapacağınızı göstermenin faydalı olacağını düşündüm.

İşte nasıl yapılacağı.

Tek sütunlu bir satırla yeni bir bölüm oluşturun ve e-posta katılım modülünü satıra ekleyin.

E-posta katılım ayarlarını açın ve içerik sekmesinde kalın.

Açıklama altında, varsayılan metni yalnızca birkaç cümleyle kısaltın. Ardından Medya Ekle düğmesini tıklayarak medya kitaplığınızdan bir resim ekleyin.

Resmin genişliğinin yaklaşık 200 pikselden fazla olmadığından emin olmak istiyorsunuz. Bu örnek için görüntünün orta boyutunu kullanıyorum.

Altbilgi altında, altbilgi metni içeriği için birkaç cümle ekleyin ve ardından metnin altına bir logo resmi eklemek için Medya Ekle düğmesini tıklayın (bu elbette isteğe bağlıdır).

Görüntünün ortalandığından emin olmak için, medya kitaplığından görüntü eklerken hizalama seçeneğini orta olarak ayarlayın.

Artık tasarımın geri kalanını güncellemeye hazırsınız. Metni daha okunabilir hale getirmek için modüle bir arka plan görüntüsü ve görüntünün üzerinde bir arka plan gradyanı vererek başlayın.

Arka plan resmi: [resim ekle]
Arka Plan Gradyanı Sol Renk: rgba(0,0,0,0.5)
Arka Plan Gradyanı Sağ Renk: rgba(0,0,0,0.5)
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Ardından tasarımın geri kalanını aşağıdaki gibi güncelleyin:

Düğme Metin Rengi: #333333
Düğme Arka Plan Rengi: #ffcb7a
Düğme Kenar Genişliği: 0px
Düğme Harf Aralığı: 5px
Yazı Tipi Ağırlığı: Ultra Kalın
Yazı Tipi Stili: TT
Genişlik: 700 piksel
Modül Hizalaması: merkez
Özel Dolgu: 3vw üst, 3vw alt, 3vw sol, 3vw sağ

İşte son tasarım.

#5 Kesikli Çerçeve Katılımı

Bu basit tasarım tekniği, e-posta tercihinize benzersiz bir görünüm kazandırmanın harika bir yoludur. İşin püf noktası, bölüm arka planıyla aynı renge sahip bölüm bölücüler kullanmaktır. Ardından, ayırıcıların yüksekliğini ayarlayarak, güzel çerçeveleme efekti için kenarları benzersiz bir şekilde kesmek için e-posta katılım formunu üst üste getirebilirsiniz.

İşte nasıl yapılacağı.

Tek sütunlu bir satırla yeni bir bölüm oluşturun ve e-posta katılım modülünü satıra ekleyin.

E-posta katılım ayarlarını açın ve modülünüze bir arka plan gradyanı verin.

Arka Plan Gradyanı Sol Renk: #8300e9
Arka Plan Gradyanı Sağ Renk: #06c8ff
Gradyan Türü: Radyal
Radyal Yön: Sol Üst

Ardından tasarımın geri kalanını aşağıdaki gibi güncelleyin:

Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Metin Boyutu: 36px
Genişlik: %70 (masaüstü), %100 (tablet ve akıllı telefon)
Modül Hizalaması: merkez
Özel Dolgu: 6vw Üst, 6vw Alt, 6vw Sol, 6vw Sağ
Yuvarlatılmış Köşeler: 50 piksel sol üst, 0 piksel sağ üst, 50 piksel sağ alt, 0 piksel sol alt

Ayarlarınızı kaydedin.

Ardından, satır ayarlarınızı özel bir genişlikle güncelleyin.

Özel Genişlik: %100

Şimdi, bu bölüm bölücülerle kesme çerçeve efektimizi eklemek için bölüm ayarını özelleştirmeye hazırız.

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Rengi: #222222

Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: #222222 (bunun bölümün arka plan rengiyle eşleştiğinden emin olun)
Üst Bölücü yüksekliği: 12vw (masaüstü), 150 piksel (tablet ve akıllı telefon)
Üst Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Alt Bölücü Stili: ekran görüntüsüne bakın
Alt Bölücü Rengi: #222222 (bunun bölümün arka plan rengiyle eşleştiğinden emin olun)
Alt Bölücü yüksekliği: 12vw (masaüstü), 150 piksel (tablet ve akıllı telefon)
Alt Bölücü Yatay Tekrar: 0.8x
Alt Bölücü Çevirme: dikey ve yatay
Alt Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Şimdi son tasarımı kontrol edelim.

Bu tasarım tekniği hakkında daha fazla bilgi için benzersiz çerçeve tasarımları oluşturma hakkındaki gönderiye göz atın.

Son düşünceler

Bu e-posta katılım tasarımları, Divi'de bulunan tüm stil seçeneklerini düşündüğünüzde gerçekten buzdağının görünen kısmıdır. Tasarımları, yapabilecekleriniz konusunda size geniş vuruşlar verecek kadar basit tuttum. Yeni yazı tipleri, renkler ve vurgulu efektler ekleyerek daha gösterişli tasarımları kendi başınıza keşfetmekten çekinmeyin. Ve bu süreçte biraz eğlenmeyi unutmayın.

Yorumlarda sizden haber bekliyorum.

Şerefe!