Writing HTML, CSS, and PHP code to build or customize a WordPress site can be incredibly time consuming, even for an experienced web developer. That’s probably why much of the WordPress community has moved on to using page-builder plugins instead.
WPBakery Page Builder (formerly called Visual Composer) is the most flexible and feature-rich WordPress page-builder plugin you can get your hands on in 2019. It’s compatible with almost every modern WordPress theme, and you don’t need any programming skills to be able to use it. In fact, while using it, you won’t even have to type in any shortcodes!
With the elaborate yet intuitive front-end and back-end editors WPBakery Page Builder offers, creating pages for your WordPress site often involves nothing more than a few clicks and drag-and-drop operations. In this tutorial, I’ll show you how to add WPBakery Page Builder to your WordPress instance and introduce you to all its important features.
Prerequisites
To be able to follow this tutorial, you’ll need:
Additionally, to better understand why you should be using WPBakery Page Builder instead of all the other page-builder plugins available today, I suggest you read the following article:
1. Installing WPBakery Page Builder
WPBakery Page Builder is a premium WordPress plugin. It’s available on CodeCanyon, so log in to your Envato account and purchase a license for it. It’s still often known by its old name: Visual Composer.
After you purchase it, you’ll be able to download a ZIP file containing various files related to the plugin.
Extract the ZIP file and look for a file named js_composer.zip. This is a plugin archive file, which you must upload to your WordPress server. So log in to your WordPress admin panel and go to Plugins > Add New. Then click on the Upload Plugin button and select js_composer.zip.
Press the Install Now button to start the installation.
Once the installation’s complete, press the Activate Plugin button. As soon as you do so, you’ll be taken to WPBakery Page Builder’s welcome screen.
2. Configuring the Plugin
WPBakery Page Builder is extremely customizable. It has dozens of configuration options you can tweak until the plugin’s behaviors match your requirements. Press the Settings button on the welcome screen to take a look at them.
The plugin has a well-thought-out default configuration that’s good enough for most use cases. For instance, in the General Settings tab, you can see that it supports responsive design right out of the box.
The plugin also tries to apply various optimizations to ensure that the pages you create with it have minimal load times. For instance, it uses only the Latin script subset of Google fonts by default. To support other scripts, all you need to do is change the Google fonts subsets option.
In the Role Manager tab, you may notice that this plugin is available only for the pages of your WordPress site. If you want it to be available for your posts too, select Custom in the Post types list and enable the post option.
After you make the changes, scroll down and click on the Save Changes button.
Lastly, if you want to customize the look and feel of WPBakery Page Builder’s content elements, switch to the Design Options tab and check the Use custom design field. Once you do so, you’ll be able to change the default colors, margins, and widths the plugin uses.
3. Using the Back-End Editor
WPBakery Page Builder comes with two powerful editors: a back-end editor and a front-end editor. They’re both accessible only inside a page or a post. Therefore, for now, I suggest you create a new page by going to Pages > Add New.
In the page creation interface, you’ll be able to choose which editor you want to use. Start by clicking on the Backend Editor button to open the back-end editor.
Using this editor, you can easily add a variety of commonly-used elements to the page. WPBakery Page Builder offers simple elements such as text blocks, images, and separators. It also offers more advanced ones such as Facebook “Like” buttons, Google Maps, charts, and animated carousels.
For ease of access, the elements are divided into four different categories: content, social, structure, and WordPress widgets.
As the name suggests, content elements are elements that you’d usually use to create the contents of a page or a post. Similarly, social elements are those that make it easy for users to share your page on social platforms. Structure elements, on the other hand, are for more advanced users, who are comfortable writing code. They allow you to directly add raw HTML and JavaScript to your page.
To add an element, all you need to do is press the Add Element button and select the desired element.
Alternatively, you can press the Add Text Block button to directly add some text to the page.
Note that if you aren’t satisfied with the default look of an element, you can always modify its styles by switching to the Design Options tab.
After you’ve added a few elements, you may notice that each element has a toolbar associated with it, containing a few buttons. These buttons display intuitive icons and allow you to perform important operations such as dragging and dropping the element to change its location, duplicating it, deleting it, or editing its contents.
4. Using the WYSIWYG Front-End Editor
The back-end editor is ideal for long, complex pages that contain lots of elements. While using it, you need to press the Preview button whenever you want to see what your page is going to look like when it’s published.
If you choose to use the WYSIWYG front-end editor instead, you get to work with the final appearance of your page right from the beginning. You can always seamlessly switch from one editor to the other, so scroll up and press the Frontend Editor button to open the new editor.
In this editor, you’ll see the toolbars associated with an element only when you hover over the element. These toolbars and the functionality they offer are very similar to those offered by the back-end editor.
Additionally, the front-end editor allows you to see what the page looks like on various screen sizes. It also allows you to continue editing the page in any screen size you prefer.
5. Using Templates
WPBakery Page Builder allows you to convert any page or post you create with it into a template. By using this feature, you can minimize the amount of repetitive work you do while creating pages for your WordPress site.
To save the current layout of your page as a template, open the Templates dialog, give a name to the template, and press the Save Template button.
You aren’t limited to working with your own templates. This plugin comes with a large template library, which is updated regularly. To open the library, switch to the Template Library tab and press the Access Library button.
The library, as you can see, contains a wide variety of premium-quality layout templates. All of them are available to you for free. You must, however, activate your WPBakery Page Builder license before you can use them.
Broadly, the templates can be divided into two categories: templates for entire pages and templates for individual, independent portions of a page. For example, the About Page template is a template that helps you create a complete “about us” page. But the Hero Section template only creates a hero section for you.
Conclusion
In this tutorial, you learned how to download, install, and configure WPBakery Page Builder. You also saw how easy it is to create pages and posts for your WordPress site with it. To learn more about this plugin, do refer to its documentation.
By creating the Visual Composer plugin, one of the first full-fledged drag-and-drop page builders for WordPress, the WPBakery team significantly changed the way people use WordPress. In late 2017, they renamed their plugin WPBakery Page Builder. Today, it has well over 350,000 users and it powers over 2 million websites.
The plugin also has a rich ecosystem built around it. Because it’s easily extensible, there are numerous third-party add-ons available for it.
If you’re someone who uses WordPress regularly, CodeCanyon has many more WordPress plugins that can fundamentally change how you develop and manage your WordPress sites. Learn about the most important ones here:
