Attribute option is required to implement advanced features. In Beaver Builder, there is no out of the box option to add attributes and a user has to use manual code play for such implementation. Fortunately, you can use following code to add “attribute” feature in the Beaver Builder row, columns & modules setting panel. Once this is added, you can add attribute value to any row, column(s) or module(s) wrapper. This can be very useful to integrating script like wow JS script.

In this article I am sharing the complete steps for this functionality. So user can easily add the attribute(s) from Page Builder row/columns/modules settings form.

Adding Attributes Field into Settings Form

Adding the new multiple field “Attribute” under Advanced tab of row/columns/modules settings form. There have a filter fl_builder_register_settings_form, you can add any extra field into settings form as per your requirement. Filter is accepting two params: Form array & row/column/module’s slug. I am adding the “Attribute” field this way (adding the code into functions.php file. You can place it into plugin’s file also)

Adding the attributes field

add_filter( 'fl_builder_register_settings_form', 'probb_alter_settings_form', 1000, 2 );
/**
 * Adding attributes fields
 */
function probb_alter_settings_form( $form, $slug ) {
	if( $slug == "module_advanced" ) {
		$form['sections']['css_selectors']['fields']['atts'] = array (
			'label'			=> __( 'Attribute', 'fl-automator' ),
			'help'			=> __( 'You can add data-*, schema like itemscope,itemname etc into wrapper', 'fl-automator' ),
			'type'			=> 'form',
			'form' 			=> 'probb_attributes_form',
			'preview_text'  => 'attr_label',
			'multiple' 		=> true,
			'remove' 		=> true,
		);
	}

	if( $slug == 'row' || $slug == 'col' ) {
		$form['tabs']['advanced']['sections']['css_selectors']['fields']['atts'] = array (
			'label'			=> __( 'Attribute', 'fl-automator' ),
			'help'			=> __( 'You can add data-*, schema like itemscope,itemname etc into wrapper', 'fl-automator' ),
			'type'			=> 'form',
			'form' 			=> 'probb_attributes_form',
			'preview_text'  => 'attr_label',
			'multiple' 		=> true
		);
	}

	return $form;
}

FLBuilder::register_settings_form('probb_attributes_form', [
	'title' => __('Add Attribute', 'fl-automator'),
	'tabs'  => [
		'general' 	=> [
			'title' 	=> __('General', 'fl-automator'),
			'sections' 	=> [
				'general' 	=> [
					'title'		=> '',
					'fields' 	=> [
						'attr_label' 	=> [
							'type' 			=> 'text',
							'label' 		=> __('Key', 'fl-automator'),
							'placeholder' 	=> 'data-animation',
							'preview' 		=> [
								'type' 			=> 'none'
							]
						],

						'attr_value' 	=> [
							'type' 			=> 'text',
							'label' 		=> __('Value', 'fl-automator'),
							'placeholder' 	=> '1',
							'preview' 		=> [
								'type' 			=> 'none'
							]
						]
					]
				]
			]
		]
	]
]);

Adding the Attribute into HTML Wrapper

Now adding the submitted attribute data into row/columns/modules’ wrapper. There have another three filters for it. So you can add the custom content into the existing HTML wrapper.

1. Filter fl_builder_row_attributes is for row
2. Filter fl_builder_column_attributes is for column
3. Filter fl_builder_module_attributes is for modules

Open the functions.php file or any other php file like custom plugin’s file and add this PHP snippet

Filter the attributes array

add_filter( 'fl_builder_row_attributes', 'probb_add_atts_wrapper', 10, 2 );
add_filter( 'fl_builder_column_attributes', 'probb_add_atts_wrapper', 10, 2 );
add_filter( 'fl_builder_module_attributes', 'probb_add_atts_wrapper', 10, 2 );
function probb_add_atts_wrapper( $attrs, $rcm )
{
	if( isset( $rcm->settings->atts ) )
	{
		foreach ($rcm->settings->atts as $key => $attr) {
			if( is_object( $attr ) )
			{
				$attrs[ $attr->attr_label ] = $attr->attr_value;
			}
		}
	}

	return $attrs;
}

If you add any attributes into settings form, those will automatically add into HTML wrapper. Checkout the live video for complete process.