标签： available-input-fields

Input Field – tinymce

You can use the tinymce input field to allow users to add content using the HTML editor. You can use only 1 tinymce field in each shortcode. See the below example about how you can use the tinymce input field.
ExampleCopy to Clipboardarray(

'type' => 'tinymce',

'heading' => esc_attr__( 'Content editor', 'fusion-builder' ),

'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),

'param_name' => 'element_content',

'value' => esc_attr__( 'Your Content Goes Here', 'fusion-builder' ),

'placeholder' => true,

)​x 1array(2​3  'type'        => 'tinymce',4​5  'heading'     => esc_attr__( 'Content editor', 'fusion-builder' ),6​7  'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),8​9  'param_name'  => 'element_content',10​11  'value'       => esc_attr__( 'Your Content Goes Here', 'fusion-builder' ),12​13  'placeholder' => true,14​15)Parameters type
( string ) input type. heading
( string ) Setting title. description
( string ) Short description about the setting field. param_name
 ( string ) In order to use the tinymce editor in your add-on setting, you must set the param_name to 「element_content」. value
( string ) Default value to be set as default content. placeholder
( boolean ) If you want to set the default content as placeholder text, set to TRUE else FALSE.

Input Field – colorpicker

You can use the colorpicker input field to allow users to select the color with a hex value. See the below example about how you can use colorpicker input field.
ExampleCopy to Clipboardarray(

'type' => 'colorpicker',

'heading' => esc_attr__( 'Select Color.', 'fusion-builder' ),

'description' => esc_attr__( 'This field allows you to select the color with a hex value.', 'fusion-builder' ),

'param_name' => 'text_color',

'value' => '',

)​x 1array(2​3  'type'        => 'colorpicker',4​5  'heading'     => esc_attr__( 'Select Color.', 'fusion-builder' ),6​7  'description' => esc_attr__( 'This field allows you to select the color with a hex value.', 'fusion-builder' ),8​9  'param_name'  => 'text_color',10​11  'value'       => '',12​13)Parameters type
( string ) input type. heading
( string ) Setting title. description
( string ) Short description about the setting field. param_name
 ( string ) Attribute name to be used in the shortcode. value
( string ) Default color.

Input Field – upload

You can use the upload input field to allow users to select single images. See the below example about how you can use the upload input field.
ExampleCopy to Clipboardarray(

'type' => 'upload',

'heading' => esc_attr__( 'Background Image', 'fusion-builder' ),

'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),

'param_name' => 'background_image',

'value' => '',

)​x 1array(2​3  'type'        => 'upload',4​5  'heading'     => esc_attr__( 'Background Image', 'fusion-builder' ),6​7  'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),8​9  'param_name'  => 'background_image',10​11  'value'       => '',12​13)Parameters type
( string ) input type. heading
( string ) Setting title. description
( string ) Short description about the setting field. param_name
 ( string ) Attribute name to be used in the shortcode. value
( string ) Default value as image url.

Input Field – colorpickeralpha

You can use the colorpickeralpha input field to allow users to select the color with rgba value. See the below example about how you can use colorpickeralpha input field.
ExampleCopy to Clipboardarray(

'type' => 'colorpickeralpha',

'heading' => esc_attr__( 'Select RGBA Color.', 'fusion-builder' ),

'description' => esc_attr__( 'This field allows you to select the color with rgba value.', 'fusion-builder' ),

'param_name' => 'rgba_color',

'value' => '',

)​x 1array(2​3  'type'        => 'colorpickeralpha',4​5  'heading'     => esc_attr__( 'Select RGBA Color.', 'fusion-builder' ),6​7  'description' => esc_attr__( 'This field allows you to select the color with rgba value.', 'fusion-builder' ),8​9  'param_name'  => 'rgba_color',10​11  'value'       => '',12​13)Parameters type
( string ) input type. heading
( string ) Setting title. description
( string ) Short description about the setting field. param_name
 ( string ) Attribute name to be used in the shortcode. value
( string ) Default color with rgba value.

Input Field – uploadfile

You can use the uploadfile input field to allow users to upload any WordPress acceptable file; (e.g. PDF, MP4 videos etc.) See the below example about how you can use the uploadfile input field –
ExampleCopy to Clipboardarray(

'type' => 'uploadfile',

'heading' => esc_attr__( 'Upload PDF', 'fusion-builder' ),

'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),

'param_name' => 'pdf_file',

'value' => '',

)​x 1array(2​3  'type'        => 'uploadfile',4​5  'heading'     => esc_attr__( 'Upload PDF', 'fusion-builder' ),6​7  'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),8​9  'param_name'  => 'pdf_file',10​11  'value'       => '',12​13)Parameters type
( string ) input type. heading
( string ) Setting title. description
( string ) Short description about the setting field. param_name
 ( string ) Attribute name to be used in the shortcode. value
( string ) Default value as file url.

Input Field – dimension

You can use the dimension input field to allow users to set top/right/bottom/left dimensions. Dimensions can be set from any side or from all sides. See the below example on how you can use dimension input field.
ExampleCopy to Clipboardarray(

'type' => 'dimension',

'heading' => esc_attr__( 'Set Margins', 'fusion-builder' ),

'description' => esc_attr__( 'A short description of the field.', 'fusion-builder' ),

'param_name' => 'margins',

'value' => array(
'margin_top' => '',
'margin_right' => '',
'margin_bottom' => '',
'margin_left' => '',
),

)​x 1array(2​3  'type'        => 'dimension',4​5  'heading'     => esc_attr__( 'Set Margins', 'fusion-builder' ),6​7  'description' => esc_attr__( 'A short description of the field.', 'fusion-builder' ),8​9  'param_name'  => 'margins',10​11  'value'       => array(12        'margin_top'    => '',13        'margin_right'  => '',14        'margin_bottom' => '',15        'margin_left'   => '',16   ),17​18)Parameters type
( string ) input type. heading
( string ) Setting title. description
( string ) Short description about the setting field. param_name
 ( string ) Attribute name to be used in the shortcode. value
( array ) Array of dimensions to be set.

Input Field – link_selector

You can use the link_selector input field to allow users to select the internal links from the native WP Link selector and make it easier for them to search the entire posts/pages list. See the below example for how you can use the link_selector input field.
ExampleCopy to Clipboardarray(

'type' => 'link_selector',

'heading' => esc_attr__( 'Link', 'fusion-builder' ),

'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),

'param_name' => 'url',

'value' => '',

)​x 1array(2​3  'type'        => 'link_selector',4​5  'heading'     => esc_attr__( 'Link', 'fusion-builder' ),6​7  'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),8​9  'param_name'  => 'url',10​11  'value'       => '',12​13)Params type
( string ) input type. heading
( string ) Setting title. description
( string ) Short description about the setting field. param_name
 ( string ) Attribute name to be used in the shortcode. value
( string ) Default value for the url to be used.

Input Field – iconpicker

You can use the iconpicker input field to allow users to select an icon from the icon picker. See the below example on how you can use the iconpicker input field.
ExampleCopy to Clipboardarray(

'type' => 'iconpicker',

'heading' => esc_attr__( 'Select Icon', 'fusion-builder' ),

'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),

'param_name' => 'icon',

'value' => '',

)​x 1array(2​3  'type'        => 'iconpicker',4​5  'heading'     => esc_attr__( 'Select Icon', 'fusion-builder' ),6​7  'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),8​9  'param_name'  => 'icon',10​11  'value'       => '',12​13)Parameters type
( string ) input type. heading
( string ) Setting title. description
( string ) Short description about the setting field. param_name
 ( string ) Attribute name to be used in the shortcode. value
( string ) Default value as icon class name.

Input Field – radio_image_set

You can use the radio_image_set input field to allow users to select the image as an option. See the below example for how you can use the radio_image_set input field.
ExampleCopy to Clipboardarray(

'type' => 'radio_image_set',

'heading' => esc_attr__( 'Radio Image Test', 'fusion-builder' ),

'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),

'param_name' => 'images',

'value' => array(

'pattern1' => get_stylesheet_directory_uri(). '/assets/images/patterns/pattern1.png',

'pattern2' => get_stylesheet_directory_uri(). '/assets/images/patterns/pattern2.png',

),

'width' => '48px',

'height' => '48px',

)​x 1array(2​3  'type'        => 'radio_image_set',4​5  'heading'     => esc_attr__( 'Radio Image Test', 'fusion-builder' ),6​7  'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),8​9  'param_name'  => 'images',10​11  'value'       => array(12​13    'pattern1' => get_stylesheet_directory_uri(). '/assets/images/patterns/pattern1.png',14​15    'pattern2' => get_stylesheet_directory_uri(). '/assets/images/patterns/pattern2.png',16​17 ),18​19  'width' => '48px',20​21  'height' => '48px',22​23)Parameters type
( string ) input type. heading
( string ) Setting title. description
( string ) Short description about the setting field. param_name
 ( string ) Attribute name to be used in the shortcode. value
( array ) Array of image id and the image url. Image id from the array will be stored in the shortcode, so you can get the url from it. width
( string ) The width for the image being displayed in the setting field. This is useful if you want to display multiple fields with different image sizes. height
( string ) The height for the image being displayed in the setting field. This is useful if you want to display multiple fields with different image sizes.