PSD to Wordpress dengan Visual Composer

Visual Composer

Pada tulisan ini saya akan berbagi pengalaman saya tentang Plugin Wordpress premium yaitu “Visual Composer”, plugin ini merupakan sebuah page builder milik WPBakery. Harga dari Visual Composer adalah $34 untuk Regular license, tetapi untuk Extended yaitu $174. Dengan Visual Composer atau disingkat VC kita tinggal drag and drop component yang disediakan oleh VC untuk membuat sebuah halaman pada wordpress, banyak komponen yang disediakan oleh VC contohnya adalah : Section, Row, Heading Text, Text Block, Button, Image Single, Carousel Image, dan masih banyak lagi.

Yang saya pelajari dalam VC bukan hanya struktur dari VC itu sendiri tetapi bagaimana cara membuat Custom Component untuk develop sebuah Theme WP nantinya, setelah mencari-cari cara membuat Custom Component akhirnya saya menemukan dokumentasi dari VC, berikut ini link nya : https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332

Dalam belajar VC saya mencoba slicing langsung dari PSD ke Wordpress, berikut ini hasil belajar coba coba saya :

Theme WP menggunakan Visual Composer

Gambar diatas adalah theme Wordpress custom yang saya buat dengan bantuan VC sebagai builder nya. Bisa dilihat theme tersebut masih belum selesai, ada 2 component yang belum saya tambahkan, yaitu Nav, dan Mini Carousel di Hero Area.

Pada proses develop theme tersebut tinggal drag and drop saja dan menambahkan sedikit CSS untuk beberapa tag seperti input, button, dll. Berikut ini adalah contoh tampilan backend dari VC pada section “Get the most useful latest fashion”

Tampilan Backend Visual Composer

Bisa dilihat pada bagian kiri adalah komponen Single Image dan sebelah kanan adalah Custom Heading.

Untuk custom component yang saya buat pada theme tersebut adalah Input Email Field :

Email Field

dan Social Media Button pada footer :

Social Media Button Footer

Social Media Button ini juga sudah saya hubungkan ke Theme Options, kebetulan saya menggunakan Redux Framework untuk membuat Options nya, berikut ini tampilan Options untuk Social Media Button:

Options untuk Social Media Button

Dengan options tersebut akan mempermudah user untuk mengganti social media yang dipakai dan link dari social media tersebut.

Sekian tulisan dari saya, terimakasih telah meluangkan waktu untuk membaca, Terimakasih.