Listemize yeni aboneler ile hepimiz seviyoruz bülten. Yeni aboneler edinmenin ana yollarından biri, ziyaretçilerinize formulaire iyi tasarlanmış e-posta kaydı. Bu nedenle, bu eğitimde, bu güçlü ve esnek modülün olanakları hakkında hayal gücünüzü harekete geçirmek için Divi E-posta Abonelik Modülü ile nasıl üç farklı tasarım yapacağınızı göstereceğim.
anket
İşte bugün keşfedeceğimiz Divi e-posta modülünün üç kavramına genel bir bakış.
Kaydol # Gölge Yığınlarının 1'i
# 2 Büyük ve Minimal Tercih
# 3 küçük abonelik formu
Başlamak için neye ihtiyacınız var?
Bu eğitim için ihtiyacınız olan tek şey Divi. Bunların her birini inşa edeceğiz formulaire sıfırdan, yani önceden yapılmış bir düzene gerek yok. Bununla birlikte, bazı düzen paketlerinden birkaç resim kullanacağım, ancak dilerseniz kendinizinkini kullanabilirsiniz.
Ayrıca, alanları göremeyeceğinizi bilmeniz önemlidir. formulaire e-posta abonelik modülünüze bir e-posta sağlayıcısı/listesi atayana kadar aktif siteye dahil edilme. Bunu, E-posta hesabı altındaki e-posta Optin ayarlarınızda yapabilirsiniz.
Şimdi bu çizimlere geçelim!
Kaydol # Gölge Yığınlarının 1'i
Bu tasarım, formu açan benzersiz bir yığınlama efekti için Divi e-posta kayıt 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.
Bu nasıl yapılır.
Önce tek sütunlu yeni bir bölüm oluşturun ve ardından e-posta kayıt modülünü satıra ekleyin.
E-posta bağlantısı ayarlarını açın ve aşağıdakileri güncelleyin:
Arka plan rengi: #1a0a38
Düzen: Üstte gövde, Altta şekil
Yuvarlak Alan Paraları: 0px
Metin oryantasyonu:
Merkez başlık Yazı tipi ağırlığı:
Başlığı temizle Metin boyutu: 36px
Metin düğmesinin rengi: #ffffff
Düğme arka plan rengi: # 00ac69
Düğme kenarlığının genişliği: 0px
Düğmenin yarıçapı: 0px
Özel dolgu: Üstte 3vw, altta 3vw, solda 5vw, sağda 5vw
Şimdi ilk kutu gölge katmanımızı e-posta kabul modülümüzün arkasına ekleyelim.
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Yatay Konum: 25px
Kutu Gölge Dikey Konum: -25px
Gölge rengi: rgba (26,10,56,0.82)
Şimdi, forma varsayılan olarak eklenen sol dolguyu kaldırmak için küçük bir özel CSS parçası ekleyelim. Gelişmiş sekmesine gidin ve Üyelik Formu'nun altına aşağıdaki CSS'yi ekleyin.
padding-left: 0px !important; |
Bu, kaydolma e-posta modülünün ayarlarını destekler. Şimdi satırımızı düzenleyelim. Satır ayarlarını açın ve aşağıdakileri güncelleyin:
Özel genişlik: 600px
Özel dolgu: 25px yukarı, 0px aşağı, 25px sağ
Alt kenarlığın genişliği: 25px
Alt kenarlığın rengi: rgba (0,0,0,0)
Sol kenarlığın genişliği: 25px
Sol kenarlık rengi: rgba (0,0,0, 0)
Artık kutunun gölgesini çizgiye ekleyebiliriz.
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Yatay Konum: 50px
Kutu Gölge Dikey Konum: -50px
Kutu Gölge Yayılma Kuvveti: -25px
Gölge rengi: rgba (26,10,56,0.55)
Şimdi yapmanız gereken tek şey formdaki metni düzenlemektir. Şimdi son tasarımı görelim.
# 2 Büyük ve Minimal Tercih
Bu e-posta katılım tasarımı minimal, temiz ve büyüktür. Form alanları tarayıcının boyutuna uyarlanır, bu nedenle tüm cihazlarda harika görünür. Ve kaydırma gerektirmeyecek kadar büyük değil.
İşte nasıl yapılacağı.
Önce tek sütunlu yeni bir bölüm oluşturun ve ardından e-posta kayıt modülünü satıra ekleyin.
E-posta katılım ayarlarını açın ve içeriği başlığınızı ve altbilgi metninizi içerecek şekilde güncelleyin.
Ardından arka planı koyu renk veya resim ile güncelleyin:
Arka plan rengi: #121212
Arka plan resmi: Bu isteğe bağlıdır. Podcast Layout Pack'ten bir tane kullanıyorum
Daha fazla özelleş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
Konseyi: % 100 özel genişlik kullanmak, tasarımınızın cep telefonunda sol veya sağ kenar boşluğu olmamasını sağlamanın harika bir yoludur. "Tam genişlik oluştur" seçeneğini kullanırsanız, maksimum genişliğiniz% 89 olacaktır, böylece cep telefonunuzda her zaman marjlarınız olacaktır.
Şimdi e-posta kayıt modülünün ayarlarına geri dönün ve aşağıdaki şablonu güncelleyin:
Düzen: vücut yukarı, şekil aşağı
Form alanının arka plan rengi: rgba (0,0,0,0)
Yuvarlatılmış Köşeler: 0px
Alt Sınırın Genişliği Alanları: 2px
Alt sınırın renk alanları: #ffffff
Metin Yönü: Merkez
Yazı Tipi Başlığı: Lato
Yazı Tipi Başlığı: Light
Başlık Yazı Tipi Stili: TT
Başlık Metin Boyutu: 4vw
Başlık satırının yüksekliği: 1em
Alan metni rengi: #ffffff
Alan yazı tipi: Lato
Yazı tipinin alan ağırlığı: Işık
Metin boyutu: 3.5vw
Alandaki harflerin aralığı: 0.1em
Alan çizgisi yüksekliği: 1.3em
Vücuttaki harflerin aralığı: 0.5em
Düğme metni boyutu: 4vw
Düğmenin yarıçapı: 0px
Düğmelerin harflerinin alanı: 0.1em
Düğme yazı tipi: Lato
Yazı tipinin ağırlığı: Işık
Özel dolgu: Üstte 10vw, altta 10vw, solda 10vw, sağda 10vw
Satır yüksekliği ve harf aralığı için uzunluk birimi em ile birlikte yazı tipi boyutu için uzunluk birimi vw'nin kullanımına dikkat edin. Bu, tarayıcınızı ayarlarken metin ve tasarımın sorunsuz bir şekilde uyum sağlamasına olanak tanır.
Son adım, tasarımı güzelleştirmek için bazı özel CSS parçacıkları içerir. Gelişmiş sekmesine gidin ve Üyelik Formu Alanları altına aşağıdaki özel CSS'yi ekleyin:
font-size: 3.5vw; |
Bu, yazarken metin boyutunun formunuzun alanlarındaki alternatif metinle eşleşmesini sağlar.
Ardından, biraz ara vermek için düğmenin üstüne özel bir kenar boşluğu ekleyelim. Abone Ol düğmesinin altına aşağıdaki öğeleri ekleyin:
margin-top: 3.5vw; |
Şimdi son tasarımı görelim.
# 3 Küçük abonelik formu
Bu yeni tasarım, gönderilerinde veya açılış sayfalarında dikey alan kazanmak isteyen işletmeler ve bloglar için kesinlikle popüler bir çözüm olacaktır. Divi'nin e-posta üyelik modülü daha uygun olsa da formlar daha geleneksel dikey formlar, onu sadece küçük bir CSS kodu parçasıyla tek satırlık yatay bir forma dönüştürebilirsiniz.
İşte nasıl yapılacağı.
Tek sütunlu yeni bir bölüm oluşturun ve e-posta üyelik modülünü satıra ekleyin.
E-posta abonelik ayarlarını açın ve içeriği bir başlık içerecek şekilde güncelleyin, başka hiçbir şey yapmayın.
Ardından, çizimin arkaplanı ve düğme rengini aşağıdaki şekilde güncelleyin:
Arka Plan Rengi: # 54677d
Düzen: Vücut yukarı, aşağı şekillendirme
Metin Yönü: Merkez
Düğme arka plan rengi: #b0c94f
Düğme kenarlığının genişliği: 0px
Şimdi özel CSS zamanı. İnce form tasarımının yalnızca masaüstü olmasını (mobil değil) istediğimizden, form stilini hedeflemek için özel bir CSS kimliği kullanarak CSS'yi sayfaya (sayfa ayarlarının altında) ekleyeceğiz. .
Bunu yapmak için Gelişmiş sekmesine gidin ve üyelik modülüne özel bir CSS Kimliği atayın.
CSS kimliği: sıska
Bu, bu formu sayfaya ekleyeceğimiz harici CSS ile hedeflemek için kullanılacaktır.
Şimdi Divi Builder sayfasındaki ayarları açın ve Advanced sekmesine aşağıdaki CSS'yi ekleyin.
@media (min-genişlik: 980px) {# skinny.et_pb_newsletter .et_pb_newsletter_fields {flex-wrap: nowrap! önemli; } # skinny.et_pb_newsletter .et_pb_newsletter_fields> * {esnek tabanlı:% 23; }} #skinny .et_pb_newsletter_form {padding-left: 0px; }
Divi, arka uçtaki formu biçimlendirmek için zaten flex kullandığından, bu CSS, form alanlarını dikey olarak hizalayan flex-wrap özelliğini kaldırır. Sonuç, form alanlarının yatay bir düzenlemesidir. Flex-base özelliğini% 23'e ayarlayarak, genellikle form alanlarının her birinin genişliğini ayarlarsınız. Ve CSS'yi bir medya isteğine eklediğimizden, tasarım yalnızca masaüstünde, formun varsayılan düzeni mobil cihazda görüntülenecek.
İşte son tasarım.
Bu öğretici için hepsi bu kadar, umarım oluşturmanıza izin verir formlar Divi Builder'da tek abonelik.
