{"id":162708,"date":"2026-02-02T11:48:21","date_gmt":"2026-02-02T09:48:21","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=162708"},"modified":"2026-03-30T16:20:12","modified_gmt":"2026-03-30T13:20:12","slug":"components-2","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/components-2\/","title":{"rendered":"Components"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">What are components?<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Create a component\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/4lgigA9XbhY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">What are the benefits of using Elementor components?<\/h2>\n\n\n\n<p>Using components provides several structural advantages for your website design workflow:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Global Synchronization:<\/strong> Edit the master component once to update every instance across your site instantly.<\/li>\n\n\n\n<li><strong>Per-instance Customization:<\/strong> Override specific fields like text or images for individual instances without losing the link to the master design.<\/li>\n\n\n\n<li><strong>Design Consistency:<\/strong> Maintain a unified visual language while allowing for controlled variations in content.<\/li>\n\n\n\n<li><strong>Element Compatibility:<\/strong> Create complex layout blocks using any Atomic elements.<\/li>\n<\/ul>\n\n\n\n<p>&nbsp;<strong>Requirements<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Components can only be created using Atomic elements<\/li>\n\n\n\n<li>Only users with Admin-level permissions can create and edit components<\/li>\n\n\n\n<li>You must have Elementor Pro to create components<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How do you create a new component in Elementor?<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>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.<\/li>\n\n\n\n<li>Right-click the container holding the elements.<\/li>\n\n\n\n<li>Select <strong>Create component<\/strong>.&nbsp;<br><img fetchpriority=\"high\" decoding=\"async\" width=\"680\" height=\"382\" class=\"wp-image-162716\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png\" alt=\"Select create components\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png 1145w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1-300x168.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1-1024x575.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1-768x431.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Name your component.<\/li>\n\n\n\n<li>Click <strong>Create<\/strong>.<br><img decoding=\"async\" width=\"680\" height=\"380\" class=\"wp-image-162723\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create.png\" alt=\"A user right-clicking a container in the Elementor Editor and selecting the Create component option\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create.png 1143w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-300x168.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-1024x572.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-768x429.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>After clicking <strong>Create<\/strong>, you enter edit mode. The rest of your page dims with a darker overlay, focusing your attention on the component you&#8217;re building. This indicates you&#8217;re now working on the component&#8217;s master.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How can you designate customizable properties in Elementor?<\/strong><\/h3>\n\n\n\n<p>Once you enter <strong>Edit Mode<\/strong>, you can choose which elements can be changed on individual pages.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select the element you wish to customize.<br><img decoding=\"async\" width=\"680\" height=\"230\" class=\"wp-image-162759\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-the-element-you-want-to-customize.png\" alt=\"Using the Structure window to select the element.\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-the-element-you-want-to-customize.png 1424w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-the-element-you-want-to-customize-300x102.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-the-element-you-want-to-customize-1024x347.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-the-element-you-want-to-customize-768x260.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>In this case, we\u2019ll choose to customize the Heading element.<\/li>\n\n\n\n<li>Click the properties icon next to a field you want to customize.<\/li>\n\n\n\n<li>Enter a name for the property.<br>[callout type=&#8221;note&#8221;]Only the settings in the General tab displaying the properties logo can be customized.[\/callout]<\/li>\n\n\n\n<li>Click <strong>Create<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"234\" class=\"wp-image-162730\" style=\"width: 150px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Create-a-property.gif\" alt=\"Creating and naming the component\"><br>The property logo is replaced with a checkmark, indicating it is customizable per instance.<\/li>\n\n\n\n<li>Enter a new value.<br>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.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"443\" class=\"wp-image-162766\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-customzied-headlng.png\" alt=\"Entering a new value for the component\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-customzied-headlng.png 1422w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-customzied-headlng-300x196.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-customzied-headlng-1024x668.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-customzied-headlng-768x501.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Save the component<\/strong><\/h3>\n\n\n\n<p>You have two options for publishing your changes:<\/p>\n\n\n\n<ul id=\"block-691c22a0-a1d9-4d28-96bf-977674b27f1e\" class=\"wp-block-list\">\n<li><strong>Publish from Edit Mode<\/strong>: Click the <strong>Publish<\/strong> button while still in Edit Mode. This publishes only your component changes\u2014any other changes you&#8217;ve made to the page remain unpublished.<\/li>\n\n\n\n<li><strong>Exit Edit Mode and Publish with the Page<\/strong>: Exit Edit Mode first, then use the regular page Publish button. This publishes both your component and any other page changes together.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"381\" class=\"wp-image-162738\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-publish-button.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-publish-button.png 1141w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-publish-button-300x168.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-publish-button-1024x573.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-publish-button-768x430.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n<\/ul>\n\n\n\n<p>[callout type=&#8221;tip&#8221;]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&#8217;re ready to publish everything at once.[\/callout]<\/p>\n\n\n\n<p>Your component is now complete and available from the Components tab in the Elements panel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How do I use a component<\/h2>\n\n\n\n<p>Once created, components can be added to any page on your site.<\/p>\n\n\n\n<p>To add a component to a page:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>From the panel, click the <strong>Components<\/strong> tab.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"277\" class=\"wp-image-162745\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-components-tab.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-components-tab.png 283w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-components-tab-195x300.png 195w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n\n\n\n<li>Select the component.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"180\" class=\"wp-image-162752\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-a-component.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-a-component.png 253w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-a-component-150x150.png 150w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n<\/ol>\n\n\n\n<p>The component is added to the page.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How do I edit a component?<\/h2>\n\n\n\n<p>When you need to change the component&#8217;s structure, styling, or add\/remove exposed properties, you&#8217;ll edit the master component.<\/p>\n\n\n\n<p>[callout type=&#8221;warning&#8221;]These changes will affect all instances of the component across your entire site.[\/callout]<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>There are two ways to access a component:\n<ol class=\"wp-block-list\">\n<li>In the panel, click the <strong>Components<\/strong> tab and select the component by clicking the pencil icon on the top right corner of the settings panel.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"303\" class=\"wp-image-162774\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-the-pencil-icon-1.png\" alt=\"Clicking the edit icon\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-the-pencil-icon-1.png 258w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-the-pencil-icon-1-178x300.png 178w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n\n\n\n<li>If the component is on the canvas, right-click it and select <strong>Edit Component<\/strong> from the dropdown menu or double click the component to enter edit mode.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"351\" class=\"wp-image-162781\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-Edit-Component.png\" alt=\"Select Edit Component\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-Edit-Component.png 1165w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-Edit-Component-300x155.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-Edit-Component-1024x529.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-Edit-Component-768x397.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>When in Edit Mode, the overlay around the component is dimmed.&nbsp;<br>You can now:\n<ul class=\"wp-block-list\">\n<li>Modify the design, structure, or styling of any element<\/li>\n\n\n\n<li>Add or remove elements within the component<\/li>\n\n\n\n<li>Create additional properties or remove existing ones<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Edit a component\u2019s setting(s). In the example below, we\u2019ll change the Typography of the heading.<br><img decoding=\"async\" class=\"wp-image-162790\" style=\"width: 150px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Change-typography.mp4\" alt=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"436\" class=\"wp-image-162797\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Change-typography.gif\" alt=\"Editing the component's setting\"><\/li>\n\n\n\n<li>Save the changes.<br>You have two options for publishing your changes:\n<ul class=\"wp-block-list\">\n<li><strong>Publish from Edit Mode<\/strong>: Click the <strong>Publish<\/strong> button while still in Edit Mode. This publishes only your component changes\u2014any other changes you&#8217;ve made to the page remain unpublished.<\/li>\n\n\n\n<li><strong>Exit Edit Mode and Publish with the Page<\/strong>: Exit Edit Mode first, then use the regular page Publish button. This publishes both your component and any other page changes together.<br><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<p>Your changes affect all instances of this component.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How do you manage component organization and properties?<\/h2>\n\n\n\n<p>You can rename, delete, or group your properties to maintain a clean workflow in the <strong>Components <\/strong>tab.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Access your Components<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the <strong>Components<\/strong> tab in the Elements panel.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"277\" class=\"wp-image-162745\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-components-tab.png\" alt=\"Click the Component tab to access component properties \" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-components-tab.png 283w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/The-components-tab-195x300.png 195w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n<\/ul>\n\n\n\n<p>All your components appear in the panel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Rename a component<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>Components<\/strong> tab.<\/li>\n\n\n\n<li>Click the ellipses to the right of the Component name.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"138\" class=\"wp-image-162804\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-the-ellipses-to-the-right-of-the-group-name.png\" alt=\"Click the ellipses\"><\/li>\n\n\n\n<li>Select <strong>Rename<\/strong> from the dropdown menu.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"249\" class=\"wp-image-162811\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Rename.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Rename.png 254w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Rename-217x300.png 217w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n\n\n\n<li>Enter the new name.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Delete a component<\/h3>\n\n\n\n<p>Delete components you don&#8217;t need by going to component properties and selecting delete.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>Components<\/strong> tab.<\/li>\n\n\n\n<li>Click the ellipses to the right of the Component name.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"138\" class=\"wp-image-162804\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-the-ellipses-to-the-right-of-the-group-name.png\" alt=\"Click the ellipses\"><\/li>\n\n\n\n<li>Select <strong>Delete<\/strong> from the dropdown menu<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"249\" class=\"wp-image-162818\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Delete.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Delete.png 254w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Delete-217x300.png 217w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n\n\n\n<li>Confirm the deletion.<br>[callout type=&#8221;note&#8221;]Existing instances on your pages will remain functional. You will no longer find this component in your list.[\/callout]<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Detach a component<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Right-click the instance of the component.<\/li>\n\n\n\n<li>Select Detach Component.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"329\" class=\"wp-image-166250\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Select-detach-component.png\" alt=\"Select Detach Component\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Select-detach-component.png 462w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Select-detach-component-164x300.png 164w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n\n\n\n<li>Confirm the detachment.<br><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"163\" class=\"wp-image-166258\" style=\"width: 480px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Confirm-detachment.png\" alt=\"Confirm detach component\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Confirm-detachment.png 1080w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Confirm-detachment-300x102.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Confirm-detachment-1024x347.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Confirm-detachment-768x260.png 768w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">How to manage component properties<\/h2>\n\n\n\n<p>Click the property icon to properly organize your properties to help keep your workflow efficient.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Group properties<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select a component.<\/li>\n\n\n\n<li>Click the properties icon.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"130\" class=\"wp-image-162832\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-property-icon-1.png\" alt=\"\"><\/li>\n\n\n\n<li>To group your properties, click the add new group icon.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"193\" class=\"wp-image-162839\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-the-add-new-group-icon.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-the-add-new-group-icon.png 284w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-the-add-new-group-icon-279x300.png 279w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><br><strong>Hint<\/strong>: Grouping properties is a good way to keep them organized.<\/li>\n\n\n\n<li>Name the group.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"219\" class=\"wp-image-162846\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Enter-a-name-for-the-group.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Enter-a-name-for-the-group.png 284w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Enter-a-name-for-the-group-246x300.png 246w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><br><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">How to add properties to a group<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the property.<\/li>\n\n\n\n<li>Use the dropdown menu to add the property to a group.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"342\" class=\"wp-image-162853\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-a-group-from-the-dropdown-menu.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-a-group-from-the-dropdown-menu.png 284w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-a-group-from-the-dropdown-menu-158x300.png 158w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n\n\n\n<li>Click <strong>Update<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"323\" class=\"wp-image-162860\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Update.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Update.png 274w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Update-167x300.png 167w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Delete a property<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the <strong>X <\/strong>to the right of the property name.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"112\" class=\"wp-image-162867\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-the-X-to-the-right-of-the-property-name.png\" alt=\"\"><\/li>\n<\/ul>\n\n\n\n<p>Delete or rename a group<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Hover over the group name.<\/li>\n\n\n\n<li>Click the ellipses to the right of the group name.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"138\" class=\"wp-image-162874\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-the-ellipses-to-the-right-of-the-group-name-1.png\" alt=\"\"><\/li>\n\n\n\n<li>Select <strong>Rename<\/strong> from the dropdown menu.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"254\" class=\"wp-image-162881\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-rename-from-the-dropdown.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-rename-from-the-dropdown.png 253w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-rename-from-the-dropdown-213x300.png 213w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n\n\n\n<li>Enter the new name.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"260\" class=\"wp-image-162888\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Enter-new-name.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Enter-new-name.png 251w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Enter-new-name-207x300.png 207w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><br><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Delete a group<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Hover over the group name.<\/li>\n\n\n\n<li>Click the ellipses to the right of the group name.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"138\" class=\"wp-image-162874\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-the-ellipses-to-the-right-of-the-group-name-1.png\" alt=\"\"><\/li>\n\n\n\n<li>Select <strong>Delete<\/strong> from the dropdown menu.<br>[callout type=&#8221;note&#8221;]You can only delete an empty group.[\/callout]<br><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"171\" class=\"wp-image-162895\" style=\"width: 150px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Select-delete-from-the-dropdown-menu.png\" alt=\"\"><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Roles and Permissions<\/h2>\n\n\n\n<p>Admins have full access to create, edit, and manage components.<\/p>\n\n\n\n<p>Editors can add component instances to pages and customize exposed properties, but cannot create new components or edit the master component.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1509],"tags":[1235],"class_list":["post-162708","post","type-post","status-publish","format-standard","hentry","category-features","tag-pro"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Components | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Components in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/components-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Components | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Components in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/components-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-02T09:48:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-30T13:20:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1145\" \/>\n\t<meta property=\"og:image:height\" content=\"643\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/components-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/components-2\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Components\",\"datePublished\":\"2026-02-02T09:48:21+00:00\",\"dateModified\":\"2026-03-30T13:20:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/components-2\/\"},\"wordCount\":1202,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/components-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png\",\"keywords\":[\"Pro\"],\"articleSection\":[\"Features\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/components-2\/\",\"url\":\"https:\/\/elementor.com\/help\/components-2\/\",\"name\":\"Components | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/components-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/components-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png\",\"datePublished\":\"2026-02-02T09:48:21+00:00\",\"dateModified\":\"2026-03-30T13:20:12+00:00\",\"description\":\"Learn everything about Components in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/components-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/components-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/components-2\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png\",\"width\":1145,\"height\":643},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/components-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Editor V4\",\"item\":\"https:\/\/elementor.com\/help\/v4-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Features\",\"item\":\"https:\/\/elementor.com\/help\/v4-editor\/features\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Components | Elementor","description":"Learn everything about Components in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/components-2\/","og_locale":"en_US","og_type":"article","og_title":"Components | Elementor","og_description":"Learn everything about Components in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/components-2\/","og_site_name":"Help","article_published_time":"2026-02-02T09:48:21+00:00","article_modified_time":"2026-03-30T13:20:12+00:00","og_image":[{"width":1145,"height":643,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/components-2\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/components-2\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Components","datePublished":"2026-02-02T09:48:21+00:00","dateModified":"2026-03-30T13:20:12+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/components-2\/"},"wordCount":1202,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/components-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png","keywords":["Pro"],"articleSection":["Features"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/components-2\/","url":"https:\/\/elementor.com\/help\/components-2\/","name":"Components | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/components-2\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/components-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png","datePublished":"2026-02-02T09:48:21+00:00","dateModified":"2026-03-30T13:20:12+00:00","description":"Learn everything about Components in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/components-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/components-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/components-2\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/01\/Click-Create-component-1.png","width":1145,"height":643},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/components-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Editor V4","item":"https:\/\/elementor.com\/help\/v4-editor\/"},{"@type":"ListItem","position":3,"name":"Features","item":"https:\/\/elementor.com\/help\/v4-editor\/features\/"},{"@type":"ListItem","position":4,"name":"Components"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/162708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=162708"}],"version-history":[{"count":7,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/162708\/revisions"}],"predecessor-version":[{"id":166685,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/162708\/revisions\/166685"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=162708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=162708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=162708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}