WordPress adalah CMS yang banyak digunakan di seluruh dunia karena antarmukanya yang sederhana, tema yang sangat dapat disesuaikan, dan variasi yang tak ada habisnya plugin kuat. Ini telah menyederhanakan pembuatan, pengembangan, dan pengelolaan situs web, bahkan untuk sebagian besar pengguna amatir.

Hari ini, dan berkat WordPress, Anda tidak perlu lagi memiliki pengetahuan khusus untuk membuat halaman web yang menarik. Namun kamu adalah bisa menjadi sudah menemukan situs web yang menawarkan desain yang benar-benar luar biasa, dan Anda mungkin bertanya-tanya: Bagaimana hal itu dilakukan?

Sayangnya, jika Anda seorang amatir atau pemula, Anda tidak dapat berbuat banyak, bahkan dengan WordPress, karena untuk memodifikasi tema Anda, Anda memerlukan tingkat keahlian tertentu dalam HTML, CSS, PHP, dan beberapa keterampilan lainnya tergantung pada sifat tema Anda, tetapi juga proyek atau tujuan Anda.

Namun, meskipun Anda seorang pembuat kode berpengalaman, Anda pasti membutuhkan alat yang memungkinkan Anda menghemat waktu dan kualitas pada hasil akhirnya.

Untungnya, itu Plugin WordPress « WPBakery Page Builder Sebelumnya dikenal sebagai " Visual Composer » memberikan solusi untuk masalah ini. Dengan yang terakhir, bahkan sebagian besar blogger pemula dapat membuat halaman dengan tampilan yang benar-benar unik untuk situs web mereka.

Dengan plugin ini Anda dapat membuat:

  • Halaman arahan yang menarik (halaman arahan)
  • Dari halaman penjualan hingga terlihat profesional
  • Situs "Etalase" untuk bisnis Anda
  • modul halaman untuk pelatihan Anda
  • sebentar

Menurut pendapat saya, ini adalah alat pemformatan (atau tata letak) terbaik di internet. Khusus untuk pengguna WordPress.

Oleh karena itu dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana memberikan tampilan yang unik ke situs web Anda (Atau blog) dengan Plugin Visual Composer.

Jadi ...

Cara menginstal dan mengkonfigurasi Plugin WPBakery Page Builder

WPBakery Page Builder adalah Plugin premium yang dapat Anda beli Codecanyon : Platform penjualan terbaik pada plugin internet.

BAIK. Setelah Anda membeli dan mengunduh plugin tata letak ini di WordPress, yang perlu Anda lakukan hanyalah menginstal dan mengaktifkannya.

Kemudian kita akan mulai dengan membuat beberapa penyesuaian dasar. Untuk melakukan ini, navigasikan ke lokasi "Pengaturan >> Visual Composer » pada dashboard Anda.

Pengaturan umum

pengaturan umum komposer visualTab pertama (pengaturan umum), Memungkinkan Anda untuk mengubah:

  • konten yang visual menulis akan tersedia. Anda dapat memeriksa barang-barang (pos) dan / atau halaman (halaman)
  • Aturan yang berbeda dariakses peran yang berbeda. Dengan opsi ini Anda dapat menentukan yang mengubah apa. Berbagai peran yang tersedia akan ditampilkan. Anda harus mengeklik masing-masing untuk memeriksa elemen-elemennya (peran) akan memiliki akses. Anda memiliki opsi untuk melarang penggunaan " visual komposer ”untuk pengguna dengan peran tertentu.
    aktifkan editor di pembuat halaman WPbakery
  • Aktifkan atau nonaktifkan item responsif
  • Tentukan himpunan bagian untuk font Google

pemilihan peran wpbakerydesain Pilihan

Pada opsi desain, Anda memiliki kemungkinan untuk mengubah tampilan visual default dari berbagai elemen " visual penyusun '. Sebelum menggunakannya, pastikan Anda sudah mencentang opsi « Gunakan opsi desain khusus ».

pengaturan css

Opsi ini memungkinkan Anda untuk menentukan warna yang berlaku untuk semua elemen. 

  • " CSS khusus »Memberi Anda kesempatan untuk menyesuaikan lebih lanjut setiap item, hanya pengembang yang tahu apa itu.
  • Tab « Lisensi produk »Memungkinkan Anda untuk mengaktifkan Plugin untuk menerima pembaruan otomatis.
  • Tab « shortcode aktiva Pada dasarnya adalah tentang pengembang.

Oke, sekarang kita akan membuat halaman web khusus dengan Komposer Visual.

Cara membuat halaman khusus dengan visual penyusun

Untuk membuat halaman web yang dipersonalisasi dengan mudah, Anda memiliki pilihan antara editor " back-office ", Yaitu Anda memodifikasi situs dari dasbor WordPress Anda, dengan" front office '.

Editor-the-front-end-the-editor-backend

Jika Anda menggunakan Gutenberg, Anda akan melihat tombol "Editor Halaman" di bilah tugas atas.

editor komposer visual dashboard editor gutenberg

Keuntungan dengan editor Kantor depan adalah Anda dapat mengedit langsung laman Anda dan melihat bagaimana berbagai elemen muncul pada tema Anda.

Dengan editor back office

Untuk mengakses editor " back-office », Saya mengundang Anda untuk mengklik« Penerbit BACK-OFFICE '. Anda dapat kembali ke editor visual WordPress kapan saja dengan mengklik " modus klasik ". Tapi saya pikir itu tidak perlu, jadi format halaman web plugin ini selesai.

Setelah berada di editor Back-office, Anda dapat memilih tata letak global yang akan diterapkan ke halaman.

Pembaruan halaman bervariasi tergantung pada apa yang Anda rencanakan dengan halaman tersebut. Jadi Anda bisa memilih « pendaratan halaman » untuk membuat halaman rumah, "Daftar layanan" untuk halaman yang menampilkan layanan, dan sebagainya. Dengan pengalaman, Anda bahkan akan berhasil membuat taruhan en halaman dirancang khusus sangat pro.

Apapun pilihan pengaturan Anda halaman, penyajian unsur-unsurnya sama pada semua yang terakhir. Anda dapat menambahkan yang baru elemen en cliquant sur "+" di bagian paling atas meta kotak « Editor Visual », Atau tambahkan model dengan mengklik ikon "Model".

Di setiap baris, Anda bisa (dari kiri ke kanan) :

  • Pindahkan garis
  • Kelola kolom di baris
  • Menambahkan kolom baru

antarmuka pembuat halaman wpbakeryPilihan lain tersedia di sebelah kanan kotak. Opsi ini memungkinkan Anda untuk melakukannya (dari kiri ke kanan) Untuk:

  • kurangi garis
  • edit satu baris
  • duplikat satu baris
  • hapus satu baris

tata letak wpbackeryDi tengah setiap kolom, Anda dapat menambahkan item sebelumnya, mengedit kolom, atau menghapusnya.

opsi bagian wpbackeryopsi bagian wpbackery

Sumber Daya yang Direkomendasikan

Berikut adalah beberapa komposer visual perpanjangan yang sangat kami rekomendasikan:

1 - Bagaimana mengelola kolom

Pada tab manajemen kolom, Anda dapat memilih jumlah kolom yang ingin Anda tambahkan ke baris. Untuk memahami model kolom yang berbeda, ketahuilah bahwa setiap pecahan sesuai dengan lebar kolom yang akan ditempati. Sebanyak templat memiliki pecahan, sering kali laman memiliki kolom.

Tentu saja, 11 template kolom yang berbeda tersedia, tetapi Anda dapat membuat sebanyak yang Anda inginkan dengan mengklik tautan "Dipersonalisasi" tepat di bawah daftar kolom.

Misalnya, untuk menampilkan bagian halaman dengan kolom 2 dengan lebar yang sama, Anda harus memilih (Atau tambahkan) "1 / 2 + 1 / 2". 

Kolom akan ditampilkan di blog Anda dan lebarnya akan didistribusikan secara proporsional dengan dimensi tema. Kolom bisa berisi item sebanyak mungkin, jadi Anda tidak memiliki batasan apa pun pada level ini.

tata letak bagian wpbakery

Elemen yang berbeda dapat dipindahkan ke kolom manapun.

memindahkan kotak teks wordpress wpbakeryDengan mengarahkan kursor ke setiap elemen, Anda akan dapat mengakses opsinya, khususnya tombol yang memungkinkan untuk:

  • bergerak elemen
  • pengubah elemen
  • duplikat elemen
  • supprimer elemen

Pilihan-the-unsur

2 - Cara menambahkan elemen

Anda memiliki opsi untuk menyesuaikan setiap kolom dengan elemen yang diajukan oleh " visual Menyusun '. Untuk menambahkan item, klik tombol "+" pada kolom tertentu atau pada tombol "+" Menu Utama Plugin.

tambahkan elemen wpbakery
Saat kolom kosong (ne mengandung tidak ada konten)dia punya tombol "+" dalam.
 Untuk menambahkan video misalnya, klik tombol ini dan pilih elemen video.

add-a-video

Mengkliknya akan membuka jendela baru. Di jendela ini, Anda harus memberikan judul, tautan ke video, dan kelas tambahan (yang tidak wajib). Jika Anda sudah selesai memasukkan berbagai informasi tentang video Anda, jangan lupa untuk menyimpan perubahan Anda.

penyetelan video wpbakeryVideo Anda akan tersedia di editor back office. Simpan perubahan Anda sekali lagi. Anda sekarang dapat melihatnya hanya dengan mengklik "pratinjau".

tambahkan video wpbakery wordpressProses untuk menambahkan item sama untuk semua item lainnya, dengan beberapa pengecualian. Informasi yang akan dilengkapi dapat bervariasi tergantung pada elemen. 

Dengan memilih elemen teks misalnya, Anda akan menemukan editor visual klasik (yang tersedia saat menulis artikel atau halaman), tetapi juga opsi yang memungkinkan Anda menambahkan animasi saat menampilkan elemen. Oleh karena itu yang terakhir dapat memudar dari satu posisi ke posisi lain, tergantung pada pengaturan Anda.

pengaturan blok teksPaling menarik dengan ini Plugin, adalah bahwa Anda akan dapat membuat sidebars jika tema Anda tidak, misalnya. Untuk melakukan ini, klik tombol tambah (" + "), dan pilih elemen " Komentar WP baru-baru "" Facebook 'like' Dan akhirnya « Kategori Wp '.

Sekarang buat templat kolom khusus ini 1 / 3 + 2 / 3 »Atau lainnya dan tambahkan elemen sidebar di kolom kiri atau di kanan. Itu tidak masalah karena itu semua tergantung pada seberapa lebar Anda ingin memberikan sidebar Anda dibuat di bawah ekstensi tata letak ini daripada di Visual Composer.

konfigurasi kolom wpbakery

Anda akan melihat kolom kosong baru di sebelah kanan, tambahkan elemen baru pilihan Anda (Saya sarankan Anda menambahkan teks sederhana). Sekarang simpan halaman tersebut dan buka pratinjau untuk melihat hasil dari latihan ini.

3 - Cara menyimpan dan menggunakan kembali templat halaman

Anda dapat menyimpan template halaman Anda dan menggunakannya nanti. Saya suka opsi ini karena Anda tidak perlu menghabiskan waktu berjam-jam untuk menyalin template dari halaman. Di sini semuanya dilakukan dengan satu klik. Ya, Anda dengar, DALAM SATU KLIK… atau dalam dua 🙂

Untuk menyimpan template, klik ikon template. Di jendela yang akan muncul, masukkan nama model Anda di " Simpan tata letak saat ini sebagai templat », Kemudian klik pada« Simpan template '.

Penting: Anda harus melakukan ini pada halaman yang ingin Anda simpan sebagai templat dan bukan pada halaman kosong.

mendaftarkan wpbakery model

Dengan cara yang sama Anda akan menemukan berbagai model yang Anda simpan, lebih jauh di bawah jendela yang sama di bagian tersebut "Muat model".

model saya wpbakeryYang harus Anda lakukan dalam hal ini adalah membuat halaman baru, lalu, pergi ke template dan pilih yang ingin Anda berikan pada halaman Anda.

Dengan editor kantor depan

Editor kantor depan memiliki keuntungan de memungkinkan Anda untuk mengedit halaman Anda secara real time. Dengan kata lain, ini memungkinkan Anda melihat seperti apa setiap perubahan yang Anda buat pada situs Anda akan terlihat seperti menggunakan Visual Composer. Keuntungan dengan pendekatan ini adalah Anda tidak harus bekerja secara membabi buta seperti yang Anda lakukan dengan editor halaman back-office.

Anda dapat beralih dari satu opsi ke opsi lainnya kapan saja (Kantor back office atau tepi).

Editor front-office tidak jauh berbeda dengan editor back-office, karena terdapat bilah pemakai identik, tetapi juga semua opsi di editor back office sama seperti di editor kantor depan.

wpbakery toolbarNamun, lima tombol baru telah ditambahkan, ini termasuk:

  • Aktivasi atau penonaktifan panduan
  • Emulator, yang memungkinkan Anda melihat seperti apa tampilan blog Anda di berbagai perangkat
  • Kembali tombol untuk back office
  • Tombol simpan perubahan
  • Tombol exit visual penyusun

Pilihan wpbakerySetiap elemen halaman dapat dimodifikasi, Anda akan dapat melihat opsi yang tersedia dengan mengarahkan kursor ke setiap elemen. Tombolnya berbentuk "BERMAIN", akan memungkinkan Anda menampilkan lebih banyak opsi untuk suatu elemen.

Pilihan-the-unsur-of-the-front office

Langkah pertama Anda mungkin sulit, tetapi dengan latihan Anda akan mencapai a halaman rumah seperti ini.  Jika Anda ingin, sebelum Anda mendapatkan PluginAnda bisa mengujinya secara gratis (login, pengguna: demo, password: demo).

Inilah yang bisa saya capai dalam 1 menit di rumah. Dengan latihan, Anda bisa mencapai hasil yang sangat memuaskan. Dan jika Anda memerlukan bantuan untuk membangun situs web WordPress Anda dengan plugin canggih ini, silakan hubungi tim BlogPasChersiapa yang akan dengan senang hati mewujudkan proyek Anda.

Saya harap tutorial ini sepenuhnya dalam bahasa Prancis akan membantu Anda mengambil langkah pertama Anda dengan Plugin « Visual Composer '. Jika Anda punya masalah, kami (atau bantuan) akan dengan senang hati membantu Anda. Jangan lupa: halaman web yang indah mengkonversi lebih banyak pelanggan penasaran.

Ekstensi yang disarankan

Berikut adalah beberapa komposer visual perpanjangan yang sangat kami rekomendasikan:

Temukan lebih banyak plugin Codecanyon

Bagi tutorial ini dengan mereka yang membutuhkan.