Salah satu halaman arahan eksklusif yang kami sediakan untuk Anda sebagai Anggota Seumur Hidup dan pelanggan Black Friday baru adalah halaman arahan Penjualan Perangkat Lunak yang menakjubkan. Halaman arahan ini akan mengejutkan Anda dengan pembagi bagian yang unik dan maket berkualitas tinggi. Pada artikel ini kami akan menunjukkan cara menggunakan fitur konten dinamis Divi untuk menambahkan tabel harga dinamis ke dalamnya!

Jika Anda adalah pelanggan Seumur Hidup saat ini atau jika Anda telah membeli akun baru atau meningkatkan selama Penjualan Black Friday kami, Anda dapat mengunduh tata letak ini sekarang.

Dapatkan Halaman Landing Penjualan Perangkat Lunak Black Friday Eksklusif

Sebelum masuk ke kasus penggunaan ini, Anda harus meletakkan tangan Anda di Halaman Landing Penjualan Perangkat Lunak Black Friday eksklusif yang bisa Anda dapatkan dengan menjadi Anggota Elegant Themes baru, meningkatkan akun Anda yang ada, atau dengan menjadi Anggota Seumur Hidup bersama kami. Jika Anda memang sudah menjadi Anggota Seumur Hidup, Anda dapat masuk ke area anggota kami dan mengunduh semua halaman arahan eksklusif kami di sini. Semua orang perlu menggunakan tombol di bawah ini untuk membeli atau meningkatkan versi sebelum mereka dapat mengikuti sisa tutorial kami.

Klaim Kesepakatan Sebelum Menghilang!

Menggunakan Cara Membuat Tabel Harga Dinamis dengan Divi

Untuk sisa posting ini, kami akan menganggap Anda telah memanfaatkan kesepakatan Black Friday kami atau bahwa Anda sudah menjadi Anggota Seumur Hidup dan memiliki akses ke Halaman Landing Penjualan Perangkat Lunak Black Friday

Setelah Anda mengunduh Halaman Arahan Penjualan Perangkat Lunak baru dari area anggota kami, Anda dapat menonton video di bawah ini untuk melihat betapa mudahnya menyiapkannya. Kami juga mendorong Anda untuk mengikuti tutorial ini agar situs Anda siap untuk penyesuaian lebih lanjut.

Dalam posting kasus penggunaan ini, kami akan menunjukkan kepada Anda cara membuat tabel harga dinamis dengan Divi dan plugin Bidang Kustom Tingkat Lanjut gratis. Membuat tabel harga dinamis sangat bagus jika Anda memiliki klien yang sering mengubah harga langganan dan Anda ingin mengizinkan mereka mengubahnya sendiri tanpa mengakses Divi. Ini akan membantu Anda memastikan bahwa mereka tidak mengacaukan apa pun di halaman itu sendiri sambil tetap memiliki kemampuan untuk mengubah harga, deskripsi, dan tingkat keanggotaan paket tertentu.

Pratinjau

Sebelum kita masuk ke dalamnya, mari kita lihat sekilas hasil akhirnya.

Ayo Mulai!

Instal Plugin Bidang Kustom Tingkat Lanjut

Hal pertama yang perlu Anda lakukan adalah menginstal plugin Advanced Custom Fields di situs WordPress Anda dengan membuka Plugins > Add New > Searching for the plugin dan menginstalnya .

Buat Grup Bidang Baru

Setelah Anda mengaktifkan plugin, Anda dapat memulai. Tambahkan grup bidang baru.

Nama + Lokasi

Beri nama grup bidang baru Anda. Ingatlah bahwa pada akhir bagian tutorial ini, Anda akan memiliki tiga grup bidang (sama dengan jumlah tabel harga) jadi pastikan Anda menamainya dengan benar. Ubah juga pengaturan lokasi grup bidang ini.

Tambahkan Bidang Tingkat Keanggotaan

Saatnya mulai menambahkan bidang! Kita akan membutuhkan tiga secara total. Tambahkan bidang tingkat keanggotaan menggunakan pengaturan berikut:

• Label Bidang: Tingkat Keanggotaan 1
• Nama Bidang: membership_level_1
• Jenis Bidang: Pilih
• Pilihan: Tambahkan konten pilihan

Tambahkan Bidang Deskripsi Keanggotaan

Lanjutkan dengan menambahkan bidang deskripsi keanggotaan.

• Label Bidang: Deskripsi Keanggotaan 1
• Nama Bidang: membership_description_1
• Jenis Bidang: Teks

Tambahkan Bidang Harga

Bidang terakhir yang Anda perlukan adalah bidang harga.

• Label Bidang: Harga 1
• Nama Bidang: price_1
• Jenis Bidang: Teks

Gandakan Grup Bidang Dua Kali & Sesuaikan Nama dan Bidang dengan Nomor Tabel Harga

Satu grup bidang sama dengan satu tabel harga di halaman kami. Sekarang setelah kami menyelesaikan yang pertama, kami dapat melanjutkan dan mengkloningnya dua kali untuk memastikan kami memiliki grup bidang yang cukup untuk mencocokkan jumlah tabel harga di halaman kami.

Ubah Jumlah Semua Bidang dalam Grup

Masing-masing bidang dinamis yang Anda buat akan ditampilkan di Visual Builder. Untuk memastikan Anda mengetahui informasi apa yang Anda tautkan, berikan nomor yang berbeda pada grup bidang duplikat dan bidangnya.

Buat Halaman Baru Menggunakan Halaman Landing Penjualan Perangkat Lunak Divi

Di bagian selanjutnya dari tutorial ini, kami akan menambahkan tabel harga dinamis ke Halaman Landing Penjualan Perangkat Lunak kami. Buat halaman baru menggunakan tata letak ini.

Tambahkan Konten Dinamis ke Halaman

Beralih kembali ke bagian belakang halaman ini dan tambahkan konten dinamis ke masing-masing tabel harga.

Tambahkan Baris Baru Di Bawah Tabel Harga di Halaman

Struktur Kolom

Lanjutkan dengan mengaktifkan Visual Builder dan menambahkan baris baru di sini:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Kemudian, buka pengaturan spasi dan tambahkan beberapa margin khusus.

• Margin Atas: 100px
• Margin Bawah: 100px

Tambahkan Modul CTA ke Kolom 1

Hubungkan Bidang Judul ke Konten Dinamis Level 1 Keanggotaan

Modul pertama yang kita perlukan di kolom 1 adalah Modul Ajakan Bertindak. Tautkan bidang judul ke bidang Tingkat Keanggotaan 1 yang telah Anda buat di bagian sebelumnya dari tutorial ini.

Hubungkan Kotak Konten ke Deskripsi Keanggotaan 1 Konten Dinamis

Demikian juga, hubungkan kotak konten ke Deskripsi Keanggotaan 1.

Warna latar belakang

Kemudian, masuk ke pengaturan latar belakang dan ubah warna latar belakang Modul CTA.

• Warna Latar Belakang: #ffffff

Gambar latar belakang

Tambahkan gambar latar belakang yang halus juga. Anda akan dapat menemukan gambar latar belakang berikut di Pustaka Media Anda setelah mengunggah Laman Landas Penjualan Perangkat Lunak:

• Gambar Latar Belakang: penjualan perangkat lunak-13.png

Pengaturan Teks

Lanjutkan dengan masuk ke pengaturan teks dan mengubah orientasi teks modul.

• Orientasi Teks: Kiri

Pengaturan Teks Judul

Untuk mencocokkan gaya desain halaman arahan, buat juga beberapa perubahan pada pengaturan teks judul.

• Judul Font: Rubik
• Judul Font Berat: Ringan
• Warna Teks Judul: #4258ff
• Ukuran Teks Judul: 40px
• Tinggi Baris Judul: 1.3em

Pengaturan Teks Tubuh

Hal yang sama berlaku untuk pengaturan teks isi.

• Font Tubuh: Rubik
• Berat Huruf Tubuh: Sedang
• Warna Teks Tubuh: rgba(0,0,0,0.34)
• Ukuran Teks Tubuh: 15px
• Tinggi Garis Tubuh: 1.8em

Jarak

Tambahkan beberapa padding atas berikutnya.

• Padding Atas: 60px

Berbatasan

Dan tambahkan '8px' ke masing-masing sudut atas modul.

Bayangan Kotak

Last but not least, kami akan menambahkan bayangan kotak halus untuk menciptakan kedalaman pada halaman.

• Posisi Vertikal Bayangan Kotak: 50px
• Kekuatan Buram Bayangan Kotak: 100px
• Warna Bayangan: rgba (66,88,255,0.2)

Tambahkan Modul Teks ke Kolom 1

Hubungkan Kotak Konten ke Harga 1 Konten Dinamis

Lanjutkan dan tambahkan Modul Teks tepat di bawah Modul Ajakan Bertindak di kolom 1. Tautkan kotak konten modul ini ke konten dinamis Harga 1.

Warna latar belakang

Lanjutkan dengan mengubah warna latar belakang modul ini.

• Warna Latar Belakang: #ffffff

Pengaturan Teks

Ubah juga pengaturan teks.

• Font Teks: Rubik
• Berat Font Teks: Ringan
• Warna Teks: #4258ff
• Ukuran Teks: 70px
• Tinggi Baris Teks: 1em

Jarak

Tambahkan beberapa nilai padding kustom berikutnya.

• Padding Bawah: 60px
• Padding Kiri: 40px

Berbatasan

Lanjutkan dengan pergi ke pengaturan perbatasan dan menambahkan '8px' ke kedua sudut bawah.

Bayangan Kotak

Last but not least, beri Modul Teks ini bayangan kotak juga.

• Posisi Vertikal Bayangan Kotak: 80px
• Kekuatan Buram Bayangan Kotak: 100px
• Warna Bayangan: rgba (66,88,255,0.2)

Seret Modul Tombol ke Kolom 1

Modul terakhir yang kita perlukan di kolom pertama adalah Modul Tombol. Klon salah satu Modul Tombol yang dapat Anda temukan di baris sebelumnya dan letakkan di kolom 1.

Ubah Spasi

Buka pengaturan Modul Tombol dan tambahkan beberapa margin khusus.

• Margin Atas: 30px
• Margin Bawah: 50px

Kloning Semua Modul di Kolom 1 & Tempatkan di Kolom Tersisa

Untuk menghemat waktu, kita akan mengkloning ketiga modul di kolom 1 dua kali dan menempatkan duplikatnya di kolom baris yang tersisa.

Modifikasi Modul di Kolom 2

Modul CTA

Hubungkan Bidang Judul ke Konten Dinamis Level 2 Keanggotaan

Kita perlu memodifikasi duplikatnya, dimulai dengan Modul CTA di kolom kedua. Hubungkan bidang judul ke konten dinamis Tingkat Keanggotaan 2.

Hubungkan Kotak Konten ke Deskripsi Keanggotaan 2 Konten Dinamis

Lakukan hal yang sama untuk kotak konten.

Tambahkan Latar Belakang Gradien

Tambahkan latar belakang gradien ke modul berikutnya.

• Warna 1: #6959ff
• Warna 2: #c1bffff
• Arah Gradien: 15deg
• Posisi Awal: 22%
• Posisi Akhir: 95%

Ubah Warna Teks Judul

Ubah juga warna teks judul.

• Warna Teks Judul: #ffffff

Ubah Warna Teks Tubuh

Hal yang sama berlaku untuk warna teks tubuh.

• Warna Teks Tubuh: #ffffff

Ubah Spasi

Untuk menempatkan tabel harga khusus ini dalam sorotan, kami akan bermain-main dengan nilai spasi juga.

• Margin Atas: -50px (Desktop), 0px (Tablet & Ponsel)
• Padding Atas: 100px

Modul Teks

Hubungkan Kotak Konten ke Harga 2 Konten Dinamis

Lanjutkan dengan membuka Modul Teks di kolom 2 dan tautkan kotak konten ke konten dinamis Harga 2.

Ubah Warna Latar Belakang

Ubah warna latar belakang modul ini selanjutnya.

• Warna Latar Belakang: #6959ff

Ubah Warna Teks

Dan ubah warna teks menjadi putih.

• Warna Teks: #ffffff

Ubah Spasi

Last but not least, ubah nilai padding kustom dalam pengaturan spasi.

• Padding Bawah: 120px
• Padding Kiri: 40px

Modifikasi Modul di Kolom 3

Modul CTA

Hubungkan Bidang Judul ke Konten Dinamis Level 3 Keanggotaan

Kita perlu mengubah modul di kolom 3 juga. Tautkan bidang judul ke konten dinamis Tingkat Keanggotaan 3.

Hubungkan Kotak Konten ke Deskripsi Keanggotaan 3 Konten Dinamis

Hal yang sama berlaku untuk kotak konten.

Tambahkan Latar Belakang Gradien

Kemudian, tambahkan latar belakang gradien ke modul.

• Warna 1: #c87cff
• Warna 2: #ffbcf8
• Arah Gradien: 18 derajat
• Posisi Awal: 22%
• Posisi Akhir: 95%

Ubah Warna Teks Judul

Ubah warna teks judul menjadi putih.

• Warna Teks Judul: #ffffff

Ubah Warna Teks Tubuh

Lakukan hal yang sama untuk warna teks tubuh.

• Warna Teks Tubuh: #ffffff

Modul Teks

Hubungkan Kotak Konten ke Harga 3 Konten Dinamis

Lanjutkan dengan membuka Modul Teks di kolom 3 dan mengubah konten dinamis di sini juga.

Ubah Warna Latar Belakang

Tambahkan warna latar belakang yang berbeda berikutnya.

• Warna Latar Belakang: #c87cff

Ubah Warna Teks

Last but not least, ubah warna teks menjadi putih dan selesai! Anda sekarang memiliki tiga tabel harga yang sepenuhnya dinamis di halaman Anda!

• Warna Teks: #ffffff

Pikiran Akhir

Kasus penggunaan ini adalah bagian dari Penawaran Black Friday kami di mana kami membagikan 6 halaman arahan edisi terbatas GRATIS dengan pelanggan Black Friday dan anggota seumur hidup. Dengan bergabung dengan komunitas berdaya kami selama hari-hari ini dan menjadi anggota, Anda akan mendapatkan:

• DISKON 25% SEMUANYA
• Semua 6 halaman arahan gratis
• Akses ke tema dan plugin kami yang luar biasa
• Hadiah Bonus

Raih kesempatan dan jadilah anggota hari ini!