Divi için ÜCRETSİZ Aylık/Yıllık Fiyatlandırma Geçiş Tasarımını İndirin
Yayınlanan: 2019-10-28Web sitenizde fiyatlandırma planlarını sergilemeye karar verdiğinizde, buna yaklaşmanın birkaç yolu vardır. En popüler yaklaşımlardan biri, kullanıcıların faturalandırmayı seçtikleri yola göre farklı fiyatlandırma planları arasında kolayca gezinmelerine olanak tanıyan aylık/yıllık fiyatlandırma geçişi oluşturmaktır. Bugünkü eğitimde, Divi ile fiyatlandırma geçişini nasıl çalıştıracağınızı göstereceğiz. Sıfırdan çarpıcı bir örnek oluşturacağız ve siz de JSON dosyasını ücretsiz olarak indirebileceksiniz!
Hadi hadi bakalım.
Ön izleme
Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.
masaüstü
Mobil
Aylık/Yıllık Fiyatlandırma Geçiş Tasarımını ÜCRETSİZ İndirin
Ücretsiz aylık/yıllık fiyatlandırma geçiş tasarımına sahip olmak için önce aşağıdaki düğmeyi kullanarak onu 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.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Yeniden Yaratmaya Başlayalım!
1. Bölüm Ekle
Arka plan rengi
Üzerinde çalıştığınız sayfaya bir ilk bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve bir arka plan rengi ekleyin.
- Arka Plan Rengi: #ffad72
Alt Bölücü
Tasarım sekmesine gidin ve ardından bir alt ayırıcı ekleyin.
- Bölücü Stili: Listede Bul
- Bölücü Yüksekliği: 10vw
aralık
Bazı özel üst ve alt dolguları da ekleyin.
- Üst Dolgu: 5vw
- Alt Dolgu: 10vw
CSS kimliği
Ve bölüme bir CSS kimliği ekleyin.
- CSS Kimliği: geçiş bölümü
Yeni Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak bölüme bir satır ekleyerek devam edin:
boyutlandırma
Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin.
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
- Genişlik: 30vw (Masaüstü), 45vw (Tablet), 50vw (Telefon)
- Maksimum Genişlik: %100
aralık
Bir sonraki varsayılan üst ve alt dolgudan kurtulun.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
Sınır
Ve sınır ayarlarını da değiştirin.
- Yuvarlatılmış Köşeler: 50vw (Tüm Köşeler)
- Kenar Genişliği: 1px
- Kenar Rengi: #e8e8e8
Görüntülemek
Her iki sütunun da daha küçük ekran boyutlarında yan yana görünmesini sağlamak için satırın ana öğesine tek bir CSS kodu satırı ekleyeceğiz.
display: flex;
Sütun 1'e Metin Modülü Ekle
İçerik Ekle
Modül eklemeye başlama zamanı! 1. sütunda ihtiyacımız olan tek modül bir Metin Modülüdür. Seçtiğiniz bazı içeriği girin.
Metin Ayarları
Tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:
- Metin Yazı Tipi: Montserrat
- Metin Boyutu: 1vw (Masaüstü), 1.5vw (Tablet), 2vw (Telefon)
- Metin Hizalama: Merkez
- Metin Rengi: Açık
aralık
Farklı ekran boyutlarında da üst ve alt dolgu değerlerini değiştirin.
- Üst Dolgu: 2vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
- Alt Dolgu: 2vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
CSS Kimliği ve Sınıfı
Ve metin modülüne bir CSS kimliği ve sınıfı atayın.
- CSS Kimliği: fiyatlandırma planı öğesi-1
- CSS Sınıfı: fiyatlandırma-ürün-imleç
Metin Modülünü Klonla ve Çoğaltmayı Sütun 2'ye Yerleştir
1. sütundaki Metin Modülünü tamamladığınızda, onu bir kez kopyalayabilir ve kopyayı 2. sütuna yerleştirebilirsiniz.
İçeriği Değiştir
İçeriği değiştirdiğinizden emin olun.
CSS kimliğini değiştir
Ve farklı bir CSS kimliği kullanın.
- CSS Kimliği: fiyatlandırma planı öğesi-2
2. Bölüm Ekle
Arka plan rengi
İkinci bölüme geçiyoruz. Aşağıdaki arka plan rengini ekleyin:
- Arka Plan Rengi: #6b63dd
aralık
Ardından, bölüm aralığı ayarlarına gidin ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyin.
- Üst Dolgu: 7vw
- Alt Dolgu: 15vw
- Sol Dolgu: 21vw (Masaüstü), 10vw (Tablet ve Telefon)
- Sağ Dolgu: 21vw (Masaüstü), 10vw (Tablet ve Telefon)
CSS kimliği
Bölüme bir CSS kimliği de ekleyin.
- CSS Kimliği: fiyatlandırma-1
1. Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:
boyutlandırma
Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
- Sütun Yüksekliklerini Eşitle: Evet
- Genişlik: %100
- Maksimum Genişlik: %100
aralık
Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
Sınır
Ardından, boşluk ayarlarına gidin ve aşağıdaki kenarlık ayarlarını uygulayın:
- Sağ Kenar Genişliği: 1px
- Sol Kenar Genişliği: 1px
- Üst Kenar Genişliği: 0px
- Alt Kenar Genişliği: 0px
- Kenar Rengi: rgba(255,255,255,0)
Görüntülemek
Satırın ana öğesine tek bir CSS kodu satırı ekleyerek, daha küçük ekran boyutlarında sütunların yan yana göründüğünden emin olun.
display: flex;
Sütun 2 Ayarları
aralık
Genel satır ayarlarını tamamladıktan sonra, 2. sütun ayarlarını açın ve bazı özel üst ve alt dolgular ekleyin.
- Üst Dolgu: 1vw
- Alt Dolgu: 4vw
Sınır
2. sütunda da bir kenarlık kullanın.
- Sağ Kenar Genişliği: 1px
- Sağ Kenar Rengi: #ffffff
Sütun 3 Ayarları
aralık
Üçüncü sütunun ayarlarına geçin ve bazı özel dolgu değerleri ekleyin.
- Üst Dolgu: 1vw
- Alt Dolgu: 4vw
Sütun 1'e Bölücü Ekle
görünürlük
Modül eklemeye başlama zamanı! Sütun 1'de ihtiyacımız olan ilk modül ve tek modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğini devre dışı bıraktığınızdan emin olun. Bu modüle yalnızca tasarımın geri kalanının sağlam kaldığından emin olmak için ihtiyacımız var.
- Bölücüyü Göster: Hayır
Metin Modülü #1'i Sütun 2'ye ekleyin
H3 İçeriği Ekle
2. sütuna geçin ve seçtiğiniz bazı H3 içeriğine sahip bir Metin Modülü ekleyin.
H3 Metin Ayarları
H3 metin ayarlarını aşağıdaki gibi değiştirin:
- Başlık 3 Yazı Tipi: Montserrat
- Başlık 3 Metin Hizalama: Merkez
- Başlık 3 Metin Rengi: #ffffff
- Başlık 3 Metin Boyutu: 2vw (Masaüstü), 3vw (Tablet), 3.5vw (Telefon)
- Başlık 3 Harf Aralığı: -1px
Metin Modülü #2'yi Sütun 2'ye ekleyin
İçerik Ekle
Bir öncekinin hemen altına başka bir Metin Modülü ekleyin ve istediğiniz içeriği ekleyin.
Metin Ayarları
Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:
- Metin Yazı Tipi: Montserrat
- Metin Yazı Tipi Ağırlığı: Ultra Hafif
- Metin Rengi: #ffffff
- Metin Boyutu: 2vw (Masaüstü), 3vw (Tablet), 3.5vw (Telefon)
- Metin Satırı Yüksekliği: 1em
- Metin Hizalama: Merkez
aralık
Bazı özel üst kenar boşluğu da ekleyin.
- Üst Marj: 0.5vw
Her İki Modülü de Klonla ve Kopyaları Sütun 3'e Yerleştir
2. sütundaki modülleri tamamladıktan sonra, ikisini de klonlayabilir ve kopyaları 3. sütuna yerleştirebilirsiniz.
İçeriği Değiştir
Her kopyanın içeriğini değiştirdiğinizden emin olun.
2. Satır Ekle
Sütun Yapısı
2. bölümdeki ikinci sıraya! Aşağıdaki sütun yapısını seçin:
boyutlandırma
Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
- Sütun Yüksekliklerini Eşitle: Evet
- Genişlik: %100
- Maksimum Genişlik: %100
aralık
Sonraki varsayılan üst ve alt dolguyu kaldırın.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
Sınır
Ve bir sınır uygulayın.
- Üst Kenar Genişliği: 0px
- Sağ Kenar Genişliği: 1px
- Alt Kenar Genişliği: 1px
- Sol Kenar Genişliği: 1px
- Kenar Rengi: #8882dd
Görüntülemek
Satırın ana öğesine tek bir CSS kodu satırı ekleyerek, daha küçük ekran boyutlarında sütunların yan yana göründüğünden emin olun.
display: flex;
Sütun 1 Ayarları
aralık
Sütun 1 ayarlarını açarak devam edin ve farklı ekran boyutlarına bazı özel dolgu değerleri uygulayın.
- Üst Dolgu: 3vw (Masaüstü), 5vw (Tablet ve Telefon)
- Alt Dolgu: 3vw (Masaüstü), 5vw (Tablet ve Telefon)
Sınır
Sütuna da bir sağ kenarlık ekleyin.
- Sağ Kenar Genişliği: 1px
- Sağ Kenar Rengi: #8882dd
Sütun 2 Ayarları
aralık
İkinci sütuna geçin ve boşluk ayarlarını değiştirin.
- Üst Dolgu: 3vw (Masaüstü), 5vw (Tablet ve Telefon)
- Alt Dolgu: 3vw (Masaüstü), 5vw (Tablet ve Telefon)
Sınır
Sonraki bir sağ kenarlık ekleyin.
- Sağ Kenar Genişliği: 1px
- Sağ Kenar Rengi: #ffffff
Sütun 3 Ayarları
aralık
Ardından, sütun 3 ayarlarını açın ve farklı ekran boyutlarına bazı özel üst ve alt dolgu değerleri ekleyin.
- Üst Dolgu: 3vw (Masaüstü), 5vw (Tablet ve Telefon)
- Alt Dolgu: 3vw (Masaüstü), 5vw (Tablet ve Telefon)
Sütun 1'e Metin Modülü Ekle
İçerik Ekle
Satır ve sütun ayarlarını tamamladıktan sonra modül eklemeye başlamanın zamanı geldi. 1. sütuna bir Metin Modülü ekleyin ve istediğiniz içeriği ekleyin.
Metin Ayarları
Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:
- Metin Yazı Tipi: Montserrat
- Metin Rengi: #ffffff
- Metin Boyutu: 1vw (Masaüstü), 1.5vw (Tablet), 2vw (Telefon)
- Metin Hizalama: Merkez
Sütun 2'ye Metin Modülü Ekle
İçerik Kutusuna Sembol Ekle
İkinci sütunda, başka bir Metin Modülüne ihtiyacımız olacak. İçerik kutusuna '✓' sembolünü ekleyin.
Metin Ayarları
Tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:
- Metin Rengi: #ffad72
- Metin Boyutu: 2vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
- Metin Satırı Yüksekliği: 1em
- Metin Hizalama: Merkez
Metin Modülünü Klonla ve Çoğaltmayı Sütun 3'e Yerleştir
2. sütundaki Metin Modülünü tamamladıktan sonra, onu klonlayabilir ve kopyayı 3. sütuna yerleştirebilirsiniz.
Alternatif Sembol ve Metin Rengi
Sergilediğiniz özelliğe bağlı olarak, sembolü '✗' olarak değiştirmek isteyebilirsiniz. Farklı bir metin rengi de kullanın.
- Metin Rengi: #ffffff
Satırı İstediğiniz Kadar Kez Klonlayın
Tüm satırı tamamladıktan sonra, göstermek istediğiniz özellik sayısına bağlı olarak, onu istediğiniz kadar klonlayabilirsiniz.
3. Satır Ekle
Sütun Yapısı
İkinci bölüme ekleyeceğimiz son satır aşağıdaki sütun yapısını içerir:
boyutlandırma
Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
- Sütun Yüksekliklerini Eşitle: Evet
- Genişlik: %100
- Maksimum Genişlik: %100
aralık
Sonraki varsayılan üst ve alt dolguyu kaldırın.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
Sınır
Kenarlık da ekleyin.
- Üst Kenar Genişliği: 0px
- Alt Kenar Genişliği: 0px
- Sağ Kenar Genişliği: 1px
- Sol Kenar Genişliği: 1px
- Kenar Rengi: rgba(255,255,255,0)
Görüntülemek
Satırın ana öğesine tek bir CSS kodu satırı ekleyerek, daha küçük ekran boyutlarında sütunların yan yana göründüğünden emin olun.
display: flex;
Sütun 2 ve 3 Ayarları
aralık
Hem 2. hem de 3. sütuna bir miktar üst kenar boşluğu ekleyerek devam edin.
- Üst Dolgu: 4vw
Sütun 2 Kenarlık
2. sütuna da bir sağ kenarlık ekleyin.
- Sağ Kenar Genişliği: 1px
- Sağ Kenar Rengi: #eaeaea
Klon Bölücü Modülü ve Yeni Satırın 1. Sütundaki Yeri
Bölümün ilk satırında bulabileceğiniz Bölücü Modülü klonlayın ve kopyayı yeni satırınızın ilk sütununa yerleştirin.
Sütun 2'ye Düğme Modülü Ekle
Kopya Ekle
2. sütuna bir Düğme Modülü ekleyerek devam edin ve seçtiğiniz bir kopyayı ekleyin.
hizalama
Tasarım sekmesinde düğme hizalamasını değiştirin.
- Düğme Hizalama: Merkez
Düğme Ayarları
Ve düğme ayarlarını aşağıdaki gibi değiştirin:
- Düğme İçin Özel Stiller Kullan: Evet
- Düğme Metin Boyutu: 1vw (Masaüstü), 1.5vw (Tablet), 2vw (Telefon)
- Düğme Metin Rengi: #ffffff
- Düğme Arka Plan Rengi: #ffad72
- Düğme Kenar Genişliği: 0px
- Düğme Sınır Yarıçapı: 50vw
- Düğme Yazı Tipi: Montserrat
aralık
Düğme Modülüne de bazı özel dolgu değerleri ekleyin.
- Üst Dolgu: 1vw (Masaüstü), 1.5vw (Tablet ve Telefon)
- Alt Dolgu: 1vw (Masaüstü), 1.5vw (Tablet ve Telefon)
- Sol Dolgu: 4vw (Masaüstü), 6vw (Tablet ve Telefon)
- Sağ Dolgu: 4vw (Masaüstü), 6vw (Tablet ve Telefon)
Düğme Modülünü Klonla ve Çoğaltmayı Sütun 3'e Yerleştir
2. sütundaki Düğme Modülünü tamamladıktan sonra, onu klonlayabilir ve kopyayı 3. sütuna yerleştirebilirsiniz.
Klon Bölüm #2
İkinci bölümün tamamını klonlayarak devam edin. Metin modüllerindeki fiyatlandırma değerlerini, yıllık faturalandırma seçenekleriyle eşleştirmek için değiştirdiğinizden emin olun. Bu, birisi "yıllık faturalandırma"yı tıkladığında görünecek olan bölümdür.
CSS Kimliğini Değiştir ve CSS Sınıfı Ekle
Daha sonra bölümün CSS kimliğini değiştirin ve bir CSS sınıfı da ekleyin.
- CSS kimliği: fiyatlandırma-2
- CSS Sınıfı: gizleme bölümü-2
Bölüm 1'in Başına Yeni Tek Sütunlu Satır Ekle
Yapılması gereken tek şey, işlevselliğin çalışması için CSS ve jQuery kodunu eklemek. Bunu yapmak için, 1. bölümün üstüne yeni bir satır ekleyeceğiz.
CSS Kodu ile Kod Modülü #1 Ekle
İlk Kod Modülünü ekleyin ve aşağıdaki CSS kodu satırlarını ekleyin:
<style>
.pricing-item-cursor {
cursor: pointer;
}
.hide-section-2 {
display: none;
}
.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>
JQuery Kodu ile Kod Modülü #2 ekleyin
Bir öncekinin hemen altına başka bir Kod Modülü ekleyin, aşağıdaki jQuery kodunu komut dosyası etiketleri arasına ekleyin ve işiniz bitti!
jQuery(function($){
$('#pricing-plan-item-1').addClass('active-pricing-plan');
$('[id*="pricing-plan-item"]').click(function() {
var selector = $(this).attr('id').replace('-plan-item', '');
var $pricingselect = $('#' + selector);
$('[id*="pricing-"]').not('[id*="pricing-plan"]').hide();
$pricingselect.show()
$('#toggle-section').show();
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');
});
});
Ön izleme
Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.
masaüstü
Mobil
Son düşünceler
Bu gönderide, Divi ile aylık/yıllık fiyatlandırma geçiş tasarımının nasıl oluşturulacağını gösterdik. Bu, fiyatlandırma planlarınıza etkileşim eklemenin harika bir yoludur. Tıklama tekniğini uygulamanın yanı sıra, hangi özelliklerin hangi planlara dahil olduğunu vurgulamanıza olanak tanıyan güzel bir ızgara fiyatlandırma planı da tasarladık. JSON dosyasını da ücretsiz olarak indirebildiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!
Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.