Plugin Wordpress untuk Mengatur Layout pada Page

Selamat pagi... Hari ini kita akan mengenal beberapa plugin yang bisa kita gunakan untuk mengatur layout di dalam Page pada wordpress. Page yang saya maksud di sini bukan templatenya, akan tetapi content atau isi. Jadi jangan salah paham dengan mengira pembahasan kali ini tentang mengatur template.

Baiklah, plugin yang kita perlukan adalah tiga ini:

Untuk mendapatkan pluginnya, silahkan cari di situs https://wordpress.org/plugins/. Adapun kegunaan dari masing-masing plugin adalah:

1. PageBuilder by SiteOrigin berfungsi untuk membuat semacam grid pada Page.
2. Black Studio TinyMCE Widget berfungsi untuk mengisi grid atau kolom yang telah kita buat dengan PageBuilder.
3. Shortcodes Ultimate berfungsi untuk memasukkan komponen-komponen pada TinyMCE Widget.

Kali ini saya hanya memberikan contoh penggunaannya saja ya, dengan asumsi bahwa kita telah menginstall plugin-plugin di atas.

Pertama-tama, silahkan login ke cms wordpress kita dan kemudian kita buat sebuah page baru.

Jika kita telah menginstall plugin Page Builder, maka akan ada tab PageBuilder. Silahkan klik, maka akan muncul seperti ini:

Page Builder berfungsi mirip seperti grid. Tekan tombol add row. 

 Silahkan isi Set Row Layout dengan jumlah kolom yang diinginkan. Jika bernilai 2, maka akan terlihat seperti gambar di atas. Jika bernilai 3, maka akan terlihat seperti gambar di bawah.

 Setelah itu, tekan tombol insert. Saya mengisi Set Row Layout dengan nilai 3, maka terlihat seperti gambar di bawah.

 Setelah itu, tekan kolom yang ingin kita isi dan tekan Add widget. Pilih Visual Editor. Widget tersebut hanya ada bila kita sudah menginstall Black Studio TinyMCE Widget. Jika kita tidak menemukannya, coba scrool ke bawah karena widget tersebut biasanya berada di pojok bawah.

 Setelah kita menekan widget Visual Editor, maka widget tersebut akan berada pada kolom yang sebelumnya.

Jika kita ingin memasukkan lebih dari satu widget Visual Editor ke dalam kolom, maka caranya adalah klik kolom yang sudah ada widget Visual Editor-nya (bukan widgetnya yang kita klik) lalu klik Add row dan pilih widget Visual Editor. Seperti di bawah:

 Arahkan kursor ke widget Visual Editor, maka akan muncul link Edit, Duplicate dan Detele. Klik Edit. Jika kita ingin menghapus widget tersebut, klik Delete.

Silahkan isi sesuai keinginan. Tapi, bila kita ingin memasukkan gambar, maka klik Add Media.

 Lalu klik Select Files untuk memilih gambar dan silahkan upload.

Klik Insert shoctcodes untuk menambahkan komponen-komponen web seperti button, label, dan lain-lain.

Contohnya kita pilih button. Nanti akan ada beberapa pengaturan dari komponen button.

Di sini kita masukkan gambar pada widget Visual Editor kita.

 Dan hasilnya akan terlihat seperti ini.

Pada page, layoutnya pilih seperti gambar di bawah.

Nanti akan pada halaman seperti ini:

Silahkan dicoba berkreasi. Semoga berguna...