Beberapa orang enggan untuk menampilkan harga layanan mereka di situs jaringan. Tapi sebanyak mungkin menakut-nakuti beberapa pengunjung, itu juga menunjukkan kepercayaan diri dan keahlian. Transparansi dalam penetapan harga memungkinkan Anda menarik pelanggan 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 berikutnya. Anda juga dapat mengunduh file JSON secara gratis!
Mari kita pergi.
penelitian
Sebelum kita menyelami tutorial, mari kita lihat sekilas bagaimana kita melihat berbagai ukuran layar.
Ayo mulai menciptakan!
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: # f8c5ac
Pembagi lebih rendah
Tambahkan pemisah yang lebih rendah ke bagian berikutnya.
- Gaya pemisahan: Cari dalam daftar
- Flip Divider: Vertikal
jarak
Tambahkan juga padding down.
- Bantalan Bawah: 130px
Tambahkan baris baru
Struktur kolom
Lanjutkan 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 konten H2 pilihan Anda.
Pengaturan teks H2
Beralih ke tab Desain dan ubah pengaturan teks H2 sesuai:
- Tajuk 2 Font: Montserrat
- Judul 2 Font: Semi Bold
- Judul 2 Perataan teks: tengah
- Judul 2 Warna teks: # 0f1c4d
- Judul 2 Ukuran Teks: 57 piksel (desktop), 35 piksel (tablet), 30 piksel (ponsel)
- Judul 2 spasi Surat: -2px
Tambahkan modul teks # 2 ke kolom
Tambahkan konten
Tambahkan modul teks lain tepat di bawah yang sebelumnya dan masukkan konten pilihan Anda.
Pengaturan teks
Beralih ke tab Desain dan ubah pengaturan teks yang sesuai:
- Teks font: Montserrat
- Penyelarasan teks: pusat
- Warna teks: #0f1c4d
- Ukuran teks: 22px (desktop), 18px (tablet), 16px (telepon)
Tambahkan modul divisi ke kolom
jarak penglihatan
Modul berikutnya dan terakhir yang dibutuhkan dalam kolom ini adalah modul pembagian. Pastikan opsi "Tampilkan Pemisah" diaktifkan.
- Show Divider: Ya
Baris
Buka tab Desain dan ubah warna garis menjadi putih.
- Warna garis: #ffffff
perekat
Juga ubah lebar pembagi.
- Lebar: 12%
Tambahkan Bagian 2
Warna latar belakang
Mari lanjutkan ke gambar! Tambahkan bagian baru dan ubah warna latar belakang.
- Warna latar belakang: #0f1c4d
jarak
Kemudian tambahkan beberapa bantalan kustom atas dan ke bawah.
- Lapisan teratas: 70px
- Bantalan Bawah: 130px
Tambahkan baris 1
Struktur kolom
Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan mod apa pun, buka pengaturan baris dan ubah lebar ke ukuran layar yang lebih kecil.
- Lebar: 80% (desktop), 90% (tablet dan telepon)
jarak
Tambahkan sedikit custom down filling selanjutnya.
- Pelapis di bagian bawah: 70px (desktop), 20px (tablet), 0px (telepon)
Batas
Tambahkan juga batas bawah ke garis.
- Lebar batas bawah: 1px
- Warna batas bawah: #ffffff
pameran
Terakhir, untuk memastikan bahwa semua kolom ditampilkan bersebelahan, kami akan menambahkan baris kode CSS ke elemen utama baris.
display: melenturkan;
Tambahkan modul Blurb ke kolom 1
Pilih ikonnya
Saatnya untuk mulai menambahkan modul! Tambahkan modul Blurb ke kolom 1 dan pilih ikon pilihan Anda.
Pengaturan ikon default
Beralih ke tab Desain dan ubah pengaturan ikon yang sesuai:
- Warna Ikon: # f7f7f7
- Ikon lingkaran: ya
- Ikon lingkaran: # f8c5ac
- Ikon penentuan posisi: Atas
- Gunakan Ukuran Font Ikon: Ya
- Ukuran Font Ikon: 96px (Desktop), 20px (Tablet & Telepon)
Arahkan kursor ke atas pengaturan ikon
Ubah warna ikon hover.
- Warna Ikon: # 000000
Pengidentifikasi CSS
Juga masukkan pengidentifikasi CSS.
- Pengidentifikasi CSS: harga-barang-klik-1
Tambahkan modul teks # 1 ke kolom 2
Tambahkan konten H3
Di kolom kedua! Tambahkan modul teks pertama dan masukkan konten H3.
Pengaturan teks H3
Beralih ke tab Desain dan ubah pengaturan teks H3 sesuai:
- Tajuk 3 Font: Montserrat
- Judul 3 Font: Semi Bold
- Judul 3 Warna teks: # f8c5ac
- Judul 3 Ukuran Teks: 40 piksel (desktop), 25 piksel (tablet), 18 piksel (ponsel)
- Judul spasi 3 huruf: -1px
- Judul 3 Tinggi Baris: 1.1em
Tambahkan modul teks # 2 ke kolom 2
Tambahkan konten
Tambahkan modul teks lain ke kolom 2 dengan konten pilihan Anda.
Pengaturan teks
Buka tab Desain dan ubah pengaturan teks.
- Teks font: Montserrat
- Berat font teks: Sangat ringan
- Warna teks: #f8c5ac
- Ukuran teks: 23px (desktop), 18px (tablet), 14px (telepon)
- Penspasian surat: -1px
- Tinggi baris teks: 1.1em
Tambahkan modul teks ke kolom 3
Tambahkan harga ke konten
Ayo pergi ke kolom ketiga! Tambahkan modul teks dan tempatkan harga di area konten.
Pengaturan teks
Beralih ke tab Desain dan ubah pengaturan teks yang sesuai:
- Teks font: Montserrat
- Berat font teks: Berat
- Penyelarasan teks: pusat
- Warna teks: #ffffff
- Ukuran teks: 40px (desktop), 25px (tablet), 18px (telepon)
Kelas pengidentifikasi dan CSS
Beralih ke tab lanjutan dan tambahkan ID CSS dan kelas CSS.
- Pengidentifikasi CSS: price-1
- Kelas CSS: price-hide-first
Gandakan garis sebanyak yang diperlukan
Setelah Anda menyelesaikan baris dan semua modul yang ada di dalamnya, Anda dapat menduplikasinya sebanyak yang Anda inginkan.
Ubah Blurb ID modul CSS
Ubah ID CSS dari setiap modul Blurb baru sesuai:
- Blurb 1 Module: harga-item-klik-1
- Blurb Module 2: harga-barang-klik-2
- Blurb Module 3: harga-barang-klik-3
- ...
Ubah harga modul teks rangkap dan id CSS
Lakukan hal yang sama untuk modul teks harga di kolom ketiga dari 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 mod apa pun, buka pengaturan baris dan ubah lebar ke ukuran layar yang lebih kecil.
- Lebar: 80% (desktop), 90% (tablet dan telepon)
pameran
Untuk memastikan semua kolom muncul berdampingan pada ukuran layar yang lebih kecil, kami juga akan menambahkan satu baris kode CSS ke elemen baris utama.
display: melenturkan;
Tambahkan modul kode ke kolom 1
Masukkan kode CSS
Lanjutkan dengan menambahkan modul kode ke kolom pertama baris dan masukkan baris kode CSS berikut:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
Tambahkan modul teks ke kolom 2
Tambahkan konten
Buka kolom kedua dan tambahkan modul teks baru dengan konten pilihan Anda.
Pengaturan teks
Ubah pengaturan teks sesuai:
- Teks font: Montserrat
- Berat font teks: Sangat ringan
- Warna teks: # f8c5ac
- Ukuran teks: 23px (desktop), 18px (tablet), 14px (telepon)
- Penspasian surat: -1px
- Tinggi baris teks: 1.1em
Tambahkan modul teks kosong ke kolom 3
Biarkan konten kosong
Ayo pergi ke kolom terakhir. Tambahkan modul teks dan pastikan area konten tetap kosong.
Pengaturan teks
Buka tab Desain dan ubah pengaturan teks sebagai berikut:
- Teks font: Montserrat
- Berat font teks: Berat
- Penyelarasan teks: pusat
- Warna teks: #ffffff
- Ukuran teks: 40px (desktop), 25px (tablet), 18px (telepon)
Pengidentifikasi CSS
Lengkapi parameter modul dengan menambahkan pengidentifikasi CSS.
- Pengidentifikasi CSS: total-harga-cal
Tambahkan opsi tema JQuery ke Divi
Buka tab integrasi
Sekarang setelah desain selesai, saatnya membuatnya bekerja dengan beberapa kode JQuery. Jika Anda ingin menambahkan perhitungan harga ke satu halaman, Anda dapat menempatkan kode dalam modul kode. Namun, jika Anda menggunakannya di beberapa halaman, buka opsi Tema Divi dan pilih tab Integrasi.
Tambahkan kode JQuery ke Head Tags
Masukkan baris kode JQuery berikut antara tag skrip dan Anda 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 '); $ (ini) .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");} lain {$ ("# total-price-cal"). sembunyikan ();}});});
penelitian
Sekarang semua langkah telah diambil, mari kita lihat terakhir apa yang terjadi dengan ukuran layar yang berbeda.
final pikiran
Pada artikel ini, kami menunjukkan kepada Anda cara membuat template perhitungan harga yang luar biasa dengan Divi. Ini cara yang bagus untuk menunjukkan milik Anda pengunjung berapa harga mulai layanan Anda dan untuk menarik audiens yang tepat. Anda dapat menggunakan pendekatan ini untuk perhitungan harga apa pun yang Anda buat untuk proyek Divi berikutnya! Jika Anda memiliki pertanyaan atau saran, pastikan untuk meninggalkan komentar di bagian komentar di bawah.
