Visual Composer: Page Builder for WordPress

Not only is Visual Composer the best-selling WordPress plugin on CodeCanyon, it is also included with a huge number of WordPress themes on ThemeForest. This helps explain why the plugin is being used in over +500,000 websites.

Visual Composer helps you build responsive layouts in minutes using a user-friendly interface. It allows you to create layouts in the backend or frontend of your website. It works with any WordPress theme and has support for WordPress Multisite and WooCommerce.

Over ten language packs are included with the plugin and it has support for the WordPress Multilingual Plugin. A huge array of content elements and pre-defined layouts are packaged with the plugin too.

Visual Composer is compatible with every custom post type available. That means you can use it to modify any blog post, page, and custom post types added through WordPress themes and plugins.

One of the coolest features of Visual Composer is just how flexible it is. There are a lot of developer options available within the plugin and there are over one hundred add-ons available for it on CodeCanyon.

We was one of the first people to using and review Visual Composer and since its launch they have added more features and functionality every single year.

Using Visual Composer

Once Visual Composer has been installed, you will see a new Visual Composer bar in your editing screens. One loads the backend editor, the other loads the frontend editor (this bar is displayed even if you have disabled the WordPress visual editor).

When you load the backend editor, your content area is transformed into a canvas for building your page. A button entitled “Classic Mode” replaces the backend editor button you clicked previously and helps you return to the default WordPress editing mode.

At the top of the interface are five buttons: Three on the left and two on the right.

On the left, the Visual Composer icon takes you to the official plugin website, the plus symbol lets you add elements to your page, and the T icon opens up the template box. On the right there is a configuration icon that opens up a box for adding custom CSS code and a button to switch to the frontend editor.

If you have not yet added any content, you will see an explanation on how to add content quickly. You can choose to add an element, add a text block, or choose one of the pre-defined layouts. For example, you could add a landing page or product page at the click of a button.

The number of elements available is impressive. In total, the current version of Visual Composer offers forty-eight content elements (this number includes default WordPress widgets). Seven older deprecated content elements are also available and additional content elements can be added through the use of plugin extensions.

You can create complex pages using these elements. You can add charts, image galleries, videos, maps, post grids, icons, social media sharing buttons, and more.

Adding content elements and then placing them into rows and columns is simple. Rows and elements can be dragged around to where you want to place them. The number of columns displayed in a row can be determined by selecting one of of the eleven column structures e.g. 2/3 + 1/3. Alternatively, you can create your own custom structure.

There are options to delete elements, columns, and rows. New elements can be added to columns and rows by selecting the plus symbol. You can also clone whole rows of content.

A host of settings are available for both columns and rows.

In the general tab there are options use a video background, stretch the row/column, and add custom CSS. The design tab allows you to style the column or row in any way you wish. You can define the margin, border, padding, and colors.

The settings available for individual elements depends on the element being modified. A basic element such as a Facebook like button only lets you select the button type, while more complex elements can have dozens of different options.

Any layout you create can be saved as a template and applied to other pages on your website. Forty-four default pre-made layouts are provided to help get you started. This includes a FAQ template, help template, services template, and multiple templates for your about page.

You can activate the frontend editor by clicking on the frontend button in your post/page editor. If you are logged into your website, you will also see an “Edit with Visual Composer” link in your WordPress admin bar at the top of each page. Clicking on this link will load up the frontend editor for you to edit that page.

The backend and frontend editor work in a similar way. You will see the same buttons at the top of the page to add elements and open the template box. At the right hand side you will see a button that returns you to the backend editor and an update button to save any changes you have made.

The guides button allows you to modify your page. You can do everything you can in the backend editor, such as edit elements and move columns and rows.

Clicking on the screen icon lets you change your view from desktop mode to the landscape and portrait mode of tablets and smartphones. This is useful for seeing how your page will look on mobile devices.

I have always found the backend editor of Visual Composer to be much easier to use than the frontend editor. I can build professional designs in minutes using the backend editor, but with the frontend editor I feel that moving things around is more clunky and less fluid. It still works like it should, but it just does not feel as user-friendly to me.

However, I know from reading the comments of other Visual Composer users that many prefer using the frontend editor to the backend editor, so it is perhaps a matter of which interface you are used to using (the frontend editor was introduced in Visual Composer much later so I have more experience with the backend editor).

Visual Composer Settings

The Visual Composer Settings area lets you modify many different features and options.

In the general settings page you can define what types of post types Visual Composer will be active on. Any additional custom post types added through your theme, or through plugins, will be listed here. You can also disable responsive content elements and enable Google fonts subsets.

The central part of this page allows you to control access to Visual Composer for each WordPress user group. You can define whether a user group sees Visual Composer, whether they see Visual Composer and the default editor, and whether they only see Visual Composer (i.e. disable the default editor).

On the design options page you can change the default colours of content elements. You can also modify the margin at the bottom of elements, the spacing between columns, and the mobile screen width.

Custom CSS code can be added without the need to modify core plugin files.

A product license is provided when you purchase Visual Composer. It is valid for one website and ensures continued support and automatic updates through your admin area.

Shortcodes provided by third party plugins can be mapped to Visual Composer content elements.

In the about page there is a welcome page that informs you of the latest additions to the plugin. There is also a frequently asked questions page that has links to many great tutorials and a resources page that links to a knowledge base, video academy, and the social media accounts of the developers.

Advanced Grid Builder

Visual Composer lets you add new grid elements for the following content elements: Post grid, post masonry grid, media grid and masonry media grid. These are the content elements that can be used to display blog posts, galleries, and other content on your website.

The video below walks you through exactly how the grid builder works. I recommend watching it to get a better understanding of how it all comes together as when you first visit the grid builder page, it is not clear how it can help you.

Visual Composer Pricing

Visual Composer retails at only $34. There are no yearly renewal fees. Once you have purchased the plugin, you can receive support and updates indefinitely.

Please note that in order to qualify for support and automatic updates, you need to enter your license key in the settings area.

Technically, Visual Composer is not GPL friendly. Despite the fact that WordPress does not allow usage to be restricted, the developers ask all customers to buy a regular license for each website they use Visual Composer on.

Thankfully, the plugin still functions correctly without entering your license key. There is therefore nothing stopping you from using the plugin on every website you own.


Leave a Reply

Your email address will not be published. Required fields are marked *