Cara Membuat Tabel Harga Horizontal dengan Divi

Tabel Harga Horizontal adalah cara yang bagus untuk mempromosikan produk dengan banyak fitur. Dan, dengan tata letak lima kolom baru Divi, ini sangat mudah dilakukan. Namun, seperti halnya tata letak yang memiliki lima kolom atau lebih, tantangannya adalah membuat tata letak responsif sehingga terlihat bagus juga di seluler. Dalam tutorial ini, saya akan menunjukkan cara membuat tabel harga horizontal yang terlihat bagus di semua perangkat. Dan, saya bahkan akan menunjukkan kepada Anda betapa mudahnya menduplikasi tabel harga horizontal Anda dan menggunakan fitur desain baru seperti "temukan dan ganti" untuk dengan cepat mengubah skema warna setiap tabel Anda dalam beberapa klik.

Mari kita mulai.

Sneak Peek

Mulai

Untuk tutorial ini, yang Anda perlukan hanyalah Divi. Dan kita akan menggunakan Visual Builder. Karena kami akan membuat tabel dari awal, Anda perlu membuat halaman baru, menerapkan pembuat visual, lalu memilih opsi “Bangun Tata Letak dari Awal”.

Setelah itu, Anda siap untuk memulai. Ayo lakukan!

Menyiapkan Baris Lima Kolom untuk Tabel Harga Horizontal Anda

Sebagai permulaan, Mari berikan tata letak lima kolom ke bagian yang sudah menunggu kita di pembuat visual.

Sebelum kita mulai menambahkan modul apa pun, mari perbarui pengaturan bagian agar memiliki lebar khusus tanpa bantalan atas atau bawah.

Lebar: 1200px
Perataan Bagian: Tengah
Padding Kustom: 0px Atas, 0px Bawah

Kemudian masuk ke pengaturan baris untuk dengan cepat memberikan warna latar belakang ke baris Anda dan juga ke tiga kolom tengah sebagai berikut:

Warna Latar Belakang: #00cbc9
Kolom 2 Warna Latar Belakang: #00cbc9
Kolom 3 Warna Latar Belakang: #eeeeee
Kolom 4 Warna Latar Belakang: #eeeeee

Kemudian perbarui ukurannya sebagai berikut:

Jadikan Baris ini Lebar Penuh: YA
Lebar Talang: 1
Samakan Tinggi Kolom: YA

Kita perlu kembali ke pengaturan baris sedikit untuk memperbarui spasi, tetapi untuk sekarang mari kita mulai menambahkan uraian ke masing-masing kolom kita untuk konten.

Mengisi Kolom dengan Modul Isi

Judul Produk

Di kolom pertama, tambahkan modul teks dengan header berikut di kotak konten (di bawah tab teks):

<h2>Starter</h2>

Ini akan berfungsi sebagai tempat untuk judul rencana atau produk yang Anda tampilkan. Dalam contoh ini, ini akan menjadi semacam rencana "Pemula".

Kemudian perbarui pengaturan desain berikut:

Judul 2 Gaya Font: TT
Judul 2 Warna Teks: #ffffff
Judul 2 Ukuran Teks: 38px
Padding Kustom (desktop): 90% Atas, 90% Bawah, 10% kiri
Padding Kustom (tablet): 30% Atas, 30% Bawah

Tambahkan Blurb untuk Judul Kategori Fitur

Di kolom kedua, tambahkan modul uraian. Kemudian hapus teks pengisi di kotak konten dan biarkan teks Judul saja. Kemudian pilih untuk menggunakan ikon alih-alih gambar dan perbarui ikon dengan salah satu pilihan Anda.

Lompat ke tab desain dan perbarui pengaturan lainnya sebagai berikut:

Warna Ikon: #00cbc9
Penempatan Gambar/Ikon: Kiri
Ukuran Teks Judul: 16px
Padding Kustom: Bawah 2vw
Lebar Batas Baris Bawah: 4px
Warna Batas Bawah: #cccccc

Karena desain uraian ini akan digunakan sebagai judul kategori fitur di kolom 2, 3, dan 4, Anda dapat menyalin modul uraian dan menempelkannya ke kolom kedua dan ketiga.

Saya menyadari jarak tidak benar-benar terlihat bagus sekarang. Dan Anda mungkin tergoda untuk menambahkan beberapa spasi di tingkat modul, tetapi untuk desain ini, saya merasa lebih mudah untuk membuat penyesuaian jarak di tingkat kolom (di bawah pengaturan baris). Kami akan membahasnya nanti.

Tambahkan Modul Teks untuk Daftar Deskripsi Fitur

Selanjutnya Tambahkan modul teks di bawah uraian di kolom kedua. Kemudian tambahkan kode html tabel berikut di kotak konten:

• deskripsi fitur pergi di sini.
• deskripsi fitur pergi di sini.
• deskripsi fitur pergi di sini.
• deskripsi fitur pergi di sini.

Tipe Gaya Daftar Tidak Terurut: Kotak
Indentasi Item Daftar Tidak Terurut: 4px
Padding Kustom: 20px Atas, 20px Bawah, 5% Kiri, 5% Kanan

Sekarang seperti yang kita lakukan untuk uraian, lanjutkan dan salin modul teks dan tempel di bawah masing-masing modul uraian di kolom 3 dan 4.

Menambahkan Harga dan Tombol ke Kolom Terakhir

Di kolom terakhir (Kolom lima), saya akan menggunakan modul tabel harga untuk mendapatkan desain teks harga dengan tanda dolar. Ini semua yang benar-benar kita butuhkan dari modul tabel harga jadi saya akan menghilangkan sisa konten dan elemen desain, meninggalkan teks harga dan tanda dolar. Saya dapat menggunakan tombol yang disertakan dengan modul tabel harga, tetapi ini sedikit lebih sulit untuk melakukan keajaiban responsif pada tablet (Anda akan melihat apa yang saya maksud nanti). Jadi saya akan menggunakan modul tombol juga.

Silakan dan tambahkan Modul tabel Harga ke kolom kelima. Hapus salah satu dari dua tabel yang disertakan secara default dengan mengklik ikon tempat sampah di sebelah kanan salah satunya.

Kemudian singkirkan warna latar belakang dengan menambahkan kode warna yang benar-benar transparan.

Warna Latar Belakang: rgba(255,255,255,0)

Kemudian perbarui yang berikut ini:

Warna Latar Header Tabel: rgba(255,255,255,0)
Mata Uang & Frekuensi Warna Teks: #ffffff
Mata Uang & Frekuensi Ukuran Teks: 30px
Warna Teks Harga: #ffffff
Lebar Perbatasan: 0px
Margin Kustom (tablet): -100% Kanan
Margin Kustom (ponsel cerdas): 0% Kanan
Padding Kustom: 0px Atas, 10px Bawah, 0px Kiri, 0px Kanan

Sekarang masuk ke pengaturan tabel individual dengan mengklik ikon roda gigi di sebelah kiri menu tampilan tabel individual.

Sekarang hapus konten default untuk Judul, Subtitle, dan Konten. Ini hanya akan menyisakan Teks Mata Uang dan Harga.

Sekarang saya tahu apa yang Anda pikirkan saat ini. Apa yang harus dilakukan tentang garis batas di bawah teks harga? Nah, ada potongan kecil dari custom css untuk itu. Buka tab lanjutan dan tambahkan CSS berikut ke kotak input Pricing Top:

Harga Atas:

border: none;

Nah, begitulah cara Anda berhasil membuat tabel harga hanya dengan simbol Teks dan Mata Uang Harga!

Untuk tombol, tambahkan modul tombol di bawah modul tabel harga dan perbarui yang berikut:

Penjajaran Tombol: Tengah
Warna Teks: Cahaya
Margin Kustom (tablet): -100% Kanan
Margin Kustom (ponsel cerdas): 0% Kanan

Margin khusus akan cocok dengan margin yang kami tambahkan ke modul tabel harga untuk mendapatkan modul lebar penuh di tablet. Karena tata letak lima kolom pada tablet akan menempatkan kolom kelima di sisi kiri tata letak dua kolom, menarik modul ke atas sebesar -100% ke kanan akan memaksa modul ke lebar penuh baris.

Menambahkan Desain Panah dan Spasi Kolom Responsif

Menambahkan Panah dengan melapisi Gradien

Untuk membuat efek desain panah di kolom pertama kita akan melapis dua latar belakang gradien. Latar belakang gradien pertama akan ditambahkan pada tingkat kolom. Kami akan menambahkan yang berikutnya nanti di tingkat modul.

Untuk menambahkan latar belakang gradien, buka pengaturan baris dan tambahkan yang berikut:

Kolom 1 Latar Belakang Gradien Warna kiri: rgba(255,255,255,0)
Kolom 1 Latar Belakang Gradien Warna kanan: #eeeeee (ini harus sesuai dengan warna latar belakang kolom 2)
Arah Gradien: -245deg
Posisi Awal: 75%
Posisi Akhir: 0%

Simpan pengaturan dan lompat ke pengaturan modul teks di kolom satu. Di sinilah kita akan menambahkan lapisan kedua dari gradien latar belakang untuk melengkapi panah. Perbarui berikut ini:

Kolom 1 Latar Belakang Gradien Warna kiri: #eeeeee
Kolom 1 Latar Belakang Gradien Warna kanan: rgba(255,255,255,0)
Arah Gradien: 245deg
Posisi Awal: 25%
Posisi Akhir: 0%

Perhatikan bahwa nilainya sama-sama berlawanan satu sama lain. Misalnya, urutan warna telah berubah, 245 derajat berubah dari negatif menjadi positif, dan 75% sekarang menjadi 25% (perbedaan). Ini adalah bagaimana Anda mendapatkan sisi titik panah menjadi simetris sempurna.

Spasi Baris dan Kolom

Kembali ke pengaturan baris dan mari kita sesuaikan jarak Baris dan Kolom kita dengan memperbarui yang berikut:

Padding Kustom: 0px Atas, 0px bawah, 0px Kiri, 0px Kanan
Padding 2 Kustom: 5% Atas, 5% bawah, 2% Kiri, 2% Kanan
Padding Kustom 3: 5% Atas, 5% bawah, 2% Kiri, 2% Kanan
Kustom 4 Padding: 5% Atas, 5% bawah, 2% Kiri, 2% Kanan
Padding 5 Kustom: 10% Atas, 10% bawah

Anda mungkin bertanya-tanya mengapa saya tidak menggunakan lebar talang 2 saja dan menyelesaikannya. Yah, itu karena saya ingin memaksimalkan ruang di dalam kolom yang berisi teks sebanyak mungkin untuk meningkatkan keterbacaan di semua perangkat. Setiap sedikit ruang kita dapat menghemat banyak hal. Itulah sebabnya margin antar kolom dibuat dengan persentase padding kiri dan kanan.

Menduplikasi Tabel untuk Tabel Baru dan Skema Warna

Jelas, Anda ingin memiliki beberapa tabel harga horizontal untuk dibandingkan oleh pengguna. Untuk membuat tabel harga kedua, duplikat seluruh bagian yang berisi tabel pertama yang Anda buat.

Kemudian buka pengaturan Baris dan arahkan kursor ke warna latar belakang dan klik temukan dan ganti.

Di bawah "Dalam" pilih "Bagian Ini".
Di bawah "Ganti Lebar", tambahkan warna: #f84f51
Kemudian centang kotak Ganti Semua nilai yang ditemukan di bagian (bukan hanya warna latar belakang).

Kemudian klik Ganti dan saksikan keajaiban terjadi. Ini adalah cara cepat dan mudah untuk mengubah semua contoh warna sebelumnya dengan warna baru.

Jangan lupa untuk menyimpan pengaturan baris sebelum keluar untuk menyimpan perubahan.

Sekarang Anda memiliki tabel baru dengan skema warna baru.

Ulangi proses ini lagi untuk menambahkan tabel lain dengan warna: #bdc958

Membuat Tabel Unggulan

Untuk membuat salah satu tabel Anda terlihat menonjol dan sedikit menonjol, Anda dapat menambahkan bayangan kotak ke bagian yang menahan tabel serta mengubah warna abu-abu yang digunakan untuk latar belakang kolom dan gradien menjadi warna putih yang bagus.

Untuk melakukan ini, buka pengaturan bagian untuk bagian kedua (yang tengah) dan perbarui yang berikut ini:

Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Buram Bayangan Kotak: 80px

Untuk mengganti warna latar belakang abu-abu, masuk ke pengaturan baris dan cari warna latar kolom 2 (#eeeeee). Klik kanan padanya dan klik "temukan dan ganti". Pembaruan berikut:

Di bawah "Dalam" pilih "Bagian Ini".
Di bawah "Ganti Lebar", tambahkan warna: #ffffff
Kemudian centang kotak Ganti Semua nilai yang ditemukan di bagian (bukan hanya warna latar belakang).
Kemudian klik “Ganti”.

Menggunakan Temukan dan Ganti untuk Menguji Font

Jika Anda ingin menggunakan font yang berbeda di seluruh tabel Anda, Anda dapat dengan mudah menguji font yang berbeda dengan menggunakan fitur "Temukan dan Ganti". Saya sengaja meninggalkan font default untuk semua modul untuk membuat proses ini lancar. Untuk mengubah font untuk seluruh halaman tabel Anda, yang perlu Anda lakukan adalah membuka pengaturan modul teks di kolom pertama dari setiap bagian tabel (sebenarnya dapat berupa modul apa pun yang menggunakan font default di halaman Anda). Kemudian klik kanan pada Heading 2 Font yang digunakan dan pilih “Find and Replace”. Kemudian perbarui yang berikut ini:

Di bawah "Dalam" simpan "Halaman Ini".
Di bawah "Ganti Lebar", pilih font (Saya menggunakan Roboto Condensed).
Kemudian centang kotak Ganti Semua nilai yang ditemukan di bagian (atau Anda tidak dapat mencentangnya untuk mengganti semua font h2).
Kemudian klik “Ganti”.

Sekarang semua font telah diubah di seluruh halaman.

Itu dia! Sekarang tabel harga horizontal selesai.

Mari kita lihat hasilnya.

Penyesuaian lima kolom pada tablet dan smartphone juga berfungsi dengan baik.

Pikiran Akhir

Tata letak lima kolom Divi, bersama dengan fitur desain canggih yang tersedia di Visual Builder, memungkinkan Anda membuat beberapa tabel harga horizontal yang indah. Dan menyesuaikan warna dan font selama menggunakan Temukan dan Ganti adalah penghemat waktu yang tepat, meningkatkan proses desain lebih jauh lagi. Saya harap Anda menemukan tutorial yang informatif dan inspiratif.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!