Visual Composer API allows you to develop your own custom elements for the website builder. With custom elements, you are in charge of your element design and functionality which is crucial for advanced projects and allows perfectly align element choice to your brand.
This section contains all the information you need to develop custom elements, it will guide you on how to get started, provide information about hooks, attributes, and offer examples.
What is Visual Composer Element?
The element is an independent component of the system which represents HTML based block with the ability to output media and dynamic content. Visual Composer offers a wide range of pre-defined content elements which can be downloaded from the Visual Composer Hub. Visual Composer API allows extending the list with your own elements – these elements will not be available in the Hub but will be instantly displayed in the ‘Add Element’ window.
What is Visual Composer Website Builder Editor?
To get started, you need to understand how the Visual Composer Website Builder Editor works. The Editor is WYSIWYG module based editor which has inner and public API to manage elements and components.
The editor works with elements as React components. These components must be built with Webpack and enqueued via API hooks (WordPress actions). Every element consists of few parts:
- Thumbnail Image – a small image (100×100 pixels) that will represent an element in the ‘Add Element’ window;
- Preview Image – a large image (520×240 pixels) visible on Thumbnail hover;
- Description – a description that appears on hover together with the Preview image;
- Category – element category;
- React-based component.
How to Start Development?
There are 4 steps to start developing elements for the Visual Composer:
- Follow the requirements (see below);
- Download and install the plugin;
- Activate the plugin with Premium/Free license;
- Use API hooks and element boilerplates to add elements to your plugin or theme.
To develop Visual Composer element there are following technical requirements:
- Webpack 4.0 or higher;
- Node 8.0;
- PHP 5.3.5.
Element boilerplate repository: https://github.com/VisualComposer/elementBoilerplate
WordPress Demo plugin with elements: https://github.com/VisualComposer/vcwb-demo-element-example-plugin
- How to integrate Visual Composer Premium version in a theme (Envato market)
- How to integrate Visual Composer Free version in a theme (TGM Plugin Activation)
- Element Structure
- Element Hook
- Element Attributes
- Meta Attributes
- Attributes Options
- Attributes onChange
- Element CSS Mixins
- Inner Elements
- Element component methods
- Render custom content
- Assets management
- Dynamic Content