Divi’nin e -posta katılım modülü ile yapabileceğiniz 5 e -posta katılım tasarımı
E -posta listemize yeni müşterileri seviyoruz. Ve yeni müşteriler edinmenin ana yollarından biri, ziyaretçilerinize iyi tasarlanmış bir e -posta katılım formu sağlamaktır. Bu nedenle, bu öğreticide, bu güçlü ve esnek modülle neler yapılabileceği hakkındaki hayal gücünüzü tetiklemeye yardımcı olmak için Divi E-posta Seçim Modülü ile nasıl beş farklı tasarım elde edeceğinizi göstereceğim. Aşağıdaki Sneak Peek, bugün idare edeceğimiz beş tasarım modülü tasarım modülünün bir önizlemesidir. Shadow Stacks #1’in katılımı
En çok #2 ve minimum katılım tasarlamaya başlayın #2 #3 Sıska Katılım Tasarlamaya Başlayın #3 #4 Kitap Teklif Katılımı Tasarlamaya Başlayın Kesme çerçevelerinin 4 #5 Katılımı Tasarlamaya Başlayın Bu öğretici için YouTube kanalımıza abone olmaya başlamak için #5 tasarlamaya başlayın, ihtiyacınız olan tek şey Divi. Her birini baştan inşa edeceğiz, böylece daha önce yapılan düzene gerek yok. Ancak, bazı düzen paketlerimizden bazı görüntüler kullanacağım, ancak isterseniz kendi resminizi kullanabilirsiniz. Ayrıca, e -posta katılım modülünüze bir sağlayıcı/e -posta listesi ayarlayana kadar doğrudan siteye katılım alanını göremeyeceğinizi bilmek önemlidir. Bunu bir e -posta hesabında Optin e -posta ayarlarınızda yapabilirsiniz. Şimdi bu tasarıma gidelim! Shadow Stacks #1’in katılımı Bu tasarım, formu öne çıkaran benzersiz istifleme efekti için Divi e -posta katılım modülüne kutunun iki gölgesini ekler. İlk kutunun gölgesi, E -Mail’in katılımı için modüle eklendi ve ikinci kutunun gölgesi, işlevini sağlamak için özel bir boyut ve sınıra sahip bir satıra eklendi. İşte nasıl yapılacağı. İlk olarak, bir satır bir sütunla yeni bir parça oluşturun ve satıra bir e -posta katılım modülü ekleyin. Aşağıdaki e -posta katılım ayarlarını açın ve güncelleme: Arka plan rengi: # 1A0A38 Düzen: Yukarıdaki gövde, yuvarlak açılı düzlemin altında şekil: 0px metin yönü: Orta yazı tipi başlığı Şiddetli yazı tipi: Hafif metin boyutu başlık: 36px renk metin düğmesi: # ffffff renk Arka Plan Düğmesi: #00AC69 Düğme Limitinin Genişliği: 0PX RADIUS Sınır Düğmesi: 0PX Dolgu Özel: 3VW TOP, 3VW Bottom, 5VW Sol, 5VW hemen şimdi ilk kutumuzun gölge katmanını seçin e-posta modülümüzün arkasına ekleyelim. Gölge Kutusu: Bkz. Yatay Korkunç Konum Yakalama Gölge Kutusu: 25px Dikey Konum Gölge Kutusu: -25px Gölge Renk: RGBA (26,10,56,0.82) Şimdi varsayılan formda eklenen sol dolguyu çıkarmak için özel bir küçük CSS parçası ekleyelim. Devam sekmesini açın ve katılım formunun altındaki aşağıdaki CSS’yi ekleyin. Dolgu-sol: 0px! Önemli; Bu, e -posta katılım modülünün ayarlarını işler. Şimdi çizgimizi düzenleyelim. Aşağıdaki satır ayarlarını açın ve güncelleme: Özel Genişlik: 600px Özel Dolgu: 25px üst, 0px alt, 25px sağ alt sınır genişliği: 25px alt sınır renk: RGBA (0.0,0,0) Sol sınır genişliği: 25px Sol Sınır Renk: RGBA (0.0.0, 0)Şimdi sıraya bir kutunun gölgesi ekleyebiliriz. Gölge Kutusu: Bkz. Yatay Korkunç Konum Becerileri Kutusu: 50px Dikey Konum Gölge Kutusu: Gölgelerin Dağıtımının -50px Mukavemeti Kutu: -25px Gölge Rengi: RGBA (26,10,56,0.55) Şimdi son tasarımı kontrol edelim. #2 Harika ve Minimum Katılım Bu e -posta katılımının tasarımı minimal, temiz ve büyüktür. Tüm cihazlarda harika görünmesi için tarayıcının boyutundaki alanın ölçeği. Ve bu çok büyük değil, bu yüzden kullanıcıları kaydırmaya zorluyor. İşte nasıl yapılacağı. İlk olarak, bir satır bir sütunla yeni bir parça oluşturun ve satıra bir e -posta katılım modülü ekleyin. E -posta katılım ayarlarını açın ve içeriği başlık metninizi ve altbilginizi ekleyecek şekilde güncelleyin. Ardından arka planı koyu renk veya resimle güncelleyin: Arka Plan Rengi: #121212 Arka Plan Görüntü: Bu isteğe bağlıdır. Daha fazla ayar için tasarım sekmesine geçmeden önce podcast düzeni paketlerinden birini kullanıyorum, ekleyeceğimiz geniş form öğeleri için alan sağlamamız gerekiyor. Bunu yapmak için satır ayarlarını açın ve aşağıdakileri güncelleyin:
Özel genişlik:% 100 İpucu:% 100 özel genişlik kullanmak, tasarımınızın hücreselde sağ veya sol kenar boşluğu almadığından emin olmanın iyi bir yoludur. “Tam Genişlik” seçeneğini kullanırsanız, maksimum genişliğiniz% 89 olacaktır, bu nedenle hala bir hücresel kenar boşluğunuz vardır. Şimdi e -postanın katılımı için modül ayarlarına geri dönün ve aşağıdaki tasarımı güncelleyin: Düzen: Yukarıdaki gövde, arka plan renk formunun altında şekil: RGBA (0.0,0,0) Yuvarlak açılı alan: Alt sınırlar alanının 0px genişliği: 2px Renk Alanın Alt Sınırı: #FFFFFF Metin Yönlendirme: Orta Yazı Tipi Başlık: Lato Heavy Yazı Tipi Başlık: Hafif Yazı Tipi Başlık Tarzı: TT Başlık Metin Boyutu: 4VW Yüksek Satır Başlık: 1 Genişletilmiş Metin Alanı: #fffff Yazı Tipi Yazı Tipi: Alan: 3.5VW Alan mektubu alanı: 0.1m yüksek hat alanı: 1.3EM gövde harfi mesafesi: 0.5EM metin boyutu Kutters: 4VW Radius Sınır Sınır: 0PX Hareketler Düğmesi: 0.1EM Yazı Tipi Düğmesi: Lato Ağırlık Harfleri: Işık Dolgu Özel: 10VW TOP, 10VW Aşağıda, 10vw sol, 10vw sağ
Sıra yüksekliği ve harf alanı için birim uzunluğu EM ile birlikte yazı tipi boyutu için VW uzunluk birimlerinin kullanımına dikkat edin. Bu, tarayıcınızı ayarlarken metin ve tasarımların sorunsuz bir şekilde tartışılmasını sağlar. Son adım, tasarımı cilalamak için bazı özel CSS görüntüleri eklemektir. Takip -Up sekmesini açın ve katılım alanı altına aşağıdaki özel CSS ekleyin: yazı tipi boyutu: 3.5vw;
Bu, formunuzdaki yer tutucu metnine uyacak şekilde yazarken metnin boyutuna izin verecektir. O zaman nefes alması için biraz alan vermek için düğmenin üzerine özel marjlar ekleyelim. Abonelik düğmesinin altına aşağıdakileri ekleyin: Marj-Top: 3.5VW; Şimdi son tasarımı kontrol edelim.
#3 Sıska Katılım
Bir sonraki tasarım, yayınlarında veya sayfalarında dikey alan tasarruf etmek isteyen şirketler ve bloglar için kesinlikle popüler bir çözüm olacak. Divi e -posta katılım modülü daha geleneksel bir dikey form için en iyisi olsa da, formu sadece küçük bir CSS parçası ile ince bir yatay forma dönüştürebilirsiniz. Bir sütun satırı ile yeni bir bölüm oluşturun ve satıra bir e -posta katılım modülü ekleyin. E -posta katılım ayarlarını açın ve içeriği başlığı içerecek şekilde güncelleyin, ancak başka bir şey yoktur. Ardından, düğmenin arka planı ve rengiyle aşağıdaki gibi tasarımı güncelleyin: Arka Plan Rengi: #54677D Düzen: Yukarıdaki gövde, metin oryantasyonunun altında şekil: #B0C94F Genişlik Sınır Sınır Düğmesi Sınırı: 0px Şimdi özel CSS zamanı. Yalnızca masaüstünde (hücresel değil) ince bir form tasarımı istediğimiz için, form stilini hedeflemek için CSS özel kimliklerini kullanarak sayfaya (sayfa ayarlarının altında) CSS ekleyeceğiz. Bunu yapmak için devam eden sekmeyi açın ve özel bir CSS kimlik katılım modülü sağlayın. CSS: Bu ince, bu formu sayfaya ekleyeceğimiz harici bir CSS ile hedeflemek için kullanılacaktır. Şimdi Divi Builder sayfası ayarlarını açın ve gelişmiş sekmenin altındaki aşağıdaki CSS’yi ekleyin. @Media (min-width: 980px) { #skinny.et_pb_newsletter .et_pb_newsletter_fields {
Flex-Wrap: NowRap! Önemli;
}#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
Esnek-Basis:%23;
}
}
#skinny .et_pb_newsletter_form {
Dolgu-sol: 0px;
}
Divi, formu arka uçta organize etmek için Flex’i kullandığından, bu CSS, alan alanına forma dikey olarak paralel olarak neden olan bir esnek sarma özelliği yayınladı. Sonuç, alan alanındaki yatay düzendir. Flex-Basis özelliğini% 23 olarak ayarlamak temel olarak her alan alanının genişliğini ayarlar. Medya sorgusuna CSS eklediğimiz için, tasarım yalnızca hücreselde görüntülenen formun varsayılan düzeni ile masaüstünde gerçekleşecektir. Son tasarım aşağıdadır.#4 Kitap Teklif Katılımı
Bu tasarım, ücretsiz kitap tekliflerini tanıtmak amacıyla e -posta katılım modülündeki birkaç görüntüyü birleştirir. Bunu yapmak için, tek yapmanız gereken açıklamalar ve altbilgi içeriği eklemek için varsayılan WYSIWYG düzenleyicisini kullanarak görüntüler eklemektir. Aynı tasarımı, bir e -posta katılım modülünü iki sıra sütundaki başka bir modülle birleştirerek gerçekleştirebileceğiniz doğrudur, ancak aynı modüldeki her şeyi nasıl yapacağınızı göstermenin çok yararlı olacağını düşünüyorum. İşte nasıl yapılacağı. Bir sütun satırı ile yeni bir bölüm oluşturun ve satıra bir e -posta katılım modülü ekleyin. E -posta katılım ayarlarını açın ve içerik sekmesinde kalın. Açıklama altında, varsayılan metin yalnızca birkaç cümleye kısaltılmıştır. Ardından Medya düğmesini tıklayarak medya kitaplığınızdan resim ekleyin.
Görüntü genişliğinin yaklaşık 200 pikselden fazla olmadığından emin olmak istiyorsunuz. Bu örnek için, orta boy bir görüntü kullanıyorum.
Altbilginin altına, altbilgi metnini içeriğe birkaç cümle ekleyin, ardından metnin altına bir logo resmi eklemek için Medya Ekle düğmesine tıklayın (elbette bu isteğe bağlıdır). Görüntünün ortada olduğundan emin olmak için, medya kütüphanesinden resim eklerken seviyelendirme seçeneğini ortaya ayarlayın. Artık tasarımın geri kalanını güncellemeye hazırsınız. Metnin okunmasını kolaylaştırmak için resmin üzerine bir arka plan görüntü modülü ve arka plan gradyanı vererek başlayın. Arka plan görüntüsü: [Görüntü ekle] Sol renk arka plan gradyanı: rgba (0.0,0,0.0.5) Sağ renk arka plan gradyanı: rgba (0,0,0,0.0.5) Gradyanı arka planın üzerine yerleştirin: Evet Ardından kalan tasarımı aşağıdaki gibi güncelleyin: Metin Renk Düğmesi: #333333 Renk Arka Plan Anahtar Düğmesi: #FFCB7A Genişlik Düğme Sınırı: 0px Harfin Mesafesi: 5px harf ağırlığı: TT Genişlik: 700 Piksel Modül Hizalama: Orta Dolgu Özel: 3VW TOP , 3vw aşağıda, 3vw sol, 3vw sağ İşte son tasarım. #5 Kesme çerçevelerinin katılımı Bu basit tasarım tekniği, e -posta katılımınızın benzersiz bir görünümünü sağlamanın iyi bir yoludur. İşin püf noktası, parçanın arka planıyla aynı renge sahip bölücüyü kullanmaktır. Daha sonra bölücünün yüksekliğini ayarlayarak, iyi bir çerçeveleme efekti için kenarları benzersiz bir şekilde kesmek için bir e -posta katılım formuyla örtüşebilirsiniz. İşte nasıl yapılacağı. Bir sütun satırı ile yeni bir bölüm oluşturun ve satıra bir e -posta katılım modülü ekleyin. E -posta katılım ayarlarını açın ve modül arka plan gradyanınızı verin. Gradyan Arka Planın Sol Renk: #8300E9 Sağ Renk Gradyan Arka Plan: #06C8FF Gradyan Türü: Radyal Radyal Yön: Sol üst Ardından kalan tasarımı aşağıdaki gibi güncelleyin: ağır yazı tipi başlık: Metin Boyutu Başlık: 36px genişlik:% 70 (masaüstü),% 100 (tablet ve akıllı telefon) Modül Hizalama: Orta Dolma Özel: Üst 6VW, Alt 6VW, Sol 6VW, sağ 6VW, sağ 6VW, sağ 6vw, sağ 6vw, sağ 6VW, sağ 6vw, sağ 6vw, sağ 6vw Yuvarlak açı: 50px sol üst, üst sağ 0px, 50px sağ alt, 0PX Ayarlarınızı saklama. Ardından satır ayarlarınızı özel bir genişlikle güncelleyin. Özel genişlik:% 100 Şimdi, kesme çerçevemizin etkisini o bölümün bölücüsü ile eklemek için parçanın ayarlarını ayarlamaya hazırız. Aşağıdaki bölümleri açın ve aşağıdakileri güncelleyin: Arka Plan Rengi: #222222 Üst Civic Style: Ekrana bkz. Cangat Renk Rengi: #222222 (parçanın arka plan rengiyle eşleştiğinden emin olun) Yüksek bölücü: 12VW (masaüstü), 150px (150px (150px ( Tablet ve akıllı telefon) üst bölücü ayarları: İçeriğin üstünde alt bölücü kuvvet içeriği: bkz. Alt bölücü renk ekranı ( #222222 (bunun alt bölücünün arka plan rengiyle eşleştiğinden emin olun: 12VW (masaüstü), 150px (tablet ve akıllı telefon) Tekrarlama yatay Alt Bölüm: 0.8x Alt Bölücü Arka: Dikey ve Yatay Alt Bölme Ayarları: Yukarıdaki İçerik Bölümü Şimdi son tasarımı kontrol edelim.
