Fiyatlandırma Planlarını Sergilemek için Divi'nin Geçiş Modülünü Yaratıcı Bir Şekilde Kullanma

Web sitenizde fiyatlandırma planlarını sergilemek söz konusu olduğunda, birçok dönüş yapabilir ve kesinlikle çarpıcı ve çekici fiyatlandırma sayfaları veya bölümleri oluşturabilirsiniz. Divi ile bir web sitesi kurarken, büyük olasılıkla Fiyatlandırma Tabloları Modülüne gideceksiniz. Bu modül, hızlı bir şekilde fiyatlandırma tabloları eklemenize ve bunları istediğiniz gibi biçimlendirmenize olanak tanır. Ancak, sayfanızın bu belirli bölümüne daha fazla etkileşim eklemek istiyorsanız, tıklamada fiyatlandırma planlarını göstermek için Geçiş Modülünü de kullanabilirsiniz. Bu, durumunu açık tutarak ve diğer ikisini kapatarak belirli bir fiyatlandırma planını vurgulamanın harika bir yoludur.

Bu öğreticide, Divi's Toggle Module kullanarak muhteşem bir geçiş fiyatlandırma tablosu tasarımının nasıl oluşturulacağını adım adım göstereceğiz. Yaklaşımı öğrendikten sonra, oluşturduğunuz her tür web sitesi için tıklamayla her türlü geçiş fiyatlandırma planı oluşturabileceksiniz.

Hadi hadi bakalım!

Ön izleme

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

Hadi Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

aralık

Divi's Visual Builder'ı kullanarak yeni bir sayfa oluşturun veya mevcut bir sayfayı açın. Sayfaya yeni bir bölüm ekleyin, bölüm ayarlarını açın ve bölümün üstünde ve altında biraz boşluk yaratmak için bazı özel üst ve alt dolgular ekleyin.

• Üst Dolgu: 160 piksel
• Alt Dolgu: 160px

1. Satır Ekle

Sütun Yapısı

Bölüm aralığı ayarlarını değiştirmeyi bitirdikten sonra, devam edip aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyebilirsiniz:

Metin Modülü Ekle

İçerik Ekle

Satırda değişiklik yapmanıza gerek yok, bu yüzden hemen bir Metin Modülü ekleyin. Modülün içerik kutusuna istediğiniz H2 içeriğini girin.

Başlık Metni Ayarları

Tasarım sekmesine giderek devam edin ve başlık metni ayarlarını değiştirin.

• Başlık 2 Yazı Tipi: Didact Gothic
• Başlık 2 Yazı Tipi Ağırlığı: Normal
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu: 40px
• Başlık 2 Harf Aralığı: -1px

Bölücü Modülü Ekle

görünürlük

Önceki adımlarda eklediğiniz ve değiştirdiğiniz Metin Modülünün hemen altına bir Bölücü Modül ekleyin. Divider Module'ün 'Show Divider' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Renk

Tasarım sekmesine giderek devam edin ve ayırıcı rengini değiştirin.

• Renk: #000000

boyutlandırma

Boyutlandırma ayarlarında modülün genişliğini de değiştirin.

• Genişlik: %39
• Modül Hizalaması: Merkez

aralık

Bazı özel alt kenar boşluklarını da ekleyin.

• Alt Kenar Boşluğu: 50px

2. Satır Ekle

Sütun Yapısı

İlk satırı ve modüllerini değiştirmeyi bitirdik. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleme zamanı:

Sütun 1 Gradyan Arka Planı

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve sütun 1'e degrade bir arka plan ekleyin.

• Renk 1: #00fff2
• Renk 2: rgba(255,255,255,0)
• Sütun 1 Gradyan Türü: Radyal
• Sütun 1 Radyal Yön: Sağ Alt
• Sütun 1 Başlangıç ​​Konumu: %30
• Sütun 1 Bitiş Konumu: %30

Sütun 2 Gradyan Arka Planı

Aynı işlemi ikinci sütun için de yapın.

• Renk 1: #fce96f
• Renk 2: rgba(255,255,255,0)
• Sütun 2 Gradyan Türü: Radyal
• Sütun 2 Radyal Yön: Sağ Üst
• Sütun 2 Başlangıç ​​Konumu: %40
• Sütun 2 Bitiş Konumu: %40

Sütun 3 Gradyan Arka Planı

Benzer şekilde, aşağıdaki ayarları kullanarak üçüncü sütuna degrade bir arka plan ekleyin:

• Renk 1: #a659ff
• Renk 2: rgba(255,255,255,0)
• Sütun 3 Gradyan Türü: Radyal
• Sütun 3 Radyal Yön: Alt
• Sütun 3 Başlangıç ​​Konumu: %30
• Sütun 2 Bitiş Konumu: %30

boyutlandırma

Degrade arka planı eklemeyi bitirdikten sonra tasarım sekmesine gidin ve boyutlandırma ayarlarını değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2

Sütun 1'e Geçiş Modülü Ekle

İçerik Ekle

Farklı fiyatlandırma planları oluşturmaya başlama zamanı! İlk sütuna yeni bir Geçiş Modülü ekleyin ve bir başlık girin. İçerik kutusundaki farklı öğeleri stilize etmek için bazı fazladan HTML etiketleri kullandık. Devam edin ve aşağıdaki satırları kopyalayın ve bunları içerik kutunuzun Metin sekmesine ekleyin:

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

Durum

Geçiş Modülünün durumunun açık mı yoksa kapalı mı olmasını istediğinizi seçebilirsiniz. Öğreticinin geri kalanında yaptığınız tüm değişiklikleri görebilmek için, tüm farklı tasarım ayarlarını değiştirmeyi bitirene kadar durumu 'açık' tutmanızı öneririm.

Arka plan rengi

Geçiş Modülünün arka plan ayarlarına giderek devam edin ve beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Simge Ayarları

Sonraki tasarım sekmesinde simge rengini değiştirin.

• Simge Rengi: #000000

Ayarları Aç/Kapat

Ve geçiş ayarlarında Açık Geçiş Arka Plan Rengini de değiştirin.

• Arka Plan Rengini Aç/Kapat: rgba(255,255,255,0)

Başlık Metni Ayarları

Ardından, başlık metni ayarlarında bazı değişiklikler yapın.

• Başlık Yazı Tipi: Didact Gothic
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 3.5vw (Masaüstü), 60px (Tablet), 40px (Telefon)

Gövde Metni Ayarları

Gövde metni ayarlarını da değiştirin.

• Gövde Yazı Tipi: Didakt Gotik
• Gövde Metni Hizalama: Sol
• Gövde Metni Rengi: #000000
• Gövde Metni Boyutu: 18px
• Gövde Çizgisi Yüksekliği: 1.5em

Klon Geçiş Modülü İki Kez ve Kalan İki Sütuna Yerleştirin

1. sütundaki Geçiş Modülünü değiştirmeyi bitirdikten sonra, devam edip iki kez klonlayabilir ve kopyaları kalan iki sütuna yerleştirebilirsiniz.

Kopyayı Değiştir

Kopyaların tüm kopyasını değiştirdiğinizden emin olun ve işiniz bitti!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarında oluşturduğumuz tasarımın sonucuna son bir göz atalım.

Son düşünceler

Bu eğitimde, web sitenizde fiyatlandırma planlarını sergilemek için Divi'nin Geçiş Modülünü kullanma konusunda size yaratıcı bir yaklaşım gösterdik. Bu, ziyaretçilerle etkileşim kurmanın ve tasarım stilinizi yükseltmenin harika bir yoludur. Birini açık ve diğer iki seçeneği kapalı tutarak bölümünüzde belirli bir fiyatlandırma planını vurgulamayı kolaylaştırır. Bu yaklaşımı, oluşturduğunuz her türlü web sitesi için kullanabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!