Get fresh WordPress Content delivered in your inbox with warpspeed!

learn wordpress wplift wordpress rocket

We’ve all heard about Visual Composer, right? No? Neither have I. Just kidding. To be fair, I’ve never used Visual Composer on a personal project. However, within 5 mins of tinkering with the plugin, I became a fan! For those of you who haven’t heard of this plugin – you’re in for a treat. Visual Composer is the world’s most popular drag-and-drop page builder plugin designed for WordPress.

vc hero

Designed by WP Bakery, this plugin can be found bundled in almost every popular theme in Themeforest. It lets you build stunning pages – exactly in the layout you want.

  • Don’t want to show a particular element such as a CTA in mobile view? Done.
  • Want to add a pie chart or a part of Google Maps right in the middle of the post? Sure.
  • 1 column? 2? 12 columns to add different elements in each row? No problem, VC’s got you covered.

The list could go on for a while; so why don’t I just show you what all is possible with the plugin.

vl list of defult elements from add elements menu

Visual Composer enables you to create virtually any design and layout – without having to be a designer or coder.

Okay, cool.

You know what Visual Composer doesn’t cover? Pricing tables. Now some of you would tell me that there’s an add-on for that. And you are right. I could purchase or get a free add-on that lets me create pricing tables for Visual Composer.

What about business cards?

  • What?! Who needs a business card in their WordPress site?

Just bear with me alright? I’m trying to make a point here. What about an MP3 player?

  • Who needs an MP3 player in their WordPress… Well, yes some might. Like a musician or a voiceover artist showcasing their work.

There you go. Now, I’m sure you can get an add-on for MP3 players. Or business cards for that matter. But the point is, you would have to search, purchase and install separate add-ons for Visual Composer, every time you need them! And if you’re in the business of building custom WordPress solutions – God be with you.

The point I’m trying to make is simple.

What if there was an add-on that lets you create other add-ons for VC?

  • You mean like an Add-on Creator?

P-R-E-C-I-S-E-L-Y

And that’s what today’s plugin is all about. It’s called Addon Creator for Visual Composer, and we’re going to explore the fish out of it! (Yes, I get excited.)

preview

To start things off, let’s get started with the core benefit of the plugin. It lets you create custom add-ons for Visual Composer, containing a mix of HTML, CSS, and jQuery scripts. You can build your own add-on for Visual Composer and save or export them for your projects and clients. This is especially useful if you are in the business of building custom WordPress solutions.

For starters, you could go through the introductory video which explains the functionalities of the plugin in a nutshell.

Example #1 – How to Create a Colour Add-on for Visual Composer using Addon Creator

I feel that the best way to learn is by example. So let’s try to create a simple add-on which takes input from the user (which could be you or your client) and produces the relevant output.

To begin with, upload the plugin’s ZIP archive from your computer and install/activate it. Next up, open the plugin’s settings as shown in the following screenshot.

addon-creator-visual-composer-01-create-new-addon

Click on ‘Add Addon’.

addon-creator-visual-composer-02-create-new-addon

Describe your addon as best possible. In our example, we’re creating a simple HTML picker, and thus, we’ve named it accordingly.

addon-creator-visual-composer-04-create-new-addon

Once the addon is created, you want to edit it, add the HTML and CSS magic to it. Select the addon from the menu and click on ‘Edit Addon’.

addon-creator-visual-composer-05-edit-addon

Find the ‘Attributes’ tab and click on ‘Add Attribute’.

addon-creator-visual-composer-06-add-attribute

The attribute we want to add is called the ‘Color Picker’. The important thing to note in this step is this – the ‘Title’ and ‘Description’ field can be anything you want – it’s for your reference. The ‘Name’ field should be alphanumeric characters only. In our example, we’ve named it ‘colour’.

addon-creator-visual-composer-07-add-color-picker

Look at how we can style the HTML using the {{colour}} placeholder. When a user selects this add-on, the {{colour}} placeholder is replaced by the default value or the value chosen by the user. Select Update to save changes to this addon.

addon-creator-visual-composer-08-add-html

Now let’s see how the addon pulls through in Visual Composer. Select ‘Add Addon’ from the plugin’s menu and select the ‘Addon Creator’ tab. You should find the HTML Colour Picker addon there, waiting for you!

addon-creator-visual-composer-09-using-html-colour-picker-addon

Select the newly created addon and pick your color.

addon-creator-visual-composer-10-using-html-colour-picker-addon

Play around with the addon. In our example, we’ve added four versions of the addon with different color inputs.

addon-creator-visual-composer-11-design-page

And this was the output.

addon-creator-visual-composer-12-output

Example #2 – Importing Addons in Addon Creator for Visual Composer

The coolest thing about the plugin is that it comes loaded with tons of brilliantly designed add-ons for the take! Let’s see how we can import these addons and get ahead of the game.

First off, head to the ‘Addon Creator’ menu and select ‘Import Addon’.

addon-creator-visual-composer-13-import-asset

Select and upload the addon’s ZIP archive and click on ‘Import Addon’.

addon-creator-visual-composer-14-import-addon

If the addon was packed properly, it should appear in the list of addons.

addon-creator-visual-composer-15-new-addons

And of course, it would be ready for use within Visual Composer.

addon-creator-visual-composer-16-using-new-addons

Check out all the various categories of pre-built, ready-to-use addons that come bundled with the plugin. All you need to do is import the ones you need and start using them.

list of addons

Before you know it, you’ll have brilliantly designed website that would usually take weeks to design.

Create Addons from jQuery Libraries

There are hundreds of amazing jQuery libraries that let you do really cool effects in a website. Typically, developers bundle each script (or a bunch of related scripts for that matter) inside a dedicated plugin, which you need to install and activate in order to use. With Addon Creator, you can directly import these jQuery libraries into an addon. Follow this video to get started with creating addons from jQuery scripts in Addon Creator.

Pricing, Support and Documentation

Addon Creator is a Themeforest exclusive plugin, priced at $20 USD for a single site license. It comes with 6 months of support. You can purchase an extended support of one year for an additional $8 USD. Therefore, for $28, you’d get a single site license of the plugin with one year of updates.

If you ask me, I think 20$ is a steal deal for this plugin. Perhaps the developer is trying out different pricing options. Given that within 10 days of launch, the plugin has crossed over 50 downloads, the developers might just rise the price – as they should.

A complete documentation of the essential features of the plugin accompanied with video tutorials is also available.

Conclusion

Addon Creator is a very powerful tool for the right user. You can create brilliant addons within minutes for yourself or your clients. Not only will your development process be streamlined, you will also be able to create complex addons with minimal intervention of code. Be it a special typographic effect, a responsive image slider or a fully featured MP3 player – with Addon Creator anything is possible in Visual Composer.

More information / Download

Published:

Last updated on:

Sourav is a WordPress enthusiast, an avid gamer and a sitcom collector. His playlists include heavy metal, electronic, and new-age tracks. When he’s not online, he’s spending quality time with his friends and family.

2 thoughts on “Addon Creator for Visual Composer Review: Ruler of All Add-ons?

  1. Quick question, do you need the plugin installed on any site that you wish to use one of your custom addons with, or do they work straight with VC on its own?

Comments are closed.

Join 40,000 WordPress Astronauts
AND GET OUR LATEST CONTENT IN YOUR INBOX WITH WARPSPEED

We will never spam you.
close-link
siteground coupon
Get 60% Off the No. 1 WordPress Hosting!