Plugin Modern Price Table

Kalau Anda pernah mencoba membuat tabel harga (pricing table) di WordPress, Anda pasti tahu masalah klasiknya: banyak plugin pricing table yang bagus di Elementor tapi tidak punya versi Gutenberg, atau sebaliknya. Ujung-ujungnya Anda harus install dua plugin berbeda, dengan tampilan yang tidak konsisten satu sama lain.

Modern Pricing Table dibuat untuk menyelesaikan masalah itu — satu plugin, satu sumber data, bisa dipakai di Gutenberg dan Elementor sekaligus, dengan tampilan yang selalu konsisten di mana pun Anda menaruhnya.

Di artikel ini saya akan bahas semua fitur yang ada di dalamnya, dari yang paling dasar sampai yang paling detail.

Kenapa Butuh Plugin Pricing Table?

Tabel harga adalah salah satu elemen paling penting di halaman landing page, halaman produk SaaS, atau halaman jasa. Tabel ini yang biasanya jadi penentu apakah pengunjung jadi klik tombol “Beli” atau malah kabur ke kompetitor. Membuatnya manual pakai HTML/CSS itu memungkinkan, tapi:

Butuh waktu lebih lama
Susah diubah-ubah kalau Anda bukan developer
Tidak responsif otomatis di HP kalau tidak dikerjakan dengan teliti

Plugin pricing table yang baik menyelesaikan tiga masalah itu sekaligus, dan itu yang coba dijawab oleh Modern Pricing Table.

Mendukung Gutenberg dan Elementor Sekaligus

Ini fitur inti dari plugin ini. Anda bisa:

Menambahkan block “Modern Pricing Table” langsung di editor Gutenberg
Menambahkan widget “Modern Pricing Table” langsung di editor Elementor
Atau menaruh shortcode [ mdrn_pricing_table id="123"] di tema atau page builder apa pun

Yang membedakan plugin ini dari kebanyakan plugin sejenis: ketiga cara tampil ini memakai satu engine render yang sama di baliknya. Artinya, tabel harga yang Anda buat akan terlihat identik persis, entah ditampilkan lewat Gutenberg, Elementor, atau shortcode — tidak ada perbedaan tampilan yang aneh-aneh.

Live Editing — Tanpa Bolak-Balik ke Halaman Admin

Salah satu keluhan umum soal plugin pricing table adalah harus bolak-balik antara halaman admin dan editor artikel/halaman cuma untuk ganti warna atau nambah baris fitur. Di Modern Pricing Table, semua bisa dilakukan langsung di dalam editor:

Pilih layout, preset desain, warna utama, dan border radius langsung dari panel di sisi editor
Tambah, edit, atau hapus paket (kolom) langsung di situ
Tambah atau hapus baris fitur per paket, tandai fitur mana yang “termasuk” atau “tidak termasuk”
Live preview langsung terlihat begitu ada perubahan — tidak perlu klik “Preview” dulu

Semua perubahan ini otomatis tersimpan (auto-save) tanpa harus mengklik tombol simpan terus-menerus.

Dua Mode: Tabel Tersimpan vs Custom

Plugin ini punya dua pendekatan yang bisa dipilih sesuai kebutuhan Anda:

Mode Tabel Tersimpan — Anda membuat satu tabel harga yang tersimpan sebagai data terpusat, lalu bisa dipakai berkali-kali di banyak halaman/artikel sekaligus. Edit sekali, perubahannya otomatis muncul di semua tempat tabel itu dipasang. Cocok untuk tabel harga utama yang dipakai di banyak halaman (misalnya halaman harga di homepage dan di halaman landing page kampanye iklan).

Mode Custom (khusus di widget Elementor) — isi tabel disimpan langsung di widget itu sendiri, tidak terhubung ke tabel manapun. Cocok kalau Anda cuma butuh satu tabel harga yang memang unik untuk satu halaman saja, tanpa perlu dipakai ulang di tempat lain.

Tiga Pilihan Layout

Modern Pricing Table punya tiga gaya tampilan yang bisa dipilih sesuai kebutuhan:

Simple — kartu-kartu paket berjajar horizontal, gaya paling umum dipakai di halaman pricing SaaS
Comparison — tabel perbandingan dengan fitur sebagai baris dan paket sebagai kolom, memudahkan pengunjung membandingkan detail antar paket. Layout ini juga sudah dibuat bisa digeser (scroll) horizontal di layar HP, jadi tidak berantakan di mobile
Toggle Bulanan/Tahunan — ada saklar untuk beralih antara harga bulanan dan tahunan, cocok untuk model bisnis langganan

Lima Preset Desain Siap Pakai

Kalau Anda tidak mau ribet mengatur desain dari nol, plugin ini menyediakan lima preset visual:

Default — kartu putih bersih dengan border tipis
Minimal — tanpa border/bayangan, gaya flat dan modern
Dark — cocok untuk halaman dengan tema gelap
Gradient — paket “Populer” mendapat gradasi warna yang menonjol
Bordered — gaya garis tebal dengan bayangan offset (neubrutalism)

Semua preset ini otomatis mengikuti warna utama yang Anda pilih, jadi satu preset bisa tampil beda-beda tergantung skema warna brand Anda.

Detail Kustomisasi Per Paket

Untuk setiap paket/kolom harga, Anda bisa atur:

Judul paket
Harga (bulanan dan tahunan terpisah)
Mata uang dan satuan periode (misalnya “/bln”)
Deskripsi singkat
Daftar fitur dengan tanda centang (termasuk) atau silang (tidak termasuk)
Badge “Paling Populer” untuk menonjolkan salah satu paket
Teks dan link tombol Call-to-Action

Kontrol Style Lengkap di Elementor

Kalau Anda pengguna Elementor, tab Style widget ini cukup lengkap, mengikuti standar widget Elementor pada umumnya:

Kartu/kolom: warna background, padding, border, border radius, box shadow, jarak antar kartu
Judul paket: warna dan typography lengkap
Harga: warna terpisah untuk angka dan untuk mata uang/periode
Deskripsi dan daftar fitur: warna dan typography
Tombol CTA: kontrol terpisah untuk kondisi Normal dan Hover, termasuk efek “naik” saat di-hover
Badge: warna dan typography

Tidak Perlu Node.js atau Proses Build

Ini detail teknis yang mungkin tidak semua orang sadari pentingnya: banyak plugin block Gutenberg modern butuh proses build (npm install, npm run build) sebelum bisa dipakai, yang berarti Anda butuh Node.js terpasang di komputer. Modern Pricing Table ditulis supaya langsung berfungsi begitu diaktifkan — tidak ada langkah build tambahan yang harus dilakukan.

Ringkasan Fitur

Fitur	Keterangan
Kompatibilitas	Gutenberg block, Elementor widget, shortcode
Layout	Simple, Comparison, Toggle Bulanan/Tahunan
Preset desain	5 pilihan (Default, Minimal, Dark, Gradient, Bordered)
Live editing	Desain & isi bisa diedit langsung di editor, auto-save
Mode data	Tabel Tersimpan (reusable) atau Custom (khusus Elementor)
Responsif	Layout Comparison bisa di-scroll di mobile
Setup	Tanpa Node.js, tanpa proses build

Kesimpulan

Kalau Anda butuh cara cepat dan konsisten untuk menampilkan tabel harga di WordPress — entah situs Anda pakai Gutenberg murni, Elementor, atau campuran keduanya — Modern Pricing Table dirancang supaya Anda tidak perlu pusing menyesuaikan dua plugin berbeda atau menulis kode custom.

Install, buat tabel pertama Anda lewat menu Pricing Table di admin, lalu tinggal pasang di halaman mana pun yang Anda mau.