Elementor offers several ways to save you time in creating a website. In addition to templates, you can also create Global Widgets. What is that?
When creating a page with Elementor, you can add several widgets.
And of course, you can also edit each widget to tailor it with your needs and desire. Elementor allows you to save the edited widget and reuse it on other pages within your website.
This edited widget is called a Global Widget.
Shortcuts ⤵️
How a Global Widget Can Benefit Your Design Process
Let’s say you have edited a Form widget and really love its design. You want to use this form on other pages within your site. By saving it as a Global Widget, you will be able to reuse your beloved form on other pages by simply drag your new widget to any page.
When you need to edit the design of the widget (e.g., changing the background color), you don’t need to edit every single page.
Instead, you only need to make the edit once and the changes will be applied to every single page where the global widget is added to. Save time!
The best thing about Global Widget is that not only you can use it on Elementor-powered pages, but you can also use it on regular pages and posts you create with the native WordPress editor (Gutenberg).
Shortcuts ⤵️
How to Use Global Widget in Elementor
Creating a Global Widget
Before being able to use a Global Widget, you definitely need to create one first. Creating Global Widget is extremely easy. Simply add a widget to the canvas/editor and edit it until you get satisfied with the result.
Once done editing, right-click the widget and select Save as a Global.
Give your Global Widget a name and click the SAVE button.
You can see you Global Widgets by clicking the GLOBAL tab on the settings panel (panel on the left side).
Using a Global Widget
As mentioned earlier, not only you can use a Global Widget on the Elementor-powered pages, but you can also use a Global Widget when creating a new post/page using the native WordPress editor (Gutenberg).
- Using a Global Widget on Elementor
To use a Global Widget in Elementor, simply go to the GLOBAL tab on the left panel and drag a Global Widget you want to add to the canvas/editor.
- Using a Global Widget on WordPress Native Editor (Gutenberg)
Elementor saves your Global Widgets on its template library. You can go to Templates -> Saved Templates to open the Elementor template library.
Click the Global Widget tab to see the Global Widgets you have created.
Each Global Widget has a shortcode (leftmost column). Copy the shortcode of the Global Widget you want to add to your post/page.
On the WordPress editor, click the plus icon to add a new block and select Shortcode.
Paste the shortcode of the Global Widget you have just copied.
Preview your post/page to see the result.
Editing an Existing Global Widget
If there is something you want to change on your existing Global Widgets, you can also do so. You can edit a Global Widget from the Elementor canvas when you are creating a page.
Simply select (click) the Global Widget you want to edit, and you should see an EDIT button on the settings panel.
Click it to edit the Global Widget.
Or, you can click the UNLINK to turn it back into a regular widget.
Please note that any change you made on a Global Widget will instantly apply to all places in which the associated Global Widget is placed on your site.
Summary
The global widget of Elementor is super useful to speed up your design process. You can apply a change to multiple pages at once from a single location.
Using a global widget is a smart way to save you time.
Using global widgets also great if you often create a website from a Figma file. You can create the patterns of your design components first and use them on your design later once every pattern is created.
