WebGL 3D Background For Visual Composer

Created: December 2016 / Current Version: 1.0.0 / by ThemeVan


Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this help file, You can asking on the support forum after you sign up with your purchased code. Thank you so much!

Support Forums

Any questions that are beyond the scope of this help file, asking on support forum

Visit Support Forum

Follow Us

Follow us on Codecanyon and don't miss our new upcoming premium plugins.

Follow on Codecanyon

Rate Plugins & Support

If you like our theme or support, please rate on ThemeForest in your download page.

Rate on Codecanyon

Getting Started

This is a Visual Composer Add-on, we append a new WebGL 3D Background option into Visual Composer row setting panel, includes many cool WebGL 3D background effects that can make your website looks amazing.

So before install this Add-on plugin, you have to install and activate Visual Composer first.

= Minimum Requirements =

* WordPress 4.5 or greater
* Visual Composer 5.0+

Plugin Installation

Unzip the downloaded package. Find the zipped plugin file called WebGL-3D-Background-installation.zip.

Go to "Plugins > Add New" in your dashboard side menu. then upload the zipped file and activate it.

You can also unzip the installation zip file and upload the plugin folder "WebGL-3D-Background" to "/wp-content/plugins" directory via FTP client, then go to WP dashboard > Plugins page, activate the plugin.

The WordPress codex contains instructions on how to do this here http://codex.wordpress.org/Managing_Plugins#Manual_Plugin_Installation.


After you activated Visual Composer and WebGL 3D Background Add-on, edit a page or post with Visual Composer editor first. Here are two ways to add the 3D effect to the row.

1. Add a row, and you will see there's a new tab called "WebGL 3D Background" is included in the row setting window like below:

Just click this tab to set the 3D background for the current row.

Just simply select the preset 3D effect through the select menu, and you can see the preview image to the right side. You can also preview every 3D effect on our demo site.

Click the save button, that's it! You will see the amazing 3D effect as the row background in your page.

2. If the first method is not compatible with your theme, that's because maybe your theme includes an overrided vc_row.php template. Just add 'WebGL Row' to instead of VC default row as below.

'WebGL Row' is also a nestable element that you can add the other elements into WebGL Row.


This plugin is ready for localization. We have made every string translate able with the text domain "wgb", use Poedit  editor to translate it, or install Loco Translate plugin to translate the text via WP dashboard(Recommended).


Automatic updates should work like a charm if you install Envato WordPress Toolkit plugin. The file and detail instructions here https://github.com/envato/envato-wordpress-toolkit

As always though, ensure you backup your site just in case.

For WebGL Developer

How to add my own effect?

We include an example addon for user customize their own WebGL effect, you can find it in webgl-vc-addon folder, just copy this folder to your theme root directory, then the addon effect will be appened into the effect select list. It means that all your custom effect addons should be placed in your-theme/webgl-vc-addon folder.

For how to create addon and write the JS class file, just check our example addon files, we include comments in the files.


thanks all creator of these great files

Thanks for your reading, enjoy in this plugin!