Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Memulai Dengan Visual Composer

by
Difficulty:BeginnerLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Indonesian (Bahasa Indonesia) translation by Agung Santoso (you can also view the original English article)

WordPress adalah CMS favorit dunia karena antarmukanya yang sederhana, tema yang sangat bisa disesuaikan dan berbagai jenis plugin yang hebat. Ia memiliki pengembangan dan manajemen situs web yang telah disederhanakan bahkan untuk pengguna yang paling amatir.

Namun, masih ada saat-saat ketika Anda melihat desain situs web tertentu, yang segera menarik perhatian Anda, dan Anda ingin mengubah situs web Anda sendiri agar terlihat sama. Sayangnya, jika Anda seorang amatir sepenuhnya, Anda tidak akan mampu berbuat banyak bahkan dengan WordPress, karena modifikasi tema memerlukan tingkat keahlian tertentu dalam HTML, CSS, PHP dan beberapa keterampilan lainnya tergantung pada sifat dari tema Anda. Tetapi bahkan jika Anda seorang pembuat program yang ahli, mungkin Anda masih memerlukan beberapa jam untuk membuat modifikasi yang diinginkan.

Untungnya, Plugin Visual Komposer Wordpress telah menyederhanakan masalah ini. Dengan plugin pembuat halaman yang mengagumkan ini, bahkan pengguna WordPress yang paling dasar dapat memodifikasi desain tema dan menciptakan tampilan yang benar-benar unik untuk situs web mereka. Untuk ahli WordPress, ini adalah penghemat waktu yang besar dan dapat membantu mereka memodifikasi halaman hanya dalam beberapa menit. Secara keseluruhan, plugin telah sukses besar sehingga sudah dimasukkan dalam banyak tema terbaru WordPress.

Jadi dengan latar belakang ini, perbolehkan saya memandu Anda dalam beberapa fitur utama dari Visual Composer, dan bagaimana pengaturannya untuk situs web WordPress Anda.

Fitur Utama

Visual Komposer dirancang oleh orang-orang di WP Bakery . Ini adalah plugin berbayar yang tidak tersedia secara terbuka di direktori Plugin WordPress . Anda hanya dapat mengunduh dari CodeCanyon .

Lebih dari 70.000 pengguna telah mengunduhnya dan tampaknya menuju ke arah yang lebih sukses! Visual Composer memiliki beberapa fitur yang sangat berguna yang dapat membuat pengalaman membangun halaman di WordPress menjadi sangat menyenangkan. Berikut adalah beberapa pandangan singkat tentang hal ini.

Membangun Halaman Frontend dan Backend

Fitur yang paling kuat dari Visual Composer adalah tersedianya pembangun halaman menggunakan geser dan letakkan yang dapat digunakan dari wilayah edit halaman/pos WordPress standar atau langsung dari frontend.

Kompatibilitas Tema yang Universal

Visual Composer bukan tema khsusus. Ini berarti Anda dapat menggunakannya dengan berbagai tema Wordpress tanpa perlu melakukan penyesuaian terhadap kode yang ada.

Tata Letak yang Sangat Bisa Diubah

Elemen-elemen geser dan letakkan dari Visual Composer memiliki tata letak dan tema standar. Namun, Anda dapat mengubahnya sesuai dengan skema warna dan penampilan dari situs Anda.

Lebih dari 40 Elemen Desain yang Siap Digunakan

Antarmuka geser dan letakkan Visual Composer memiliki lebih dari 40 elemen geser dan letakkan siap pakai yang dapat digunakan untuk membuat tata letak yang unik untuk situs web Anda dalam beberapa menit.

Elemen yang Responsif Sepenuhnya

Elemen-elemen desain dan halaman yang dibuat dengan Visual Composer benar-benar responsif dan siap untuk tampilan mobile.

Bersahabat dengan Pengembang

Visual Composer penuh dengan elemen geser dan letakkan serbaguna. Jika Anda ingin menambahkan lebih banyak lagi, Anda dapat dengan mudah melakukannya berkat sifatnya yang bersahabat dengan pengembang.

Instalasi dan Konfigurasi Plugin

Seperti yang saya sebutkan sebelumnya, Visual Composer adalah sebuah plugin berbayar. Jadi, Anda perlu membelinya terlebih dahulu lalu mengunggahnya ke situs WordPress Anda.

Langkah 1

Proses instalasi sama seperti plugin WordPress lainnya. Setelah diaktifkan, plugin akan muncul pada opsi Pengaturan di bagian menu kiri pada dasbor utama WordPress.

Langkah 2

Di sini, Anda dapat menyesuaikan beberapa pengaturan dasar plugin.

Langkah 3

Anda dapat mengaktifkan Visual Composer untuk Halaman dan Pos, atau salah satu dari mereka. Anda juga dapat mengatur hak akses khusus untuk jenis pengguna individu. Untuk setiap tipe pengguna, Anda dapat memilih untuk menampilkan Visual Composer dan editor WordPress standar di wilayah edit pos, atau Anda dapat menampilkan hanya Visual Composer saja. Anda juga dapat mengaktifkan atau menonaktifkan elemen Visual Composer individu untuk pengguna yang berbeda.

Langkah 4

Pada tab Desain Options, Anda dapat memodifikasi tampilan dan nuansa dari elemen Visual Composer sesuai dengan tema situs web Anda. Tab Custom CSS memungkinkan Anda untuk memodifikasi CSS tanpa mengubah file lainnya, sementara tab Product License memungkinkan Anda untuk mengintegrasikan akun Envato Anda untuk mengaktifkan dukungan dan update otomatis. Pada tab My shortcode, Anda dapat menambahkan shortcode tambahan yang dikembangkan secara manual ke daftar shortcode yang sudah ada di Visual Composer.

Sekarang mari kita beralih ke penggunaan aktual plugin!

Menggunakan VC pada Halaman dan Pos

Seperti yang saya sebutkan di atas, Anda dapat mengaktifkan Visual Composer untuk Pos, Halaman atau salah satunya. Setelah mengaktifkan plugin, Anda akan melihat tab Visual Editor di atas editor teks standar WordPress.

Dua tab yang muncul di atas editor teks adalah Backend Editor dan Frontend Editor. Ini adalah opsi yang membuat penggunaan plugin ini menjadi menyenangkan. Dari sini, Anda dapat membuat struktur halaman yang Anda inginkan. Mari kita mulai dengan editor backend.

Editor Backend

Langkah 1

Ketika Anda mengklik pada tab Backend editor, wilayah editor teks Anda akan berubah menjadi kotak geser dan letakkan di mana Anda dapat menambahkan elemen dengan hanya memilih mereka dari daftar. Tetapi pertama-tama, Anda perlu menambahkan baris. Dari sini, satu-satunya hal yang membatasi desain Anda adalah imajinasi Anda.

Langkah 2

Anda dapat menambahkan elemen yang berbeda pada baris dan juga memilih tata letak kolom yang berbeda untuk setiap baris dengan meletakkan pointer mouse Anda pada tombol di atas editor konten. Anda dapat menambahkan elemen yang berbeda untuk merancang halaman Anda dari tab Add element. Kotak Add elements berisi semua yang anda butuhkan untuk merancang sebuah situs web.

Elemen-elemen dibagi ke dalam kategori Konten, Sosial, Struktur Situs, Elemen Baru dan Widget Wordpress , tetapi Anda juga dapat melihat semuanya secara bersamaan. Apapun pilihan yang Anda butuhkan, klik saja dan tarik ke dalam kotak konten Anda. Halaman Anda pada dasarnya dibagi menjadi baris yang berbeda. Anda dapat terus menambahkan baris baru dan elemen-elemen baru dalam baris itu.

Langkah 3

Untuk mengedit, menghapus atau menggandakan setiap baris tertentu, cukup gunakan ikon di atas setiap kotak baris.

Langkah 4

Anda dapat menyimpan pengaturan konten tertentu sebagai template siap guna yang bisa diambil dari daftar, kapanpun Anda membutuhkannya.

Langkah 5

Visual Composer juga memungkinkan Anda untuk menambahkan CSS kustom untuk setiap halaman dan pos. Efek CSS kustom ini terbatas pada halaman atau pos tertentu saja.

Visual Composer juga mendukung beberapa plugin WordPress terkenal seperti Contact Form 7, Layer Slider, Revolution Slider dan Gravity Forms. Jika Anda telah menginstal plugin ini, mereka akan ditambahkan secara otomatis ke kotak Add element. Bila Anda memilih salah satunya dari daftar elemen, maka akan langsung dimasukkan ke dalam halaman Anda tanpa perlu menambahkan shortcode. Backend Editor memberi Anda begitu banyak fleksibilitas dan pilihan sehingga anda dapat membuat berbagai jenis desain bahkan jika Anda adalah pengguna amatir.

Editor Frontend

Editor frontend memungkinkan Anda menggeser dan meletakkan elemen halaman dalam tampilan halaman tayang. Hal ini memudahkan dalam melihat dampak perubahan Anda secara langsung sementara memiliki semua pilihan editor backend juga. 

langkah 1

Mulai dari kiri, Anda dapat menambahkan elemen baru dengan mengklik tanda + dan mengedit tata letak kolom dengan tombol kolom di sebelahnya.

Langkah 2

Anda juga dapat menambahkan baris baru atau kolom dari tanda + dalam konten halaman.

Langkah 3

Semua elemen dari Visual Composer benar-benar responsif dan siap untuk tampilan mobile. Anda bisa mendapatkan preview tayangan untuk berbagai perangkat dalam editor frontend dari ikon di bawah ini.

Langkah 4

Disamping semua fitur dan berbagai elemen, Visual Composer juga memungkinkan Anda untuk menambahkan shortcode dan elemen desain Anda sendiri. Anda dapat membuat elemen sendiri atau mengimpor mereka dari layanan pihak ketiga.

Dalam ringkasan

WordPress selalu menjadi platform yang fleksibel dalam hal fungsi-fungsi berbeda yang dapat didukung melalui plugin-pluginnya. Tetapi dengan plugin pembangun halaman Visual Composer, bahkan aspek desain WordPress, yang pernah terbatas pada pengguna tingkat lanjut saja, sekarang dapat diedit dalam waktu yang sangat cepat. 

Bagi saya, secara pribadi, Visual Composer telah mengurangi waktu secara signifikan, biasanya dulu saya menghabiskan waktu untuk tugas mendesain dan mengedit situs web klien, dari beberapa jam sampai beberapa menit. Dan dengan meningkatnya popularitas plugin ini, saya hanya bisa melihat semakin banyak pengguna WordPress bergantung padanya dalam beberapa waktu kedepan.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.