bricks_create_global_element

Phase 2IntermediateComplexity: 5/10
Create a sync-everywhere global element

Overview

Creates a new Bricks global element. Global elements are reusable element trees that synchronize across all instances — editing the global element definition updates every placement site-wide. This makes them ideal for content that must remain identical everywhere.

Unlike Components (which have configurable properties per instance), global elements have no per-instance customization. Every instance renders exactly the same content. Use global elements for consistent CTAs, banners, notices, navigation widgets, or any content block that should always match.

Key Features

Synchronized Updates
Editing the global element definition updates every instance across all pages and templates automatically. No manual updates needed.
Hierarchical Element Tree
Supports the same element tree format as sections — type, ref, settings, children, and globalClasses.
Category Organization
Global elements can be categorized for easier discovery and management.
Page Insertion
After creating a global element, use bricks_insert_global_element to place it on any page at a specific position.

When to Use

For CTAs, banners, or announcements that must be identical across all pages
For shared navigation widgets or footer content blocks
For newsletter signup forms that appear on multiple pages
When content must stay synchronized — editing once updates everywhere
Prerequisites
Design system should be set up (global classes referenced by elements must exist)
Understand the difference between global elements (sync everywhere) and components (configurable per instance)

When NOT to Use

When each instance needs different content (title, image, etc.) — use bricks_create_component instead
When you need per-instance customization through properties
For cards, feature boxes, or testimonials that vary per instance

Parameters

3 Total Parameters2 Required1 Optional

Warning: Undefined array key "param_enum_values" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 28
labelstringREQUIRED
Display label for the global element (e.g., "CTA Banner", "Newsletter Signup Block")

Warning: Undefined array key "param_enum_values" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 28
elementsobjectREQUIRED
Hierarchical element tree for the global element. Same format as bricks_add_section elements.

Warning: Undefined array key "param_enum_values" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 28
categorystringoptional
Category for organizing global elements (e.g., "cta", "widgets", "navigation")

Code Examples

Create a CTA banner global element

Creates a reusable CTA banner that will be identical on every page where it is inserted.

JSON
bricks_create_global_element({
  label: "CTA Banner",
  category: "cta",
  elements: {
    type: "div",
    ref: "cta-wrapper",
    settings: {
      "_display": "flex",
      "_direction": "row",
      "_justifyContent": "space-between",
      "_alignItems": "center",
      "_padding": { "top": "24", "right": "32", "bottom": "24", "left": "32" },
      "_background": { "color": { "raw": "var(--bricks-color-primary)" } },
      "_border": { "radius": { "top": "12", "right": "12", "bottom": "12", "left": "12" } }
    },
    children: [
      { type: "heading", settings: { "tag": "h3", "text": "Ready to get started?" }, globalClasses: ["heading-card"] },
      { type: "button", settings: { "text": "Contact Us", "link": { "url": "/contact" } }, globalClasses: ["btn-primary"] }
    ]
  }
})
Response
{
  "success": true,
  "data": { "id": "ge_xyz789", "label": "CTA Banner", "element_count": 3 }
}

// Then insert on a page:
bricks_insert_global_element({
  page_id: 33,
  global_element_id: "ge_xyz789",
  parent_id: "section-container-id"
})

Common Mistakes

Using a global element when each instance needs different content
Global elements are identical everywhere. If you need per-instance customization (different title, image, etc.), use bricks_create_component with properties instead.
Wrong
// Creating a global element for cards with different content
bricks_create_global_element({ label: "Service Card", ... })
// All instances will show the same title and description!
Correct
// Use a component with properties for per-instance content
bricks_create_component({
  label: "Service Card",
  properties: [
    { label: "Title", connections: { "card-title": ["text"] } },
    { label: "Description", connections: { "card-desc": ["text"] } }
  ],
  ...
})

Tips & Warnings

Tips & Warnings

Global vs Component: Global elements sync everywhere (identical content). Components have configurable properties per instance (different content). Choose based on whether instances need to vary.

Placement: After creating a global element, use bricks_insert_global_element to place it on specific pages. You can also use bricks_update_global_element to modify it later — changes propagate to all instances.

Return Values

FieldTypeDescription
successbooleanWhether the global element was created successfully
data.idstringGlobal element ID — use with bricks_insert_global_element
data.labelstringDisplay label
data.element_countnumberNumber of elements in the tree

Related Tools

Technical Details

Tool ID
bricks_create_global_element
API Endpoint
/bricks-mcp/v1/global-elements
HTTP Method
POST
Namespace
components
Source File
components/global-elements.ts
Version
1.0
Min Bricks Version
1.9
Requires Auth
Yes

Changelog

v1.0
Initial release
20250101