Priority Support
Help Center > Editor V4 > Features > Components

Components

Last Update: March 30, 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 in Elementor are reusable design blocks that remain globally synced across your entire website while permitting per-instance customization. When you modify a master component, every instance updates automatically, ensuring design consistency. They allow you to build custom layouts like CTAs or testimonials with flexible overrides for specific content without breaking the global sync.

What are the benefits of using Elementor components?

Using components provides several structural advantages for your website design workflow:

  • Global Synchronization: Edit the master component once to update every instance across your site instantly.
  • Per-instance Customization: Override specific fields like text or images for individual instances without losing the link to the master design.
  • Design Consistency: Maintain a unified visual language while allowing for controlled variations in content.
  • Element Compatibility: Create complex layout blocks using any Atomic elements.

 Requirements:

  • Components can only be created using Atomic elements
  • Only users with Admin-level permissions can create and edit components
  • You must have Elementor Pro to create components

How do you create a new component in Elementor?

Creating a component involves building the layout and then defining the customizable properties. Note that you must have Admin-level permissions to perform these actions. 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. 
    Select create components
  4. Name your component.
  5. Click Create.
    A user right-clicking a container in the Elementor Editor and selecting the Create component option
    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.

How can you designate customizable properties in Elementor?

Once you enter Edit Mode, you can choose which elements can be changed on individual pages.

  1. Select the element you wish to customize.
    Using the Structure window to select the element.
    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.
    Creating and naming the component
    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.
    Entering a new value for the component

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.

How do I 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.

How do I edit a component?

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

Warning
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.
      Clicking the edit icon
    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.
      Select Edit Component
      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.
      Editing the component's setting
    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.

How do you manage component organization and properties?

You can rename, delete, or group your properties to maintain a clean workflow in the Components tab.

Access your Components

  • Click the Components tab in the Elements panel.
    Click the Component tab to access component properties

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.
    Click the ellipses
  3. Select Rename from the dropdown menu.
  4. Enter the new name.

Delete a component

Delete components you don’t need by going to component properties and selecting delete.

  1. Click the Components tab.
  2. Click the ellipses to the right of the Component name.
    Click the ellipses
  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.

Detach a component

You can detach an instance of a component so that you can customize it without affecting other components and so that it will not be affected by changes to the component.

  1. Right-click the instance of the component.
  2. Select Detach Component.
    Select Detach Component
  3. Confirm the detachment.
    Confirm detach component

How to manage component properties

Click the property icon to 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.

How to 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