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:
- Beaver Builder Plugin
- 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
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; } |
The rest of the content is available for Pro members. Click on the PAY NOW button to enable access to this content.
$4.99Pay Now
* Payment is non-refundable.
Paid members will be able to login below to see the restricted content.
katharina.rieder (verified owner) –
Exactly what I was looking for. Works perfect within every browser.
Also super fast response and support when help is needed!