Element Controls

Element controls allow the user to change the content and appearance of an element. Your 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 \Bricks\Element {
  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

Name Type Default Description
tab string content Tab under which to show the control. Accepts: content or style.
group string Group under which to show the control. By default a control shows ungrouped under the content tab.
label string Localized control label. E.g.: esc_html__( 'Color', 'bricks' ),
type string Set the control type (see the list below for a list of all available control types).
inline bool false Set to true to show control label and input on the same line.
small bool false Set to true to show a control input of 60px width. By default inline label and input have equal widths of 50%.
css array Array with CSS rule definitions. Each CSS rule is a separate array and requires a property and selector parameter.
default string/array Default control value. Either a string or an array (depending on the control type, see control list below for specific control default)
pasteStyles bool true Set 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.
description string Optional description for controls that need additional explanation or link to a resource.
required array 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 Type Output (Content/CSS)
audio Content
background CSS
border CSS
box-shadow CSS
checkbox Conditional
code Content
color CSS
datepicker Content
dimensions CSS
editor Content
filters
CSS
gradient CSS
icon
Content
image
Content/CSS
image-gallery
Content
info
Builder panel only
link
Content
number
Content/CSS
posts
Content
repeater
Content
select
Content/CSS
slider
Content
svg
Content
text
Content
textarea
Content
text-shadow
CSS
typography
CSS