Visual Composer Review: Create Professional Pages in Minutes

Visual Composer Review: Create Professional Pages in Minutes

Visual Composer is the number one selling plugin at CodeCanyon, passing the 20,000 sales milestone in March 2014. Developed by WP Bakery, the drag and drop plugin is bundled with more than 300 premium themes on ThemeForest, while more than 65,000 websites around the world have the plugin installed.

It’s clearly a popular plugin, allowing anyone to put together a WordPress site with relative ease. But does it stand up to all the hype?

In this review, I will show you what Visual Composer can do, how it stacks up to the hype, and walk you through how you can use the plugin to create stylish content and unique pages.

Main Features of Visual Composer

Visual Composer

Before we look at how Visual Composer works, let’s briefly look at the main features of the plugin.

The WordPress post editor allows anyone to style their articles. It can be used to make text bold and italic and to insert links, images, lists, code and quotes. Articles can be styled further by using a drag and drop page builder. This is a general term to refer to WordPress plugins that help you create professional pages using a drag and drop visual interface. The page builder market is very competitive today, however the plugin that paved the way for others was Visual Composer.

Visual Composer allows you to design unique pages using building blocks of content. Some page builder plugins refer to these blocks as modules and some refer to them as widgets. Visual Composer calls them “Content Elements.” They all refer to blocks of content that can be dragged and dropped into any part of a page.

Over 40 content elements are packaged with Visual Composer. This includes text blocks, social media buttons, video players, image carousels, post grids, charts, and much more.

All content elements are responsive, therefore they look great on any computer, tablet, or smartphone. Individual content elements can also be styled to help you style pages further.

Responsive Design
All Visual Composer content elements are responsive.

Drag and drop page builders usually let you style pages in the backend (i.e. the post editor) or the front-end (i.e. the live website). Visual Composer allows you to do both.

As with all page builders, Visual Composer can be used with any WordPress theme. It supports multiple languages and is compatible with the WordPress translation plugin qTranslate. WordPress custom post types are supported, too.

How to Design Pages Using Visual Composer

Once you’ve activated Visual Composer on your website, you will see two buttons added to your post editor. One allows you to style pages using the backend editor. The other will take you to the front-end editor.

Visual Composer Post Editor Buttons
The Visual Composer buttons in the post editor allow you to switch between classic mode (i.e. the default WordPress post editor), backend editor, and front-end editor.

Clicking on the backend editor button will switch the default WordPress editor to Visual Composer’s backend editor.

There are four buttons at the top of the interface. The plus symbol lets you add a new content element. The grey box with a white T inside loads the template box. The cog symbol will load up a custom CSS box that lets you define CSS classes for that specific page. The last button will take you to the front-end editor.

When you first load the backend editor, a welcome page will be displayed that offers shortcuts to common choices. You can add a new element, add a text block (a type of content element), or choose from one of six pre-defined layouts (i.e. load a template).

Backend Editor Welcome Page
A welcome page will be displayed if your page is blank.

Clicking on the plus symbol will bring up the element box. By default, every available element is displayed initially, however you can browse elements by type if you wish.

Earlier on I noted that over 40 content elements are available. Technically this is true, however this total includes 12 default WordPress widgets. You will also find 25 content elements, four social media elements, and three structure elements.

Content Elements List
The current version of Visual Composer features 44 content elements.

Rows can be dragged to other areas of your page. Rows can also be edited, cloned, and deleted. Similar buttons are displayed at the top of each column. Likewise, hovering over a content element will bring up an option to move it, customize it, edit or, or delete it.

Visual Composer Text Block
The text block element allows you to add content using the WordPress visual editor.

Visual Composer lets you customize each content element. The settings that are available to you will depend on the type of content element you are modifying. Simple content elements such as social media sharing buttons only allow you to define the size of the button, while more advanced content elements such as post grids offer many different options and settings.

The Posts Grid Element
Visual Composer allows you to customize every content element you insert into your page.

New rows can be added by clicking on the plus symbol in the row header. Next to that is an option to place content into multiple columns.

There are 11 preset column layouts are available, such as 2/3 + 1/3, 1/4 + 1/2 + 1/4, and 5/6 + 1/6. If you prefer, you can create your own custom layout. Once you have added columns, you can freely move content elements from other rows and columns into the new columns you created.

Creating Rows and Columns
Columns help you create professional page designs.

Visual Composer allows you to customize the look and feel of columns and rows. The general tab allows you to change the default font color and define additional CSS classes.

Column General Settings
You can style columns and rows using custom CSS.

The size of borders, padding, and margins, can be defined in the design options tab. You can also change the color of borders and backgrounds. The type of border can also be changed. For example, you can use a solid, dotted, or dashed border.

Column Design Options
The design options tab lets you change colors, borders, padding, and margins.

Columns have an additional settings tab for widths and responsiveness. These settings are not available for rows (as they are not necessary).

The width of columns can be reduced to a twelfth. Column widths can be changed according to the device that someone is using. This ensures that content is not cramped on smaller devices.

Column Width & Responsiveness
The width of columns can be defined in the column settings box.

The template icon at the top of the Visual Composer interface will load up the templates box. Your custom layout can be saved so that it can be used on other pages on your website. Previously saved templates can also be loaded.

Saving a Template
It only takes a few seconds to save your custom layout.

Six default templates are included with Visual Composer. These templates are a great starting point from creating pages such as landing pages. I recommend loading these templates when you first use Visual Composer as they will give you an understanding of how the plugin works.

Loading a Template
Default layouts can be inserted into your custom layouts.

Loading a default template will add the layout below your existing customizations. You can then replace the dummy text with your own content.

An Example Layout
An example of what a default layout looks like when it is added to your canvas.

The backend editor is very simple to use. Like most WordPress plugins of this nature, it may take you 20 or 30 minutes to get accustomed to how everything works. Once you are familiar with the settings area of each content element and have changed the styling of rows and columns, you will be in a position to create stylish pages that are truly unique.

The Visual Composer Front-end Editor

The front-end editor allows you to style pages on your live website. You can switch to the front-end editor from the backend by clicking on the front-end button in your post editor. Be sure to save any changes you have made to your page before switching the editing mode or you could lose your changes.

I feel that the backend editor is better for structuring a page initially and the front-end editor is better for tweaking pages afterwards; however, I know many WordPress users prefer to do everything via the front-end editor.

Clicking on a content block will bring you up the same options you would see using the backend editor. This includes options to add new rows and columns and the option to add, edit, and delete content elements. At the top of the page you will see options to add new elements, launch the templating system, adjust page settings, save draft, and publish the article. There is an option to switch back to the backend editor as well.

Visual Composer
The front-end editor helps you see how a page will look with your WordPress design. Note: Click on image for a larger and clearer view.

The guides button at the top of the front-end editor will disable the content element box options. This lets you see how a page will look without the Visual Composer editing options displayed.

There is also an option to preview how your page will look in five different sizes of devices. This includes desktops, tablets, and smartphones. It is an essential tool for viewing the page you created on multiple resolutions and checking that it looks good for everyone.

Responsive Preview of Your Page
Be sure to check how your page looks on all resolutions.

There are few drag and drop page builders that give you the option of styling pages on both the front-end and backend. This is one reason why Visual Composer is so versatile.

Visual Composer Settings

The Visual Composer settings area has five tabs. The first tab is home to general settings.

At the top of the page you can choose which post types Visual Composer can be used with. Posts, pages, and any other active post types, can be disabled or enabled from this section. You can also select Google fonts and disable responsive content elements.

One of the best options available on this page is the role editor. You can choose whether a specific user group can use use both Visual Composer and the default WordPress editor or restrict usage to either the Visual Composer or the default WordPress editor. For example, you could only allow use of Visual Composer to administrators and editors.

Specific content elements can also be disabled for each user group; which is useful if you only want certain user groups to have access to certain elements.

The second tab lets you change the color scheme of the Visual Composer content elements. The margin at the bottom of elements and the mobile screen width can also be modified.

The third tab can be used to enter custom CSS code. You can then style content elements by calling the classes defined in this box.

Entering your license details means that you automatically update Visual Composer. It will also make you eligible to receive support. This is a necessary evil that many WordPress developers take to thwart illegal downloads of their products.

The final settings tab can be used to map custom shortcodes and shortcodes from third party plugins. This allows you to expand the number of content elements available to you.

As you can see, there are not many settings to configure for Visual Composer. The setting page you need to pay attention to is the license page as this will ensure you receive support and automatic updates.

A Look at What Visual Composer Can Do

Visual Composer will help you create professional looking pages in minutes. It will not take you long to get an understanding of how Visual Composer works, though it may take you longer to be familiarise yourself with all the content elements that are available to you.

Corporate Page Example
An example of a corporate page designed by Visual Composer.

Once you are comfortable styling elements, you will be in a position to create truly unique pages. The six default templates that are included with Visual Composer will give you a helping hand in the beginning.

Landing Page Example
Visual Composer can be used to create landing pages too.

Extending Visual Composer

Visual Composer is developer friendly. Content elements can be be modified directly from the theme functions.php file and you can also add your own shortcodes.

There are also a huge number of addons that were designed to enhance Visual Composer and many more WordPress plugins that work in conjunction with it.

Templatera Template Manager
Templatera Template Manager is one of the many addons that are available for Visual Composer.

Downsides to Visual Composer

Whenever I use a plugin, there are always things that frustrate me and ways in which I think the plugin could be improved. Visual Composer is no different.

Over the past year, I have tested around a dozen free and premium drag and drop page builders. Many other solutions give you the option of inserting every available widget as a content element. This extends the functionality of a page builder plugin considerably as it allows you to insert any WordPress widget you have activated on your website.

Unfortunately, Visual Composer does not have this. You are restricted the the default WordPress plugins and a couple of third party plugins such as Contact Form 7.

Widgetized Sidebar Content Element
I found the Widgetized sidebar content element limiting.

What Visual Composer does offer is a widgetized sidebar content element. In theory, this allows you to insert any widget directly into your pages. However, in practice it is a pain to do that.

The widgetized sidebar content element allows you to select which sidebar you insert into the element, but it does not allow you to create a new sidebar (i.e. a new widget area). You therefore need to manually create sidebars every time you want to add a custom widget into a page. While WordPress plugins such as Custom Sidebars do make the process of creating new sidebars simpler, the whole process is still a pain.

Consider a content website with 100 pages. If you wanted to insert custom widgets into just 25 pages on that website, you would need to create 25 custom sidebars. In contrast, other page building plugin solutions allow you to simply drag and drop your preferred custom widget into the content area.

Hopefully, WP Bakery will address this issue in the future and give Visual Composer users the option of inserting custom widgets directly.

I prefer using the backend editor to style pages, however I can understand why so many people love editing pages on their live website as it allows them to see the changes they make in real-time. Though I found switching to the front-end editor frustrating. The front-end editor works great once it has loaded, however it frequently did not load correctly and just displayed the loading icon indefinitely. I tested Visual Composer on a test website using Twenty Twelve with no other WordPress plugins activated. Despite this, the frontend editor would rarely load correctly.

At one point I spent 30 minutes trying to switch from the backend editor to the front-end editor. Eventually, it worked on a blog post that had no content. The following day the front-end editor seemed to load correctly every time, which surprised me as nothing had been changed on my website. I did some research on this issue and found that other users have had the same problem, but were able to resolve the issue. It appears that the front-end editor sometimes fails to load due to various issues relating to the preloader.

A Word of Warning About WordPress Plugins Packaged with Themes

Visual Composer is a popular plugin with WordPress theme developers as it allows their customers to create stylish pages using a drag and drop interface. That is why Visual Composer is included with hundreds of WordPress themes on ThemeForest.

It is good to receive a premium WordPress plugin with the purchase of a WordPress theme, however you should be aware of the fact that many theme developers do not update their theme zip file every time an included plugin is updated. This may result in your website using an outdated version of the plugin and becoming vulnerable to attacks.

After Visual Composer, the second most popular WordPress plugin on CodeCanyon is Slider Revolution. Security specialists Sucuri noted in September 2014 that Slider Revolution had a large security hole.

WordPress users who purchased the plugin directly on CodeCanyon were able to download an updated version of the plugin that included the security patch. Unfortunately, the thousands of users who were using a version of the plugin that was included with a WordPress theme were not able to download the new version. Many theme developers do not check to see if a new version of their packaged plugins has been released. It is also common for theme developers to only check for new versions of a plugin when they are updating their own WordPress theme.

Therefore, if you are using a version of Visual Composer that was included in a WordPress theme you purchased, please be sure to check whether you are using the latest version. If the theme developer is not proactive in updating the plugin, it could be prudent to buy a copy of the plugin directly from CodeCanyon so that you can receive support and automatic updates.

Ratings

Cost

Visual Composer offers fantastic value for money. It is an advanced WordPress plugin with tons of functionality, but retails at a one-off fee of only $28.

This is considerably less than many of its competitors. For example, the page builder plugin Velocity Page has fewer features than Visual Composer. However, the plugin retails at $97 for one website, $167 for three websites, and $247 for unlimited use. Beaver Builder has a similar pricing scheme.

There are, of course, free drag and drop page builder plugins available for WordPress, but these plugins cannot match Visual Composer for design or features. Without doubt, Visual Composer gives you a lot of bang for your buck.

Features

Visual Composer allows you to modify content on the backend or the front-end. This is an area where it excels over many of its competitors as most drag and drop plugins only permit you to create pages using the backend or the front-end.

Visual Composer includes a fantastic range of content elements too. This includes social media buttons, multimedia elements for videos and images, and content related elements such as post grids, post carousels, and post sliders.

Separators and empty space can also be integrated into pages to help structure a page. You will also find support for buttons and call to actions.

As I noted earlier, the one thing the developers of Visual Composer could do is give better support for third party widgets. This would help extend the functionality of the plugin. However, I have no doubt that most WordPress users will be satisfied with the content elements that come included with Visual Composer.

Aesthetics

Every part of Visual Composer looks gorgeous; from the drag and drop interface to the pages it helps you create for your website. All content elements are responsive, therefore content will look great on desktops, laptops, tablets, and smartphones.

The plugin also allows you to customize each content element to your liking. You can easily change borders, margins, and padding. Font colors and background colors can be changed through the settings box, too. Custom CSS can also be added to style elements even further.

With many drag and drop page builder solutions, the style of content elements cannot be changed. It is a case of what you see is what you get. Visual Composer doesn’t restrict you in this way.

Usability

The Visual Composer interface on the backend and the front-end are very simple to use. You should have a good understanding of how to add content elements and place them into rows and columns within 15 minutes of using the plugin.

Don’t expect to be creating perfect pages right away. Although Visual Composer is easy to use, it will take you a few hours before you will feel comfortable creating the pages you desire. You need to familiarize yourself with the options that are available for each content element.

The pre-packaged templates that are included with the plugin help speed up this process. By loading a default template and then spending time moving things around and tweaking content elements, you will soon be familiar with how everything works.

Support

Visual Composer has been available for years, yet the plugin is still regularly updated with new features. As the best selling plugin on CodeCanyon, you can be sure it will be actively supported for many years to come.

You needn’t worry about how to use the plugin. On the WP Bakery website there is a large knowledge base that walks you through how to use the plugin. The developers also answer customer queries through a dedicated ticket support system and actively respond to comments on CodeCanyon every day, too.

There are no yearly fees with Visual Composer. Therefore, once you purchase the plugin, you will receive lifetime support and updates.

Speed

Visual Composer has been designed so that necessary Javascript files are only loaded if they are being used by a particular content element. This ensures that pages load fast and bandwidth is reduced. For example, the Javascript that is necessary to display a post carousel is only loaded if you have added a post carousel to that particular page.

Tens of thousands of fast loading websites use Visual Composer, therefore you don’t need to be concerned about the plugin slowing down your website. Every content element element loads quickly and efficiently.

Final Thoughts

In a crowded market of drag and drop page builders, Visual Composer can lay claim to being the most popular and the best option available to WordPress users.

The interface is easy to use, the content elements look fantastic, and it allows you to style pages on both the front-end and the backend of your website.

The one area I feel it falls behind some of its competitors is the lack of an option to integrate widgets into a page. You could argue the point that free drag and drop page builder plugins such as MiniMax, Aqua Page Builder, and Page Builder, are more flexible; as these solutions allow you to insert any widget into pages easily.

Of course, if you do not need to insert 3rd party widgets into pages, this is a moot point. Most WordPress users will be happy with the content elements that come packaged with Visual Composer and the option to style content elements using custom CSS means that the plugin can be used to create beautiful pages in a matter of minutes.

Do you use Visual Composer? If so, please let us know your thoughts on the plugin in the comments area below.

The Good

  • Easy to use
  • Features a backend editor and a front-end editor
  • Great selection of content elements
  • Easy to style content elements and good support for developers

The Bad

  • No option to easily insert third party widgets
  • Front-end editor can be a little temperamental

Visual Composer

  • Cost:
  • Features:
  • Aesthetics:
  • Usability:
  • Support:
  • Speed:
  • Overall: