The Settings tab in Element Studio provides comprehensive configuration options for custom elements, allowing you to define their behavior, appearance, and integration within the Breakdance builder.
The Settings tab contains all the metadata and configuration options for your custom element, including:Basic Information: Name, slug, class name, and category
static function name()
{
return 'My Custom Button';
}The display name of your element in the builder interface.
static function slug()
{
return __CLASS__;
}The unique identifier for your element, automatically generated from the name.
⚠️ Important: Changing the slug will break all existing instances of this element on your site. The element will no longer be recognized by Breakdance, and you’ll need to replace all instances with the new element or restore the original slug.
static function className()
{
return 'bde-my-custom-button';
}The CSS class name for your element.
static function category()
{
return 'Basic'; // Available categories: Basic, Layout, Content, Media, Forms, etc.
}The category where your element appears in the builder.
static function badge()
{
return [
'backgroundColor' => '#000000', // Background color
'textColor' => '#ffffff', // Text color
'label' => 'Pro' // Badge text
];
}Badges provide visual indicators for your element in the builder interface, helping users identify special or important elements.
static function badge()
{
return false;
}To remove a badge, click the clear badge option, which will return false:
static function tag()
{
return 'div';
}The primary HTML tag for your element.
static function tagOptions()
{
return ['div', 'section', 'article', 'aside'];
}A list of alternative tags users can choose from in the builder.
static function tagControlPath()
{
return 'content.settings.html_tag';
}Path to a control that determines the tag dynamically.
Note: When using a dynamic control, the Settings > Html > Tag control is automatically disabled.
static function uiIcon()
{
return 'SquareIcon'; // Using built-in icon
// OR
return '<svg>...</svg>'; // Using custom SVG
}The icon displayed for your element in the builder interface. There are many built-in Icons available. You can also use a custom SVG Icon by toggling the Local control to “Off” and pasting the SVG Icon’s code.
static function order()
{
return 50; // Lower numbers appear first
}The numerical order for displaying elements in the builder.
Nesting rules define how your element can be placed within the page structure.
static function nestingRule()
{
return [
'type' => 'normal',
'restrictedToBeADirectChildOf' => [
'EssentialElements\\Container',
'EssentialElements\\Section'
]
];
}Elements that must be direct parents of your element.
static function nestingRule()
{
return [
'type' => 'normal',
'restrictedToBeADescendantOf' => [
'EssentialElements\\Container',
'EssentialElements\\Grid'
]
];
}Elements that your element can be placed inside.
static function nestingRule()
{
return [
'type' => 'normal',
'notAllowedWhenNodeTypeIsPresentInTree' => [
'EssentialElements\\AnotherElement'
]
];
}Elements that prevent your element from being used.
static function nestingRule()
{
return [
'type' => 'normal',
'inlineEditable' => true,
'inlineEditableBlockPath' => 'content.settings.global_block'
];
}Enable inline editing for Global Blocks.
static function nestingRule()
{
return [
'type' => 'normal' // normal, container-restricted, complex, final
];
}The type of nesting rule for your element. The default is final, and we recommend leaving it at this unless you are creating a more complex element.
static function settings()
{
return [
'requiredPlugins' => ['woocommerce']
];
}Plugins that must be active for your element to work.
static function settings()
{
return [
'proOnly' => true
];
}Mark your element as available only in Pro versions.
static function settings()
{
return [
'dependsOnGlobalScripts' => true
];
}Indicate that your element depends on global scripts.
static function experimental()
{
return true;
}Mark your element as experimental. These elements are only available to users who enable expiremental elements via Preferences.
static function settings()
{
return [
'bypassPointerEvents' => true
];
}Use when clicking the element should activate something inside it.
static function settings()
{
return [
'disableAI' => true
];
}Disable Breakdance AI features for your element.
static function settings()
{
return [
'sharePropsWithSSRChildren' => true
];
}Share properties from this element with child elements via Server-Side Rendering.
static function settings()
{
return [
'disableWrapperHtmlTag' => true
];
}Remove the wrapper HTML tag (frontend-only).
Warning: This breaks JavaScript functionality that relies on the tag being present (e.g., .breakdance .bde-rich-text-432-117).
static function settings()
{
return [
'builderOnly' => true
];
}Element visible only in the builder.
static function addPanelRules()
{
return [
'alwaysHide' => true
];
}Hide element from the Add Panel completely.
static function addPanelRules()
{
return [
'allowedPostTypes' => ['breakdance_template']
];
}Restrict element to specific post types.
static function defaultProperties()
{
return [
'content' => [
'text' => 'Default text',
'settings' => [
'alignment' => 'center'
]
],
'design' => [
'typography' => [
'font_size' => '16px'
]
]
];
}Set default values for your element’s properties. This can be set manually, or by adding an element to a design, opening Element Studio, and clicking the Import button under Default Properties.
static function availableIn()
{
return ['breakdance', 'oxygen'];
}Specify which builder modes your element is available in.
Options:
