WordPress Articles

A Guide to Getting Started on the Visual Composer WordPress Plugin

Currently the top-selling plugin at CodeCanyon, Visual Composer surpassed the 20,000 sales milestone just a few months ago. The plugin was created by WPBakery. The plugin is a plug and drop type of application that is bundled with over 300 premium ThemeForest themes. The product is currently installed in at least 65,000 websites the world over.

While there is no argument about the current popularity that the plugin enjoys simply because it makes putting together a WordPress website very convenient and simple, the question is: Is the plugin really worth the hype it is getting?

This Visual Composer review will attempt to answer the question. Likewise, it will break the WordPress plugin down in terms of the capabilities it brings to the table, how it lives up to the high expectations and hype, and provide a walk-through on how you can come up with unique webpages and stylish content using Visual Composer, among others.

Visual Composer Pros and Cons

The Pros:

  • The plugin is user-friendly.
    It comes with a wide variety of content elements.
    Visual composer offers both a backend and a front-end editor.
    Developer support is substantial.
    The content elements are easy to style.

The Cons:

  • The front-end editor can be tricky to use at times.
    There is no option to easily integrate widgets from third parties.
    In terms of cost, features, and support, Visual Composer outperforms most similar products on the market today. It also does well in terms of aesthetics, speed, and usability. Overall, the product is worthy of a 4-star rating out of 5.

What Is Visual Composer?

The plugin is a feature packed, drag and drop type of page builder. It has more than 40 built in content elements, and lets you style your webpages both on the front-end and back end. This means you can work on your pages right in your live website or at the admin area of WordPress with the same convenience.

While being able to work on both ends should offer a lot of convenience for website owners and developers, transitioning to the plugin’s front-end editor can be tricky at times. Some users complain of not having the module load properly from time to time. Because this is such an important feature, it can be quite disappointing if you cannot take full advantage of it.

Despite the problem, however, Visual Composer remains as one of the best all-around drag & drop solutions among all WordPress page building tools currently available to users. The interface is quite easy to use, it is priced reasonably, and it comes with a superior selection of content elements. Once you have familiarized yourself with the plugin’s interface, you can begin to style professional-looking pages in a matter of minutes.

Main Visual Composer Features

At this point, you may be eager to find out just exactly how the plugin works. Before that, however, it is important that you get acquainted with the product’s main features first.

By using the WordPress post editor, you can style your articles in many ways. You can use the editor to italicize or bold the text, and to add, images, links, codes, quotes, and lists. You can further add style to your articles by using the functionalities of a drag & drop page builder.

Drag and (&) drop is the common term used for WordPress plugins that allow users to design professional pages using a visual drag and drop interface. You are probably aware that the market for page builders today is saturated, resulting to a highly competitive environment. It is worth mentioning that Visual Composer blazed the trail for others to follow.

By using the building blocks of content or content elements that come with Visual Composer, you can create unique and stylish webpages. In other page building tools, these blocks, referred to as “content elements” in Visual Composer, are called widgets or modules. Regardless of what they are called, however, these blocks of content may be dragged, and then dropped anywhere you like on the page.

As previously mentioned, Visual Composer has more than 40 built in content elements. These include social media buttons, text blocks, image carousels, video players, charts, and post grids, among many others.

Visual Composer content elements are all responsive; thus, they will appear aesthetically pleasing whether they are viewed on a tablet, smartphone, or computer. You can further customize individual content elements to help you come up with better-crafted webpages.

Drag and drop types of page building tools typically allow you to create pages either from the front-end (right in your live site) or the backend (using the post editor). You can do both with Visual Composer.

Most page builders can be used with virtually any WordPress theme. This applies to Visual Composer, as well. It can work with oTranslate, a WordPress translation plugin, and it likewise supports multiple languages. Visual Composer is also compatible with WordPress custom post types.

The following section is a brief guide on how to use Visual Composer quickly.

Beginner’s Guide to Using Visual Composer

Designing Pages Using Visual Composer

After you have activated Visual Composer on your site, your post editor will display two new buttons. One can be used to call the backend editor, while the other will allow you to work on pages through the front-end editor. Simply put, the buttons in the post editor for Visual Composer will allow you to toggle among the default WordPress post editor (classic mode), the front-end editor, as well as the backend editor.

At the top portion of the interface, you will find 4 buttons. The plus (+) sign can be used to include a new content element. The symbol beside it or the grey box that has a white letter “T” inside allows you to load the template box. On the right side, you will find the cog symbol that you can use to load a custom CSS box where you can define the various CSS classes to use for that particular page. The button to the right of the cog will load up the front-end editor.

Upon first loading the backend editor, the first thing you will see is a welcome page that provides shortcuts to more frequently accessed options including ones that will allow you to add new elements, include text blocks (another type of content element), or select one from among 6 pre-set layouts (load a template, for example.)

If you click on the plus (+) sign, the element box will appear. All the available elements are initially displayed by default, but you can sort and browse the list by type of element if you want.

Previously, it was mentioned that more than 40 content elements are available on Visual Composer. While this is technically true, 12 of these content elements are default WordPress widgets. The rest are made up of 25 Visual Composer content elements, 4 social media elements, and 3 structure elements. Thus, the latest version of Visual Composer has a total of 44 content elements.

You can easily drag rows into other parts of the page. They can likewise be cloned, deleted, and edited. All the columns display similar buttons. If you hover over a particular content element, an option to move, customize, edit, or delete it will appear.

Each content element can be customized in Visual Composer. The settings you can use depends on the specific type of content element you are currently working on. The simpler content elements like the social media sharing buttons will let you define the button size only. On the other hand, the more advanced content elements like post grids will provide various settings and options.

You can add new rows by simply pressing the plus sign in the row header. You can find the option to put content in multiple columns next to the plus sign.

You can choose from any of the 11 available pre-set column layouts that include 5/6 + 1/6, 1/4 + 1/2 + 1/4, and 2/3 + 1/3. You also have the choice to make your own custom layout if you want. After adding the columns, you can now move content elements freely from other columns and rows into your newly created columns.

With Visual Composer, you can customize how you want your columns and rows to look and feel. You can use the general tab to set your preferred default font color as well as to define more CSS classes.

By using the design options tab, you can define the size of the borders, margins, and padding. The color of the backgrounds and borders may also be changed into your preferred color. Likewise, the border type can be defined. You can make it dotted, dashed or solid.

Columns come with an additional tab for settings that can be used for responsiveness and widths. These settings, however, are not available for rows simply because they are not really necessary.

The column widths can be resized to as small as a twelfth or to a particular size that will best suit the target device. This will make sure that the page content will not look too cramped when viewed using smaller devices.

At the top of the Visual Composer interface, you will find the template icon that can be used to load the templates box. Here, you can save your custom layouts so they can later be used by the other pages on your site. You can also load your previously saved templates here.

There are 6 default templates available in Visual Composer. This number is sufficient if you are just starting to create various pages like a landing page. This Visual Composer tutorial highly recommends that you load up these templates when you use the plugin for the first time. This way, you will immediately get acquainted with the workings of the plugin.

If you load a default template, the layout will be added after your existing customizations. All you have to do then is to supply your own text content to replace the dummy text.

Using the backend editor is quite simple. Like most other similar WordPress plugins, you can get a good grasp of how everything works in just around 20 to 30 minutes. Once you have gotten acquainted with all the content elements’ settings area, and have modified the columns and rows to your preferred style, you are ready to create new pages that are both unique and stylish.

The Front-End Editor

As previously discussed briefly, you can create and style pages right on your live website using the front-end editor. If you are currently working on your page using the backend editor, from your post editor interface, just click on the front-end button. This will lead you to the front-end editor interface. Just make sure you have saved your current work before you switch to another editor mode. Otherwise, all the changes you have made on your page will be lost.

Having said that, this Visual Composer tutorial finds it easier to structure pages initially using the backend editor. On the other hand, the front-end editor is better to use when you need to tweak your pages later. A lot of WordPress users, however, use the front-end editor from start to finish, meaning they do everything on the live website.

This way, you get to see immediately how the WordPress design you are currently working on will appear. It is therefore suggested to stick to whichever method works for you. If you find it easier to start with the backend editor and switch modes later for the finishing touches, that is fine. On the other hand, if you want to do everything using the front editor, it is fine as well.

Whether using the backend or front-end editor, pressing a content block will have the same result, meaning you will be provided with the same option settings. These include the options to insert new columns and rows, and options to include new content elements, load the template system, modify page settings, save your drafts, and publish your page. You can also find an option that will allow you to switch back to the backend editing mode as well.

The guides button found at the top portion of your front-end editor interface disables the options in the content element box. This will allow you to view the page without displaying the editing options in Visual Composer.

Likewise, there is an available option that will give you an idea on how the page will look in 5 device sizes or when the page is viewed using different devices including smartphones, tablets, and desktop computer. This tool is quite useful since you get the chance to preview the page you styled on different resolutions, so you can make sure that it will look good regardless of the device used to view it. This way, you can still tweak the page before it is actually published.

You cannot find a lot of drag and drop WordPress building tools that will offer options to style pages both on the front and back-ends. This is one of the features that make Visual Composer standout – its versatility.

Visual Composer Settings

The settings menu in Visual Composer has 5 tabs, the first of which houses the general settings.

On the top part of the page, you can select the types of posts that can be used with the plugin. In this section, you can enable or disable various types of active posts such as pages and posts. You can likewise disable content elements that are responsive, and select Google fonts.

The role editor is one of the more useful options you can find on this page. It is where you can set whether specific user groups can access bot the WordPress default editor and Visual composer, or restrict access to either of the two. For instance, you can allow only the editors and administrators to use Visual Composer.

You can likewise disable particular content elements for different user groups. This can come in handy if you want to restrict access to specific elements for a certain user group.

The second tab is used to modify the color scheme of the content elements in Visual Composer. You can also change the bottom margin of the elements, as well as the width of the mobile screen.

The third tab is where you can input custom CSS codes. Once done, you can proceed to styling the content elements by activating the classes you have defined in this box.

If you enter your license details in the fourth tab, it means that your Visual Composer is automatically updated. This will also entitle you to receive support. A lot of WordPress developers take the time to go through this process to make sure that illegal or unauthorized downloads of their products are averted, a necessary evil, if you may.

The final tab in the settings menu is used for mapping custom short codes as well as short codes from 3rd party plugins. This way, you can increase the number of available content elements that you can use.

That’s it. You can see that there are only a few settings that you need to configure to start using Visual Composer. You just need to pay particular attention to the license page because the automatic updates and support you will receive will depend primarily on the entries on this page.

An Honest Visual Composer Review

A Glimpse of What Visual Basic Brings to the Table

With Visual Composer, creating professionally-designed webpages will take only a matter of minutes. Likewise, it is easy to get a good grasp of how the WPBakery plugin generally works. In fact, it may take you a bit longer to get acquainted with all the content elements that are bundled with Visual Composer.

Take a look of a corporate page designed using the plugin.

Bottom of Form

Visual Composer Review: Create Professional Pages in Minutes

After you have gotten comfortable in using the styling elements, you will now be ready to begin creating unique and professional-looking pages. The 6 default templates that are built-in to Visual Composer will come in handy as you are still trying to feel your way around the system.

How to Extend Visual Composer

Simply put, Visual composer is developer-friendly. This means its content elements can be changed directly from the functions.php file of the theme. You can likewise add shortcodes that you created on your own. A lot of add-ons have also been designed as enhancements for Visual Composer, and there are many other plugins in WordPress that are compatible with it.

Visual Composer Downsides

If you talk to some website developers about using plugins, you will most probably hear them say that all plugins that they have used disappointed them to some degree. All plugins can use some improvements, one way or another, but this is not to say that they are not good and useful. Visual Composer is just like other plugins.

For this Visual Composer review, at least a dozen premium and free drag and drop WordPress website building tools were tested for comparison. In a lot of other plugins, you are allowed to use and insert all the available widgets as content elements. This helps considerably extend the functionality of a page building tool. With this feature, you can insert whatever WordPress widget you have that is active on your website.

Sad to say, this nice to have feature is lacking in Visual Composer. You are limited to the default plugins in WordPress, as well as a few plugins from 3rd party developers like Contact Form 7. Instead, Visual Composer offers a widgetized side-bar content element. While this should allow you, in theory, to add any widget into your pages directly, this is actually limiting and tedious to do.

The widgetized side-bar content element lets you choose the sidebar you want inserted into the element. However, you cannot create another sidebar or a new widget area. In order to include a custom widget into the page you are currently working on, you must create the sidebars each and every time. Although you can find WordPress plugins that help make the process of making new side-bars a little simpler, overall, it is still a tedious process.

To illustrate, imagine a content website consisting of around 100 pages. If you want custom widgets inserted into some of the pages, say in 30 pages, you have to create 30 custom side-bars just for the purpose. If you use another page building plugin tool, on the other hand, all you have to do is to drag the custom widget you want inserted, and drop it into the part of the content area where you want it to be.

That being said, WPBakery will hopefully take notice and address the concern in future releases of the plugin. This way, users will enjoy the convenience of directly inserting custom widgets into the page.

This Visual Composer review still contends that it is better to create and style pages using the backend editor, although it is understandable why a lot of users prefer to modify pages right on the live website. For one, this gives them the chance to immediately see the effects of the changes as they make them.

Switching to the front-end editing mode can be quite frustrating. While it works well once it has been loaded properly, a lot of times, it fails to correctly load. Sometimes, all you see is the loading icon displayed infinitely on your screen. To check if this is an isolated case, this review tried running the plugin on a test website. Twenty Twelve was used. There were no other active WordPress plugin activated. The results were the same. The frontend editor still did not properly load all the time. In fact, it was able to load correctly a few times.

There was a time when we tried to toggle between the backend to the front-end editor for about half an hour. We kept trying until we got the front-end editing mode loaded properly. Our persistence paid off. It finally worked on a blank website; to be specific, a blog site that contained no posts.

The next day, we noticed that we no longer had any problems loading the front-end editor. It caught us by surprise. For one, we did not make any changes to the website. We did a bit of research and discovered that a lot of other users encountered the same problems that we did. They were able to somehow find a solution to the problem. From what we gathered, there are times when the front-end editor does not load successfully because of some issues involving the pre-loader.

Beware of WordPress Plugins That Come Bundled with Themes

Visual Composer is the plugin of choice for a lot of WordPress theme developers primarily because of its drag and drop interface that allows users to conveniently create professional-looking webpages within a short span of time – within minutes, in fact. This is primarily the reason Visual Composer is bundled with a whole lot of WP themes on ThemeForest.

Sure, it is great to get a premium WordPress plugin like Visual Composer when you buy a WordPress theme. There is a problem, though. Not too many people are aware that a lot of theme developers do not pay attention to updates on the plugins bundled with their products. Thus, their theme zip file is not updated every time there are updates made on the included plugins. If you buy a theme with outdated plugin inclusion, you naturally end up using the plugin’s older version, making you quite vulnerable to attacks.

Next to Visual Composer, probably the most popular plugin for WordPress on CodeCanyon would be Slide Revolution. However security specialists discovered that Slider Revolution was saddled by a large, gaping security hole. While WP users who bought the plugin from CodeCanyon directly were able to get the plugin’s updated version with the security patch, thousands of other users who got their version of the WP plugin bundled with the theme they purchased, failed to download the new and updated version.

As mentioned, the problem lies with the theme developers who do not bother to check if new versions of their bundled plugins have been released. It has likewise been a common practice for theme developers to check for new versions of plugins ONLY when they are in the process of updating their own WP theme. While this is understandable, it still is not a sound practice that benefits the interest of their clients.

Now, if you got the Visual Composer version you are currently using from a WordPress theme package, you better check if you are not using the latest version. Having read the warning above, you are aware of the consequences of using an outdated version. You never know whether or not the theme developer is conscientious and proactive enough to update the plugin. Thus, it may be a sound move if you just buy your copy of Visual Composer from CodeCanyon itself. This way, you are guaranteed to receive automatic updates, as well as product support.

Visual Composer Review Ratings

Cost

No doubt, Visual Composer offers great value for your money. For a one-off cost of only $28, you get a cutting-edge WordPress plugin that is loaded with a lot of functional features.

For its retail price, Visual Composer costs significantly less than a lot of its competitors on the market. Velocity, another WP page builder plugin, for example, comes with fewer features. For a single website, the retail price is $97. You have to shell out $167 if you intend to use the plugin for 3 websites. The unlimited option, on the other hand, costs $247. Another competitor, Beaver Builder, uses the same pricing scheme.

Of course you can find drag & drop page builder tools for WordPress without requiring you to shell out a single cent. However, none of these plugins can approximate what Visual Composer has to offer both in terms of features and design functionalities. To put it simply, Visual Composer makes every cent you spent more than worth it.

Features

With Visual Composer, you can change the content of you website on either the front or backend. As mentioned time and again throughout this Visual Composer review, this is one area where the plugin excels and what separates it from other products in its category. Most other plugins with drag and drop interface will only allow you to create and modify pages using EITHER the front-end editor or the backend editor – NOT BOTH!

In addition, Visual Composer has a wide range of excellent content elements including multi-media elements for images and videos, social media buttons, as well as content-related elements like post carousels, post sliders, and post grids.

Empty spaces and separators can likewise be added into the pages for better page structure. Likewise support for buttons as well as calls to action are available.

As discussed in a previous section, perhaps the one major thing that may be considered lacking in Visual Composer is a good support for widgets from third party developers. By providing better support for third party widgets, Visual Composer developers, in essence, would significantly extend the plugin’s functionality. Other than that, however, majority of WordPress users will have no problems with the built in content elements. Users will likewise be happy about the user-friendly interface.

Aesthetics

Talking about aesthetics, there is nothing about Visual Composer that does not look good. Everything is just stunning – from the drag & drop interface to the various pages that the plugin helps you create and style for your website. Each of the content elements is responsive; thus, you have the guarantee that your page will look perfect regardless of the device it is viewed from, whether it is a laptop, tablet, smartphone, or a desktop computer.

Visual Composer also makes it possible for you to customize all the content elements as you please. The borders, padding, and margins can easily be modified. By using the settings box, you can likewise alter the background and font colors. You can even add custom CSS to the style elements in your arsenal.

In most other drag and drop page building tools, you are not allowed to modify the style of the content elements. They only give you the option to either use it or not. With Visual Composer, no such restrictions exist. You can do a lot more.

Usability

Visual Composer offers easy interfaces for both the front-end and backend editors. To give you an idea of how convenient it is to use the plugin, within 15 minutes of feeling your way around, you would already have a good grasp of how to include content elements, as well as how to position them in columns and rows.

However, it may be unreasonable to expect that you can come up with professional-looking pages right off the bat. While there is no argument that Visual Composer is quite easy to use and navigate, it will probably take you a couple of hours before you get comfortable enough to create the pages you want. You must first get acquainted with the various available options for each of the content elements.

The pre-packaged templates that come with Visual Composer definitely come in handy to speed up the learning process. Just load a default template and start trying things out, moving and tweaking content elements, and in no time, you will already have a good idea on how each piece of the puzzle fits.

Support

The plugin has been on the market for a number of years now, yet it still gets regular updates and fitted with new features. As the top-selling WordPress plugin on CodeCanyon, you can rest assured that you will enjoy active support for the product for a long time.

Learning how to use the WP plugin is likewise a non-issue. You can find a large knowledge base on the site of WPBakery, where you can get a walk through on using the plugin. The site also features a ticket support system where the developers field customer inquiries. Comments are likewise promptly responded to.

You do not have to pay annual fees to use Visual Composer. Once you buy the plugin, you automatically become eligible for lifetime upgrades and support.

Speed

Visual Composer was specifically designed in a way that the required Javascript files would be loaded if a particular content element is using them. This allows pages to load quickly, reducing the bandwidth at the same time. To cite an example, the Javascript required by a post carousel will only be loaded if a post carousel is added to that specific page.

Thousands upon thousands of fast-loading sites utilize Visual Composer; thus, you need not be concerned about the WordPress plugin dragging your website down. Each of the content elements is guaranteed to efficiently and quickly load.

Conclusion

In the highly competitive and crowded niche of drag and drop page building tools, Visual Basic can brag that it is the best and most popular option today for WordPress users, and probably, no one will raise a whimper. The plugin is user-friendly, the content elements are great, and you can work on your pages both on the front and back-ends of your site.

Perhaps its single main drawback is the absence of an option to easily incorporate widgets into pages. You may argue that there are more flexible, and free drag and drop interface page builder plugins available like Aqua Page Builder and MiniMax that let you easily insert widgets into pages. If you don’t need the functionality of inserting third party widgets into your pages, however, this is a non-issue.

A good majority of WordPress users would be satisfied with the quality of the content elements that Visual Composer brings to the table, as well as the option that allows you to style the content elements using custom CSS. With this, you can use the plugin to come up with stylish pages within a few minutes. Overall, Visual Composer is a solid WordPress page builder plugin that is worth recommending.

 

You Might Also Like

No Comments

Leave a Reply