Cara Menata Tabel Harga yang Cantik di Divi

Tabel harga seringkali merupakan CTA utama sebuah halaman. Itulah mengapa penting untuk menatanya dengan benar. Dengan Divi, Anda dapat mengambil banyak belokan dan membuat tabel harga persis seperti yang Anda bayangkan. Untuk memberi Anda beberapa pertimbangan, kami telah membuat tabel harga yang menakjubkan yang dapat Anda gunakan untuk semua jenis situs web yang sedang Anda kerjakan. Kami akan memandu Anda dalam membuat hasil dari A hingga Z menggunakan opsi bawaan Divi saja.

Mari kita lakukan!

Pratinjau

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

Desktop

Seluler

Unduh Gambar GRATIS

Untuk meletakkan tangan Anda pada gambar yang digunakan dalam tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

Cara Menata Tabel Harga yang Cantik di Divi

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Latar Belakang Gradien

Buat halaman baru dan tambahkan bagian reguler menggunakan latar belakang gradien berikut:

• Warna 1: #ffffff
• Warna 2: #353272
• Posisi Awal: 50%
• Posisi Akhir: 50%

Jarak

Kemudian, masuk ke pengaturan spasi bagian dan ubah margin kustom dan nilai padding.

• Margin Bawah: 50px (Desktop), 20px (Tablet & Ponsel)
• Margin Kiri: 50px (Desktop), 20px (Tablet & Ponsel)
• Margin Kanan: 50px (Desktop), 20px (Tablet & Ponsel)
• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

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

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

Jarak

Lalu, buka pengaturan spasi dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 94px
• Padding Bawah: 177px
• Padding Kiri: 150px (Desktop), 30px (Tablet & Ponsel)
• Padding Kanan: 150px (Desktop), 30px (Tablet & Ponsel)
• Kolom 1, 2 & 3 Padding Kiri: 10px
• Kolom 1, 2 & 3 Padding Kanan: 10px

Tambahkan Modul Teks #1 ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Kami menyesuaikan tabel harga yang ingin kami buat dengan menggunakan berbagai modul. Modul pertama yang kita perlukan adalah Modul Teks. Tambahkan nama jenis keanggotaan pertama di kotak konten.

Warna latar belakang

Setelah Anda menambahkan konten, buka pengaturan latar belakang dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Gambar latar belakang

Beralih ke tab gambar latar belakang dan unggah file ' divi-beautiful-pricing-table-background-pattern-1.png ' yang dapat Anda temukan di folder unduhan yang dibagikan di awal posting ini.

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah Atas
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan

Pengaturan Teks

Ubah pengaturan teks berikutnya.

• Berat Font Teks: Sangat Tebal
• Warna Teks: #ffffff
• Ukuran Teks: 80px
• Spasi Huruf Teks: -3px
• Tinggi Baris Teks: 1em

Jarak

Dan tambahkan beberapa nilai margin dan padding khusus.

• Margin Atas: 5vw (Desktop), 0vw (Tablet & Ponsel)
• Padding Atas: 20px
• Padding Bawah: 200px

Berbatasan

Lanjutkan dengan menambahkan '20px' ke sudut kiri dan kanan atas.

Bayangan Kotak

Untuk melengkapinya, berikan Modul Teks bayangan kotak yang halus.

• Posisi Vertikal Bayangan Kotak: -20px
• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: -10px
• Warna Bayangan: rgba (0,0,0,0.15)

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul kedua yang kita perlukan di kolom 1 adalah Modul Tombol. Tambahkan beberapa salinan pilihan.

Penjajaran Tombol

Kemudian, buka pengaturan perataan dan ubah perataan menjadi tengah.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Kami akan melanjutkan dengan membuat beberapa perubahan pada tampilan tombol di pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Warna Teks Tombol: #ffffff
• Warna 1: #6932ff
• Warna 2: #30acf4
• Arah Gradien: 100 derajat

• Lebar Batas Tombol: 0px
• Jarak Huruf Tombol: -2px
• Berat Huruf: Sangat Tebal

Jarak

Selanjutnya, tambahkan beberapa padding ke tombol agar terlihat bagus dan terapkan margin atas negatif untuk membuat tumpang tindih dengan modul sebelumnya di kolom.

• Margin Atas: -54px
• Padding Atas: 10px
• Padding Bawah: 10px
• Padding Kiri: 30px
• Padding Kanan: 30px

Bayangan Kotak

Last but not least, tambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: -14px
• Warna Bayangan: rgba(0,0,0,0.3)

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Modul berikutnya yang kita perlukan adalah Modul Teks lain dengan harga jenis keanggotaan.

Warna latar belakang

Setelah Anda menambahkan harga, buka pengaturan latar belakang dan terapkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Pengaturan Teks

Ubah pengaturan teks selanjutnya.

• Berat Font Teks: Sangat Tebal
• Warna Teks: rgba(0,0,0,0.05)
• Ukuran Teks: 120px
• Tinggi Baris Teks: 1em

Jarak

Dan terapkan beberapa nilai padding khusus dalam pengaturan spasi.

• Padding Atas: 100px
• Padding Bawah: 100px
• Padding Kiri: 80px

Berbatasan

Kemudian, pergi ke pengaturan perbatasan dan tambahkan '30px' ke sudut kiri dan kanan bawah.

Bayangan Kotak

Last but not least, beri modul bayangan kotak.

• Posisi Horizontal Bayangan Kotak: 0px
• Posisi Vertikal Bayangan Kotak: 2px
• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: 0px
• Warna Bayangan: rgba (0,0,0,0.21)

Tambahkan Modul Teks #3 ke Kolom 1

Tambah isi

Modul berikutnya dan terakhir yang kita butuhkan di kolom 1 adalah Modul Teks lainnya. Tambahkan harga jenis keanggotaan ke kotak konten.

Pengaturan Teks

Ubah pengaturan teks selanjutnya.

• Berat Font Teks: Sangat Tebal
• Warna Teks: #000000
• Ukuran Teks: 50px
• Tinggi Baris Teks: 1em

Jarak

Dan buat tumpang tindih antara modul ini dan yang sebelumnya dengan bermain-main dengan nilai spasi kustom.

• Margin Atas: -180px
• Margin Bawah: 180px (Tablet & Ponsel)
• Padding Kiri: 100px

Klon Semua Modul di Kolom 1 Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda selesai memodifikasi modul di kolom 1, Anda dapat melanjutkan dan mengkloning masing-masing modul dua kali dan menempatkan duplikat di dua kolom yang tersisa.

Ubah Isi Modul di Kolom

Ubah konten duplikat sesuai dengan dua jenis keanggotaan lain yang Anda bagikan di situs web Anda.

Ubah Tabel Harga di Kolom 2

Ubah Gambar Latar Belakang Modul Teks #1

Kami juga menyoroti tabel harga menengah. Buka Modul Teks pertama di kolom 2 dan ubah gambar latar belakang menjadi file ' divi-beautiful-pricing-table-background-pattern-2.png ' yang dapat Anda temukan di folder unduhan.

Hapus Margin Atas Modul Teks #1

Untuk menekankan jenis keanggotaan ini, kami akan menghapus margin atas Modul Teks pertama dalam pengaturan spasi.

Ubah Latar Belakang Gradien Tombol

Kami juga akan mencocokkan gambar latar belakang baru menggunakan latar belakang gradien lain untuk Modul Tombol.

• Warna 1: #fb32ff
• Warna 2: #ff304f
• Arah Gradien: 100 derajat

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menata tabel harga yang indah untuk proyek Divi Anda berikutnya. Kami telah memandu Anda langkah demi langkah melalui tutorial dan mencapai hasil yang menakjubkan hanya dengan menggunakan opsi bawaan Divi! Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah.