Cara membuat Kalkulator Estimasi Biaya menggunakan Elementor dan Element Pack
Diterbitkan: 2022-01-11Membuat kalkulator estimasi biaya menggunakan Elementor dapat memberikan manfaat yang cukup untuk website Anda, terutama jika Anda menjalankan situs bisnis WooCommerce atau situs web perencanaan paket dengan banyak kombinasi produk.
Kami telah melihat situs web teknologi, kain, kosmetik, grosir, dan perbankan menawarkan kalkulator perkiraan biaya di beranda mereka untuk membantu para pengunjung. Sangat berguna untuk memperbaiki anggaran Anda dengan cepat dan memilih apa yang Anda beli di toko.
Sekarang, bukanlah tugas yang sulit untuk membuat kalkulator estimasi biaya Anda sendiri menggunakan Elementor karena Anda telah menginstal plugin Element Pack Pro kami. Kami memiliki plugin kalkulator khusus yang membuatnya lebih mudah untuk mendesain kalkulator Anda sendiri dengan penyesuaian penuh.
Pada artikel ini, kami akan menunjukkan cara melakukannya. Mari kita mulai!
Apakah Kalkulator Estimasi Biaya ada nilainya?
Untuk situs web WooCommerce biasa, orang biasanya menghabiskan banyak waktu untuk berbelanja.
Lebih dari sekali, mereka menemukan produk yang mereka cari dan ingin melihat berapa biayanya termasuk PPN dan pengiriman.
Kecuali Anda memiliki sesuatu seperti kalkulator estimasi biaya menggunakan Elementor, itu akan mempengaruhi pengguna yang tidak menemukan cara yang tepat untuk memperkirakan harga produk.
Jadi, untuk meningkatkan pengalaman pengguna Anda, Anda dapat menggunakan plugin kalkulator estimasi biaya khusus kami yang dipersembahkan oleh Element Pack Pro.
Jadi, untuk membuat kalkulator estimasi biaya, Anda harus memiliki-
- Situs WordPress dengan pembuat halaman Elementor terpasang
- Plugin Elemen Pack Pro
- Widget Kalkulator Lanjutan (diaktifkan dari dasbor)
Jika semua persiapan sudah dilakukan, kita bisa bergerak maju menuju tujuan utama.
Membuat Kalkulator Estimasi Biaya menggunakan Elementor dan Element Pack
Mari kita desain kalkulator secara manual menggunakan widget dari Element Pack. Ini akan menjadi proses langkah demi langkah sehingga Anda disarankan untuk mengikutinya.
Sekarang, mari kita mulai-
Langkah-1: Masukkan Kalkulator Lanjutan & Atur Bidang Kalkulator
Untuk membuat kalkulator estimasi biaya menggunakan Elementor, hal pertama yang harus kita lakukan adalah memasukkan widget Kalkulator Lanjutan di dalam halaman target.
Pertama
Cukup ketik nama widget kita pada menu widget di dalam editor halaman Elementor dan seret ke dalam halaman. Seperti yang Anda lihat, kami membuat bagian terlebih dahulu untuk menampilkan kalkulator dengan baik di halaman.
Setelah itu
Mari membangun bidang kalkulator satu per satu. Pertama datang Produk. Klik tombol Tambah Item dan mulai menyesuaikan bidang.
Di sini, kami memilih jenis bidang "Pilih", menetapkan label sebagai "Nama Produk", dan memasukkan produk kami di bidang opsi.
Perhatikan bahwa setiap baris baru berarti opsi baru di sini dan Anda harus menggunakan "|" tanda tangani sebelum nilai untuk menambahkannya ke perhitungan.
Ambil ini sebagai bidang pertama dari kalkulator estimasi biaya menggunakan Elementor.
Kemudian Demikian pula
Kami akan menggunakan pengaturan yang sama persis untuk bidang ke-2 dan ke-3. Jenisnya menjadi "Pilih" dan kami akan menempatkan label berbeda untuk mereka dengan set nilai yang berbeda.
Kami mengatur lebar kolom menjadi 33% agar sesuai dengan 3 bidang dalam 1 baris.
Untuk selanjutnya
Kami telah mengambil 3 bidang lagi di bawah ini untuk memenuhi persyaratan kami untuk kalkulator estimasi biaya menggunakan Elementor.
Di sini, bidang kuantitas adalah bidang Jenis angka yang mengharuskan Anda memilih nomor untuk jumlah produk yang ingin Anda beli.
Sekali lagi, bidang PPN adalah bidang kalkulator tipe Disabled yang tidak menerima input dari pihak ketiga. Itu berarti, itu adalah biaya tetap untuk ditambahkan ke biaya akhir produk.
Anda hanya perlu pergi ke subbagian Lanjutan untuk memasukkan nilai default yang akan diperbaiki untuk bagian kalkulator ini.
Jangan Lupa Untuk
Buka tab konten widget Kalkulator Lanjutan dan atur perataan konten. Kami menjaga agar sisi kiri tetap sejajar untuk tampilan klasik yang lebih baik.
Langkah-2: Rumus Kalkulator Estimasi Biaya Menggunakan Elementor
Ini adalah langkah yang paling penting.
Dari awal pembuatan kolom formulir hingga langkah ini, kalkulator masih belum siap berfungsi kecuali jika kita menyertakan rumus.
Rumusnya dapat berupa persamaan logis apa pun dari berbagai pilihan. Berikut adalah daftar rumus yang tersedia yang dapat Anda gunakan.
Bagaimanapun.
Kami telah memasukkan rumus kerja untuk kalkulator estimasi biaya yang baru saja kami rancang. Setelah Anda memasukkan formula, itu akan langsung beroperasi.
Langkah-3: Penyesuaian Lain Untuk Kalkulator Estimasi Biaya
Tujuan utama kami sudah tercapai. Tapi, kalkulatornya terlihat polos dan kusam tanpa warna sama sekali.
Jadi, sekarang kita akan menyesuaikan tampilan kalkulator menggunakan banyak variabel.
Untuk sekarang
Klik pada bagian Result dan pilih opsi “ On Change ” untuk opsi Result Show . Artinya hasil akan terbentuk hanya dengan menggunakan kalkulator, tidak perlu menekan tombol apapun.
Kemudian kami akan menampilkan hasilnya di bagian bawah dengan perataan sisi kiri dan teks khusus untuk itu.
Setelah itu
Kami akan menempatkan beberapa teks di bidang bawah untuk ditampilkan jika terjadi kesalahan. Kesalahan dapat terjadi karena formula yang salah atau input yang salah.
Sekarang kita telah sampai pada bagian terakhir dari pembuatan plugin kalkulator biaya menggunakan Elementor.
Langkah-4: Mari Tambahkan Warna
Sekarang yang harus Anda lakukan adalah, beralih ke bagian gaya widget dan mulai membuat perubahan tampilan sesuai dengan kebutuhan Anda.
Pertama
Kami akan mengubah parameter dari bagian Gaya Bentuk dengan menyesuaikan ruang bidang dan ruang kolom.
Setelah itu
Kita dapat mengubah warna label dan tipografi dari bagian selanjutnya untuk kalkulator estimasi biaya menggunakan Elementor.
Di sini, Anda dapat memilih font unik untuk label agar berbeda dari pasar lainnya.
Di Langkah Selanjutnya
Kami menyesuaikan bidang input dengan menggunakan warna teks cerah, warna latar belakang yang sangat tipis, batas tipis, dan beberapa bantalan.
Kami juga mengubah font menggunakan opsi tipografi untuk kalkulator estimasi biaya menggunakan Elementor.
Kemudian lagi
Kami membuat perubahan pada teks hasil dengan menerapkan nada warna yang serupa untuk teks dan tipografi.
Terlihat cukup mulus sejauh ini, bukan?
Dan terakhir
Teks kesalahan sekarang memiliki warna label baru dan dicat merah untuk spanduk.
Kami menambahkan beberapa padding di sekitar teks dan mengubah font sedikit agar sesuai dengan sisanya.
Sekarang, kalkulator estimasi biaya Anda menggunakan Elementor siap ditampilkan.
Kesimpulan
Blog ini bertujuan untuk memungkinkan Anda menggunakan plugin pembuat halaman Elementor dan Paket Elemen untuk membuat plugin kalkulator yang layak sesuai kebutuhan Anda.
Semoga, Anda mempelajari semuanya.
Terima kasih telah tetap bersama kami hingga garis finis.
Blog ini disajikan oleh BdThemes.