Divi ile her türlü web sitesi için çekici bir abonelik bölümü nasıl tasarlanır
İnsanların bir web sitesi oluşturmasının ana nedenlerinden biri, hedef kitlelerine yaklaşmanın yeni bir yolunu bulmaktır. İlk adımı attıktan ve bir web sitesi oluşturmaya başladıktan sonra, potansiyel müşterilerinizle tam olarak nasıl ilişki kurabileceğinizi merak etmeye başlarsınız. Birçok web sitesi sahibine yardım ettiği kanıtlanan şeylerden biri bir liste yapmaktır. Bu, ziyaretçilerin e -posta adreslerini toplamak, e -posta pazarlamasıyla potansiyel müşterilere (ve son olarak müşterilere) dönüştürmekle ilgilidir. Katılım listesini yaparak web sitenizde çekici bir abonelik bölümü oluşturur. Aboneliğinizin dikkat çekmesini istiyorsunuz ve daha da önemlisi, aboneliğinizin dönüştürmesini istiyorsunuz. Bu öğretici için, ziyaretçilerinizin dikkatini çekecek inanılmaz bir abonelik bölümü yaptık. Düzgün tasarımları neden e -posta listesine kaydolma konusundaki argümanlarla birleştiriyoruz. Ayrıca, bir tasarım yaparken seçebileceğiniz üç renk paletini de paylaşacağız.
Haydi Yapalım şunu! YouTube kanallarımıza abone olun Öğreticiyi girmeden önce, sonuçlara farklı ekran boyutlarında bakalım.
Renk #2: #E09900
Renk #3: #4F23FF
Renk paleti #2 Renk #1: RGBA (255,35,97,0.75)
Renk #2: #E09900
Renk #3: #D80E00
Renk paleti #3 Renk #1: RGBA (41,17,147.0.75)
Renk #2: #00ffd8
Renk #3: #291193
Yukarıdaki renk paletlerinden birini seçmek (veya kendiniz yapmak) ve bu rengi öğretici boyunca kullanma yaklaşımı. Ayarlarımızdaki renkleri kullandığımızda #1, #2 veya #3 renklerine değineceğiz. Ayrıca iki sütun üst üste binen bir abonelik modülü yapıyoruz ve e -posta listesine kaydolmanın avantajlarını vurguluyoruz. Abonelik bölümünü yeniden yapın Abonelik bölümünü eklemek ve yeni bir eklemek istediğiniz sayfayı açmak için bölücünün yeni bir kısmını ekleyin Standart bölüm. Bölüm ayarlarınızı hemen açın ve aşağıdaki üst bölücüyü ekleyin:
Bölme Stili: Listede bulun
Renk Renk: #ffffff
Bölme Yüksekliği: 200px
Flip bölücü: dikey
Alt bölücü, parçanızın altına aynı tip bölücüyü ekleyin: Bölme Stili: Listede bulun
Renk Renk: #ffffff
Bölme Yüksekliği: 200px
Flip bölücü: dikey
Bir sonraki boşluk aralığını açın ve üst ve alt dolguya ‘0px’ ekleyerek tüm varsayılan dolgu parçalarınızı silin. Tüm ayarlarla bitirdikten sonra şimdi sütun yapısının yeni bir satırı ekleyin, yeni bir satır ekleyebiliriz. Bunun için aşağıdaki sütun yapısını seçin Gradyan Arka Plan Satır ayarlarınızı açın ve aşağıdaki gradyan arka planını ekleyerek devam edin: Birinci Degrade Renk: Renk #1
İkinci gradyan rengi: Renk #2
Gradyan yönü: 123 derece
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Arka plan görüntüsü, tercih edilen bir arka plan görüntüsü ekleyerek devam edin. Bu arka plan görüntüsü sadece biraz görünecek. Arka plan görüntü boyutu olarak ‘kapak’ı da seçin. Sütun 2’nin arka plan rengi, sütun 2’nin arka plan rengi olarak ‘RGBA (255,255,255.0.87)’ ekleyin. Yapıştırıcımız ayrıca iki sütun arasındaki boşluğu azaltacak ve aşağıdaki boyut ayarlarını uygulayarak satırın tüm ekran genişliğini doldurmasını sağlayacaktır: Bu satırı tam genişlik yapın: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Satır ayarında yapmanız gereken son şeyin mesafesi bazı özel pedler eklemektir:
Üst ve Alt Dolgu: 0px Sütun 1 Dolgu Üst: 200px
Sütun 1 Pilding Alt: 100 piksel
Üst Dolgu 2 Dolgu: 300 piksel (masaüstü) 50px (tablet ve cep telefonu)
Sütun 2 Dolgu Alt: 100 PX (Tablet ve Cep Telefonu)
Sütun 2 Sol ve Sağ Dolgu: 50px
Sütun 1’e Blurb Modülünü Ekleyin 1 Başlık Ekle Bulanıklık şimdi modülümüzü eklemeye başlayalım! Bir bulanıklık modülü ekleyerek ilk sütunla başlayacağız. Blurb modülünü değiştirmeyi bitirdikten sonra, diğer ikisinin ayarlarını da yeniden kullanacağız. Bir bulanıklık modülü ekledikten sonra bir başlık verin.
Bulanık simgesini ekleyin, simgeyi bir sonraki bulanıklık modülünüze ekleyin. İlk modül için aşağıdaki simgeyi kullandık: Simge Ayarları Aşağıdaki ayarları ekleyerek görüntüleme simgesini değiştirin: Ikon Color: #ffffff Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
İkon yazı tipi boyutu: 43px
Başlık metni ayarlarımız yalnızca açıklamanın başlığını kullanır. Bu yüzden yalnızca H4’ün metin ayarlarını değiştirmemiz gerekiyor:
Yazı Tip Başlığı: Yeseva One Hizalama Metin Başlığı: Orta
Başlık metin rengi: #ffffff
Başlık mektubu aralığı: -1px
Yapıştırıcımız ayrıca bulanık modülümüzün genişliğini farklı ekran boyutlarına göre değiştirecektir:
İçerik genişliği: 150 piksel Genişlik:% 33 (masaüstü),% 40 (tablet),% 60 (cep telefonu)
Modül hizalaması: merkez
Son mesafe, Blurb modülünüze aşağıdaki özel dolguyu da ekleyin: Üst ve Alt Dolgu: 50px
Blurb Modül Klon iki kez ve Superior Blurb Modülünü Değiştirin İkonunuzu değiştirin ve içerik artık devam edebilir ve bulanıklık modülünü iki kez klonladı. İlk sütunda her şeyi kaydedin. Her yeni bulanıklık modülü için, göndermek istediğiniz mesaja uyacak şekilde simgeyi ve başlığı değiştirin.
Arka plan rengini ekleyin Orta bulanıklık modülünü vurgulayacağız. Bunu yapmak için beyaz bir arka plan rengi ekleyerek başlayacağız.
Başlık metnimizin simgesini ve rengini değiştirin, H4 simgesinin ve başlıkının rengini ‘#000000’ olarak değiştirecektir.
Hat yüksekliği metni: 1em
Metin Modülü #2 ekleyin Metin modülünün hemen altındaki sütun 2 mesafesine, açıklama için başka bir metin modülü ekleyeceğiz. İçeriğinizi ekledikten sonra, üst kenar boşluğuna ’20px’ ekleyin.
Optin E -posta Modülünü Sütun 2 Renk Arka Planına Ekle Eklememiz gereken bir sonraki modül Optin e -posta modülü. Ekledikten sonra, devam edin ve arka plan rengini ‘RGBA (255,255,255.0) olarak değiştirin.
E -posta Hesabı E -posta hesabınızı ekleyin ve ardından istediğiniz hizmet sağlayıcısını seçin. Alan ayarlarını açarak ve ad ve soyadı alanı devre dışı bırakarak alan devam ediyor. Alan düzenlemelerimiz de alan ayarlarını değiştirecektir. Her açıya ‘0px’ ekleyerek yuvarlak açıyı çıkarın. İlk kutu gölge seçeneğini de ekleyin. Bir sonraki düğmeyi ayarlayın, düğme ekranınızı değiştirin: Metin Renk Düğmesi: #fffffff Arka Plan Renk Düğmesi: Renk #3 Düğmenin sınır genişliği: 0px Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Yeseva One
Düğme simgesini görüntüleyin: Evet
Renk simgesi düğmesi: #ffffff
Zorlu simgenin yerleşimi: sol
Yalnızca görüntü simgeleri düğmeye yönlendirilir: hayır
Kutu Gölgesi: İlk seçeneği seçin
Son mesafe, abonelik modülünün aşağıdaki alan ayarlarını kullanarak her iki sütun üst üste gelmesini sağlayın:
Üst kenar: 20 piksel (masaüstü), 0px (tablet ve cep telefonu)
Sol kenar boşluğu: -60% (masaüstü ve tablet), 0px (telefon)
Sağ kenar boşluğu:% 60 (masaüstü),% 50 (tablet), 0px (cep telefonu) Sosyal medyayı takip etmek için modülü ekleyin Sütun 2’ye en son istediğiniz kadar sosyal ağ ekleyin, sosyal medyayı takip etmek için modülü ekleyeceğiz. Lütfen ve göstermek istediğiniz sosyal ağı ekleyin.
Yuvarlak açı Tüm sosyal ağları ekledikten sonra, sınır ayarındaki her köşeye ’50px’ ekleyin.
Mesafemiz ayrıca üst kenar boşluğuna ’50px’ ekleyerek modüle basacaktır.
Her bir sosyal ağın arka plan rengini tek tek değiştirin, ancak en az değil, her bir sosyal ağın arka plan rengini tek tek ‘#000000’ olarak değiştirin. Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım.
