Author 詩語

To add a new multi-element to Avada Builder you have to register your shortcodes as usual. Add them to Avada Builder as new elements via available helper function below.
fusion_builder_map()
In the example below, you can see a multi-element being registered. fusion_checklist shortcode is registered as a parent by providing multi and element_child attributes to
fusion_builder_map() function.
Copy to Clipboardfunction fusion_element_parent() {
fusion_builder_map( array(
'name' => esc_attr__( 'Checklist', 'fusion-builder' ),
'shortcode' => 'fusion_checklist',
'multi' => 'multi_element_parent',
'element_child' => 'fusion_li_item',
'params' => array(
array(
'type' => 'tinymce',
'heading' => esc_attr__( 'Content', 'fusion-builder' ),
'description' => esc_attr__( 'Enter some content for this contentbox.', 'fusion-builder' ),
'param_name' => 'element_content',
'value' => 'Default value',
),
),
) );
}
add_action( 'fusion_builder_before_init', 'fusion_element_parent' );

function fusion_element_child() {
fusion_builder_map( array(
'name' => esc_attr__( 'List Item', 'fusion-builder' ),
'description' => esc_attr__( 'Enter some content for this textblock', 'fusion-builder' ),
'shortcode' => 'fusion_li_item',
'hide_from_builder' => true,
'params' => array(
array(
'type' => 'tinymce',
'heading' => esc_attr__( 'List Item Content', 'fusion-builder' ),
'description' => esc_attr__( 'Add list item content.', 'fusion-builder' ),
'param_name' => 'element_content',
'value' => 'Default value',
'placeholder' => true,
),
),
) );
}
add_action( 'fusion_builder_before_init', 'fusion_element_child' );​x 1function fusion_element_parent() {2    fusion_builder_map( array(3        'name'          => esc_attr__( 'Checklist', 'fusion-builder' ),4        'shortcode'     => 'fusion_checklist',5        'multi'         => 'multi_element_parent',6        'element_child' => 'fusion_li_item',7        'params'        => array(8            array(9                'type'        => 'tinymce',10                'heading'     => esc_attr__( 'Content', 'fusion-builder' ),11                'description' => esc_attr__( 'Enter some content for this contentbox.', 'fusion-builder' ),12                'param_name'  => 'element_content',13                'value'       => 'Default value',14           ),15       ),16   ) );17}18add_action( 'fusion_builder_before_init', 'fusion_element_parent' );19​20​21function fusion_element_child() {22    fusion_builder_map( array(23        'name'              => esc_attr__( 'List Item', 'fusion-builder' ),24        'description'       => esc_attr__( 'Enter some content for this textblock', 'fusion-builder' ),25        'shortcode'         => 'fusion_li_item',26        'hide_from_builder' => true,27        'params'            => array(28            array(29                'type'        => 'tinymce',30                'heading'     => esc_attr__( 'List Item Content', 'fusion-builder' ),31                'description' => esc_attr__( 'Add list item content.', 'fusion-builder' ),32                'param_name'  => 'element_content',33                'value'       => 'Default value',34                'placeholder' => true,35           ),36       ),37   ) );38}39add_action( 'fusion_builder_before_init', 'fusion_element_child' );

When registering a new Avada Builder Element via fusion_builder_map() helper function provide admin_enqueue_js attribute with your script location.
Copy to Clipboardfunction fusion_element_text() {

fusion_builder_map(
array(
'name' => esc_attr__( 'Text Block', 'fusion-builder' ),
'shortcode' => 'fusion_text',
'admin_enqueue_js' =>'/js/my-script.js',
'params' => array(
array(
'type' => 'tinymce',
'heading' => esc_attr__( 'Content', 'fusion-builder' ),
'description' => esc_attr__( 'Enter some content for this textblock.', 'fusion-builder' ),
'param_name' => 'element_content',
'value' => esc_attr__( 'Click edit button to change this text.', 'fusion-builder' ),
),
),
)
);
}
add_action( 'fusion_builder_before_init', 'fusion_element_text' );​x 1function fusion_element_text() {2​3fusion_builder_map( 4    array(5        'name'            => esc_attr__( 'Text Block', 'fusion-builder' ),6        'shortcode'       => 'fusion_text',7        'admin_enqueue_js' =>'/js/my-script.js',8        'params'          => array(9            array(10                'type'        => 'tinymce',11                'heading'     => esc_attr__( 'Content', 'fusion-builder' ),12                'description' => esc_attr__( 'Enter some content for this textblock.', 'fusion-builder' ),13                'param_name'  => 'element_content',14                'value'       => esc_attr__( 'Click edit button to change this text.', 'fusion-builder' ),15           ),16       ),17   ) 18);19}20add_action( 'fusion_builder_before_init', 'fusion_element_text' );

To add your element settings to Element Options Panel, you need to use the filter to create your options class that extends to the Fusion_Element class, which will be available in the filter. So, you can add the filter like this:
Copy to Clipboardfunction fusion_init_sample_options() {
require_once 'options/sample-options.php';
}

add_action( 'fusion_builder_shortcodes_init', 'fusion_init_sample_options' );​x 1function fusion_init_sample_options() {2 require_once 'options/sample-options.php';3}4​5add_action( 'fusion_builder_shortcodes_init', 'fusion_init_sample_options' );This will require you to add another file in the options folder named sample-options.php. In which, you need to check for the class Fusion_Element and create your new class for options and inherit it to the Fusion_Element class.
Once you are done with the class creation, just add a new function add_options() to the class, which will be used to add your options to the Options Panel by the Fusion_Element class automatically, like below –
The example is a complete class that will add the Sample Element settings to the options panel.
Copy to Clipboardif ( class_exists( 'Fusion_Element' ) ) {
class SampleElementOptions extends Fusion_Element {
public function __construct() {
parent::__construct();
}

public function add_options() {
return array(
'sample_shortcode_section' => array(
'label' => esc_html__( 'Sample Element', 'fusion-builder' ),
'description' => '',
'id' => 'sample_shortcode_section',
'type' => 'sub-section',
'fields' => array(
'sample_dates_box_color' => array(
'label' => esc_html__( 'Sample Color Picker', 'fusion-builder' ),
'description' => esc_html__( 'This is just an example of color picker setting field.', 'fusion-builder' ),
'id' => 'sample_dates_box_color',
'default' => '#eef0f2',
'type' => 'color-alpha',
),

'dropdown_field' => array(
'label' => esc_html__( 'Sample Dropdown Field', 'fusion-builder' ),
'description' => esc_html__( 'This is just an example of drpdown setting field.', 'fusion-builder' ),
'id' => 'dropdown_field',
'default' => '1',
'type' => 'select',
'choices' => array(
'1' => esc_html__( 'Option 1', 'fusion-builder' ),
'2' => esc_html__( 'Option 2 with "Quotes"', 'fusion-builder' ),
'3' => esc_html__( 'Option 3', 'fusion-builder' ),
),
),
),
),
);
}
}

new SampleElementOptions;

}xxxxxxxxxx43 1if ( class_exists( 'Fusion_Element' ) ) {2  class SampleElementOptions extends Fusion_Element {3    public function __construct() {4      parent::__construct();5   }6​7    public function add_options() {8      return array(9        'sample_shortcode_section' => array(10          'label'       => esc_html__( 'Sample Element', 'fusion-builder' ),11          'description' => '',12          'id'          => 'sample_shortcode_section',13          'type'        => 'sub-section',14          'fields'      => array(15            'sample_dates_box_color' => array(16              'label'       => esc_html__( 'Sample Color Picker', 'fusion-builder' ),17              'description' => esc_html__( 'This is just an example of color picker setting field.', 'fusion-builder' ),18              'id'          => 'sample_dates_box_color',19              'default'     => '#eef0f2',20              'type'        => 'color-alpha',21           ),22​23            'dropdown_field' => array(24              'label'       => esc_html__( 'Sample Dropdown Field', 'fusion-builder' ),25              'description' => esc_html__( 'This is just an example of drpdown setting field.', 'fusion-builder' ),26              'id'          => 'dropdown_field',27              'default'     => '1',28              'type'        => 'select',29              'choices'     => array(30                '1' => esc_html__( 'Option 1', 'fusion-builder' ),31                '2' => esc_html__( 'Option 2 with "Quotes"', 'fusion-builder' ),32                '3' => esc_html__( 'Option 3', 'fusion-builder' ),33             ),34           ),35         ),36       ),37     );38   }39 }40​41  new SampleElementOptions;42​43}You can use the Sample Addon we created for better understanding of the implementation of options.
Option CorrelationsAfter adding your setting to the options panel, you can also take advantage of the option correlations. This means when you edit the element in the builder, the current default value is displayed along with a link to that setting in the options panel. To do this, you can use a filter from your element class.
For example, the construct function would become:
Copy to Clipboard public function __construct() {
parent::__construct();
add_filter( 'fusion_builder_map_descriptions', array( $this, 'add_option_description' ) );
}xxxxxxxxxx4 1    public function __construct() {2      parent::__construct();3      add_filter( 'fusion_builder_map_descriptions', array( $this, 'add_option_description' ) );4}and then a new function added below that:
Copy to Clipboardpublic function add_option_description( $shortcode_option_map ) {

$shortcode_option_map['portfolio_layout_padding']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_layout_padding', 'subset' => array( 'top', 'right', 'bottom', 'left' ) );
$shortcode_option_map['picture_size']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_featured_image_size', 'type' => 'select' );
$shortcode_option_map['boxed_text']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_text_layout', 'type' => 'select' );
$shortcode_option_map['portfolio_text_alignment']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_text_alignment', 'type' => 'select' );
$shortcode_option_map['column_spacing']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_column_spacing', 'type' => 'range' );
$shortcode_option_map['number_posts']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_items', 'type' => 'range' );
$shortcode_option_map['pagination_type']['fusion_portfolio'] = array( 'theme-option' => 'grid_pagination_type', 'type' => 'select' );
$shortcode_option_map['content_length']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_content_length', 'type' => 'select' );
$shortcode_option_map['excerpt_length']['fusion_portfolio'] = array( 'theme-option' => 'excerpt_length_portfolio', 'type' => 'range' );
$shortcode_option_map['portfolio_title_display']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_title_display', 'type' => 'select' );
$shortcode_option_map['strip_html']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_strip_html_excerpt', 'type' => 'yesno' );

return $shortcode_option_map;
}xxxxxxxxxx16 1public function add_option_description( $shortcode_option_map ) {2​3    $shortcode_option_map['portfolio_layout_padding']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_layout_padding', 'subset' => array( 'top', 'right', 'bottom', 'left' ) );4    $shortcode_option_map['picture_size']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_featured_image_size', 'type' => 'select' );5    $shortcode_option_map['boxed_text']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_text_layout', 'type' => 'select' );6    $shortcode_option_map['portfolio_text_alignment']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_text_alignment', 'type' => 'select' );7    $shortcode_option_map['column_spacing']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_column_spacing', 'type' => 'range' );8    $shortcode_option_map['number_posts']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_items', 'type' => 'range' );9    $shortcode_option_map['pagination_type']['fusion_portfolio'] = array( 'theme-option' => 'grid_pagination_type', 'type' => 'select' );10    $shortcode_option_map['content_length']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_content_length', 'type' => 'select' );11    $shortcode_option_map['excerpt_length']['fusion_portfolio'] = array( 'theme-option' => 'excerpt_length_portfolio', 'type' => 'range' );12    $shortcode_option_map['portfolio_title_display']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_title_display', 'type' => 'select' );13    $shortcode_option_map['strip_html']['fusion_portfolio'] = array( 'theme-option' => 'portfolio_strip_html_excerpt', 'type' => 'yesno' );14​15    return $shortcode_option_map;16}The format for each is like so:
Copy to Clipboard$shortcode_option_map[ param_name ][ shortcode ] = array( 'theme-option' => option_id );xxxxxxxxxx1 1$shortcode_option_map[ param_name ][ shortcode ] = array( 'theme-option' => option_id );
param_name = param_name of option in element.
shortcode = shortcode name as defined in your element class.option_id = ID of the setting being added to the options panel.There are also optional attributes which can be set in addition to theme-option:
subset – If the setting being added to the options panel contains multiple values, for example dimension values.type = The type of setting being added. This changes the format of the description text.reset = Adds the ability to reset the value in element. This is used for color and range types.For a better understanding of the available options, please check the get_default_description function within class-fusion-settings.php

To add a new option to Avada Dynamic Content Options, you can use fusion_set_dynamic_params filter in your child theme or plugin. This filter is useful for removing or adding options. Here is some sample code.
Copy to Clipboardfunction custom_dynamic_param( $params ) {
$params['param_id'] = [
'label' => esc_html__( 'Param Label', 'fusion-builder' ),
'id' => 'param_id',
'group' => esc_attr__( 'Param Group', 'fusion-builder' ),
'default' => 'Default Value'
'options' => [ 'textfield', 'textarea', 'tinymce', 'raw_textarea' ],
'callback' => [
'function' => 'get_custom_dynamic_param',
'ajax' => true,
],
];
return $params;
}

add_filter( 'fusion_set_dynamic_params', 'custom_dynamic_param' );

// Callback method to get dynamic option value.
function get_custom_dynamic_param( $args ) {
return 'Custom Param Value';
}​x 1function custom_dynamic_param( $params ) {2  $params['param_id'] = [3    'label'    => esc_html__( 'Param Label', 'fusion-builder' ),4    'id'       => 'param_id',5    'group'    => esc_attr__( 'Param Group', 'fusion-builder' ),6    'default'  => 'Default Value'7    'options'  => [ 'textfield', 'textarea', 'tinymce', 'raw_textarea' ],8    'callback' => [9      'function' => 'get_custom_dynamic_param',10      'ajax'     => true,11   ],12 ];13  return $params;14}15​16add_filter( 'fusion_set_dynamic_params', 'custom_dynamic_param' );17​18// Callback method to get dynamic option value.19function get_custom_dynamic_param( $args ) {20  return 'Custom Param Value';21}Each option can have the following arguments.
label = Label which is displayed in options dropdown.id = Unique option ID.group = This is used to group similar content types.default = The default value of option.options = An array of Avada Builder input option names where this dynamic content can be used.callback = An array containing callback method name and bool ajax flagfields = Optional array of additional data fields.For a better understanding of the available options, please check the set_params function within fusion-builder/inc/class-fusion-dynamic-data.php