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 2020. 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 Visual Composer 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 WPBakery Page Builder tutorial, you’ll need:
Additionally, to better understand how to use Visual Composer and 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
Learning how to use WPBakery Page Builder is easy. The plugin is extremely customizable, offering dozens of configuration options that you can tweak to 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’ve made 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
This is a key step in this Visual Composer tutorial. 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
Another important aspect of learning how to use WPBakery Page Builder is 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 helps you create a complete “about us” page. But the Hero Section template only creates a hero section for you.
The Best WordPress WPBakery Page Builder Add-Ons & Extensions on CodeCanyon for 2020
I hope you’ve enjoyed the WPBakery Page Builder tutorial I shared with you. Now you know how to use WPBakery Page Builder. Next up, let me tell you where to get the best professional WPBakery WordPress add-ons, so you can create an amazing website in a fraction of the time.
Explore hundreds of the best WordPress add-ons ever created on Envato Market’s CodeCanyon. With a cheap one-time payment, you can purchase one of these high-quality WordPress plugins, extensions, and add-ons.
While WPBakery is a complete page builder, the feature-rich add-ons and extensions will allow you to add a wide variety of features to your website, such as:
- unique elements
- extra WooCommerce features
- content boxes
- and much more
You know how to use Visual Composer. But these extra features and functionality are a must-have for your WordPress website, so be sure to check our selection below!
5 Top WPBakery Page Builder Add-Ons
Here are a few of the best WPBakery add-ons and extensions available on CodeCanyon for 2020.
1. Ultimate Addons for WPBakery Page Builder
This is our best-selling add-on for WPBakery Page Builder. With more than 60,000 sales, people love it for its fantastic features:
- fully responsive design
- unique and flexible elements
- clean code
- 9+ full page demos
- parallax and video backgrounds
- CSS3 animations
- video tutorials
- best client support
2. Composium—WP Bakery Page Builder Extensions Addon
Composium is another best-selling WPBakery extensions add-on. It includes more than 150 premium elements for WPBakery Page Builder and awesome features like:
- fully responsive design
- icon font manager
- Google Fonts manager
- template and widget builder
- modular system
- WooCommerce integration
- clean and efficient code
- fast support
3. Massive Addons for WPBakery Page Builder
Massive Addons is compatible with 99% of WordPress themes supporting Visual Composer 4.7+. And this popular WPBakery add-on just released an update with many interesting elements:
- container presets
- 35 page templates +17 new templates
- WooCommerce support
- one-click template installation
- 1,700+ predefined presets
4. WooCommerce Page Builder
This WPBakery add-on was created to help you customize your WooCommerce website. With this plugin, you’ll be able to create any layout for a WooCommerce page easily, with no coding knowledge required. It’s an awesome WPBakery plugin because it’s:
- easy to install
- user-friendly
- compatible with any theme
- supports WooCommerce shortcodes
5. WPBakery Page Builder Clipboard
The WPBakery Page Builder Clipboard allows you to copy/cut and paste single content elements or a stack of content elements across pages, without ever leaving the WPBakery Page Builder back-end interface.
Another great feature is that you can transfer clipboards between sites and domains using the export/import function. You can also create clipboard templates to save lots of time!
Conclusion
In this WPBakery Page Builder 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 how to use Visual Composer, 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 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: