Divi ile Üyelik Anlaşmalarınızı Yaratıcı Bir Şekilde Öne Çıkarma

Web sitenizde üyelik fırsatları sunuyorsanız, insanların bunları web sitenizde fark edeceğinden emin olmanız önemlidir. Size bir başlangıç ​​yapmak için, yalnızca Divi'nin yerleşik seçeneklerini kullanarak adım adım yeniden oluşturabileceğiniz çarpıcı bir üyelik vitrini sunacağız. Güzel bir bölüm arka planını üyelik fırsatlarını gösteren Blurb Modülleri ve ziyaretçilerinizi doğru sayfaya götüren ayrı bir düğme ile birleştiriyoruz.

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarında yeniden oluşturacağımız tasarıma hızlıca bir göz atalım.

Masaüstünde

Tablette

Mobilde

Bu Eğitimin Dosyalarını İndirin

Ellerinizi ücretsiz resim dosyalarına koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Yeni Bölüm Ekle

Degrade Arka Plan

Yeni bir sayfa oluşturarak veya mevcut bir sayfayı açarak ve Visual Builder'a geçerek başlayın. Bunu yaptıktan sonra yeni bir bölüm ekleyin, bölüm ayarlarını açın ve ona aşağıdaki gradyan arka planını uygulayın:

• Renk 1: rgba(255,255,255,0)
• Renk 2: #150a56
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 165deg
• Bitiş Konumu: %36

Arka plan görüntüsü

Ardından arka plan resmi sekmesini açın, indirilen klasörde bulabileceğiniz ' home_office-39.jpg ' görüntüsünü yükleyin ve Arka Plan Görüntüsü Karışımınız olarak ' Çarpma'yı uygulayın.

Bölücüler

Bir sonraki yapacağımız şey, bölüm bölücülerimizi eklemek. Güzel arka plan efekti oluşturmak için hem üst hem de alt ayırıcı kullanacağız. Üst sekmeyi açarak başlayın ve ona aşağıdaki ayarları uygulayın:

• Bölücü Rengi: rgba(30,35,96,0.75)
• Bölücü Yüksekliği: 700px
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

Ardından, Alt sekmeye geçin ve aşağıdaki değişiklikleri yapın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: rgba(2,0,35,0.93)
• Bölücü Yüksekliği: 430px
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

aralık

Aşağıdaki özel dolguyu ekleyerek bölümün üstünde ve altında fazladan boşluk oluşturacağız:

• Üst Dolgu: 130 piksel
• Alt Dolgu: 65px

İlk Satırı Ekle

Sütun Yapısı

Bölümümüzde istenen tüm değişiklikleri yaptığımıza göre artık ilk satırı eklemeye başlayabiliriz. İhtiyacımız olan sütun yapısı aşağıdaki gibidir:

boyutlandırma

Herhangi bir modül eklemeden önce, satırın varsayılan ayarlarında küçük bir değişiklik yapacağız. Tasarım sekmesinde Boyutlandırma alt kategorisini açın ve 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

Sütun 2'ye Başlık Metin Modülü Ekle

Metin Ayarları

Artık modüllerimizi eklemeye başlayabiliriz! Bu satırın yalnızca ikinci sütununu kullanacağız. Aşağıdaki metin ayarlarını içeren bir başlık Metin Modülü ekleyin:

• Metin Yazı Tipi: ABeeZee
• Metin Boyutu: 56px
• Metin Rengi: #f9f9f9
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Üstte de biraz boşluğa ihtiyacımız olacak. Bu yüzden üst kenar boşluğuna '50px' ekliyoruz.

Sütun 2'ye Açıklama Metni Modülü Ekle

Metin Ayarları

Önceki Metin Modülünün hemen altında, devam edin ve açıklamanız için yeni bir tane ekleyin. İçeriğinizi ekledikten sonra, ona aşağıdaki metin ayarlarını uygulayın:

• Metin Boyutu: 16px
• Metin Rengi:
• Metin Satırı Yüksekliği: 1.4em
• Metin Yönü: Merkez

boyutlandırma

Ayrıca bu Metin Modülünün Genişliğini '%70' olarak değiştireceğiz ve orta Modül Hizalamasını etkinleştireceğiz.

Sütun 2'ye CTA Metin Modülü Ekle

Metin Ayarları

Metin Modülü açıklamasını bitirdikten sonra devam edin ve hemen altına bir CTA Metin Modülü ekleyin ve ona aşağıdaki metin ayarlarını uygulayın:

• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #ffffff
• Metin Harf Aralığı: 5px
• Metin Yönü: Merkez

2. Sütun'a Ok Görüntüsü Modülü Ekle

Fotoğraf yükleniyor

Bu satıra eklememiz gereken son modül bir Görüntü Modülüdür. İndirilen klasörde bulabileceğiniz ' arrow.png ' resmini yükleyin.

boyutlandırma

Daha sonra bu görüntünün genişliğini '%13' olarak değiştirin.

aralık

Bu okun CTA Metin Modülümüzle aynı yükseklikte görünmesini istiyoruz. Bu yüzden üst kenar boşluğuna da '-100px' ekleyeceğiz.

görünürlük

Son olarak, bu Görüntü Modülünü tablet ve telefonda bu ekran boyutlarıyla eşleşmeyeceğinden devre dışı bırakacağız.

İkinci Satır Ekle

Sütun Yapısı

Üyelik anlaşmaları için aşağıdaki sütun yapısını kullanarak başka bir satır eklememiz gerekecek:

Satır Hizalama

Herhangi bir modül eklemeden önce, bir sol Satır Hizalaması uygulayacağız.

boyutlandırma

Ayrıca Boyutlandırma alt kategorisinde de bazı değişiklikler yapacağız:

• Özel Genişlik Kullan: Evet
• Özel Genişlik: 1030 piksel
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Sütun 2'ye Blurb Modülü Ekle

Yazı ekle

Bir üyelik anlaşmasını sergilemek için bir Düğme Modülü ile birlikte bir Blurb Modülü kullanacağız. Satırınızın ikinci sütununa bir Blurb Modülü ekleyerek başlayın ve istediğiniz içeriği ekleyin.

Fotoğraf yükleniyor

Ardından, indirdiğiniz klasörde bulabileceğiniz ' Conference_illustration_05.png ' görüntüsünü yükleyin.

Arka plan rengi

Ardından, Blurb Modülünüzün arka plan rengi olarak '#ffffff' kullanın.

Başlık Metni Ayarları

Bundan sonra Blurb Modülümüzün başlığında bazı değişiklikler yapmamız gerekecek:

• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #485B90

Gövde Metni Ayarları

Ayrıca gövde metni ayarlarını da değiştireceğiz:

• Gövde Metni Hizalama: Orta
• Gövde Metin Boyutu: 11px
• Gövde Metni Rengi: #485B90

boyutlandırma

Boyutlandırma alt kategorisini açarak devam edin ve aşağıdaki değişiklikleri yapın:

• Görüntü Genişliği: %50
• İçerik Genişliği: 250 piksel
• Genişlik: %72 (Masaüstü), %50 (Tablet), %99 (Telefon)

Aksi takdirde tabletin '%50'sini devralmasını sağlayacak telefon için '%100' kullanmıyoruz.

aralık

Bulanıklık Modülünün aralığı, bu öğreticinin çok önemli bir parçasıdır. Blurb Module'ü sola itmek ve önceki satırla örtüşmesini sağlamak için masaüstünde negatif üst ve sol kenar boşluğuna gidiyoruz. Daha iyi görünen bir sonuç elde etmek için bazı özel dolgular da ekleyeceğiz:

• Üst Kenar Boşluğu: -380px (Masaüstü), 0px (Tablet ve Telefon)
• Sol Kenar Boşluğu: -180px (Masaüstü), %35 (Tablet), %20 (Telefon)
• Üst Dolgu: 30 piksel
• Sağ Dolgu: 10px
• Alt Dolgu: 30px
• Sol Dolgu: 10px

Sınır

Ardından, Border alt kategorisindeki köşelerin her birine '20px' ekleyeceğiz.

Kutu Gölge

Üstüne üstlük, ilk kutu gölge seçeneğini etkinleştireceğiz.

Sütun 2'ye Düğme Modülü Ekle

Düğme Ayarları

İkinci sütuna eklediğiniz Blurb Modülünün hemen altına bir Düğme Modülü ekleyin. Düğmenize CTA'yı ekledikten sonra, ona aşağıdaki düğme ayarlarını uygulayın:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 14px
• Düğme Metin Rengi: #485B90
• Düğme Arka Plan Rengi: #ffffff
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 10px
• Yazı Tipi Ağırlığı: Ultra Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Blurb Module'ü sola (masaüstünde) ittiğimiz için, Button Module için de aynısını yapmamız gerekecek.

• Üst Kenar Boşluğu: 20px
• Alt Kenar Boşluğu: 50px (Tablet ve Telefon)
• Sol Kenar Boşluğu: -100px (Masaüstü), %53 (Tablet), %50 (Telefon)
• Sağ Dolgu: 30px
• Sol Dolgu: 30px

Kutu Gölge

Bu Düğme Modülüne ilk kutu gölge seçeneğini de ekleyeceğiz.

Bulanıklığı ve Düğme Modülünü 2. Sütun'da Klonla ve Sütun 3'e Yerleştir

Resmi ve Metni Değiştir

Şimdi, ikinci sütununuzun Bulanıklık Modülü ve Düğme Modülünü kopyalayın ve her ikisini de üçüncü sütuna yerleştirin. Bu Blurb Modülü için, ilk sütunda bulunan Blurb Module için kullandığımız görüntünün aynısını kullanıyoruz.

Arka Plan Rengini Kaldır ve Gradyan Arka Planı Ekle

Her iki modülün ayarlarını ayrı ayrı açın, arka plan renklerini kaldırın ve aşağıdaki gradyan arka planını ekleyin:

• Renk 1: #6F9AF1
• Renk 2: #485B90
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 159deg

Her İki Modülün Metin Renklerini Değiştirin

Her iki modülün de metin renklerini '#ffffff' olarak değiştirin.

Blurb Modülünün Aralığını Değiştirin

Ardından, Blurb Modülünüzün Aralık alt kategorisine gidin ve özel kenar boşluğunu değiştirin:

• Üst: -470px (Masaüstü), 0px (Tablet ve Telefon)
• Sol: -260 piksel (Masaüstü), %35 (Tablet), %20 (Telefon)

Düğme Modülünün Aralığını Değiştirin

Son olarak, Düğme Modülünün özel kenar boşluğunu da değiştirmemiz gerekecek:

• Üst Kenar Boşluğu: 20px
• Sol Kenar Boşluğu: -180px (Masaüstü), %53 (Tablet), %50 (Telefon)

Ön izleme

Bu öğreticinin tüm adımlarını tamamladığımıza göre, şimdi farklı ekran boyutlarındaki sonuca son olarak bir göz atalım.

Masaüstünde

Tablette

Mobilde

Son düşünceler

Bu eğiticide, bir bölümde üyelik fırsatlarınızı yaratıcı bir şekilde nasıl vurgulayacağınızı gösterdik. Güzel bir renk paletini çarpıcı bir bölüm arka planıyla birleştirdik ve üyelik vitrinini oluşturmak için tanıtım yazısı modülleri ve düğme modülleri kullandık. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!