Bazı insanlar hizmetlerinin fiyatlarını web sitelerinde göstermek konusunda isteksizdirler. Site Web. Ama bazılarını ne kadar korkutsa da ziyaretçi, ayrıca güven ve uzmanlığı gösterir. Fiyatlandırmanızdaki şeffaflık, çalışabileceğiniz bir bütçeyle doğru müşterileri çekmenize olanak tanır. Bugünün öğreticisinde, bir sonraki Divi projeniz için kullanabileceğiniz çarpıcı bir fiyat hesaplama tasarımını nasıl oluşturacağınızı göstereceğiz. JSON dosyasını ücretsiz olarak da indirebilirsiniz!
Gidelim.
anket
Eğiticiye girmeden önce, farklı ekran boyutlarına nasıl baktığımıza hızlıca göz atalım.
Rekreasyona başlayalım!
Bölüm 1 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
Alt bölücü
Bir sonraki bölüme daha düşük bir ayırıcı ekleyin.
- Ayırma stili: Listede arama
- Bölücü çevirin: dikey
aralık
Ayrıca biraz dolgu yapın.
- Alt Dolgu: 130px
Yeni bir satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:
Sütuna # 1 metin modülünü ekleyin
H2 içeriği ekle
İlk metin modülünü sütununuza ekleyin ve istediğiniz H2 içeriğini ekleyin.
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ı Tipi: Yarı Kalın
- Başlık 2 Metin hizalaması: orta
- Başlık 2 Metin rengi: # 0f1c4d
- Başlık 2 Metin Boyutu: 57 piksel (masaüstü), 35 piksel (tablet), 30 piksel (telefon)
- Başlık 2 Harf aralığı: -2px
Sütuna # 2 metin modülünü 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 geçin ve metin ayarlarını buna göre değiştirin:
- Yazı tipi metni: Montserrat
- Metnin hizalanması: orta
- Metin rengi: #0f1c4d
- Metin boyutu: 22px (masaüstü), 18px (tablet), 16px (telefon)
Sütuna bir bölme modülü ekleme
görünürlük
Bu sütunda ihtiyaç duyulan sonraki ve son modül bir bölme modülüdür. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.
- Bölücüyü Göster: Evet
Hat
Tasarım sekmesine gidin ve çizgi rengini beyaz olarak değiştirin.
- Çizgi rengi: #ffffff
boyutlandırma
Ayrıca bölücü genişliğini de değiştirin.
- Genişlik:% 12
Bölüm 2 ekle
Arka plan rengi
Çizime geçelim! Yeni bir bölüm ekleyin ve arka plan rengini değiştirin.
- Arka plan rengi: #0f1c4d
aralık
Sonra bazı özel dolgu yukarı ve aşağı ekleyin.
- En iyi dolgu malzemesi: 70px
- Alt Dolgu: 130px
Satır ekle 1
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır eklemeye devam edin:
boyutlandırma
Henüz herhangi bir mod eklemeden, satır ayarlarını açın ve genişliği daha küçük ekran boyutlarına değiştirin.
- Genişlik:% 80 (masaüstü),% 90 (tablet ve telefon)
aralık
Sonra bir miktar özel doldurma ekleyin.
- Altta Döşeme: 70px (masaüstü), 20px (tablet), 0px (telefon)
Sınır
Ayrıca çizgiye alt kenarlık ekleyin.
- Alt kenarlığın genişliği: 1px
- Alt kenarlık rengi: #ffffff
ekran
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.
ekran: esnek;
Blurb modülünü 1 sütununa ekleyin
Simgeyi seçin
Modül eklemeye başlamanın zamanı geldi! 1 sütununa bir Blurb modülü ekleyin ve istediğiniz simgeyi seçin.
Varsayılan simge ayarları
Tasarım sekmesine geçin ve simge ayarlarını buna göre değiştirin:
- Simge Rengi: # f7f7f7
- Daire simgesi: evet
- Daire simgesi: # f8c5ac
- Konumlandırma simgeleri: Üst
- Simge Yazı Tipi Boyutunu Kullan: Evet
- Simge Yazı Tipi Boyutu: 96px (Masaüstü), 20px (Tablet ve Telefon)
Simge ayarlarının üzerine gelin
Fareyle üzerine gelme simgesinin rengini değiştirin.
- Simge Rengi: # 000000
CSS tanımlayıcısı
Ayrıca bir CSS tanımlayıcısı ekleyin.
- CSS tanımlayıcısı: price-item-click-1
1 metin modülünü 2 sütununa ekle
H3 içeriği ekle
İkinci sütunda! İlk metin modülünü ekleyin ve H3 içeriğini ekleyin.
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ı Tipleri: Yarı Kalın
- Başlık 3 Metin rengi: # f8c5ac
- Başlık 3 Metin Boyutu: 40 piksel (masaüstü), 25 piksel (tablet), 18 piksel (telefon)
- Başlık 3 harf aralığı: -1px
- Başlık 3 Satır Yüksekliği: 1.1em
2 metin modülünü 2 sütununa ekle
İçerik ekle
2 sütununa, seçtiğiniz içeriği içeren başka bir metin modülü ekleyin.
Metin ayarları
Tasarım sekmesine gidin ve metin ayarlarını değiştirin.
- Yazı tipi metni: Montserrat
- Metnin yazı tipi ağırlığı: Ultra hafif
- Metin rengi: #f8c5ac
- Metin boyutu: 23px (masaüstü), 18px (tablet), 14px (telefon)
- Harf aralığı: -1px
- Metin satırının yüksekliği: 1.1em
3 sütununa bir metin modülü ekleyin
İçeriğe bir fiyat ekleyin
Üçüncü sütuna gidelim! Bir metin modülü ekleyin ve fiyatı içerik alanına yerleştirin.
Metin ayarları
Tasarım sekmesine geçin ve metin ayarlarını buna göre değiştirin:
- Yazı tipi metni: Montserrat
- Metnin yazı tipi ağırlığı: Ağır
- Metnin hizalanması: orta
- Metin rengi: #ffffff
- Metin boyutu: 40px (masaüstü), 25px (tablet), 18px (telefon)
Tanımlayıcı ve CSS sınıfı
Gelişmiş sekmeye geçin ve bir CSS Kimliği ve CSS sınıfı ekleyin.
- CSS tanımlayıcısı: price-1
- CSS sınıfı: önce fiyat gizle
Satırı gerektiği kadar çoğalt
Çizgiyi ve içerdiği tüm modülleri tamamladığınızda, istediğiniz kadar çoğaltabilirsiniz.
Blurb modülü CSS kimliklerini değiştir
Her yeni Blurb modülünün CSS kimliğini uygun şekilde değiştirin:
- Blurb 1 Modülü: fiyat-ürün-tıklayın-1
- Blurb Modülü 2: fiyat-ürün-tıklama-2
- Blurb Modülü 3: fiyat-ürün-tıklama-3
- ...
Yinelenen metin modülünün ve CSS kimliklerinin fiyatını değiştirme
Her bir satırın üçüncü sütununda bulunan fiyat metin modülü için de aynısını yapın.
- 1 fiyatı: 1 fiyatı
- 2 fiyatı: 2 fiyatı
- 3 fiyatı: 3 fiyatı
- ...
Yeni bir 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:
boyutlandırma
Henüz herhangi bir mod eklemeden, satır ayarlarını açın ve genişliği daha küçük ekran boyutlarına değiştirin.
- Genişlik:% 80 (masaüstü),% 90 (tablet ve telefon)
ekran
Tüm sütunların daha küçük ekran boyutlarında yan yana görünmesini sağlamak için, ana satır öğesine tek bir CSS kodu satırı da ekleyeceğiz.
ekran: esnek;
1 sütununa bir kod modülü ekleyin
CSS kodunu girin
Satırın ilk sütununa bir kod modülü ekleyerek ve aşağıdaki CSS kodu satırlarını ekleyerek devam edin:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
2 sütununa bir metin modülü ekleyin
İçerik ekle
İkinci sütuna gidin ve seçtiğiniz içeriğe sahip yeni bir metin modülü ekleyin.
Metin ayarları
Metin ayarlarını uygun şekilde değiştirin:
- Yazı tipi metni: Montserrat
- Metnin yazı tipi ağırlığı: Ultra hafif
- Metin rengi: # f8c5ac
- Metin boyutu: 23px (masaüstü), 18px (tablet), 14px (telefon)
- Harf aralığı: -1px
- Metin satırının yüksekliği: 1.1em
3 sütununa boş bir metin modülü ekleyin
İçeriği boş bırakın
Son sütuna gidelim. Bir metin modülü ekleyin ve içerik alanının boş kaldığından emin olun.
Metin ayarları
Tasarım sekmesine gidin ve metin ayarlarını aşağıdaki şekilde değiştirin:
- Yazı tipi metni: Montserrat
- Metnin yazı tipi ağırlığı: Ağır
- Metnin hizalanması: orta
- Metin rengi: #ffffff
- Metin boyutu: 40px (masaüstü), 25px (tablet), 18px (telefon)
CSS tanımlayıcısı
Bir CSS tanımlayıcısı ekleyerek modül parametrelerini tamamlayın.
- CSS tanımlayıcısı: toplam fiyat
Divi'ye JQuery tema seçeneklerini ekleyin
Entegrasyon sekmesine gidin
Artık tasarım tamamlandığında, onu bazı JQuery kodlarıyla çalıştırmanın zamanı geldi. Fiyat hesaplamalarını bir sayfaya eklemek isterseniz kodu bir kod modülüne yerleştirebilirsiniz. Ancak, birden fazla sayfada kullanıyorsanız, seçeneğe gidin. Divi Teması ve Entegrasyon sekmesini seçin.
Baş Etiketlerine JQuery kodu ekleyin
JQuery kodunun aşağıdaki satırlarını ekleyin script etiketleri arasında ve bitti:
jQuery (işlev ($) {$ ('[id * = "fiyat-öğe-tıklama"]'). tıklayın (işlev () {var seçici = $ (bu) .attr ('id'). değiştirin ('- öğe-tıklama ',' '); var $ price = $ (' # '+ seçici); var sum = 0; $ price.toggle (); $ price.toggleClass (' fiyat-etkin '); $ (bu) .toggleClass ('price-item-active'); $ ('. price-active'). her (function () {sum + = parseFloat ($ (this) .text (). replace (/ D / g, ' '));}); if (toplam> 0) {$ ("# toplam fiyat-cal"). show (); $ ("# toplam-fiyat-cal"). metin ("$" + toplam + "k");} başka {$ ("# toplam-fiyat-kal"). hide ();}});});
anket
Artık tüm adımlar atıldığına göre, farklı ekran boyutlarında neler olduğuna son bir göz atalım.
Son düşünceler
Bu yazıda size Divi ile olağanüstü bir fiyat hesaplama şablonunun nasıl oluşturulacağını gösterdik. göstermek için harika bir yol ziyaretçi hizmetleriniz hangi fiyattan başlar ve doğru kitleyi çekmek için. Bir sonraki Divi projeniz için oluşturacağınız herhangi bir fiyat hesaplaması için bu yaklaşımı kullanabilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun.
