Skip to content

WordPress wpbakery page builder: Step by step guide

Designing a website from scratch can be very hard. Especially if you don’t have the knowledge of coding in HTML, CSS, JAVASCRIPT, AND PHP. As a beginner. It can cost you a lot of money for paying a developer to do the job for you.


But with WordPress achieving it is easy and simple once you know the right theme and plugin to use for your project. You can build a nice-looking website from scratch without involving any professional developer.


In this tutorial. You will learn how to use WPbakery page builder (formerly known as visual composer) to design a responsive and flexible website.


This page builder plugin is compatible with almost all modern WordPress themes and without having the knowledge of programming you can be able to use it.


With WPbakery front-end and back-end editor. Creating nice-looking pages for your WordPress website is in just a few clicks using the drag and drop function. I will show you how to install this plugin in your WordPress and also you will see some of its features.

WordPress wpbakery page builder – How to use it

1. How to install WordPress wpbakery page builder

The WPbakery is a premium WordPress plugin that can be purchase from Codecanyon. So log in to your Envato account to buy it. Another way of getting the plugin is by buying a theme that comes with it.


When you have successfully purchased the plugin, download it to your computer and extract the zip file. After the extraction, you will see a file with the name js_composer.zip. This is the plugin zip file that you will upload to your WordPress plugin section.


To install it login to your WordPress admin dashboard and go to plugins > add new then select the upload button and choose the js_composer.zip file from your computer and press the ‘Install now’ button and wait for the installation.


After the installation is successful click the ‘activate plugin’ button which will lead you to the WPbakery page builder welcome screen.

2. Configuring WPbakery plugin

Understanding the proper way to use WPbakery page builder is simply easy. The customization of the plugin comes with dozens of configuration options that will enable you to tweak it till you get the kind of web interface you want. Click on the ‘Setting’ button on the welcome screen to see the configuration options.


Wpbakery page builder comes with a default configuration that is good enough for use. When you look at the General setting tab, you will see it automatically support responsive design without you doing anything on it.


The plugin by default uses the Latin script subset of google but you can also change it to another script if you want, it also applies various optimization for proper page minimal loading times.


If you check the role manager tab you will notice you can only use it to customize a page in your WordPress site, but if you want to also use it in your post, select ‘custom’ in the post type list to enable it for the post.


When you are done with the changes, scroll down and click the ‘save changes’ button.

3. How to use the backend editor

This is the main part of the WPbakery lesson, from the back-end is where you do all the tweaks on your page, the plugin comes with two-part, the back-end and the front-end which can only be available inside a page or a post.


To use this tutorial you can use an existing page in your WordPress site or create a new one by going to ‘pages’ > add new.
After you have created your new page, open it and you will see the ‘backend editor’ button, click on it to open the back-end editor.


From the backend editor, you will see some of the most common use elements for page layouts, such as section and row, the section is used to group particular rows in your page, you can also see some advanced elements like Google map, Facebook like button, chart and many more.


For faster usage, the elements are divided into four categories: content, social, structure, and WordPress widgets.

Contents: This is where you find all the elements for the layout of your content, such as text blocks, separators, icons, sections, rows, and many more.


Social: In this section is where you will find all the social media tools, like the share button, like button, and more.


Structure: this part is for advanced users who already know how to code in HTML or javascript.


WordPress widget: From here you will find all WordPress widgets.


Adding elements is simple, all you need to do is click the ‘Add element’ button and choose the element you want to use.
For example, you can select the ‘Add text block’ button to add some text to the page.


You can customize the element to your test by clicking the ‘design option’ button to modify the styles.
When you are done adding few elements, you will find out that each element comes with a toolbar containing a few buttons with icons that allow you to drag and drop the element to your desired location and also for duplicating and deleting, or editing its contents.

4. Using the WPbakery template


The best way to understand how to use WPbakery page builder is by using templates, visual composer allows you to convert any page or post into a template, the unique feature enables the work to be lesser when designing a page, instead of repeating the design process in every page, you can do the work in one page and save it as a template then use the same outlook in other pages.


This method is simple, you can save your current design layout as a template, click on the ‘template’ button, give a name to the template and press the ‘save template’ button.


The WPbakery plugin comes with dozen of already designed templates which you can choose from the library, to access the library, go to the ‘Template Library’ tab and click on the ‘Access Library’ button.

Leave a Reply

Your email address will not be published.

%d bloggers like this: