WPBakery A starter Guide

 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:

• WordPress 5.0 or higher

• an Envato account

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.

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.

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.

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.

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.