标签： configure

Add preview template for my Avada Builder element

To add a custom preview template to your Avada Builder element, you first have to register your shortcode as usual. You can then add your element shortcodes to the Avada Builder as new elements via this helper function: fusion_builder_map()
In the example below you can see a custom preview template being registered. Template is registered by providing preview and preview_id attributes to the
fusion_builder_map() function.
Copy to Clipboardfunction my_fusion_element() {
fusion_builder_map( array(
'name' => esc_attr__( 'Pricing Table', 'fusion-builder' ),
'shortcode' => 'fusion_pricing_table',
'preview' => FUSION_BUILDER_PLUGIN_DIR . 'inc/templates/previews/fusion-pricing-table-preview.php',
'preview_id' => 'pricing-table-preview-template',
'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', 'my_fusion_element' );

​x 1function my_fusion_element() {2    fusion_builder_map( array(3        'name'          => esc_attr__( 'Pricing Table', 'fusion-builder' ),4        'shortcode'     => 'fusion_pricing_table',5        'preview'       => FUSION_BUILDER_PLUGIN_DIR . 'inc/templates/previews/fusion-pricing-table-preview.php',6        'preview_id'    => 'pricing-table-preview-template',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', 'my_fusion_element' );19​20

Disable Avada Builder Elements

To disable any Avada Builder Element you can use fusion_builder_all_elements filter.
This filter is applied to all registered elements before they are added to Avada Builder Library. Useful for removing or adding elements to the library.
Copy to Clipboardfunction filter_function_name( $elements ) {
// Process $elements here

return $elements;
}
add_filter( 'fusion_builder_all_elements', 'filter_function_name' );​x 1function filter_function_name( $elements ) {2    // Process $elements here3​4    return $elements;5}6add_filter( 'fusion_builder_all_elements', 'filter_function_name' );

Enqueue a CSS file on Avada Builder back end

To enqueue a CSS file on Avada Builder back end use fusion_builder_admin_scripts_hook action hook.
This action hook is fired on Avada Builder initialization and is used to enqueue javascripts and styles on the backend.
Copy to Clipboardfunction my_function() {
wp_enqueue_style( 'my-style','css/my-style.js', array( 'jquery' ), '1.0', true );
}
add_action( 'fusion_builder_admin_scripts_hook', 'my_function' ); 1function my_function() {2    wp_enqueue_style( 'my-style','css/my-style.js', array( 'jquery' ), '1.0', true );3}4add_action( 'fusion_builder_admin_scripts_hook', 'my_function' );

Enqueue a CSS file for my Avada Builder Element on back end

When registering a new Avada Builder element via fusion_builder_map() helper function provide admin_enqueue_css attribute with your CSS file location.
Copy to Clipboardfunction fusion_element_text() {

fusion_builder_map(
array(
'name' => esc_attr__( 'Text Block', 'fusion-builder' ),
'shortcode' => 'fusion_text',
'admin_enqueue_css' =>'/css/my-style.css',
'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_admin_scripts_hook', '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_css' =>'/css/my-style.css',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_admin_scripts_hook', 'fusion_element_text' );

Enqueue a script on Avada Builder back end

To enqueue a script file on Avada Builder back end use fusion_builder_admin_scripts_hook action hook.
This action hook is fired on Avada Builder initialization and is used to enqueue java scripts and styles on the backend.
Copy to Clipboardfunction my_function() {
wp_enqueue_script( 'my-script','js/my-script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'fusion_builder_admin_scripts_hook', 'my_function' ); 1function my_function() {2    wp_enqueue_script( 'my-script','js/my-script.js', array( 'jquery' ), '1.0', true );3}4add_action( 'fusion_builder_admin_scripts_hook', 'my_function' );

Enqueue a script for my Avada Builder Element on back end

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' );

Add a new multi element ( nested shortcode ) to Avada Builder

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' );

Add new settings to Options Panel

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

Add a new option to Avada Dynamic Content Options

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

Add a new demo to Avada Builder Library

To add a new demo to Avada Builder library add fusion_builder_get_demo_pages filter to your theme or plugin.
Applied to Avada Builder demos library. Useful for removing or adding demos to the library.
Copy to Clipboardfunction fusion_builder_add_my_demo( $demos ) {

$demos['my_demo'] = array (
'category' => 'My Demo',
'pages' => array (
array (
'name' => 'Homepage',
'page_template' => 'default',
'content' => 'Page Content Goes Here',
),
array (
'name' => 'About',
'page_template' => 'default',
'content' => 'Page Content Goes Here',
),
),
);

return $demos;

}

add_filter( 'fusion_builder_get_demo_pages', 'fusion_builder_add_my_demo' );​x 1function fusion_builder_add_my_demo( $demos ) {2​3$demos['my_demo'] = array (4    'category' => 'My Demo',5    'pages'   => array (6        array (7            'name' => 'Homepage',8            'page_template' => 'default',9            'content' => 'Page Content Goes Here',10       ),11        array (12            'name' => 'About',13            'page_template' => 'default',14            'content' => 'Page Content Goes Here',15       ),16   ),17);18​19return $demos;20​21}22​23add_filter( 'fusion_builder_get_demo_pages', 'fusion_builder_add_my_demo' );