Cara Membuat Perhitungan Harga Otomatis dengan Divi (Menggunakan JQuery)

Beberapa orang ragu-ragu untuk menampilkan harga layanan mereka di situs web mereka. Tapi sebanyak itu bisa menakuti beberapa pengunjung, itu juga menunjukkan kepercayaan diri dan keahlian. Menjadi transparan dengan harga Anda membantu Anda menarik klien yang tepat dengan anggaran yang dapat Anda gunakan. Dalam tutorial hari ini, kami akan menunjukkan kepada Anda cara membuat desain perhitungan harga yang menakjubkan yang dapat Anda gunakan untuk proyek Divi Anda berikutnya. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Perhitungan Harga GRATIS

Untuk mendapatkan tata letak perhitungan harga gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Jangan lupa untuk menambahkan kode JQuery ke situs web Anda juga! Anda dapat menemukan kode di akhir tutorial ini.

Mari Mulai Berkreasi!

Tambahkan Bagian #1

Warna latar belakang

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #f8c5ac

Pembagi Bawah

Tambahkan pembagi bawah ke bagian berikutnya.

• Gaya Pembagi: Temukan di Daftar
• Flip Pembagi: Vertikal

Jarak

Tambahkan beberapa bantalan bawah juga.

• Padding Bawah: 130px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan Modul Teks #1 ke Kolom

Tambahkan Konten H2

Tambahkan Modul Teks pertama ke kolom Anda dan masukkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Pindah ke tab desain dan ubah pengaturan teks H2 yang sesuai:

• Judul 2 Font: Montserrat
• Judul 2 Berat Font: Semi Tebal
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #0f1c4d
• Judul 2 Ukuran Teks: 57px (Desktop), 35px (Tablet), 30px (Ponsel)
• Spasi Judul 2 Huruf: -2px

Tambahkan Modul Teks #2 ke Kolom

Tambah isi

Tambahkan Modul Teks lain tepat di bawah yang sebelumnya dan masukkan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Montserrat
• Perataan Teks: Tengah
• Warna Teks: #0f1c4d
• Ukuran Teks: 22px (Desktop), 18px (Tablet), 16px (Ponsel)

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Modul selanjutnya dan terakhir yang dibutuhkan pada kolom ini adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Pindah ke tab desain dan ubah warna garis menjadi putih.

• Warna Garis: #ffffff

Perekat

Ubah juga lebar pembagi.

• Lebar: 12%

Tambahkan Bagian #2

Warna latar belakang

Ke bagian desain selanjutnya! Tambahkan bagian baru dan ubah warna latar belakang.

• Warna Latar Belakang: #0f1c4d

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus berikutnya.

• Padding Atas: 70px
• Padding Bawah: 130px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah lebar di seluruh ukuran layar yang lebih kecil.

• Lebar: 80% (Desktop), 90% (Tablet & Ponsel)

Jarak

Tambahkan beberapa bantalan bawah kustom berikutnya.

• Padding Bawah: 70px (Desktop), 20px (Tablet), 0px (Ponsel)

Berbatasan

Tambahkan batas bawah ke baris juga.

• Lebar Batas Bawah: 1px
• Warna Batas Bawah: #ffffff

Menampilkan

Dan terakhir, untuk memastikan semua kolom ditampilkan bersebelahan, kita akan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Tambahkan Modul Blurb ke Kolom 1

Pilih Ikon

Saatnya mulai menambahkan modul! Tambahkan Modul Blurb ke kolom 1 dan pilih ikon pilihan Anda.

Pengaturan Ikon Default

Pindah ke tab desain dan ubah pengaturan ikon yang sesuai:

• Warna Ikon: #f7f7f7
• Ikon Lingkaran: Ya
• Ikon Lingkaran: #f8c5ac
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ikon Ukuran Font: 96px (Desktop), 20px (Tablet & Ponsel)

Arahkan ke Pengaturan Ikon

Ubah warna ikon saat melayang.

• Warna Ikon: #000000

ID CSS

Masukkan ID CSS juga.

• ID CSS: harga-item-klik-1

Tambahkan Modul Teks #1 ke Kolom 2

Tambahkan Konten H3

Ke kolom kedua! Tambahkan Modul Teks pertama dan masukkan beberapa konten H3.

Pengaturan Teks H3

Pindah ke tab desain dan ubah pengaturan teks H3 yang sesuai:

• Judul 3 Font: Montserrat
• Judul 3 Berat Font: Semi Tebal
• Judul 3 Warna Teks: #f8c5ac
• Judul 3 Ukuran Teks: 40px (Desktop), 25px (Tablet), 18px (Telepon)
• Spasi Judul 3 Huruf: -1px
• Pos 3 Tinggi Baris: 1.1em

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

Tambahkan Modul Teks lain ke kolom 2 dengan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks.

• Font Teks: Montserrat
• Berat Font Teks: Ultra Ringan
• Warna Teks: #f8c5ac
• Ukuran Teks: 23px (Desktop), 18px (Tablet), 14px (Ponsel)
• Spasi Huruf Teks: -1px
• Tinggi Baris Teks: 1.1em

Tambahkan Modul Teks ke Kolom 3

Tambahkan Harga ke Kotak Konten

Ke kolom ketiga! Tambahkan Modul Teks dan tempatkan harga di kotak konten.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Montserrat
• Berat Font Teks: Berat
• Perataan Teks: Tengah
• Warna Teks: #ffffff
• Ukuran Teks: 40px (Desktop), 25px (Tablet), 18px (Telepon)

ID & Kelas CSS

Pindah ke tab lanjutan dan tambahkan ID CSS dan kelas CSS.

• ID CSS: harga-1
• Kelas CSS: harga-sembunyikan-pertama

Baris Klon Sesering yang Dibutuhkan

Setelah Anda menyelesaikan baris dan semua modul di dalamnya, Anda dapat mengkloning baris tersebut sebanyak yang Anda inginkan.

Ubah ID CSS Modul Blurb Duplikat

Ubah ID CSS dari setiap Modul Blurb baru yang sesuai:

• Modul Blurb 1: harga-item-klik-1
• Modul Blurb 2: harga-item-klik-2
• Modul Blurb 3: harga-item-klik-3
• …

Ubah Harga Modul Teks Duplikat & ID CSS

Lakukan hal yang sama untuk Modul Teks harga di kolom ketiga setiap baris.

• Harga 1: harga-1
• Harga 2: harga-2
• Harga 3: harga-3
• …

Tambahkan Baris Baru

Struktur Kolom

Tambahkan baris lain ke bagian Anda menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah lebar di seluruh ukuran layar yang lebih kecil.

• Lebar: 80% (Desktop), 90% (Tablet & Ponsel)

Menampilkan

Untuk memastikan semua kolom muncul bersebelahan pada ukuran layar yang lebih kecil, kita juga akan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Tambahkan Modul Kode ke Kolom 1

Masukkan Kode CSS

Lanjutkan dengan menambahkan Modul Kode ke kolom pertama dari baris dan masukkan baris kode CSS berikut:

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

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

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Pindah ke kolom kedua dan tambahkan Modul Teks baru dengan beberapa konten pilihan Anda.

Pengaturan Teks

Ubah pengaturan teks yang sesuai:

• Font Teks: Montserrat
• Berat Font Teks: Ultra Ringan
• Warna Teks: #f8c5ac
• Ukuran Teks: 23px (Desktop), 18px (Tablet), 14px (Ponsel)
• Spasi Huruf Teks: -1px
• Tinggi Baris Teks: 1.1em

Tambahkan Modul Teks Kosong ke Kolom 3

Biarkan Kotak Konten Kosong

Ke kolom berikutnya dan terakhir. Tambahkan Modul Teks dan pastikan kotak konten tetap kosong.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks sebagai berikut:

• Font Teks: Montserrat
• Berat Font Teks: Berat
• Perataan Teks: Tengah
• Warna Teks: #ffffff
• Ukuran Teks: 40px (Desktop), 25px (Tablet), 18px (Telepon)

ID CSS

Selesaikan pengaturan modul dengan menambahkan ID CSS.

• ID CSS: total-harga-kal

Tambahkan JQuery ke Opsi Tema Divi

Buka Tab Integrasi

Sekarang kita telah menyelesaikan desain, saatnya untuk membuat fungsionalitas bekerja menggunakan beberapa kode JQuery. Jika Anda ingin menambahkan perhitungan harga ke satu halaman saja, Anda dapat menempatkan kode di Modul Kode. Namun, jika Anda menggunakannya di beberapa halaman, buka Opsi Tema Divi Anda dan pilih tab integrasi.

Tambahkan Kode JQuery ke Tag Kepala

Masukkan baris kode JQuery berikut di antara tag skrip dan selesai:

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();
    }
  });
});

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat desain perhitungan harga yang menakjubkan dengan Divi. Ini adalah cara yang bagus untuk menunjukkan kepada pengunjung Anda berapa harga layanan Anda mulai dan ini membantu Anda menarik audiens yang tepat. Anda dapat menggunakan pendekatan ini pada desain perhitungan harga apa pun yang Anda buat untuk proyek Divi Anda berikutnya! Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.