Unduh Desain Toggle Harga Bulanan/Tahunan GRATIS untuk Divi

Saat Anda memutuskan untuk menampilkan paket harga di situs web Anda, ada beberapa cara untuk mendekatinya. Salah satu pendekatan paling populer di luar sana adalah membuat sakelar harga bulanan/tahunan yang memungkinkan pengguna menavigasi dengan mudah melalui berbagai paket harga berdasarkan cara mereka memilih untuk menagih. Dalam tutorial hari ini, kami akan menunjukkan cara membuat sakelar harga berfungsi dengan Divi. Kami akan membuat ulang contoh yang menakjubkan dari awal dan 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 Desain Toggle Harga Bulanan/Tahunan GRATIS

Untuk mendapatkan desain sakelar harga bulanan/tahunan 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!

Mari Mulai Berkreasi!

Tambahkan Bagian #1

Warna latar belakang

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

• Warna Latar Belakang: #ffad72

Pembagi Bawah

Pindah ke tab desain dan masukkan pembagi bawah berikutnya.

• Gaya Pembagi: Temukan di Daftar
• Tinggi Pembagi: 10vw

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus juga.

• Padding Atas: 5vw
• Padding Bawah: 10vw

ID CSS

Dan tambahkan ID CSS ke bagian tersebut.

• ID CSS: bagian sakelar

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 30vw (Desktop), 45vw (Tablet), 50vw (Telepon)
• Lebar Maks: 100%

Jarak

Singkirkan padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Berbatasan

Dan ubah juga pengaturan perbatasan.

• Sudut Bulat: 50vw (Semua Sudut)
• Lebar Perbatasan: 1px
• Warna Batas: #e8e8e8

Menampilkan

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

display: flex;

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Satu-satunya modul yang kita butuhkan di kolom 1 adalah Modul Teks. Masukkan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks sebagai berikut:

• Font Teks: Montserrat
• Ukuran Teks: 1vw (Desktop), 1.5vw (Tablet), 2vw (Telepon)
• Perataan Teks: Tengah
• Warna Teks: Cahaya

Jarak

Ubah nilai padding atas dan bawah di berbagai ukuran layar juga.

• Padding Atas: 2vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• Padding Bawah: 2vw (Desktop), 3vw (Tablet), 4vw (Telepon)

ID & Kelas CSS

Dan tetapkan ID dan kelas CSS ke modul teks.

• ID CSS: harga-paket-item-1
• Kelas CSS: kursor-harga-item

Modul Teks Klon & Tempatkan Duplikat di Kolom 2

Setelah Anda menyelesaikan Modul Teks di kolom 1, Anda dapat mengkloningnya sekali dan menempatkan duplikatnya di kolom 2.

Ubah Konten

Pastikan Anda mengubah konten.

Ubah ID CSS

Dan gunakan ID CSS yang berbeda.

• ID CSS: harga-paket-item-2

Tambahkan Bagian #2

Warna latar belakang

Ke bagian kedua. Tambahkan warna latar belakang berikut:

• Warna Latar Belakang: #6b63dd

Jarak

Kemudian, buka pengaturan spasi bagian dan tambahkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 7vw
• Padding Bawah: 15vw
• Padding Kiri: 21vw (Desktop), 10vw (Tablet & Ponsel)
• Padding Kanan: 21vw (Desktop), 10vw (Tablet & Ponsel)

ID CSS

Tambahkan ID CSS ke bagian juga.

• ID CSS: harga-1

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 pengaturan ukuran.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Berbatasan

Kemudian, buka pengaturan spasi dan terapkan pengaturan batas berikut:

• Lebar Batas Kanan: 1px
• Lebar Batas Kiri: 1px
• Lebar Batas Atas: 0px
• Lebar Batas Bawah: 0px
• Warna Perbatasan: rgba (255,255,255,0)

Menampilkan

Pastikan kolom muncul bersebelahan pada ukuran layar yang lebih kecil dengan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Pengaturan Kolom 2

Jarak

Setelah Anda menyelesaikan pengaturan baris umum, buka pengaturan kolom 2 dan tambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 1vw
• Padding Bawah: 4vw

Berbatasan

Gunakan batas pada kolom 2 juga.

• Lebar Batas Kanan: 1px
• Warna Tepi Kanan: #ffffff

Pengaturan Kolom 3

Jarak

Pindah ke pengaturan kolom ketiga dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 1vw
• Padding Bawah: 4vw

Tambahkan Pembagi ke Kolom 1

Visibilitas

Saatnya mulai menambahkan modul! Modul pertama dan satu-satunya modul yang kita butuhkan di kolom 1 adalah Modul Pembagi. Pastikan Anda menonaktifkan opsi 'Tampilkan Pembagi'. Kami hanya membutuhkan modul ini untuk memastikan sisa desain tetap utuh.

• Tampilkan Pembagi: Tidak

Tambahkan Modul Teks #1 ke Kolom 2

Tambahkan Konten H3

Pindah ke kolom 2 dan tambahkan Modul Teks dengan beberapa konten H3 pilihan Anda.

Pengaturan Teks H3

Ubah pengaturan teks H3 sebagai berikut:

• Judul 3 Font: Montserrat
• Judul 3 Perataan Teks: Tengah
• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks: 2vw (Desktop), 3vw (Tablet), 3.5vw (Telepon)
• Spasi Judul 3 Huruf: -1px

Tambahkan Modul Teks #2 ke Kolom 2

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
• Berat Font Teks: Ultra Ringan
• Warna Teks: #ffffff
• Ukuran Teks: 2vw (Desktop), 3vw (Tablet), 3.5vw (Telepon)
• Tinggi Baris Teks: 1em
• Perataan Teks: Tengah

Jarak

Tambahkan beberapa margin atas kustom juga.

• Margin Atas: 0.5vw

Klon Kedua Modul & Tempatkan Duplikat di Kolom 3

Setelah Anda menyelesaikan modul di kolom 2, Anda dapat mengkloning keduanya dan menempatkan duplikatnya di kolom 3.

Ubah Konten

Pastikan Anda mengubah konten setiap duplikat.

Tambahkan Baris #2

Struktur Kolom

Ke baris kedua di bagian 2! Pilih struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Berbatasan

Dan menerapkan perbatasan.

• Lebar Batas Atas: 0px
• Lebar Batas Kanan: 1px
• Lebar Batas Bawah: 1px
• Lebar Batas Kiri: 1px
• Warna Batas: #8882dd

Menampilkan

Pastikan kolom muncul bersebelahan pada ukuran layar yang lebih kecil dengan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Pengaturan Kolom 1

Jarak

Lanjutkan dengan membuka pengaturan kolom 1 dan terapkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 3vw (Desktop), 5vw (Tablet & Ponsel)
• Padding Bawah: 3vw (Desktop), 5vw (Tablet & Ponsel)

Berbatasan

Tambahkan batas kanan ke kolom juga.

• Lebar Batas Kanan: 1px
• Warna Tepi Kanan: #8882dd

Pengaturan Kolom 2

Jarak

Pindah ke kolom kedua dan ubah pengaturan spasi.

• Padding Atas: 3vw (Desktop), 5vw (Tablet & Ponsel)
• Padding Bawah: 3vw (Desktop), 5vw (Tablet & Ponsel)

Berbatasan

Tambahkan batas kanan berikutnya.

• Lebar Batas Kanan: 1px
• Warna Tepi Kanan: #ffffff

Pengaturan Kolom 3

Jarak

Kemudian, buka pengaturan kolom 3 dan tambahkan beberapa nilai padding atas dan bawah khusus di berbagai ukuran layar.

• Padding Atas: 3vw (Desktop), 5vw (Tablet & Ponsel)
• Padding Bawah: 3vw (Desktop), 5vw (Tablet & Ponsel)

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Setelah Anda menyelesaikan pengaturan baris dan kolom, saatnya untuk mulai menambahkan modul. Tambahkan Modul Teks ke kolom 1 dan masukkan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Montserrat
• Warna Teks: #ffffff
• Ukuran Teks: 1vw (Desktop), 1.5vw (Tablet), 2vw (Telepon)
• Perataan Teks: Tengah

Tambahkan Modul Teks ke Kolom 2

Tambahkan Simbol ke Kotak Konten

Di kolom kedua, kita membutuhkan Modul Teks lain. Tambahkan simbol '✓' ke kotak konten.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks sebagai berikut:

• Warna Teks: #ffad72
• Ukuran Teks: 2vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• Tinggi Baris Teks: 1em
• Perataan Teks: Tengah

Modul Teks Klon & Tempatkan Duplikat di Kolom 3

Setelah Anda menyelesaikan Modul Teks di kolom 2, Anda dapat mengkloningnya dan menempatkan duplikatnya di kolom 3.

Simbol Alternatif & Warna Teks

Tergantung pada fitur yang Anda tampilkan, Anda mungkin ingin mengubah simbol menjadi '✗'. Gunakan warna teks yang berbeda juga.

• Warna Teks: #ffffff

Baris Klon sebanyak yang Diinginkan

Setelah Anda menyelesaikan seluruh baris, Anda dapat mengkloningnya sebanyak yang Anda inginkan, tergantung pada berapa banyak fitur yang ingin Anda tampilkan.

Tambahkan Baris #3

Struktur Kolom

Baris terakhir yang akan kita tambahkan ke bagian kedua berisi struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Berbatasan

Tambahkan perbatasan juga.

• Lebar Batas Atas: 0px
• Lebar Batas Bawah: 0px
• Lebar Batas Kanan: 1px
• Lebar Batas Kiri: 1px
• Warna Perbatasan: rgba (255,255,255,0)

Menampilkan

Dan pastikan kolom muncul bersebelahan pada ukuran layar yang lebih kecil dengan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Pengaturan Kolom 2 & 3

Jarak

Lanjutkan dengan menambahkan beberapa margin atas ke kolom 2 dan 3.

• Padding Atas: 4vw

Batas Kolom 2

Tambahkan batas kanan ke kolom 2 juga.

• Lebar Batas Kanan: 1px
• Warna Tepi Kanan: #eaeaea

Modul Pembagi Kloning & Tempatkan di Kolom 1 Baris Baru

Kloning Modul Pembagi yang dapat Anda temukan di baris pertama bagian tersebut dan tempatkan duplikatnya di kolom pertama baris baru Anda.

Tambahkan Modul Tombol ke Kolom 2

Tambahkan Salinan

Lanjutkan dengan menambahkan Modul Tombol ke kolom 2 dan masukkan beberapa salinan pilihan Anda.

Penyelarasan

Ubah perataan tombol di tab desain.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Dan ubah pengaturan tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 1.5vw (Tablet), 2vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #ffad72
• Lebar Batas Tombol: 0px

• Radius Perbatasan Tombol: 50vw
• Font Tombol: Montserrat

Jarak

Tambahkan beberapa nilai padding khusus ke Modul Tombol juga.

• Padding Atas: 1vw (Desktop), 1.5vw (Tablet & Ponsel)
• Padding Bawah: 1vw (Desktop), 1.5vw (Tablet & Ponsel)
• Padding Kiri: 4vw (Desktop), 6vw (Tablet & Ponsel)
• Padding Kanan: 4vw (Desktop), 6vw (Tablet & Ponsel)

Modul Tombol Klon & Tempatkan Duplikat di Kolom 3

Setelah Anda menyelesaikan Modul Tombol di kolom 2, Anda dapat mengkloningnya dan menempatkan duplikatnya di kolom 3.

Bagian Klon #2

Lanjutkan dengan mengkloning seluruh bagian kedua. Pastikan Anda mengubah nilai harga dalam modul teks agar sesuai dengan opsi penagihan tahunan. Ini adalah bagian yang akan muncul setelah seseorang mengklik 'penagihan tahunan'.

Ubah ID CSS & Tambahkan Kelas CSS

Ubah ID CSS bagian berikutnya dan tambahkan kelas CSS juga.

• ID CSS: harga-2
• Kelas CSS: sembunyikan-bagian-2

Tambahkan Baris Satu Kolom Baru ke Bagian Atas #1

Satu-satunya yang tersisa untuk dilakukan adalah menambahkan kode CSS dan jQuery untuk membuat fungsionalitas berfungsi. Untuk melakukannya, kami akan menambahkan baris baru ke bagian atas bagian 1.

Tambahkan Modul Kode #1 dengan Kode CSS

Tambahkan Modul Kode pertama dan masukkan baris kode CSS berikut:

<style>
.pricing-item-cursor {
cursor: pointer;
}

.hide-section-2 {
display: none;
}

.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

Tambahkan Modul Kode #2 dengan Kode JQuery

Tambahkan Modul Kode lain tepat di bawah yang sebelumnya, masukkan kode jQuery di bawah ini di antara tag skrip dan selesai!

jQuery(function($){
  
$('#pricing-plan-item-1').addClass('active-pricing-plan');

$('[id*="pricing-plan-item"]').click(function() {

var selector = $(this).attr('id').replace('-plan-item', '');
var $pricingselect  = $('#' + selector);

  
$('[id*="pricing-"]').not('[id*="pricing-plan"]').hide();
  
$pricingselect.show()
  
$('#toggle-section').show();
  
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');

});
});

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 toggle harga bulanan/tahunan dengan Divi. Ini adalah cara yang bagus untuk menambahkan interaksi ke paket harga Anda. Selain menerapkan teknik klik, kami juga telah merancang rencana harga kisi yang indah yang memungkinkan Anda untuk menekankan fitur mana yang termasuk dalam rencana mana. Anda juga dapat mengunduh file JSON secara gratis. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk 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.