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 \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',
          'important' => true, // Optional
        ],
      ],
      '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)
apply	None
align-items	CSS
audio	Content
background	CSS
border	CSS
box-shadow	CSS
checkbox	Conditional
code	Content
color	CSS
datepicker	Content
dimensions	CSS
direction	CSS
editor	Content
filters	CSS
gradient	CSS
icon	Content
image	Content/CSS
image-gallery	Content
info	Builder panel only
justify-content	CSS
link	Content
number	Content/CSS
posts	Content
repeater	Content
select	Content/CSS
slider	Content
svg	Content
text	Content
textarea	Content
text-align	CSS
text-decoration	CSS
text-shadow	CSS
text-transform	CSS
typography	CSS