Writing HTML, CSS, and PHP code to assemble or customise a WordPress web site may very well be extraordinarily time consuming, even for an expert web developer. That is possibly why a variety of the WordPress neighborhood has moved on to using page-builder plugins in its place.

WPBakery Web page Builder (beforehand referred to as Visual Composer) might be probably the most versatile and feature-rich WordPress page-builder plugin you’re going to get your palms on in 2020. It is appropriate with just about every fashionable WordPress theme, and you don’t want any programming experience to have the flexibility to make use of it. In precise truth, whereas using it, you’ll not even should variety in any shortcodes!

With the flowery however intuitive front-end and back-end editors WPBakery Web web page Builder offers, creating pages to your WordPress web site often consists of nothing various clicks and drag-and-drop operations. On this Visual Composer tutorial, I’ll current you the way in which so as to add WPBakery Web web page Builder to your WordPress event and introduce you to all its mandatory choices.

Conditions

To have the flexibility to watch this WPBakery internet web page builder tutorial, you might have considered trying:

Moreover, to larger understand the way in which to make use of Visual Composer and why you must be using WPBakery Web web page Builder in its place of all the alternative page-builder plugins accessible instantly, I like to recommend you be taught the subsequent article:

1. Putting in WPBakery Web web page Builder

WPBakery Web web page Builder is a premium WordPress plugin. It is accessible on CodeCanyon, so log in to your Envato account and purchase a license for it. It is nonetheless often recognized by its earlier title: Visual Composer.

WPBakery Page Builder on CodeCanyon

After you purchase it, you will get hold of a ZIP file containing quite a few recordsdata related to the plugin.

Extract the ZIP file and seek for a file named js_composer.zip. It is a plugin archive file, which you will want so as to add to your WordPress server. So log in to your WordPress admin panel and go to Plugins > Add New. Then click on on on the Add Plugin button and select js_composer.zip.

Press the Set up Now button to start out out the arrange.

Installing plugin from ZIP file

As quickly because the arrange’s full, press the Activate Plugin button. As rapidly as you obtain this, you might be taken to WPBakery Web web page Builder’s welcome show.

2. Configuring the Plugin

Studying the way in which to make use of WPBakery internet web page builder is easy. WPBakery Web web page Builder is very customizable. It has dozens of configuration selections you might tweak until the plugin’s behaviors match your requirements. Press the Settings button on the welcome show to take a look at them.

General settings page

The plugin has a well-thought-out default configuration that’s satisfactory for a lot of use cases. As an illustration, throughout the Normal Settings tab, you may even see that it helps responsive design correct out of the sphere.

The plugin moreover tries to make use of quite a few optimizations to ensure that the pages you create with it have minimal load events. As an illustration, it makes use of solely the Latin script subset of Google fonts by default. To help completely different scripts, all you will wish to do is change the Google fonts subsets selection.

Within the Position Supervisor tab, likelihood is you will uncover that this plugin is available on the market only for the pages of your WordPress web site. In order for you it to be accessible to your posts too, select Customized throughout the Publish types guidelines and permit the publish selection.

Configuring post types

After you make the modifications, scroll down and click on on on the Save Modifications button.

Lastly, should you want to customise the texture and seem of WPBakery Web web page Builder’s content material materials elements, change to the Design Choices tab and confirm the Use personalized design topic. When you obtain this, you will change the default colors, margins, and widths the plugin makes use of.

Custom design options

3. Utilizing the Again-Finish Editor

It is a key step on this Visual Composer tutorial. WPBakery Web web page Builder comes with two extremely efficient editors: a back-end editor and a front-end editor. They’re every accessible solely inside an internet web page or a publish. Subsequently, for now, I like to recommend you create a model new internet web page by going to Pages > Add New.

Within the net web page creation interface, you will choose which editor it is advisable to use. Begin by clicking on the Backend Editor button to open the back-end editor.

Backend editor

Utilizing this editor, you might merely add various commonly-used elements to the net web page. WPBakery Web web page Builder offers straightforward elements harking back to textual content material blocks, pictures, and separators. It moreover offers additional superior ones harking back to Fb “Like” buttons, Google Maps, charts, and animated carousels.

For ease of entry, the climate are divided into 4 completely completely different lessons: content material materials, social, development, and WordPress widgets.

List of available elements

Because the title suggests, content material materials elements are elements that you simply simply’d typically use to create the contents of an internet web page or a publish. Equally, social elements are those that make it easy for patrons to share your internet web page on social platforms. Construction elements, nonetheless, are for additional superior prospects, who’re cosy writing code. They assist you straight add raw HTML and JavaScript to your internet web page.

So as so as to add a part, all you will wish to do is press the Add Aspect button and select the desired side.

Alternatively, you might press the Add Textual content material Block button to straight add some textual content material to the net web page.

Text editor

Word that within the occasion you are not glad with the default look of a part, you might on a regular basis modify its sorts by switching to the Design Choices tab.

After you have acquired added just some elements, likelihood is you will uncover that each side has a toolbar associated to it, containing just some buttons. These buttons present intuitive icons and assist you perform mandatory operations harking back to dragging and dropping the side to change its location, duplicating it, deleting it, or modifying its contents.

Toolbars shown above elements

4. Utilizing the WYSIWYG Entrance-Finish Editor

The back-end editor is correct for prolonged, difficult pages that comprise a variety of elements. Whereas using it, you will wish to press the Preview button everytime it is advisable to see what your internet web page goes to appear like when it’s revealed.

When you choose to utilize the WYSIWYG front-end editor in its place, you get to work with the final word look of your internet web page correct from the beginning. You probably can on a regular basis seamlessly change from one editor to the alternative, so scroll up and press the Frontend Editor button to open the model new editor.

Frontend editor

On this editor, you may even see the toolbars associated to a part solely when you hover over the side. These toolbars and the efficiency they supply are just like these offered by the back-end editor.

Moreover, the front-end editor allows you to see what the net web page appears to be like on quite a few show sizes. It moreover allows you to proceed modifying the net web page in any show dimension you prefer.

Frontend editors preview options

5. Utilizing Templates

One different mandatory facet in learning the way in which to make use of WPBakery internet web page builder is using templates. WPBakery Web web page Builder allows you to convert any internet web page or publish you create with it proper right into a template. Through using this operate, you might lower the amount of repetitive work you do whereas creating pages to your WordPress web site.

To save a lot of the current construction of your internet web page as a template, open the Templates dialog, give a fame to the template, and press the Save Template button.

Save template dialog

You will not be restricted to working together with your private templates. This plugin comes with a giant template library, which is updated typically. To open the library, change to the Template Library tab and press the Entry Library button.

Template library

The library, as you may even see, includes every kind of premium-quality construction templates. All of them may be discovered to you with out spending a dime. You might, nonetheless, activate your WPBakery Web web page Builder license sooner than it is advisable to use them.

Broadly, the templates may very well be divided into two lessons: templates for entire pages and templates for specific individual, unbiased elements of an internet web page. For occasion, the About Web web page template is a template that helps you create a complete “about us” internet web page. However the Hero Part template solely creates a hero half for you.

Hero section template

The Finest WordPress WPBakery Web web page Builder Add-Ons & Extensions on CodeCanyon for 2020

I hope you have acquired appreciated the WPBakery internet web page builder tutorial I shared with you. Now you know how to utilize WPBakery internet web page builder. Subsequent up, let me inform you the place to get the perfect expert WPBakery WordPress add-ons, so you might create an unbelievable website online in a fraction of the time.

Best WPBakery Page Builder add-ons on CodeCanyon
Finest WPBakery Web page Builder add-ons on CodeCanyon

Discover a complete lot of the perfect WordPress add-ons ever created on Envato Market’s CodeCanyon. With an reasonably priced one-time charge, you should buy one among these high-quality WordPress plugins, extensions, and add-ons. 

Whereas WPBakery is a complete internet web page builder, the feature-rich add-ons and extensions will assist you add every kind of choices to your website online, harking back to:

  • distinctive elements
  • additional WooCommerce choices
  • content material materials bins
  • and way more

You perceive the right way to make use of Visual Composer. However these additional choices and efficiency are a will need to have to your WordPress website online, so bear in mind to confirm our selection beneath!

5 Prime WPBakery Web web page Builder Add-Ons 

Listed under are just some of the perfect WPBakery add-ons and extensions accessible on CodeCanyon for 2020.

1. Final Addons for WPBakery Web page Builder

Ultimate Addons for WPBakery Page Builder

That is our best-selling add-on for WPBakery Web web page Builder. With better than 60,000 product sales, of us adore it for its unbelievable choices:

  • completely responsive design
  • distinctive and versatile  elements
  • clear code
  • 9+ full internet web page demos
  • parallax and video backgrounds
  • CSS3 animations
  • video tutorials
  • best shopper help

2. Composium—WP Bakery Web page Builder Extensions Addon

Composium - WP Bakery Page Builder Extensions Addon

Composium is one different best-selling WPBakery extensions add-on. It comprises better than 150 premium elements for WPBakery Web web page Builder and superior choices like:

  • completely responsive design
  • icon font supervisor
  • Google Fonts supervisor
  • template and widget builder 
  • modular system
  • WooCommerce integration
  • clear and atmosphere pleasant code
  • fast help

3. Large Addons for WPBakery Web page Builder

Massive Addons for WPBakery Page Builder

Large Add-ons is appropriate with 99% of WordPress themes supporting Visual Composer 4.7+. And this trendy WPBakery add-on merely launched an exchange with many desirable elements:

  • container presets
  • 35 internet web page templates +17 new templates
  • WooCommerce help
  • One-Click on template arrange
  • 1,700+ predefined presets

4. WooCommerce Web page Builder

WooCommerce Page Builder

This WPBakery add-on was created that may help you customise your WooCommerce website online. With this plugin, you will create any construction for a WooCommerce internet web page merely, no coding knowledge required. It is an superior WPBakery plugin because of it’s:

  • easy to place in
  • user-friendly
  • help WooCommerce shortcodes
  • appropriate with any theme

5. WPBakery Web page Builder Clipboard

WPBakery Page Builder Clipboard

The WPBakery Web web page Builder Clipboard allows you to copy/decrease and paste single content material materials elements, or a stack of content material materials elements all through pages with out ever leaving the WPBakery Web web page Builder back-end interface.

One different good operate is that you’d have the ability to change clipboards between web site/domains using the export/import function. You can too create clipboard templates to keep away from losing a variety of time!

Conclusion

On this WPBakery internet web page builder tutorial, you realized the way in which to acquire, arrange, and configure WPBakery Web web page Builder. You moreover observed how easy it is to create pages and posts to your WordPress web site with it. To be taught additional about the way in which to make use of Visual Composer, do seek the advice of with its documentation.

By creating the Visual Composer plugin, one in every of many first full-fledged drag-and-drop internet web page builders for WordPress, the WPBakery group significantly modified the way in which wherein of us use WordPress. In late 2017, they renamed their plugin WPBakery Web web page Builder. At the second, it has successfully over 350,000 prospects and it powers over 2 million internet sites.

The plugin moreover has a rich ecosystem constructed spherical it. As a results of it’s merely extensible, there are fairly a couple of third-party add-ons accessible for it.

When you are any person who makes use of WordPress typically, CodeCanyon has many additional WordPress plugins which will principally change the way in which you develop and deal with your WordPress web sites. Study a really highly effective ones proper right here:

Leave a Reply