Wrapping Gallery Items Around The Text

How do you wrap the gallery images around the text using the Beaver Builder Gallery module like above screenshot? In this tutorial I am sharing the complete instruction.

Minimum requirements:

1. Beaver Builder Plugin
2. Gallery Module

Adding 3 New Fields into Gallery Module

I am adding the 3 new fields (Title, Text & Position) into Beaver Gallery module settings form with fl_builder_register_settings_form filter. These new fields will only work when you will select the “collage” layout and “Media Library” for images. See the screenshot at below:

Open the functions.php file of your theme & drop this PHP codes at end of the file.

add_filter( 'fl_builder_register_settings_form', 'paulc_gallery_module_settings_form', 1015, 2 );
function paulc_gallery_module_settings_form( $form, $slug ) {
	if( $slug == 'gallery' ) {
		$form['general']['sections']['general']['fields']['layout']['toggle'] = array(
			'collage' 	=> array(
				'fields' 		=> array( 'photo_size' ),
				'sections'		=> array( 'description' )
			),
		);

		$form['general']['sections']['description'] = array (
			'title' => __( 'Description', 'paulc'),
			'fields' => array(
				'title' => array(
					'type' 		=> 'text',
					'label' 	=> __( 'Title', 'paulc' ),
					'preview' 	=> array(
						'type' 		=> 'text',
						'selector' 	=> '.fl-gallery-heading',
					),
					'connections'   => array( 'string' ),
				),
				'text' 	=> array(
					'type' 		=> 'editor',
					'label' 	=> '',
					'rows' 		=> 8,
					'wpautop' 	=> false,
					'preview' 	=> array(
						'type' 		=> 'text',
						'selector' 	=> '.fl-gallery-text',
					),
					'connections'   => array( 'string' ),
				),
				'placement' => array(
					'type' 		=> 'select',
					'label' 	=> __( 'Position', 'paulc' ),
					'default' 	=> 1,
					'options'	=> array(
						1 			=> '1',
						2 			=> '2',
						3 			=> '3',
						4 			=> '4',
						5 			=> '5',
						6 			=> '6',
					)
				)
			)
		);
	}

	return $form;
}