Divi ile Otomatik Fiyat Hesaplamaları Nasıl Oluşturulur (JQuery Kullanarak)

Yayınlanan: 2019-10-03

Bazı insanlar hizmet fiyatlarını web sitelerinde belirtmekte tereddüt ediyor. Ancak bazı ziyaretçileri korkutabileceği kadar, aynı zamanda güven ve uzmanlık da gösterir. Fiyatlandırmanızda şeffaf olmak, birlikte çalışabileceğiniz bir bütçeyle doğru müşterileri çekmenize yardımcı olur. Bugünkü eğitimde, bir sonraki Divi projeniz için kullanabileceğiniz çarpıcı bir fiyat hesaplama tasarımının nasıl oluşturulacağını göstereceğiz. JSON dosyasını da ü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ü

fiyat hesaplamaları

Mobil

fiyat hesaplamaları

Fiyat Hesaplama Düzenini ÜCRETSİZ İndirin

Ücretsiz fiyat hesaplama düzenine el 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.

Dosyaları İndirin

Ü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!

JQuery kodunu da web sitenize eklemeyi unutmayın! Kodu bu eğitimin sonunda bulabilirsiniz.

Yeniden Yaratmaya Başlayalım!

1. Bölüm Ekle

Arka plan rengi

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

Arka Plan Rengi: #f8c5ac

fiyat hesaplamaları

Alt Bölücü

Sonraki bölüme bir alt ayırıcı ekleyin.

Bölücü Stili: Listede Bul
Bölücü Çevirme: Dikey

fiyat hesaplamaları

aralık

Biraz alt dolgu da ekleyin.

Alt Dolgu: 130px

fiyat hesaplamaları

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

fiyat hesaplamaları

Sütuna Metin Modülü #1 Ekle

H2 İçeriği Ekle

Sütununuza ilk Metin Modülünü ekleyin ve seçtiğiniz bazı H2 içeriğini ekleyin.

fiyat hesaplamaları

H2 Metin Ayarları

Tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:

Başlık 2 Yazı Tipi: Montserrat
Başlık 2 Yazı Ağırlığı: Yarı Kalın
Başlık 2 Metin Hizalama: Orta
Başlık 2 Metin Rengi: #0f1c4d
Başlık 2 Metin Boyutu: 57px (Masaüstü), 35px (Tablet), 30px (Telefon)
Başlık 2 Harf Aralığı: -2px

fiyat hesaplamaları

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin ve istediğiniz içeriği ekleyin.

fiyat hesaplamaları

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

Metin Yazı Tipi: Montserrat
Metin Hizalama: Merkez
Metin Rengi: #0f1c4d
Metin Boyutu: 22px (Masaüstü), 18px (Tablet), 16px (Telefon)

fiyat hesaplamaları

Sütuna Ayırıcı Modül Ekle

görünürlük

Bu sütunda ihtiyaç duyulan sonraki ve son modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

fiyat hesaplamaları

Hat

Tasarım sekmesine gidin ve çizgi rengini beyaz olarak değiştirin.

Çizgi Rengi: #ffffff

fiyat hesaplamaları

boyutlandırma

Bölücünün genişliğini de değiştirin.

Genişlik: %12

fiyat hesaplamaları

2. Bölüm Ekle

Arka plan rengi

Tasarımın bir sonraki bölümüne! Yeni bir bölüm ekleyin ve arka plan rengini değiştirin.

Arka Plan Rengi: #0f1c4d

fiyat hesaplamaları

aralık

Daha sonra bazı özel üst ve alt dolgu ekleyin.

Üst Dolgu: 70px
Alt Dolgu: 130px

fiyat hesaplamaları

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:

fiyat hesaplamaları

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve daha küçük ekran boyutlarında genişliği değiştirin.

Genişlik: %80 (Masaüstü), %90 (Tablet ve Telefon)

fiyat hesaplamaları

aralık

Sonraki bazı özel alt dolgu ekleyin.

Alt Dolgu: 70px (Masaüstü), 20px (Tablet), 0px (Telefon)

fiyat hesaplamaları

Sınır

Satıra da bir alt kenarlık ekleyin.

Alt Kenar Genişliği: 1px
Alt Kenar Rengi: #ffffff

fiyat hesaplamaları

Görüntülemek

Son olarak, tüm sütunların yan yana görüntülendiğinden emin olmak için satırın ana öğesine bir satır CSS kodu ekleyeceğiz.

display: flex;

fiyat hesaplamaları

Sütun 1'e Blurb Modülü Ekle

Simge Seç

Modül eklemeye başlama zamanı! Sütun 1'e bir Blurb Modülü ekleyin ve istediğiniz bir simgeyi seçin.

fiyat hesaplamaları

Varsayılan Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarını buna göre değiştirin:

Simge Rengi: #f7f7f7
Daire Simgesi: Evet
Daire Simgesi: #f8c5ac
Simge Yerleşimi: Üst
Simge Yazı Tipi Boyutunu Kullan: Evet
Simge Yazı Tipi Boyutu: 96px (Masaüstü), 20px (Tablet ve Telefon)

fiyat hesaplamaları

Fareyle Üzerine Gelme Simgesi Ayarları

Fareyle üzerine gelindiğinde simge rengini değiştirin.

Simge Rengi: #000000

fiyat hesaplamaları

CSS kimliği

Bir CSS kimliği de ekleyin.

CSS Kimliği: fiyat-ürün-tıklama-1

fiyat hesaplamaları

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

H3 İçeriği Ekle

İkinci sütuna geç! İlk Metin Modülünü ekleyin ve biraz H3 içeriği ekleyin.

fiyat hesaplamaları

H3 Metin Ayarları

Tasarım sekmesine gidin ve H3 metin ayarlarını buna göre değiştirin:

Başlık 3 Yazı Tipi: Montserrat
Başlık 3 Yazı Ağırlığı: Yarı Kalın
Başlık 3 Metin Rengi: #f8c5ac
Başlık 3 Metin Boyutu: 40px (Masaüstü), 25px (Tablet), 18px (Telefon)
Başlık 3 Harf Aralığı: -1px
Başlık 3 Çizgi Yüksekliği: 1.1em

fiyat hesaplamaları

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

İçerik Ekle

2. sütuna seçtiğiniz bir içerikle başka bir Metin Modülü ekleyin.

fiyat hesaplamaları

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını değiştirin.

Metin Yazı Tipi: Montserrat
Metin Yazı Tipi Ağırlığı: Ultra Hafif
Metin Rengi: #f8c5ac
Metin Boyutu: 23px (Masaüstü), 18px (Tablet), 14px (Telefon)
Metin Harf Aralığı: -1px
Metin Satır Yüksekliği: 1.1em

fiyat hesaplamaları

Sütun 3'e Metin Modülü Ekle

İçerik Kutusuna Fiyat Ekle

Üçüncü sütuna! Bir Metin Modülü ekleyin ve fiyatı içerik kutusuna yerleştirin.

fiyat hesaplamaları

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ığı: Ağır
Metin Hizalama: Merkez
Metin Rengi: #ffffff
Metin Boyutu: 40px (Masaüstü), 25px (Tablet), 18px (Telefon)

fiyat hesaplamaları

CSS Kimliği ve Sınıfı

Gelişmiş sekmeye geçin ve bir CSS Kimliği ve CSS sınıfı ekleyin.

CSS kimliği: fiyat-1
CSS Sınıfı: önce fiyat gizle

fiyat hesaplamaları

Satırı Gerektiği Kadar Kez Klonlayın

Satırı ve içindeki tüm modülleri tamamladığınızda, satırı istediğiniz kadar klonlayabilirsiniz.

fiyat hesaplamaları

Yinelenen Bulanıklık Modülü CSS Kimliklerini Değiştir

Her yeni Blurb Modülünün CSS kimliğini uygun şekilde değiştirin:

Blurb Modülü 1: fiyat-ürün-tıklama-1
Blurb Modülü 2: fiyat-ürün-tıklama-2
Blurb Modülü 3: fiyat-ürün-tıklama-3
…

fiyat hesaplamaları

Yinelenen Metin Modülü Fiyatını ve CSS Kimliklerini Değiştirin

Her satırın üçüncü sütunundaki fiyat Metin Modülü için de aynısını yapın.

Fiyat 1: fiyat-1
Fiyat 2: fiyat-2
Fiyat 3: fiyat-3
…

fiyat hesaplamaları

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölümünüze başka bir satır ekleyin:

fiyat hesaplamaları

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve daha küçük ekran boyutlarında genişliği değiştirin.

Genişlik: %80 (Masaüstü), %90 (Tablet ve Telefon)

fiyat hesaplamaları

Görüntülemek

Daha küçük ekran boyutlarında tüm sütunların yan yana görünmesini sağlamak için satırın ana öğesine de tek bir CSS kodu satırı ekleyeceğiz.

display: flex;

fiyat hesaplamaları

Sütun 1'e Kod Modülü Ekle

CSS Kodu Ekle

Satırın ilk sütununa bir Kod Modülü ekleyerek devam edin ve aşağıdaki CSS kodu satırlarını ekleyin:

<style>
.price-hide-first {
display: none;
}

.price-item-active .et-pb-icon {
color: black !important;
}
</style>

fiyat hesaplamaları

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

İçerik Ekle

İkinci sütuna geçin ve seçtiğiniz içerikle yeni bir Metin Modülü ekleyin.

fiyat hesaplamaları

Metin Ayarları

Metin ayarlarını buna göre değiştirin:

Metin Yazı Tipi: Montserrat
Metin Yazı Tipi Ağırlığı: Ultra Hafif
Metin Rengi: #f8c5ac
Metin Boyutu: 23px (Masaüstü), 18px (Tablet), 14px (Telefon)
Metin Harf Aralığı: -1px
Metin Satır Yüksekliği: 1.1em

fiyat hesaplamaları

Sütun 3'e Boş Metin Modülü Ekle

İçerik Kutusunu Boş Bırak

Bir sonraki ve son sütuna. Bir Metin Modülü ekleyin ve içerik kutusunun boş kaldığından emin olun.

fiyat hesaplamaları

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

Metin Yazı Tipi: Montserrat
Metin Yazı Tipi Ağırlığı: Ağır
Metin Hizalama: Merkez
Metin Rengi: #ffffff
Metin Boyutu: 40px (Masaüstü), 25px (Tablet), 18px (Telefon)

fiyat hesaplamaları

CSS kimliği

Bir CSS kimliği ekleyerek modülün ayarlarını tamamlayın.

CSS kimliği: toplam fiyat-cal

fiyat hesaplamaları

Divi Tema Seçeneklerine JQuery Ekleme

Entegrasyon Sekmesine Git

Artık tasarımı tamamladığımıza göre, bazı JQuery kodlarını kullanarak işlevselliği çalıştırmanın zamanı geldi. Fiyat hesaplamalarını sadece bir sayfaya eklemek isterseniz kodu bir Kod Modülüne yerleştirebilirsiniz. Ancak bunu birden fazla sayfada kullanıyorsanız Divi Tema Seçeneklerinize gidin ve entegrasyon sekmesini seçin.

fiyat hesaplamaları

Başlık Etiketlerine JQuery Kodu Ekleme

Aşağıdaki JQuery kod satırlarını komut dosyası etiketleri arasına ekleyin ve işiniz bitti:

jQuery(function($){
  $('[id*="price-item-click"]').click(function() {
    var selector = $(this).attr('id').replace('-item-click', '');
    var $price   = $('#' + selector);
    var sum = 0;
    $price.toggle();
    $price.toggleClass('price-active');
    $(this).toggleClass('price-item-active');
    $('.price-active').each(function(){
    sum += parseFloat($(this).text().replace(/\D/g,''));
    });
    if (sum > 0){
    $("#total-price-cal").show();
        $("#total-price-cal").text("$" + sum + "k");
    }
    else {
    $("#total-price-cal").hide();
    }
  });
});

fiyat hesaplamaları

Ö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ü

fiyat hesaplamaları

Mobil

fiyat hesaplamaları

Son düşünceler

Bu yazıda, Divi ile nasıl çarpıcı bir fiyat hesaplama tasarımı oluşturabileceğinizi gösterdik. Bu, ziyaretçilerinize hizmetlerinizin hangi fiyattan başladığını göstermenin harika bir yoludur ve doğru kitleyi çekmenize yardımcı olur. Bu yaklaşımı bir sonraki Divi projeniz için oluşturacağınız herhangi bir fiyat hesaplama tasarımında kullanabilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.

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.