Copyright 2017 by Themelego 

 
 
 
 

 
Version 2.0 

 
Documentation 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
http://vckit.themelego.com/ 
Table of content

I - DOWNLOAD

II - INSTALLATION
1. Install WPBakery Page Builder
2. Install & active VCKit plugin

III - CONFIGURATION YOUR WEBSITE

List of VCKit’s Elements
Detail Instruction
Interactive Hover
Mailchimp Newsletter
Installing plugin
To master Lightbox in 1 minute!
Carousel Slider
Testimonial
Icon Box
Contact Form 7
Pricing Box
Grids
Gradient Background
Row Background

IV. PLUGIN OPTIONS

1. General
2. Modules:
3. Smooth Scroll:
4. About:

V. STAY UPDATE & SUPPORT

I - DOWNLOAD
1. Log in to your Codecanyon account, choose "Download" from the menu 
Or head to h​ ttps://codecanyon.net/downloads 

 
 
2. Click "Download" button on item you want to download 

 
3. Extract the zip file to your computer. 
 
4. Done 
   
II - INSTALLATION

1. Install ​WPBakery Page Builder

WPBakery Page Builder is a page builder for wordpress. To use this plugin 
please install WPBakery Page Builder first: C
​ odecanyon WPBakery Page 
Builder 
 

 
 

2. Install & active ​VCKit ​plugin

Login to your Wordpress admin dashboard >> Plugin >> Add new then: 
● Click "Upload" plugin 

 
 
● Click "Choose file" 
Then inside the package Visual Composer Kit you downloaded from 
Codecanyon, choose file ​visual-composer-kit.zip​. 

 
Note​: you need to extract the zip file downloaded from Codecanyon to find the 
right file to upload. 
 
● Click "Install now" 
 
● Activate plugin 

  
Done.   
III - CONFIGURATION YOUR WEBSITE
1. Create a new page with WPBakery Page Builder plugin 
Edit with Backend Editor (or Frontend editor) > Add Element 

 
 
3. Go to “KIT Addons” tab 
 

 
 
Details about each addon are below:  

List of VCKit’s Elements

 
No.  Logo  Element  Description  Demo Link 

Interactive 

1  Button  Button with styles & mouse  http://vckit.themelego.com/shor

Inspiration  hover effect  tcodes/buttons/ 

2  Interactive  Creative and subtle mouse  http://vckit.themelego.com/shor

Hover  hover effect   tcodes/interactive-hover/ 

  http://vckit.themelego.com/shor
tcodes/interactive-hover-set-2/ 

3  Interactive  Navigator bar with hover  http://vckit.themelego.com/inter

Navigator  effect  active-navigation/ 

4  One Page  Navigator bar in one page   http://vckit.themelego.com/shor

Navigator  tcodes/one-page-navigator/ 

5  Interactive  Pop-up notification  http://vckit.themelego.com/shor

Notification  tcodes/interactive-notification/ 

6  Tilt Hover  Mouse hover effect with slight  http://vckit.themelego.com/shor

tilt effect  tcodes/tilt-hover/ 

7  Image Tilt  Display of images with slight  http://vckit.themelego.com/shor

Effect  tilt hover effect  tcodes/image-tilt-effect/ 

 
 8  Image Swap  Display of images with  http://vckit.themelego.com/shor
swapping hover effect  tcodes/image-swap/ 

9  Icon  Display information in circle of  http://vckit.themelego.com/shor

Showcase  icons, hover on each icon to  tcodes/icon-showcase  
change content 
 

10  Workflow  Display content and image in  http://vckit.themelego.com/shor

vertical flow.  tcodes/workflow 

Basic  

11  Message  Display of message in a box  http://vckit.themelego.com/shor

  Boxes  tcodes/message-boxes/ 

12  Drop Caps  Display of first letter with  http://vckit.themelego.com/shor

  different styles    tcodes/drop-caps/ 

13  Card Flip  Display of content box in  http://vckit.themelego.com/shor

  flipping effect   tcodes/card-flip/ 

  http://vckit.themelego.com/shor
tcodes/card-flip-3d/ 

14  Separator  Separator with different  http://vckit.themelego.com/shor

  styles, icons and effects  tcodes/separator/ 

  http://vckit.themelego.com/shor
tcodes/icon-separator/ 

15  List  Display of content in list  http://vckit.themelego.com/shor

  styles, with icons  tcodes/list/ 
 
 

16  Google Map  Display of google map with  http://vckit.themelego.com/shor

  styles  tcodes/google-maps/ 

 
 17  Gradient  Create gradient color  http://vckit.themelego.com/shor
  Background  background easily  tcodes/gradient-background  

18  Mailchimp  Display of sign-up form for  http://vckit.themelego.com/shor

Newsletter  newsletter with styles   tcodes/mailchimp-newsletter/ 

19  Image Banner  Display of image banner with  http://vckit.themelego.com/shor

styles   tcodes/image-banner/ 
 
 

20  Image Slider  Display images in one slider  http://vckit.themelego.com/shor

tcodes/image-slider/ 

21  InstaFeed  New Instagram element,  http://vckit.themelego.com/shor

paste your token keys to show  tcodes/instagram-feed/ 
your Instagram photos 
 

Advanced  

22  Contact Form  The shortcode which includes  http://vckit.themelego.com/shor

7  the most popular contact  tcodes/contact-form-7/ 
form plugin. You have to 
  import our contact form data.  
Don’t forget import our form. 

23  Pricing Box  The modern, responsive  http://vckit.themelego.com/shor

pricing table for wordpress   tcodes/pricing-box/ 

24  Before After  The before and after image  http://vckit.themelego.com/shor

Image  showcase  tcodes/before-after-image/ 

25  Animation  Just-add-whatever CSS  http://vckit.themelego.com/shor

Block  animations (bounce, flash,  tcodes/animation-block/ 
pulse, fade,...) for your 
  elements 
26  Animated  Enter any string and watch it  http://vckit.themelego.com/shor
Typing  type at the speed you’ve set,  tcodes/animated-typing/ 
backspace what it's typed, 
  and begin a new sentence for 
however many strings you 
want to set. 

27  Old Instagram  Show the latest instagram  http://vckit.themelego.com/shor

Feed  photos from anyone. Just  tcodes/instagram-feed/ 
paste the Instagram 
  username and it will show 
that user’s Instagram feed. 
There are 4 color schemes 
that can be used.  

28  QR Code  Fast QR Code generator.  http://vckit.themelego.com/shor

tcodes/qr-code/ 

29  Scroller  Show an image in a fixed  http://vckit.themelego.com/shor

Image  height and scroll to the end  tcodes/scroller-image/ 
when hovering. 
 

30  Social Share  Custom social share buttons  http://vckit.themelego.com/shor

with impressive hover styles  tcodes/social-share/ 

31  Carousel  Display information in slider  http://vckit.themelego.com/shor

Slider  format.  tcodes/carousel-slider/ 
You can put any element into 
  a carousel item and 
customize the style of 
carousel slider. 

32  Lightbox  Put any element into a  http://vckit.themelego.com/shor

lightbox.  tcodes/lightbox/ 
Customize the popup/modal   
  with different sizes. Using 
VCKit’s button to open 
lightbox or using extra class 
to open lightbox by any 
element. 
 
 Infographics / Misc. 

33  Team  Display of team member  http://vckit.themelego.com/shor

Member  information with styles   tcodes/team-member/ 

34  Icon Box  Icon with styles, effects  http://vckit.themelego.com/shor

tcodes/icon-box/ 

35  Testimonial  Testimonials is a clean and  http://vckit.themelego.com/shor

easy-to-use testimonial style  tcodes/testimonial/ 
to show on your site. 
  (work with Testimonials by 
WooThemes) 

36  Count Up  Display your statistical data in  http://vckit.themelego.com/shor

count-up format, with icons  tcodes/count-up/ 

37  Countdown  The countdown element to  http://vckit.themelego.com/shor

count down specific day.  tcodes/countdown/ 

38  Counter  The easy pie chart element  http://vckit.themelego.com/shor

Circle  tcodes/circle-counter/ 

39  Video Modal  The lightbox video to show  http://vckit.themelego.com/shor

your youtube, vimeo video.  tcodes/video-modal/ 

40  Progress Bar  Display your progress as  http://vckit.themelego.com/prog

horizontal or vertical bars with  ress-bar/ 
different colors & styles and 
  deep customizability. 

41  Heading  Custom your title and heading  http://vckit.themelego.com/shor

Effects  text with some impressive  tcodes/heading-effect/ 
effects 
 
42  Heading  Transform your title and  http://vckit.themelego.com/shor
Gradient  heading text color with  tcodes/heading-gradient/ 
gradient effect 
   

Grid 

43  Samsung Grid  Display your grid with special  http://vckit.themelego.com/grids

3 appearance effects  /samsung-grid/ 

44  Elegant Grid  Display your content in  http://vckit.themelego.com/grids

custom grid layouts with 8  /elegant-grid/ 
appearance effects 
 

45  Interactive  Display your content in  http://vckit.themelego.com/grids

Grid  custom grid layouts with 30  /interactive-grid/ 
subtle mouse hover effects 
 

46  Magazine  Displays your various in  http://vckit.themelego.com/grids

Grid  pop-up post and various  /magazine-grid/ 
options 
 

47  Google Grid   Display your content grid in  http://vckit.themelego.com/grids

Google Search style  /google-grid/ 

 
 
4. Save changes and Publish! All done! 
 
 
   
 Detail Instruction
 

1. Interactive Hover
This element is actually ​Marvelous Hover Effects​, so you can read its ​documentation​ or watch
tutorial video​ for more instruction.

2. Mailchimp Newsletter
● Installing plugin
In your WordPress admin panel, go to ​Plugins > Add New​, search for ​MailChimp for WordPress
and click “Install now“.
Alternatively, download the plugin and upload the contents of mailchimp-for-wp.zip to your plugins
directory, which usually is ​/wp-content/plugins/​.
Activate the plugin.

● Configuring Sign-up Form(s)

Go to ​MailChimp for WP > Form

Select at least one MailChimp list to subscribe people to.
(Optional) Add more fields to your form using the add MailChimp field dropdown.
Embed a sign-up form in pages or posts by using the​ [mc4wp_form] ​shortcode.
Show a sign-up form in your widget areas using the “MailChimp Sign-Up Form” widget.
Show a sign-up form from your theme files by using the following PHP function.
<?php
if( function_exists( ‘mc4wp_show_form’ ) ) {
mc4wp_show_form();
}

Wonder how to add Mailchimp Newsletter Sign-up Form to WordPress using WPBakery Page
Builder Addon? Click here to watch tutorial video!

3. To master Lightbox in 1 minute!

For better instruction, take a look at our tutorial video ​here​!

● First, make sure to add "Lightbox" element into WPBakery Page Builder back-end editor
(located in ​KIT Addons​ tab)
The "Lightbox Settings" panel will open > Set the Lightbox ID. You can type any name you want,
this ID helps a button (or anything can open a link) to identify which lightbox to open.

Click "​+​" to add any element inside lightbox. Or you can drag element into it.
Done. You've successfully created a Lightbox.

● Next, let's create a button to open this lightbox!

By default, the "Button" element of VCKit (located in​ KIT Addons​ tab) has a function to open a
Lightbox.

Let's add a VCKit's Button:

In the "Button Settings", scroll down to the end and find "​Advanced on click action​" box, choose
"​Open lightbox​".

The "​Lightbox ID​" field will appear, type the chosen Lightbox ID. (as example above: "demo").

Done. Now when clicking on this button , it will open the Lightbox with ID "demo" (the one has a
video inside it).

● Here is a tip!

Beside VCKit's Button, you can make any other element to open VCKit's lightbox, as long as that
element​ has a function to "Open a Link"​.
Add an element which has option to open a link.
● Fill in the URL field: ​#lightboxid​ (remember to add ​#​ and remove ​http​)
● Add extra class name: ​open-vckit-lightbox
● That's all steps to make this element open a Lightbox instead of a link.

For example:
Add a ​Single image​ > Set "​On click action": "Open custom link​" > Fill in the Image Link: ​#demo
Add an extra class name in this Single image element: ​open-vckit-lightbox

And you are done!

4. Carousel Slider
You can “Carousel anything” by using “Carousel” element.
The Carousel Settings will show up for you to adjust all general settings of this carousel.

Click on “+” to add a Carousel Item.

 
You can add an element to Carousel Item by clicking on “+” or drag an element into it.

Each item should be added in a Carousel Item.

You can always edit settings of this Carousel by clicking on the pencil symbol to show the “Carousel
Settings”. In here, you can choose the number of item to show per row on each screen size.
 5. Testimonial
Installing “Testimonials by WooThemes” can be done either by searching for “​Testimonials by
WooThemes​” via the ​Plugins > Add New​ screen in your WordPress dashboard, or by using the
following steps:

● Download the plugin via ​WordPress.org​.

● Upload the ZIP file through the ​Plugins > Add New > Upload​ screen in your WordPress
dashboard.
● Activate the plugin through the ‘Plugins’ menu in WordPress
● Place ​<?php do_action( 'woothemes_testimonials' ); ?>​ in your templates, or use the
provided widget or shortcode.

Please watch our ​tutorial video​ for better understanding.

6. Icon Box
This element is actually ​Elegant Icon Box​, so you can watch ​tutorial video​ for more instruction.

7. Contact Form 7
Install C
​ ontact Form 7​ first to use this addon. 
All VCKit form templates can be found in your package downloaded from ​codecanyon​. Extract the 
downloaded package and extract file i​ mport.zip​, then find a file named: 
visualcomposerkit.wordpress.xml i​ nside it. 
 

8. Pricing Box
Please watch our ​tutorial video​ for better understanding.

9. Grids
Our plugin includes 5 kinds of grid, click on each name below to watch its own tutorial video:
● Samsung Grid
● Elegant Grid
● Interactive Grid
● Magazine Grid
● Google Grid
 10. Gradient Background
It’s a row background with gradient.
After adding “Gradient Background” element, the “Gradient Background settings” panel will appear.
(you can always open its panel by clicking on the pencil symbol).

● There are 2 types of gradient: Linear or Radial.

● Add your color gradient in Color strip, you can add as many colors as you want and set the
percentage of each color appearance.
● You can also choose Direction of Linear, or choose Shape of Radial.
● You can add an image background under the color gradient. (​Note​ that the image is ​under
the color, so you need to lower the opacity of each color to see the image)
 ● After setting the Gradient color, you can add anything you want inside this background

11. Row Background

After activating VCKit, a new tab named “Advanced Options” will show up in Row settings (click on
the pencil symbol to edit row).
IV. PLUGIN OPTIONS
1. General
Hover to ​VC Addons KIT​ on the left panel of your dashboard.
There’re some general options to config here.

2. Modules:
Enable/disable shortcodes.
 3. Smooth Scroll:
Add smooth scroll function to your site

4. About:
All information about System Requirements and Changelog are here.
V. STAY UPDATE & SUPPORT
Thank you for purchasing our passionate work.
We’re ceaselessly working hard to bring more features and better UX into each new version of
VCKit. So make sure that you have followed all the steps below to get update email from Envato:

- On Codecanyon go to your profile > Settings > Email settings > Check the box ​“Item update
notifications”.
- Go to your ​Downloads page​, check the box ​“Get notified by email if this item is updated”​ of
VCKit item.

That’s all. Everytime we update a version, Envato will automatically send an email notification to
you.

● Support:
If you have any question, please do not hesitate to use our support center:
https://support.themelego.com
Or send us a private email to ​support@themelego.com
We are happy to help!

*****
Additionally, if you like VCKit, please ​rate​ it on the same Downloads page. We really wish to hear
your feedback about our product.

It means a lot to us and gives us enormous motivation to deliver other great work to you.

Thank you and enjoy now!