The ability to create a component is one of the features introduced by Elementor in version 4. Not everyone needs this feature but I personally love it.
I love the feature because it allows me to create a reusable design block that I really need, with the elements and design I can define myself.
What makes a component special is that you can edit the content of the component without changing the design, which can save tons of time in building a complex website.
If you want to learn how to create a component in Elementor v4, then read on. This post will cover everything you need to know about this cool feature.
Shortcuts ⤵️
Want to add a premium vibe to your Elementor design? Use our button hover effects collection.
What's the Difference Between a Component and a Global Widget?
You may ask. Doesn't Elementor already have the global widget feature? So, what's the point of component?
Both component and global widget are two features that have the same goals: to speed up design workflow and to maintain design consistency across your website.
A component is a bit different from a global widget, though. In a component, content (text, icon, image, etc) is editable. With a component, you can have design blocks across your website with the same design but with different content.
Unlike a component, a global widget doesn't allow you to have different content when you want to add the same global widget to different pages on your website.
To edit the content of a global widget, you need to unlink it from a global widget, which will turn it into a regular widget.
With the key difference, components are more logical to be implemented because usually, design blocks like team members, testimonials, and pricing tables have different content.
Things to Know Before Creating a Component
There are several things you need to know before you start to create a component in Elementor v4.
Requires Elementor Pro
Just like a global widget, you need to have Elementor Pro installed on your WordPress website before you can create a component.
That's because the ability to create a component is part of the advanced feature that is only unlockable with Elementor Pro.
Also, worth noting that not all Pro plans have access to this feature. You need to subscribe to at least the Advanced Solo plan to use the feature. The lowest plan (Essential) has no access to this feature (and global widget).
Supports Atomic Elements Only
The ability to create a component is an exclusive feature that is only available for Elementor v4. You can't use the feature on Elementor version 3. At least for now.
You can't add an Elementor v3 widget (classic widget) to a component. Instead, you can only add atomic elements.
I am not sure if Elementor will allow you to mix classic widgets and atomic elements in a component in the future. But for now, it's something you can't do.
Requires a Wrapper
Unlike a global widget, a component has to be placed inside a wrapper. For the wrapper itself, you can use either the Flexbox container or Div block.
Remember again, you can only use atomic elements for a component. If you want to use Flexbox as the wrapper, make sure to pick the one with the atomic symbol.
How to Create a Component in Elementor v4
A component is a reusable design block designed to speed up your workflow while maintaining the design consistency.
You can create any component that you think will help speed up your process of creating a website. From a button, form, pricing table, card and so on.
In this post, I will show you how to create a button component that consist of text, icon and link.
You can create a component whether you are editing a page or template with Elementor.
First, add the Div block (or Flexbox container) to the canvas area. This will act as the button wrapper.
Next, add the Paragraph element and SVG element to the Div block. The Paragraph element will act as the button text while the SVG element will act as the button icon.
Once the Paragraph and the SVG elements are already in place, the structure of your button will look like this:
What about the link?
For the link, you can add it to the wrapper. Not the paragraph, not the icon.
Once the button structure is ready, you can further style it up. I will not go into super detail about the button styling in this post. You can read this post to learn more about how to create a custom button in Elementor v4.
Once you are done styling up the button, right-click the button wrapper and select Create component.
Give your component a name on the appearing popup dialog and click the Create button.
Wait a moment while Elementor is creating the button. Once done, you will see a green notice at the bottom of your screen and your Elementor editor will immediately turn into component editing mode.
To exit this mode, you can click anywhere on the overlay area.
Using the Component
Every time you are done creating a new component in Elementor, it will be automatically added to the Component tab in the widget panel.
To use a component you have created, you can simply drag it to the canvas area just like you usually do when you are adding a new widget.
Editing the Component
Every component you have created can be edited. However, there is one crucial thing you need to know.
When you are editing a component, the changes you make to the component will be applied across your website where the component is added. This includes the content of the component (unless you make it editable).
For instance, if you change the button color, all buttons on your website that are built with the same component will change.
To edit a component, you can right-click the component you want to edit and select Edit Component. This will turn the Elementor editor into the component editing mode.
Go to the settings panel to make the changes you want. Once you are done, click anywhere on the overlay area to switch back to the normal editing mode.
Make Component Content Editable
By default, the content of a component cannot be edited. But this is what makes a component different from a global widget. You can set the content of a component to be editable.
To do so, first, go to the component editing mode as I have just explained above. Next, pick the content that you want to make it editable and click the diamond icon to add a property.
Give your property a name and click the Create button.
Repeat the steps on other content that you want to make editable.
Video Version
Encounter an issue following the above tutorial? You can watch the following video for the visual version.
Summary
Component is a new feature available in Elementor v4. It is pretty similar to a global widget. The difference is that you can set the content to be editable.
You can utilize the ability to create components in Elementor v4 to create reusable design blocks like a button, pricing table, card and so on. This will make your design process a lot faster.
Components are especially super useful if you often work with a design system.