Visual Composer for WordPress Review

Visual Composer is the best selling WordPress visual page builder plugin in CodeCanyon, with over 29,000 sales. It is used in over 70,000 websites and comes integrated in many commercial WordPress themes. Released in 2011, Visual Composer and has been improving with every update. It

Visual Composer for WordPress

Visual Composer is the most popular, robust and extensive page builder WordPress plugin in CodeCanyon today. Developed by WPBakery in 2011, this plugin has emerged to become to #1 drag-and-drop page builder plugin for WordPress with over 29,000 sales as of 20th July 2014. It has been featured in many authority blogs such as Forbes, SitePoint and Chris Lemma.

Today we take a closer look into what the plugin has to offer and how you may benefit from it. Even if you’re a seasoned WordPress theme/plugin developer, hold on to your boots – there’s plenty in store for you too.

Review Details

  1. Plugin Version: v4.2.3, released on 12th June, 2014
  2. WordPress: v3.9.1
  3. Theme: Twenty Fourteen
  4. Active Plugins: None

Working with Visual Composer 4.2.3

The basic idea of a ‘visual composer’ or a ‘page builder’ plugin is to design your site using pre-defined page elements, without having to touch a single line of code. This is intended for people who aren’t familiar with HTML or CSS. With Visual Composer you can simply drag and drop page elements into the page you’re building.

What are Page Elements?

04-page elements

Page Elements, also known as Content Elements are the basic building blocks that constitute Visual Composer. They can be as simple as a text column or something as awesome (or maybe complex) as a pie chart or progress bars.

There are over 40 Page Elements for Visual Builder. I’ve listed a couple of them below. For a thorough list, visit the plugin’s demo page.

11-content-block

A unique selling point of the Visual Composer plugin is the ability to develop custom Page Elements. All you need is an API key and you are free to develop unlimited Page Elements, which you can sell or integrate in your theme.

Designing your First Page

We’ll be designing a demo page with some random page elements. To access the Visual Composer, click on the Backend Editor.

01-backend editor

Now there’s one fundamental thing we need to understand before we can truly realize this plugin’s capabilities.

Each Page Element (we’ll call them ‘element(s)’ from now on) must be contained in a row. A row is the base container in which an element is placed. Think of it as train set. Each train set has tracks, trees, conductors, animals, farmhouses, etc. These are your Page Elements. The base of the train set, on which you build everything is one giant container – the WordPress editor, if you will. Let’s call it the workspace.

Now, you can divide the workspace into as many rows as you wish. You start with zero rows. To add an element, you first add a row to the workspace.

Rows and Columns

02-rows

Each row can be divided into a maximum of 6 columns. But that’s not a limitation – I’ll explain shortly. In the above picture, I’ve added just one row container. We can divide it into columns by selecting a Custom Layout. Let’s say I’ve picked 1/4 + 3/4. I get something like this:

02-rows-14-34

Now we can add any element I wish by clicking the large ‘+’ button. All available Page Elements are displayed in a popup. Let’s say we pick a Single Image for the first section.

05-adding elements

You can now play around with the elements and design your site.

You can clone, edit or delete rows in using the Backend Editor. You can also reorganize the rows using Visual Composer’s intuitive drag-and-drop support. Check the following image for a better understanding.

10-drag-and-drop

Rows within Rows – Recipe for Madness

Sounds crazy? It’s about to get crazier.

We can add any number of containers inside a row container. That’s right – a container inside a container. Theoretically speaking, this creates an infinite number of possibilities.

This also breaks the boundary of 6 columns. Suppose we want to have 12 columns in a single row. We know that 6×2=12.

First, we create a row and divide it into 6 columns.

06-row-6-columns

Then, we add an element called Row in each section.

07-row-element

That’s a container inside a container. We then change the Layout Settings of the inner container to 1/2 + 1/2. Thus, we have 6×2 = 12 columns or containers.

08-row-6x2-12

And that is how you get an unlimited number of possibilities. I’m not going into an entire tutorial on how to build a page. I think this basic understanding will enable you to build anything you imagine.

Awesome Features:

Now that we have a general understanding of how to build pages, let’s take a look at some of the useful features Visual Composer has to offer.

Saving Templates

When you design a page you like, you can save it as a page template. You can use then use it in any other post or page you like. This is very helpful for team member or FAQ pages.

Front-End Editor

09-front end editor

This is another massive breakthrough in the Visual Composer plugin, this editing mode allows you to design the page using a real-time view. In the Backend Editor, it was essentially the old WordPress editor with the Visual Composer control panel appended. To preview a design, you had to refresh the page draft you were building.

With the Front-End editor, all your design is done in a (sort of) live preview mode. The changes you see in the page is the design your viewers will be seeing. No more using the Preview Page option.

Third Party Plugins

Visual Composer supports WordPress widgets as page elements. If you have an awesome widget you want to display, simply add it in a row container. Visual Composer also supports third party plugins right out of the box. They include:

  • Contact Form 7
  • Gravity Forms
  • Layer Slider
  • Revolution Slider

If you have any of these plugins installed, a corresponding page element will automatically appear in the popup. When you choose to insert a page element for one of these plugins, Visual Composer displays a drop-down of the respective sliders/forms you’ve previously created, or displays an entry box for you to add your slider ID. Talk about modularity!

Responsive

You’ve probably thought this was a given feature. Well you’re right. Within the settings page you can fine tune your layout and set when exactly your content should adopt to the mobile screens.

Premium Add-ons

4k Icon Fonts for Visual Composer

Visual Composer also has a couple of really cool add-ons which further extend the plugin’s features. Some of them include Easy Tables, Templatera and 4k Icon Fonts.

Developer Friendly

You can use Visual Composer to build your own shortcodes and integrate it in your own commercial WordPress theme. You can even sell those themes in theme marketplaces like Themeforest or MojoThemes. This is one of the largest factors to this theme’s popularity. You can also apply to become a Visual Composer developer to develop third party add-ons.

Skin Builder

Visual-Composer-Skin-Builder

The Skin Builder in Visual Composer allows you to make global changes to your site. Setting include colour templates, mobile screen width, grid spacing and many more. All the settings you apply in the skin builder are appended to all the elements used in the site. It is also saved in a static CSS file for faster loading.

Advanced Features

There are two particularly advanced features of Visual Composer. These are meant for developers and experienced WordPress folks. One of them is the Visual Query Builder.

As Kevin explains in this post, “…it’s a really easy way to build custom queries and display them in a grid. A quick example where this might be useful. Let’s say you want to create a Pinterest-style page with the Masonry layout. You also want only content from a particular post type (maybe you set up a portfolio custom post type) to show up on this page. So you’d need to create a custom query that fetches the latest posts from the portfolio custom post type and displays them with the Masonry layout with three columns. The visual query builder lets you do just that…”

You can assign selective access to Visual Composer based on the User Roles in WordPress. If you have custom post types in your WordPress installation, Visual Composer can also be used for them. These settings can be found user Settings > Visual Composer.

Final Thoughts

12-support-and-updates

One does not simply become #1. It takes years of endurance and tedious work to get there. The story of WPBakery is one such example and a source of inspiration for designers and developers from all over the world.

Visual Composer has a rich collection of video tutorials. When you purchase the plugin for 30 USD, you’re getting a lifetime’s worth of automatic, hassle-free updates, and premium support from WPBakery. The average rating is 4.63 out of 5, with a total of 2800+ ratings.

So what’s your thought on this plugin? Is it worth $30 of your money? Let us know!

Useful Links

If you enjoyed this post, make sure to subscribe to WP Mayor’s RSS feed.

Sourav
Sourav
Sourav is a digital marketeer and a WordPress enthusiast. He's passionate about the intersection of technology, empathy and humanity.

Consider sharing this post so others can find it:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on telegram
Share on whatsapp
Share on pocket
Share on email

Join thousands of people receiving real-world, genuine evaluations of WordPress products and services just like this one every week.

26 Responses

  1. This is an awful plugin in my experience when it has been used in themes and it can’t be disabled. It is full of bugs and the support is very slow and unhelpful. If you use this to create pages or posts and then decide to switch back to the normal editor, make an edit it then breaks the layout.

    In my opinion the WordPress editor is fine the way it is and the use of a shortcodes plugin such as Shortcodes Ultimate works just as well.

    1. I think it’s one area that is still in its early stages, although there is already a lot of competition with several plugins offering drag and drop building functionality. The WordPress camp seems to be divided between those who want to retain the pure experience with at max a few shortcodes to use, and those who want to make it really easy for users to create their own layouts, and therefore welcome plugins such as Visual Composer. This plugin is definitely one of the best drag and drop plugins out there at the moment. So ultimately it depends on which camp you fall in.

  2. I agreed with Nebulas, in addition to his comments if you use search in your wordpress you will have to install a plugin to get rid off all the shortcodes that will show in the results.

    Not recommended.

  3. I think Visual Composer is a great plugin, and well worth the money.

    A great time saving tool!

    The ability to customize pages and have them be responsive far outweighs the small trade-off of added shortcodes

  4. In my experience Visual Composer worked great! I’m using it for every site that I create for my clients and my clients are very happy with it. Happy clients – happy me! 😎 I’m huge fan. Kudos to guys from WPBakery.

  5. Able to share the difference between Visual Composer, Live Composer and VelocityPage? Not just how easy it is to use, but their functions… I am abit confused and don’t want to buy and end up regretting.

  6. In my opinion, Visual Composer has jumped the shark. Its interface is clunky and has proven to be difficult for my clients to use. There are much better options out there these days.

  7. In my opinion, to truly appreciate Visual Composer, it takes a bit of getting used to.
    Let’s remember that one cannot make a product that pleases everyone.
    Of course, as Randy points out, certain clients who have a set mindset might find it difficult to work with VC.
    Again as Andrew points out, VC is indeed an awesome plugin!

  8. in my experience visual composer very nice plugin but when activated press theme at that time also visual composer worked this composer and after 6 month this back end editor not working visual composer 4.1.2 with WordPress 4.0 please help me how it solved??

  9. I think its great for those who are new to WP but when your concerned site speed and you looking to get rid of some plugins VC is on the cut list.

  10. I often wondered how the typical end-user feels about these page builders, especially with Visual Composer as it’s been around for a long time. I know many Theme Forest theme developers include it, but I am one who does not like page builder plugins and do not make it part of my themes. However, I know it’s more of a personal preference with many who like them while others don’t. Obviously WPBakery is doing well regardless.

  11. Lets not forget the external CSS footprint that Visual Composer leaves on a web page. The ‘JS_composer.css’ file is about 500KB! This is pretty horrible for page speed optimisation….

  12. I’ve always worked with themes that my team and I have built, so admittedly, I’m not a seasoned pro when it comes to pre-made, pre-packaged (heavy and slow) WordPress themes. That said, I recently acquired a new client who uses a pre-made theme they purchased from themeforest. The theme is beautiful, I have to admit … but it requires Visual Composer. In the 10 years that I’ve been working with websites, I’ve never seen a more resource-heavy, slow, or painful to use plugin. It took 23 seconds to load a single page from the admin panel … a page WITHOUT any image files, video, or other large, fancy files. 23 seconds to load a text-only page, and the site is on a dedicated server … Are you kidding me? I feel like I’m getting older every time I use this thing. I’ve noticed that VC is not required for posts, and they load up like a champ, so I’m pretty sure it’s not a site error. This ginormous plugin just seems to consume every available resource when it’s in use … including my patience. If there is some magical wizardry involved to make VC work properly, please for the love of god tell me what it is. I beg you.

    1. Hello Durmonski,

      I created my site with VC. But since I use it extensively, the more pages I create with VC (blog pages as well, and of those I have many) the slower my site gets.

      And it’s a very simple layout with very little bells and whistles.
      You can have a look here: http://dianamjoice.com/

  13. Is there any way to edit with visual composer frontend editor in view mode. It’s working fine in text mode but when i try to edit and save the text on view mode in frontend editor its triggers error “$carousel.carousel is not a function” .
    Thanks

  14. Thank you for this review. I dig VC but have been wondering lately: VC outputs a fair amount of nested HTML structure for even the most simple page layouts, though to be fair, I would assume other page builders do the same…what are your thoughts on how this might affect SEO?

  15. Visual Composer is a horrible plugin. We got it bundled in a premium theme. It expired after 6 months and now visitors cant read the pages we made. And we cant access/edit the pages we made / and theme people dont support us.
    It is a scam- that I have to keep buying it over and over just to keep my site running.
    STAY AWAY from Visual composer.

Leave a Reply

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

The Beginner’s Handbook
From an introduction on how WordPress works to our recommendations on products and services.
👋 Hey there! We're Gaby and Mark
Every week we share tutorials and genuine reviews of WordPress products and services in our newsletter.
Thousands of people read it!
We’d love for you to join.
We’d love for you to join. Here’s what you’ll be getting:

A single weekly email directly to your inbox.