Buat Tabel Harga Dengan Editor Blok Gutenberg

Dalam lebih dari setahun kami telah melihat evolusi besar dalam editor blok Gutenberg. Dibandingkan dengan editor WordPress klasik, sekarang kita dapat mendesain elemen di postingan dan halaman kita yang sebelumnya hanya dapat dilakukan dengan coding.

Misalnya, dengan editor klasik, cara termudah untuk menampilkan tabel di postingan adalah membuat buat tabel tersebut di spreadsheet, mengekspornya sebagai gambar, lalu menyisipkannya ke postingan tempat Anda ingin menampilkannya. Tapi salah satu blok yang sekarang kita temukan di editor WordPress baru adalah blok tabel. Mari kita lihat bagaimana kita membuat tabel dengan Gutenberg dan sejauh mana kita bisa membuat tabel harga dengan blok yang sama ini.

Blok Meja

Membuat tabel semudah menambahkan blok Tabel baru di mana kita menunjukkan jumlah baris dan kolom yang kita inginkan dan perataannya.

Dalam blok Tabel, kita dapat menyesuaikan properti berikut:

Kami juga dapat menunjukkan di setiap sel perataan teks dan apakah font tebal atau miring, dan menambahkan tautan. Selain itu, kita dapat memodifikasi tabel kapan saja dengan menambahkan atau menghapus baris dan/atau kolom.

Dengan cara ini, kita melihat bahwa kita dapat dengan mudah membuat tabel berikut:

Ini jauh lebih sederhana dan lebih cepat daripada yang bisa kita lakukan dengan editor klasik. Dan hasil yang diperoleh tentunya dapat berfungsi untuk menampilkan tabel data.

Batasan Blok Tabel

Meskipun sangat mudah bagi kami untuk membuat tabel sebelumnya, kami menemukan beberapa keterbatasan. Di satu sisi, tabel yang Anda desain dengan blok tipe Tabel di Gutenberg tidak responsif. Artinya, tabel tidak pecah tetapi menjadi lebih kecil tanpa dapat menampilkan elemen tabel yang berbeda menurut kolom:

Tabel yang sepenuhnya beradaptasi dengan perangkat menampilkan elemen tabel dengan memecah tabel menjadi kolom, sehingga semua sel ditampilkan dengan lebih baik.

Selain kemampuan (dalam) untuk beradaptasi dengan perangkat, seperti yang mungkin telah Anda perhatikan, dalam blok tabel kita tidak dapat dengan mudah mengubah jenis dan ukuran font, warna, dll. di setiap sel. Artinya, karena segala keterbatasannya, blok tabel Gutenberg tidak berguna untuk membuat tabel harga yang menarik untuk produk Anda.

Bagaimana kita bisa membuat tabel responsif ini?

Alternatif

Blok Kolom

Alternatifnya adalah mencoba meletakkan tabel dengan blok kolom:

Dasar

untuk freelancer dan situs web pribadi

€ 29 / bulan

1 situs

5.000 kunjungan ke halaman yang diuji

Langganan

Profesional

untuk pengusaha kecil

€ 89 / bulan

5 situs

35.000 kunjungan ke halaman yang diuji

Langganan

Perusahaan

untuk tim yang berfokus pada pengoptimalan

€ 259 / bulan

? 10 situs

200.000 kunjungan ke halaman yang diuji

Langganan

Keuntungan dari blok kolom, dibandingkan dengan blok Tabel, adalah sepenuhnya responsif, dan pada layar seluler kita akan melihat bahwa masing-masing paket ditampilkan di belakang yang lain.

Kami melihat bahwa kolom sepenuhnya responsif. Dan tentunya kolom, untuk menunjukkan sedikit informasi dan tanpa terlalu banyak komplikasi, merupakan alternatif untuk dipertimbangkan.

Harga Plugin Blok Tabel

Rekomendasi saya jika Anda harus membuat tabel harga yang menarik adalah Anda menginstal beberapa plugin yang menyertakan blok untuk ini. Mereka mungkin tidak mengizinkan Anda, tanpa menyentuh kode, segala jenis penyesuaian, tetapi dalam banyak kasus Anda bisa mendapatkan hasil yang sangat elegan. Mari kita lihat beberapa contoh yang terintegrasi penuh dengan editor blok Gutenberg.

CoBlock

Coblocks adalah plugin yang mencakup seluruh rangkaian blok yang sepenuhnya disesuaikan dengan Gutenberg. Salah satunya adalah blok Tabel Harga.

Ini sangat sederhana dan mudah digunakan dan, tanpa pengkodean, Anda dapat menyesuaikan jumlah kolom dan beberapa aspek yang terkait dengan tipografi, serta warna kolom dan teks. Anda dengan cepat memiliki tabel harga yang sepenuhnya responsif seperti yang ditunjukkan pada gambar berikut.

getwid

Demikian pula, plugin Getwid juga mencakup seluruh rangkaian blok yang sepenuhnya kompatibel dengan editor Gutenberg. Dengan cepat, Anda dapat dengan mudah membuat tabel harga yang sepenuhnya responsif seperti ini:

Dalam hal ini, Anda dapat menyesuaikan font dan warna latar belakang dan teks.

Blok Premium untuk Gutenberg

Plugin Premium Blocks for Gutenberg juga menyertakan blok yang dengannya Anda dapat membuat tabel harga yang sangat menarik. Di bawah ini saya tunjukkan gambar tabel harga yang saya buat dengan blok Tabel Harga yang disisipkan di kolom.

Blok ini memungkinkan Anda untuk menyesuaikan warna, font, jenis tombol, jika Anda ingin menyertakan ikon, properti tentang cara menampilkan harga, fitur, dan deskripsi, antara lain. Seperti yang Anda lihat, ini memungkinkan Anda kustomisasi yang sangat lengkap.

Plugin Dengan Editor Bawaan

Atau, Anda akan menemukan jenis plugin lain yang menyertakan editor tabel harga bawaan yang terintegrasi ke dalam dasbor WordPress Anda dan dengannya Anda dapat membuat tabel yang sangat lengkap dan disesuaikan. Setelah tabel yang diinginkan dibuat, tabel ini dapat dimasukkan ke halaman atau posting mana pun dengan menggunakan kode pendek. Mari kita lihat beberapa contohnya:

Tabel Harga Responsif

Tabel Harga Responsif adalah plugin yang menambahkan editor baru ke WordPress Anda sehingga Anda dapat membuat tabel harga. Anda dapat menambahkan sejumlah besar paket dan menyesuaikannya masing-masing.

Untuk setiap paket, Anda dapat menambahkan nama, subtitle, deskripsi, dan harga. Anda juga dapat menambahkan daftar fitur, menyesuaikan tombol pembelian, dan mengubah skema warna paket.

Setelah paket dibuat, Anda hanya perlu menambahkannya menggunakan kode pendek di halaman harga.

Tabel Harga oleh Supsystic

Plugin Supsystic Pricing Table menambahkan editor drag-and-drop ke dashboard WordPress Anda yang dapat digunakan untuk membuat tabel. Ini menawarkan banyak desain tabel responsif. Dalam versi gratis, Anda memiliki hingga 7 desain yang tersedia.

Setelah memilih desain tabel yang diinginkan, Anda memiliki editor yang memungkinkan Anda untuk mengubah jumlah kolom dan menyesuaikan banyak fitur dari setiap paket yang ditampilkan. Dan Anda juga dapat mengubah tata letak kapan saja. Terakhir, seperti sebelumnya, tabel dapat dimasukkan ke halaman atau postingan apa pun dengan kode pendek.

Plugin gratis lainnya yang mengintegrasikan editor tabel harga adalah:

• Tabel Harga menurut ARPrice
• Tabel Harga Plugin WordPress – Tabel Harga Mudah oleh Aplikasi Fatcat
• Pembuat Tabel Harga Responsif – pembuat wpPricing
• Tabel Harga WRC
• Pembuat Tabel Harga – Tabel Harga AP Lite
• Tabel Harga TC menurut kode tema
• Tabel Harga – bh A WP Life

Kesimpulan

Seperti yang Anda lihat, di WordPress Anda memiliki berbagai alternatif untuk membuat tabel harga tanpa biaya tambahan dan tanpa harus membuat kode secara langsung. Jadi tinggal memilih opsi yang paling sesuai dengan kebutuhan Anda.

Ingatlah bahwa halaman tempat Anda menampilkan harga produk Anda akhirnya menjadi yang paling penting untuk mendapatkan pelanggan. Jadi, waktu yang Anda habiskan untuk membuatnya menarik tidak akan sia-sia. Dan untuk menginspirasi Anda, Anda dapat melihat desain tabel harga produk Nelio A/B Testing kami, manakah yang menonjol sebagai gambar unggulan posting ini?.