Add Property (eg. data-attribute, predefined class etc) to Visual Composer

Sometimes we want to add additional or predefined class on visual composer elements (eg. row, inner row, column) to implement jquery effect. To achieve this on functions.php add a new vc_add_param

vc_add_param("vc_row", array(
	"type" => "dropdown",
	"group" => "Animation",
	"class" => "",
	"heading" => "Style",
	"param_name" => "type",
	"value" => array(
		"None" => "", 
		"Fade Up" => "fade-up", 
		"Fade Down" => "fade-down",	
		"Fade Left" => "fade-left",	
		"Fade Right" => "fade-right",
	)
));

Then copy vc_row in js_composer/include/templates/shortcodes to your theme /vc_templates/vc_row.php

Add the new class

/**ISN Custom CSS**/
if ( ! empty( $type ) ) {
$css_classes[] = "$type";
} 

 

For custom data-attributes, below $wrapper_attributes array (line 72), add this code

/**ISN Custom Attributes**/
if ( ! empty( $type ) ) {
$wrapper_attributes[] = 'data-rel="' . esc_attr( $type ) . '"';
}

Combining with ScrollReveal plugin, we can add animation to row/inner row/column

ScrollReveal().reveal('.fade-in', {
delay: 400,
duration: 750,
distance: '0',
reset: true
});