Priority Support
Help Center > Editor V4 > Features > Components

Components

Last Update: January 29, 2026

This post has been translated using machine translation, which may result in minor inaccuracies or differences in wording compared to the original. We apologize for any errors or ambiguities. Please feel free to contact us if we can clarify anything for you.

What are components?

Components are reusable design blocks that stay globally synced across your entire site, while still allowing customization for individual instances. When you edit a component, every instance of that component updates automatically – saving you from making the same change in multiple places.

Unlike templates (which don’t sync after placement) or global widgets (which are limited to single widgets), Components let you create custom layout blocks – like CTAs, banners, testimonials, or feature sections – with the flexibility to customize specific content on each instance.

Key benefits: 

  • Global sync  –  Edit once, update everywhere
  • Per-instance customization – Override specific fields (like text or images) without breaking the sync 
  • Design consistency – Maintain a unified look across your site while allowing controlled variations

 Requirements:

  •  Components can only be created using V4 elements
  • Only users with Admin-level permissions can create and edit components

.

Create a component

Creating a component is a two-part process: first you build your design, then you define which properties can be customized per instance. The editor guides you through both steps in one continuous flow.

  1. Use several V4 elements to create a design. In this example, we created a Call to action with a heading, image, paragraph and button element.
  2. Right-click the container holding the elements.
  3. Select Create component. 
  4. Name your component.
  5. Click Create.

    After clicking Create, you enter edit mode. The rest of your page dims with a darker overlay, focusing your attention on the component you’re building. This indicates you’re now working on the component’s master.

Designate properties

While in Edit Mode, you can designate the properties you want to be customizable on each instance:

  1. Select the element you wish to customize.

    In this case, we’ll choose to customize the Heading element.
  2. Click the properties icon next to a field you want to customize.
  3. Enter a name for the property.
    Note
    Only the settings in the General tab displaying the properties logo can be customized.
  4. Click Create.

    The property logo is replaced with a checkmark, indicating it is customizable per instance.
  5. Enter a new value.
    This value only applies to this instance of the component. This customized value will persist for this instance, even when the master component is updated.

Save the component

You have two options for publishing your changes:

  • Publish from Edit Mode: Click the Publish button while still in Edit Mode. This publishes only your component changes—any other changes you’ve made to the page remain unpublished.
  • Exit Edit Mode and Publish with the Page: Exit Edit Mode first, then use the regular page Publish button. This publishes both your component and any other page changes together.
Tip
Use Option A when you want to push component updates live immediately without affecting other work-in-progress on the page. Use Option B when you’re ready to publish everything at once.

Your component is now complete and available from the Components tab in the Elements panel.

Use a component

Once created, components can be added to any page on your site.

To add a component to a page:

  1. From the panel, click the Components tab.
  2. Select the component.

The component is added to the page.

Edit a component

When you need to change the component’s structure, styling, or add/remove exposed properties, you’ll edit the master component.

Important: These changes will affect all instances of the component across your entire site.

  1. There are two ways to access a component:
    1. In the panel, click the Components tab and select the component by clicking the pencil icon on the top right corner of the settings panel.
    2. If the component is on the canvas, right-click it and select Edit Component from the dropdown menu or double click the component to enter edit mode.

      When in Edit Mode, the overlay around the component is dimmed. 
      You can now:
      • Modify the design, structure, or styling of any element
      • Add or remove elements within the component
      • Create additional properties or remove existing ones
    3. Edit a component’s setting(s). In the example below, we’ll change the Typography of the heading.
    4. Save the changes.
      You have two options for publishing your changes:
      • Publish from Edit Mode: Click the Publish button while still in Edit Mode. This publishes only your component changes—any other changes you’ve made to the page remain unpublished.
      • Exit Edit Mode and Publish with the Page: Exit Edit Mode first, then use the regular page Publish button. This publishes both your component and any other page changes together.

Your changes affect all instances of this component.

Manage Components

Access your Components

  • Click the Components tab in the Elements panel.

All your components appear in the panel.

Rename a component

  1. Click the Components tab.
  2. Click the ellipses to the right of the Component name.
  3. Select Rename from the dropdown menu.
  4. Enter the new name.

Delete a component

  1. Click the Components tab.
  2. Click the ellipses to the right of the Component name.
  3. Select Delete from the dropdown menu
  4. Confirm the deletion.
    Note: Existing instances on your pages will remain functional. You will no longer find this component in your list.

Manage Properties

Properly organize your properties to help keep your workflow efficient.

Group properties

  1. Select a component.
  2. Click the properties icon.
  3. To group your properties, click the add new group icon.

    Hint: Grouping properties is a good way to keep them organized.
  4. Name the group.

Add properties to a group

  1. Click the property.
  2. Use the dropdown menu to add the property to a group.
  3. Click Update.

Delete a property

  • Click the X to the right of the property name.

Delete or rename a group

  1. Hover over the group name.
  2. Click the ellipses to the right of the group name.
  3. Select Rename from the dropdown menu.
  4. Enter the new name.

Delete a group

  1. Hover over the group name.
  2. Click the ellipses to the right of the group name.
  3. Select Delete from the dropdown menu.
    Note
    You can only delete an empty group.

Roles and Permissions

Admins have full access to create, edit, and manage components.

Editors can add component instances to pages and customize exposed properties, but cannot create new components or edit the master component.

On this page

Share this article

Hosted with