Cara Kreatif Menggunakan Modul Toggle Divi untuk Menampilkan Paket Harga

Ketika datang untuk menampilkan rencana harga di situs web Anda, Anda dapat mengambil banyak giliran dan membuat halaman atau bagian harga yang benar-benar menakjubkan dan menarik. Saat membangun situs web dengan Divi, kemungkinan besar Anda akan menggunakan Modul Tabel Harga. Modul ini memungkinkan Anda untuk dengan cepat menambahkan tabel harga dan menatanya sesuka Anda. Tetapi jika Anda ingin menambahkan lebih banyak interaksi ke bagian khusus halaman Anda ini, Anda juga dapat menggunakan Modul Beralih untuk menampilkan paket harga saat diklik. Ini cara yang bagus untuk menyoroti paket harga tertentu dengan menjaga statusnya tetap terbuka dan menutup dua lainnya.

Dalam tutorial ini, kami akan menunjukkan kepada Anda langkah demi langkah cara membuat desain tabel harga togel yang cantik menggunakan Modul Toggle Divi. Setelah Anda mendapatkan pendekatannya, Anda akan dapat membuat semua jenis paket harga toggle di klik untuk semua jenis situs web yang Anda buat.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya pada ukuran layar yang berbeda.

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Jarak

Buat halaman baru atau buka yang sudah ada menggunakan Divi's Visual Builder. Tambahkan bagian baru ke halaman, buka pengaturan bagian dan tambahkan beberapa bantalan atas dan bawah khusus untuk membuat beberapa ruang di bagian atas dan bawah bagian.

• Padding Atas: 160px
• Padding Bawah: 160px

Tambahkan Baris #1

Struktur Kolom

Setelah Anda selesai mengubah pengaturan penspasian bagian, Anda dapat melanjutkan dan menambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan Modul Teks

Tambah isi

Tidak perlu membuat perubahan pada baris, jadi lanjutkan dan tambahkan Modul Teks segera. Masukkan beberapa konten H2 pilihan di kotak konten modul.

Pengaturan Teks Judul

Lanjutkan dengan masuk ke tab desain dan ubah pengaturan teks judul.

• Judul 2 Font: Didact Gothic
• Judul 2 Berat Font: Reguler
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #000000
• Judul 2 Ukuran Teks: 40px
• Spasi Judul 2 Huruf: -1px

Tambahkan Modul Pembagi

Visibilitas

Tambahkan Modul Pembagi tepat di bawah Modul Teks yang telah Anda tambahkan dan modifikasi pada langkah sebelumnya. Pastikan opsi 'Tampilkan Pembagi' pada Modul Pembagi diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Lanjutkan dengan masuk ke tab desain dan ubah warna pembagi.

• Warna: #000000

Perekat

Ubah lebar modul dalam pengaturan ukuran juga.

• Lebar: 39%
• Penyelarasan Modul: Pusat

Jarak

Tambahkan beberapa margin bawah kustom juga.

• Margin Bawah: 50px

Tambahkan Baris #2

Struktur Kolom

Kita sudah selesai memodifikasi baris pertama dan modulnya. Saatnya menambahkan baris baru menggunakan struktur kolom berikut:

Kolom 1 Latar Belakang Gradien

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan latar belakang gradien ke kolom 1.

• Warna 1: #00fff2
• Warna 2: rgba (255,255,255,0)
• Kolom 1 Jenis Gradien: Radial
• Kolom 1 Arah Radial: Kanan Bawah
• Kolom 1 Posisi Awal: 30%
• Posisi Akhir Kolom 1: 30%

Kolom 2 Latar Belakang Gradien

Lakukan hal yang sama untuk kolom kedua juga.

• Warna 1: #fce96f
• Warna 2: rgba (255,255,255,0)
• Kolom 2 Jenis Gradien: Radial
• Kolom 2 Arah Radial: Kanan Atas
• Kolom 2 Posisi Awal: 40%
• Posisi Akhir Kolom 2: 40%

Kolom 3 Latar Belakang Gradien

Demikian juga, tambahkan latar belakang gradien ke kolom ketiga menggunakan pengaturan berikut:

• Warna 1: #a659ff
• Warna 2: rgba (255,255,255,0)
• Kolom 3 Jenis Gradien: Radial
• Kolom 3 Arah Radial: Bawah
• Kolom 3 Posisi Awal: 30%
• Kolom 2 Posisi Akhir: 30%

Perekat

Setelah Anda selesai menambahkan latar belakang gradien, lanjutkan ke tab desain dan ubah pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2

Tambahkan Modul Beralih ke Kolom 1

Tambah isi

Saatnya mulai membuat paket harga yang berbeda! Tambahkan Modul Toggle baru ke kolom pertama dan masukkan judul. Untuk menata elemen yang berbeda di kotak konten, kami telah menggunakan beberapa tag HTML tambahan. Lanjutkan dan salin baris berikut dan tambahkan ke tab Teks di kotak konten Anda:

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

Negara

Anda dapat memilih apakah Anda ingin status Modul Toggle terbuka atau tertutup. Untuk dapat melihat semua perubahan yang Anda buat sepanjang sisa tutorial, saya sarankan untuk tetap 'terbuka' sampai Anda selesai memodifikasi semua pengaturan desain yang berbeda.

Warna latar belakang

Lanjutkan dengan masuk ke pengaturan latar belakang Modul Toggle dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Pengaturan Ikon

Ubah warna ikon di tab desain selanjutnya.

• Warna Ikon: #000000

Alihkan Pengaturan

Dan modifikasi Open Toggle Background Color di pengaturan toggle juga.

• Buka Toggle Background Color: rgba(255,255,255,0)

Pengaturan Teks Judul

Kemudian, buat beberapa perubahan pada pengaturan teks judul.

• Judul Font: Didact Gothic
• Judul Font Berat: Tebal
• Warna Teks Judul: #000000
• Judul Teks Ukuran: 3.5vw (Desktop), 60px (Tablet), 40px (Telepon)

Pengaturan Teks Tubuh

Ubah juga pengaturan teks isi.

• Font Tubuh: Didact Gothic
• Perataan Teks Tubuh: Kiri
• Warna Teks Tubuh: #000000
• Ukuran Teks Tubuh: 18px
• Tinggi Garis Tubuh: 1.5em

Modul Pengalih Klon Dua Kali & Tempatkan di Dua Kolom yang Tersisa

Setelah Anda selesai memodifikasi Modul Toggle di kolom 1, Anda dapat melanjutkan dan mengkloningnya dua kali dan menempatkan duplikatnya di dua kolom yang tersisa.

Ubah Salin

Pastikan Anda mengubah semua salinan duplikat dan selesai!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir dari desain yang telah kita buat pada ukuran layar yang berbeda.

Pikiran Akhir

Dalam tutorial ini, kami telah menunjukkan kepada Anda pendekatan kreatif dalam menggunakan Modul Toggle Divi untuk menampilkan rencana harga di situs web Anda. Ini adalah cara yang bagus untuk berinteraksi dengan pengunjung dan meningkatkan gaya desain Anda. Ini membuatnya lebih mudah untuk menyorot rencana penetapan harga tertentu di bagian Anda dengan membiarkan satu itu tetap terbuka dan dua opsi lainnya tetap tertutup. Anda dapat menggunakan pendekatan ini untuk semua jenis situs web yang Anda buat. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!