Alchemy Addons Documentation

A complete guide on how to use Alchemy Addons for VC.

Get started Elements


Item Name: Alchemy Addons for VC

Item Version: 1.0

Author: UIClan

Twitter: UIClan On Twitter

Hello! Welcome to Alchemy Addons for VC documentation. First of all, we convey our sincere gratitude for visiting our site. We want to assure you that development of Alchemy Addons is a continuous process and you will find the plugin is updated regularly with more and more wonderful shortcodes and features.

We shall remain thankful to you in providing "Free Lifetime Updates of the Plugin and Continuous Support", if you purchase a plugin license.

We have compiled here the whole documentation. This documentation is to help you in understanding each feature of Alchemy Addons. Please go through the document carefully and you will realize how easy and effective it is to use the plugin on your VC enabled websites.


This section contains list of all plugin related requirements and configuration, general installation instructions, file structure etc.

Plugin Requirements

To install and use Alchemy Addons on your site, your site must fulfill some basic requirements. These are very simple and if you already have Visual Composer installed, then you would probably be all set to go. We also highly recommend to regularly check for updates for WordPress and VC.

WordPress Version
Visual Composer

Note: Alchemy Addons Requirements

The above mentioned versions are recommended for smooth working of Alchemy Addons on your site. The plugin will mostly work with older versions as well.

Browser Support

Specifically, we support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 10+. More specific support information is provided below.

  • Safari

  • Opera

  • FireFox

  • IE 10+

Getting Started

To get started you need to download the plugin package from Codecanyon "Downloads" section.

When you purchase Alchemy Addons on Codecanyon, you need to download the plugin files from the downloads section of your Envato account. Navigate to your downloads tab on Codecanyon and find Alchemy Addons. If you bought it recently, it should be on the top. Next, click the download button to see the two options. The "All files & documentation" contain the whole plugin package and has other files like license and documentation. The "Installable WordPress file only" consists of just the installable WordPress plugin zip file


We provide support for Alchemy Addons customers using our advanced and secured ticketing system. To use our system you need to send an email using the contact form on our Envato profile page. Kindly mention the purchase code for verification.

License Terms

Alchemy Addons can be purchased using the "Regular Licensing" or "Extended Licensing" option. The prices for the same are mentioned on the product description page on Codecanyon.

The license and billing are controlled by Envato and you can read more about them on the Envato license terms page. We do not control any sale or the licensing of the plugin. If you want to know more about the license you can contact us or Envato directly for clarification.

Regular License Terms Extended License Terms

License FAQs

  • Do I need to purchase second license if I want to use the plugin on more than one site?

    Yes. Every license of Alchemy Addons entitles you to use the plugin on a single site. If you wish to use the plugin on more than one complete website, you need to purchase a second license of the plugin.
  • Can I use the plugin on a development / test site?

    Yes. You can use Alchemy Addons plugin on as many test sites as you want. You can use the plugin to build your site on a development environment, then move it to the live site. Just remember, you will need separate license for each of your live sites.
  • Can I use the plugin for client work?

    Yes. Each license of the plugin allows you to use it for a single end client. That means if you have 10 clients you will need 10 separate license of the plugin for all of them.
  • Can I use the plugin in Multi site?

    Depends. If you are the sole owner of all the subsites that are created using WordPress, then you can use the plugin on all the sites. But if you have a membership site where the subsite owners are outside of your company, you need to have separate license for each of the subsites.
  • Where can I learn more about license terms?

    If you have further queries about Alchemy Addons and it's licensing terms, you can contact us directly from our profile page.


You can install the plugin either by using WordPress or via FTP. The file that you find in the plugin download package is what you need to upload to your site.

Download Alchemy Addons from Codecanyon

  • 1

    Visit the "Downloads" page.

    After you have purchased the plugin you need to download the download package from the downloads page. For that go to "Downloads" tab from your account screen.
  • 2

    Select the download package.

    Once there, you need to select the type of package you want to download. You can download the whole package that has everything like license files, documentation and the plugin file or only the "Installable WordPress File Only" package.
  • 3

    Download the package.

    Once you have selected, the download will begin automatically. Based on your selection and your internet speed, the download will take some time.
  • 4

    Once the downlaod is complete, extract the plugin package.

    The downloaded package then needs to be extracted using an appropriate application. For Windows users, we recommend 7-zip which is a free software to extract the contents of the package. For MacOS, you can use the inbuilt extractor.

WordPress Dashboard Installation

Install From The Admin Dashboard (RECOMMENDED).

  • 1

    Go to Plugins > Add New.

  • 2

    Click the Upload button.

  • 3

    Upload Alchemy Addons

    Navigate to find the "" file on your computer and click "Install Now".
  • 4

    Activate the plugin

    Activate the newly installed plugin in the next screen.

Note: Important Steps While Installing Plugin

Remember, you need to upload the file on your site. Do not try to attempt to upload the alchemy-addons uncompressed folder.

How To Update Alchemy Addons

There are basically four easy steps to update your plugin.

  • 1

    Go to Plugins > Installed Plugins.

  • 2

    Deactivate Alchemy Addons

  • 3

    Delete the plugin

  • 4

    Upload the new version.

    The process is exactly similar to what you did when installing the plugin. Follow the steps in the Installation section.

Note: Important Steps Before Updating Plugin

No matter which method you use to update Alchemy Addons (or any other plugin), here are some of the most important steps that you should take.

1. Before you update, check update notes.
2. Make a backup of your database - VERY IMPORTANT.


Alchemy Addons comes with 18 pre-packed shortcodes.

All of them are extensively customizable and extended by the use of the Shortcode generator. The development of the shortcodes is a continuous process. Further development of Alchemy Addons will be done keeping in mind backward compatibility.

  • Advanced Heading
  • Separators
  • Tables
  • Dropcaps
  • Buttons
  • Progress Bars
  • Counterdown
  • Counter Up
  • Google Map
  • Marquee
  • Feature Box
  • Icon Progress
  • SVG Info Box
  • Radial Progress
  • Icons
  • Spacer
  • Responsive Utility
  • Animate

The present documentation displays the overall shortcode settings for each individual shortcode. Important notes and tips are also being mentioned wherever felt necessary.

Advanced Heading

layout & alignment Choose between title-subtitle or vice-versa layouts. Also choose horizontal alignment.
Title The main title. Choose font properties, wrapper tag, margins and paddings.
Sub Title The main title. Choose font properties, wrapper tag, margins and paddings.
Separator Choose the separator width, border, top and bottom margins.
Background Image The background image properties.


Type Choose from 70+ animations
Infinite Should the animation be repeated infinitely.
Duration How long animation takes to complete.
Delay Delay before the animation begins.
Iteration How many times the animation will be repeated.
Offset When the animation will be trigerred. Provide a % value.


General Choose from 21 hover effects, button link, text and block sized button.
Styles Custom font, button height, horizontal padding, margin, colors, backgrounds, borders and border radius.
Icon Icon, icon position and margin.


For center or right alignment, just use a Alchemy Helper Wrapper shortcode with Text-Align: Center or Right property respectively.

For a two button layout do the same.


Timer Choose date and show years, months, weeks, days, hours, minutes and seconds.
Styles Background size, border, padding and custom fonts.
Separator Enable / disable separator, separator width, border and margin.

Counter Up

Layout Choose from 10 different layouts and horizontal left, center and right alignments.
Counter Format, duration, slide or count animation, initial and final values and custom font for the counter.
Title Custom title and font properties and margins.
Sub title Subtitle with custom font properties and proper wrapper tags option.
Separator Horizontal separator with position, width and style properties.


Text Dropcap letter and rest content.
Styles Custom font, shadow, border-radius, borders, backgrounds, paddings and margins.

Feature Box

Layout Choose between 6 layouts and 3 horizontal alignment options.
Media Choose among icon or image to be used as the media.
Title The main title with custom font and margins.
Subtitle Subtitle with custom font properties and vertical margins.
Content Content text with custom font properties.
Separator Separator position with width, border and style properties.

Google Maps

Address Choose 1-3 different addresses in simple words.
Markers For markers use any image or leave blank to use default marker. You can use one marker for all the addresses or separate markers for separate addresses.
Style Choose from unstyled, overlay and custom stylers.
Height Required. Please provide a map height.
Map properties Set Zoom Level from 0 - minimum zoom to 19 - maximum zoom
Enable Scroll This will enable/disable zooming with the mouse scrollwheel.
Hue Hue (an RGB hex string of format #RRGGBB) indicates the basic color.
Lightness lightness (a floating point value between -100 and 100) indicates the percentage change in brightness of the element. Negative values increase darkness (where -100 specifies black) while positive values increase brightness (where +100 specifies white).
Saturation saturation (a floating point value between -100 and 100) indicates the percentage change in intensity of the basic color to apply to the element.
Map Style For custom style, provide a json based string for the map style.

Map Style

For 1000s of option for custom map styles, you can visit Snazzy Maps and copy any of the design styles.

Google Maps API Key

For use convenience, we have added Google Maps Geolocation feature which requires a Google Maps API key.

Icon Progress

General Choose progress value, label suffix, icon and icon properties.
Label Label text, position, custom font and margins.


Effects 11 hover effects.
Icon Choose icon, size, colors and backgrounds, border-radius, borders and margins.


Text Enter the marquee text and custom font properties.
Position Absolute positioned element will take the element out and float it on the page.
Margin Move the element vertically.
Duration How fast the marquee text moves.
Gap The horizontal spacing between the moving tickers (group of text). This option works if duplicate option is checked.
Duplicate Enable if you want to duplicate the ticker.

Progress Bars

Value Provide the value in percentage, label suffix, color, font size, position and background.
Label The label text, custom font, position, and colors.
Bar The progress bar properties like height, background color, foreground color, animation duration, easing and striped design.

Circle Progress

Layout Provide the layout for progress content. Choose from 7 options.
Progress Enter canvas size, value in decimal, fill and empty colors, gradients, thickness, easing, animation duration, reverse animation and cap endings.
Value The aniamted progress value type, custom font, suffix and prefix and display style.
Media The media type between icon and image and respecive properties.
Title Title with custom font properties.
Sub title Sub title with custom font properties.
Separator Separator position, width, style and margins.

Responsive Utility

Hidden Mobile To show or hide in mobile screens.
Hidden Tablet To show or hide in tablet screens.
Hidden Laptop To show or hide in laptop screens.
Hidden Desktop To show or hide in very large desktop screens.


Type Choose between ruler or icon type separator.
Alignment Choose from left, right or center alignment options.
Ruler For ruler style, provide style and width of the ruler.
Icon For icon style, provide icon, ion size and color, background color, separator styles etc.


Device Width and width Unit Provide the width unit in px or em or leave empty for default.
Width The different widths for tablets, laptops and desktops. Leave blank for default.
Height The height of the spacer based on different device widths.
Margin THe top and bottom margins based on device width.

Mobile First

If you set the height or margin for mobile screen, all the upper screen sizes will inherit the property. Similarly if the laptop size properties are changed the desktop size will inherit them. To override that change the properties for the desktop screen explicitly.

SVG Info Box

Layout Choose from 6 different layouts and horizontal left, right or center alignments.
Media Choose the SVG file. More than 700+ icons are available by default.
Title & Subtitle Main title and subtitle with custom font properties and margins.
Content Basic content with custom font properties.
Separator Separator position, width, styles and margin.


Content Markup Provide the table markup. The basic layout is provided in the description.
Style Table head, background and color, data color, alternate row background, hover background and text colors, and border color.