Element Controls

Element controls allow the user to change the content and appearance of an element. You can define the controls of an element with the set_controls() method in your element PHP class.

Example element class with control parameters for control testColor:

class Prefix_Element_Test extends BricksElement {
  public function set_controls() {
    $this->controls['testColor'] = [
      'tab' => 'content',
      'group' => 'settings',
      'label' => esc_html__( 'Text color', 'bricks' ),
      'type' => 'color',
      'inline' => true,
      'small' => true,
      'css' => [
        [
          'property' => 'color',
          'selector' => '.content',
        ],
      ],
      'default' => [
        'rgb' => 'rgba(158, 158, 158, .8)',
        'hex' => '#9e9e9e',
      ],
      'pasteStyles' => false,
      'description' => esc_html__( 'Define the content color.', 'bricks' ),
      'required' => ['showText', '!=', ''],
    ];
  }
}

The following control parameters are available for all control types. To dive deeper into the arguments of a specific control type select the control from the list at the bottom.

Universal control arguments

NameTypeDefaultDescription
tabstringcontentTab under which to show the control. Accepts: content or style.
groupstring Group under which to show the control. By default a control shows ungrouped under the content tab.
labelstring Localized control label. E.g.: esc_html__( 'Color', 'bricks' ),
typestring Set the control type (see the list below for a list of all available control types).
inlineboolfalseSet to true to show control label and input on the same line.
smallboolfalseSet to true to show a control input of 60px width. By default inline label and input have equal widths of 50%.
cssarray Array with CSS rule definitions. Each CSS rule is a separate array and requires a property and selector parameter.
defaultstring/array Default control value. Either a string or an array (depending on the control type, see control list below for specific control default)
pasteStylesbooltrueSet to true excludes setting from being pasted via the builders’ custom right click “Paste Styles”. Recommended for all controls that output HTML content instead of CSS.
descriptionstring Optional description for controls that need additional explanation or link to a resource.
requiredarray Show control in relation to the setting of another control.

 

Parameter #1: control ID
Parameter #2: comparison operator:  =, !=, >=, <=
Parameter #3: setting value

Example: 'required' => ['layout', '=', ['list', 'grid']],
Required condition: Show this control if setting value of control layout equals = either list or grid.

Controls Types

Control TypeOutput (Content/CSS)
audioContent
backgroundCSS
borderCSS
box-shadowCSS
checkboxConditional
codeContent
colorCSS
datepickerContent
dimensionsCSS
editorContent
filtersCSS
gradientCSS
iconContent
imageContent/CSS
image-galleryContent
infoBuilder panel only
linkContent
numberContent/CSS
postsContent
repeaterContent
selectContent/CSS
sliderContent
svgContent
textContent
textareaContent
text-shadowCSS
typographyCSS