Divi ile Her Türlü Web Sitesi İçin Cazip Bir Abone Ol Bölümü Nasıl Tasarlanır

İnsanların web siteleri oluşturmasının ana nedenlerinden biri, hedef kitlelerine yaklaşmanın yeni bir yolunu bulmaktır. İlk adımı atıp bir web sitesi oluşturmaya başladığınızda, potansiyel müşterilerinizle tam olarak nasıl iletişim kurabileceğinizi merak etmeye başlarsınız. Birçok web sitesi sahibine yardımcı olduğu kanıtlanmış şeylerden biri de liste oluşturmaktır. Her şey, ziyaretçilerden e-posta adresleri toplamak, onları e-posta pazarlamasıyla potansiyel müşterilere (ve nihayetinde müşterilere) dönüştürmekle ilgilidir.

Ve liste oluşturma ile birlikte web sitenizde çekici abone bölümleri oluşturma gelir. Abone bölümünüzün göz alıcı olmasını ve daha da önemlisi abone bölümünüzün dönüşmesini istiyorsunuz. Bu eğitim için, ziyaretçinizin inkar edilemez bir şekilde dikkatini çekecek çarpıcı bir abone bölümü oluşturduk. Bir e-posta listesine neden kaydolmanız gerektiğine dair argümanlarla şık bir tasarımı birleştiriyoruz. Bunun da ötesinde, tasarımı oluştururken seçebileceğiniz üç renk paletini de paylaşacağız.

Hadi hadi bakalım!

Youtube Kanalımıza Abone Olun

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca bir göz atalım.

Renk Paleti #1

• Renk #1: rgba(79,35,255,0.88)
• 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

Yaklaşmak

Yukarıdaki renk paletlerinden birini seçin (veya kendi paletinizi yaratın) ve bu renkleri eğitim boyunca kullanın. Ayarlarımızda bir renk kullanırken #1, #2 veya #3 rengine başvuracağız. Ayrıca Abonelik Modülünün iki sütunla çakışmasını sağlıyoruz ve bir e-posta listesine kaydolmanın avantajlarını vurguluyoruz.

Abone Ol Bölümünü Yeniden Oluştur

Yeni Bölüm Ekle

Üst Bölücü

Abone bölümünüzü eklemek istediğiniz sayfayı açın ve yeni bir standart bölüm ekleyin. Bölümünüzün ayarlarını hemen açın ve aşağıdaki üst ayırıcıyı ekleyin:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #FFFFFF
• Bölücü Yüksekliği: 200px
• Bölücü Çevirme: Dikey

Alt Bölücü

Bölümünüzün altına aynı tür ayırıcı ekleyin:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #FFFFFF
• Bölücü Yüksekliği: 200px
• Bölücü Çevirme: Dikey

aralık

Ardından Aralık ayarlarını açın ve üst ve alt dolguya '0px' ekleyerek bölümünüzün tüm varsayılan dolgusunu kaldırın.

Yeni Satır Ekle

Sütun Yapısı

Artık tüm bölüm ayarlarını yaptığımıza göre yeni bir satır ekleyebiliriz. Bunun için aşağıdaki sütun yapısını seçin

Degrade Arka Plan

Satır ayarlarınızı açın ve aşağıdaki degrade arka planını ekleyerek devam edin:

• Birinci Degrade Renk: Renk #1
• İkinci Degrade Renk: Renk #2
• Gradyan Yönü: 123deg
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Tercih ettiğiniz bir arka plan resmi ekleyerek devam edin. Bu arka plan görüntüsü yalnızca biraz gösterilecektir. Arka Plan Resmi Boyutu olarak da 'Kapak'ı seçin.

Sütun 2 Arka Plan Rengi

Ardından, Sütun 2 Arka Plan Rengi olarak 'rgba(255,255,255,0.87)' ekleyin.

boyutlandırma

Ayrıca, aşağıdaki Boyutlandırma ayarlarını uygulayarak her iki sütun arasındaki boşluğu azaltacağız ve satırın ekranın tüm genişliğini kaplamasını sağlayacağız:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Satır ayarlarında yapmanız gereken son şey, bazı özel dolgu eklemektir:

• Üst ve Alt Dolgu: 0px
• Sütun 1 Üst Dolgu: 200 piksel
• Sütun 1 Alt Dolgu: 100 piksel
• Sütun 2 Üst Dolgu: 300px (Masaüstü) 50px (Tablet ve Telefon)
• Sütun 2 Alt Dolgu: 100 piksel (Tablet ve Telefon)
• Sütun 2 Sol ve Sağ Dolgu: 50 piksel

Blurb Modülü #1'i Sütun 1'e ekleyin

Bulanıklık Başlığı Ekle

Şimdi modüllerimizi eklemeye başlayalım! Bir Blurb Modülü ekleyerek ilk sütunla başlayacağız. Bu Blurb Modülünü değiştirmeyi bitirdikten sonra, ayarlarını diğer ikisi için de yeniden kullanacağız. Bir Blurb Modülü ekledikten sonra ona bir başlık verin.

Bulanıklık Simgesi Ekle

Daha sonra Blurb Modülünüze bir simge ekleyin. İlk modül için aşağıdaki simgeyi kullandık:

Simge Ayarları

Aşağıdaki ayarları ekleyerek simgenin görünümünü değiştirin:

• Simge Rengi: #FFFFFF
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 43px

Başlık Metni Ayarları

Sadece bir tanıtıcı başlık kullanıyoruz. Bu yüzden yalnızca H4'ün metin ayarlarını değiştirmemiz gerekecek:

• Başlık Yazı Tipi: Yeseva Bir
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #FFFFFF
• Başlık Harf Aralığı: -1px

boyutlandırma

Ayrıca Blurb Modülümüzün genişliğini farklı ekran boyutlarına göre değiştireceğiz:

• İçerik Genişliği: 150 piksel
• Genişlik: %33 (Masaüstü), %40 (Tablet), %60 (Telefon)
• Modül Hizalaması: Merkez

aralık

Son olarak, Blurb Modülünüze aşağıdaki özel dolguyu da ekleyin:

• Üst ve Alt Dolgu: 50px

Blurb Modülünü İki Kez Klonla ve Öne Çıkan Blurb Modülünü Değiştir

Simgeyi ve İçeriği Değiştir

Şimdi devam edebilir ve Blurb Module'ü iki kez klonlayabilirsiniz. Hepsini ilk sütunda tutun. Yeni Bulanıklık Modüllerinin her biri için, göndermek istediğiniz mesajla eşleşmesi için simgeyi ve başlığı değiştirin.

Arka Plan Rengi Ekle

Ortadaki Blurb Modülünü vurgulayacağız. Bunu yapmak için, ona beyaz bir arka plan rengi ekleyerek başlayacağız.

Simge ve Başlık Metin Rengini Değiştir

Ayrıca simgenin rengini ve H4 başlığını '#000000' olarak değiştireceğiz.

Yuvarlatılmış Köşeler Ekle

Ardından, Kenarlık ayarlarındaki köşelerin her birine '5px' ekleyeceğiz.

Kutu Gölge

Son olarak, ilk kutu gölge seçeneğini kullanarak biraz derinlik katacağız.

Metin Modülü #1'i Sütun 2'ye ekleyin

Metin Ayarları

İkinci sütuna geçelim! İhtiyacımız olan ilk modül bir Metin Modülü. İçeriğinizi ekledikten sonra aşağıdaki metin ayarlarını ona uygulayın:

• Yazı Tipi: Yeseva One
• Metin Rengi: #000000
• Metin Boyutu: 54px
• Metin Satır Yüksekliği: 1em

Metin Modülü #2'yi Sütun 2'ye ekleyin

aralık

Bu Metin Modülünün hemen altına, açıklama için başka bir Metin Modülü ekleyeceğiz. İçeriğinizi ekledikten sonra üst kenar boşluğuna '20px' ekleyin.

Sütun 2'ye E-posta Opt Modülü Ekle

Arka plan rengi

Eklememiz gereken bir sonraki modül, bir E-posta Optin Modülü. Ekledikten sonra devam edin ve arka plan rengini 'rgba(255,255,255,0)' olarak değiştirin.

E-posta hesabı

Tercih ettiğiniz servis sağlayıcıyı seçtikten sonra E-posta Hesabınızı ekleyin.

Alanlar

Alan ayarlarını açarak devam edin ve Ad ve Soyadı alanlarını devre dışı bırakın.

Alan Ayarları

Ayrıca Alan ayarlarını da değiştireceğiz. Köşelerin her birine '0px' ekleyerek yuvarlatılmış köşeleri kaldırın. İlk kutu gölge seçeneğini de ekleyin.

Düğme Ayarları

Ardından, düğmenizin görünümünü değiştirin:

• Düğme Metin Rengi: #FFFFFF
• Düğme Arka Plan Rengi: Renk #3
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Yeseva Bir
• Düğme Simgesini Göster: Evet
• Düğme Simge Rengi: #FFFFFF
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır
• Kutu Gölgesi: İlk seçeneği seçin

aralık

Son olarak, aşağıdaki Aralık ayarlarını kullanarak Abone Ol Modülünün her iki sütunla örtüşmesini sağlayın:

• Üst Kenar Boşluğu: 20px (Masaüstü), 0px (Tablet ve Telefon)
• Sol Kenar Boşluğu: -%60 (Masaüstü ve Tablet), 0px (Telefon)
• Sağ Kenar Boşluğu: %60 (Masaüstü), %50 (Tablet), 0px (Telefon)

2. Sütun'a Sosyal Medya Takip Modülü Ekleyin

İstediğiniz Kadar Sosyal Ağ Ekleyin

Son olarak, bir Sosyal Medya Takip Modülü ekleyeceğiz. Devam edin ve görünmesini istediğiniz sosyal ağları ekleyin.

Yuvarlatılmış köşeler

Tüm sosyal ağları ekledikten sonra, Kenarlık ayarlarındaki köşelerin her birine '50px' ekleyin.

aralık

Ayrıca üst kenar boşluğuna '50px' ekleyerek modülü aşağı iteceğiz.

Her Sosyal Ağın Arka Plan Rengini Ayrı Ayrı Değiştirin

Son olarak, sosyal ağların her birinin arka plan rengini ayrı ayrı '#000000' olarak değiştirin.

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Abonelik bölümleri web sitenizin önemli bir parçasıdır. E-posta listeleri oluşturmanıza, e-posta pazarlamasını etkinleştirmenize ve potansiyel müşterileri kısa sürede ziyaretçilere dönüştürmenize yardımcı olurlar. Bu gönderide, her türlü web sitesiyle eşleşecek çarpıcı bir abone bölümünün nasıl oluşturulacağını gösterdik. Kaydolma avantajlarını ortaya koyarak muhteşem bir tasarım kullanarak birleştirdik. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!