Avada 文档

Input Field – select

You can use the select input field to allow users to select option from a dropdown of the pre-defined values. See the below example about how you can use select input field –
ExampleCopy to Clipboardarray(
'type' => 'select',
'heading' => esc_attr__( 'Select styles', 'fusion-builder' ),
'description' => esc_attr__( 'This field allows you to display dropdown of the pre-defined values.', 'fusion-builder' ),
'param_name' => 'styles',
'value' => array(
'green' => esc_attr__( 'Green', 'fusion-builder' ),
'darkgreen' => esc_attr__( 'Dark Green', 'fusion-builder' ),
'orange' => esc_attr__( 'Orange', 'fusion-builder' ),
'blue' => esc_attr__( 'Blue', 'fusion-builder' ),
'red' => esc_attr__( 'Red', 'fusion-builder' ),
),
) 1array(2 'type' => 'select',3 'heading' => esc_attr__( 'Select styles', 'fusion-builder' ),4 'description' => esc_attr__( 'This field allows you to display dropdown of the pre-defined values.', 'fusion-builder' ),5 'param_name' => 'styles',6 'value' => array(7 'green' => esc_attr__( 'Green', 'fusion-builder' ),8 'darkgreen' => esc_attr__( 'Dark Green', 'fusion-builder' ),9 'orange' => esc_attr__( 'Orange', 'fusion-builder' ),10 'blue' => esc_attr__( 'Blue', 'fusion-builder' ),11 'red' => esc_attr__( 'Red', 'fusion-builder' ),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
( array ) Array of pre-defined values.

Input Field – radio_button_set

You can use the radio_button_set input field to allow users to select an individual option from a list of the pre-defined options. See the below example on how you can use the radio_button_set input field –
ExampleCopy to Clipboardarray(

'type' => 'radio_button_set',

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

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

'param_name' => 'display_radio',

'value' => array(
'yes' => esc_attr__( 'Yes', 'fusion-builder' ),
'no' => esc_attr__( 'No', 'fusion-builder' ),
),

)x 1array(23 'type' => 'radio_button_set',45 'heading' => esc_attr__( 'Select styles', 'fusion-builder' ),67 'description' => esc_attr__( 'A short description of the field.', 'fusion-builder' ),89 'param_name' => 'display_radio',1011 'value' => array(12 'yes' => esc_attr__( 'Yes', 'fusion-builder' ),13 'no' => esc_attr__( 'No', 'fusion-builder' ),14 ),1516)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 pre-defined values.

Input Field – multiple_select

You can use the multiple_select input field to allow users to select multiple options from a dropdown of pre-defined values. See the below example on how you can use multiple_select input field –
ExampleCopy to Clipboardarray(

'type' => 'multiple_select',

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

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

'param_name' => 'styles',

'value' => array(
'green' => esc_attr__( 'Green', 'fusion-builder' ),
'darkgreen' => esc_attr__( 'Dark Green', 'fusion-builder' ),
'orange' => esc_attr__( 'Orange', 'fusion-builder' ),
'blue' => esc_attr__( 'Blue', 'fusion-builder' ),
'red' => esc_attr__( 'Red', 'fusion-builder' ),
),

)x 1array(23 'type' => 'multiple_select',45 'heading' => esc_attr__( 'Select styles', 'fusion-builder' ),67 'description' => esc_attr__( 'A short description of the field.', 'fusion-builder' ),89 'param_name' => 'styles',1011 'value' => array(12 'green' => esc_attr__( 'Green', 'fusion-builder' ),13 'darkgreen' => esc_attr__( 'Dark Green', 'fusion-builder' ),14 'orange' => esc_attr__( 'Orange', 'fusion-builder' ),15 'blue' => esc_attr__( 'Blue', 'fusion-builder' ),16 'red' => esc_attr__( 'Red', 'fusion-builder' ),17 ),1819)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 pre-defined values.

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(23 'type' => 'iconpicker',45 'heading' => esc_attr__( 'Select Icon', 'fusion-builder' ),67 'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),89 'param_name' => 'icon',1011 'value' => '',1213)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 – 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(23 'type' => 'dimension',45 'heading' => esc_attr__( 'Set Margins', 'fusion-builder' ),67 'description' => esc_attr__( 'A short description of the field.', 'fusion-builder' ),89 'param_name' => 'margins',1011 'value' => array(12 'margin_top' => '',13 'margin_right' => '',14 'margin_bottom' => '',15 'margin_left' => '',16 ),1718)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 – 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(23 'type' => 'colorpickeralpha',45 'heading' => esc_attr__( 'Select RGBA Color.', 'fusion-builder' ),67 'description' => esc_attr__( 'This field allows you to select the color with rgba value.', 'fusion-builder' ),89 'param_name' => 'rgba_color',1011 'value' => '',1213)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 – 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(23 'type' => 'colorpicker',45 'heading' => esc_attr__( 'Select Color.', 'fusion-builder' ),67 'description' => esc_attr__( 'This field allows you to select the color with a hex value.', 'fusion-builder' ),89 'param_name' => 'text_color',1011 'value' => '',1213)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 – checkbox_button_set

You can use the checkbox_button_set input field to allow users to select any combination of available options from a list of pre-defined options. See the below example on how you can use checkbox_button_set input field.
ExampleCopy to Clipboardarray(

'type' => 'checkbox_button_set',

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

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

'param_name' => 'styles',

)x 1array(23 'type' => 'checkbox_button_set',45 'heading' => esc_attr__( 'Select styles', 'fusion-builder' ),67 'description' => esc_attr__( 'A short description of the field.', 'fusion-builder' ),89 'param_name' => 'styles',1011 'value' => array(12 'green' => esc_attr__( 'Green', 'fusion-builder' ),13 'darkgreen' => esc_attr__( 'Dark Green', 'fusion-builder' ),14 'orange' => esc_attr__( 'Orange', 'fusion-builder' ),15 'blue' => esc_attr__( 'Blue', 'fusion-builder' ),16 'red' => esc_attr__( 'Red', 'fusion-builder' ),17 ),1819)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 pre-defined values.

Input Field – date_time_picker

You can use the date_time_picker input field to allow users to select date and time. See the below example about how you can use thedate_time_picker input field.
ExampleCopy to Clipboardarray(

'type' => 'date_time_picker',

'heading' => esc_attr__( 'Select date and time', 'fusion-builder' ),

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

'param_name' => 'date_time',

'value' => '',

)x 1array(23 'type' => 'date_time_picker',45 'heading' => esc_attr__( 'Select date and time', 'fusion-builder' ),67 'description' => esc_attr__( 'Add a short description for the field.', 'fusion-builder' ),89 'param_name' => 'date_time',1011 'value' => '',1213)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 for the date/time to be used.

WCAG 2.1 AA Accessibility and Avada

The Avada Website Builder is 100% WCAG 2.1 compliant and ready.
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.
WCAG 2.1 compatibility means that core Avada features will not break WCAG rules at all, whereas color schemes, content setup etc., is up to the user/designer maintaining the site for accessibility.