How to Use Elementor Global Widget Effectively to make Changes Globally
Let’s agree, sometime it takes you a lot of time to build and edit your pages on Elementor. If you want to save time when building and editing similar design pages, read on as I walk you through a step-by-step guide on using Elementor global widgets.
But first, let’s understand what is a global widget?
What Are Elementor Global Widgets?
Elementor global widgets are widgets presets that you save, so you can use them globally on your website. They are basically the normal widgets from Elementor elements that you customize for same colour style & content throughout your website. These are saved as a global widget, which can be reused on any number of pages with the same format.
If you often use the same widgets on your website, then it would be helpful to save them as global widgets and set them as preset widget styles. This way, you’ll be able to use them whenever you need them, and overall, it will save you time since you’ll only have to update style or content-related changes once to effect all over the website.
Benefits of using Elementor Global Widget.
- Keep design and content consistent.
- The content can be edited on all pages at once.
- Simplified website editing process.
- It saves your overall time.
How To Use Global Elementor Widgets
To use this feature in Elementor, you require the Elementor Pro, so make sure you have it installed & activated so that you can make use of Global widgets.
In this section, you will learn multiple ways of using the Elementor global widget, and I have organized the learning process into the following ways:
- Creating Elementor Global widget.
- Ways to add Global Elementor widget on your website.
- Editing Elementor Global widget.
- Deleting Elementor Global widget.
After going through these four sections, you will get all you need to know about using a global widget. Now let’s start with the first.
1) Creating Elementor Global widget.
To use this feature, you must first drag-and drop an Elementor widget to any page
Step 1 — Choose the Elementor widget and customize it:
Identify the widget you plan to use on multiple pages on your website. This could be of the default core Elementor widgets or the advanced widgets from The Plus Addons for Elementor. In this case, I will be using the Animated Service Box widget.
Once selected, drop the widget on your page and add the desired content and style the way you would like. In my case, I have set this to the hover section and have added content for our agency website.
Now once done, let’s see, how to save this widget
Step 2 — Save the widget as global:
When your widget content is finalized, the next step is to save the widget. To perform this, right-click on the widget, and click ‘Save as global’ in the drop-down.
After which you will see a Popup which asks you to name the widget content. For now, i will be saving this as agency global service box.
After typing out the name, click save, and that’s it. You just created your first Elementor global widget, which you can now add to any pages of your website.
2) Ways to add Global Elementor widget on your website.
There are 3 ways of adding your Global Widget on your Elementor website
- Adding global widget from Elementor Page Builder.
- Adding global widget from the widget panel. (Non-Elementor Pages)
- Adding global widget with shortcodes. (Non-Elementor Pages)
Ok, let me explain each of these ways.
Method 1 — Adding Global Widget from Elementor Page Builder :
To begin with click ‘Edit with Elementor’ on the page where you want to add this global widget. Once you see the Elementor backend left panel shift to the 2nd tab with heading ‘Global’, where you will find the global widget names your just created. Simply drag-and-drop this widget on your page and we’re done.
Method 2 — Adding Global Widget From the Widget Panel:
To add a global widget in your website sidebar, footer, or any other sections you can use WordPress default widgets To perform this Go to Appearance → Widget, and in the widget panel, you will find the Elementor Library.
You can add this on any number of Elementor editable pages you like, and they will all be linked globally. There’s no limit to the total number of global widget you can create, all the widgets you save will appear on the left-hand side backend Elementor panel.
Drag this to the section where you want to add your global widget. Then you will find the option to choose a template, click on that and select the global widget you just saved.
This will add the global widget to your website when you click save, and best part about this it can be on any page which isnt Elementor editable.
Method 3 — Adding Global Widget with Shortcode:
We all know how useful WordPress shortcodes are, they make it straightforward to add any form of content on any page. Shortcode which literally stands for Shortcut codes are defined inside square brackets [SHORTCODE_4565].
Similarly, every Elementor global widget or template section generates a shortcode. To copy the shortcode widget you created visit Templates → Global Widget where you will find the shortcode for the widget you created at Elementor backend.
After copying this, you can paste this on any page builder which isnt created by Elementor, for example let’s check with default WordPress Gutenberg block editor, where we will add the shortcode block and paste this Elementor generator shortcode. And voilà now you can use Elementor designs on non-Elementor pages as well.
3) Editing Elementor Global widget.
Okay, now you know everything about creating and adding the Global Elementor widget, but sometimes we have to make content changes to our global widget. Unlike normal widget you wont see the editing controls for the global widgets.
Here, you will see 2 options given by Elementor
- Edit global widget – Edit
- Unlink from global – Unlink
Lets, understand both the options individually with there use case.
Option 1 — Edit global widget – Edit
This option is one of the primary reason to use global widgets, using this you can make changes to your existing content and style, which will be reflected globally on all the pages. This makes it easier for you to change content throughout the website without manually opening and editing them with Elementor.
Option 2 — Unlink from global – Unlink
The next option comes with its own unique benefits. This option can be helpful if you want to make changes on the particular page only. As the name suggest this will unlink the content & design from other global widget on other pages, and preserve the content updates for the specific page only.
4) Deleting Elementor Global widget
Lastly, if for any reason you plan to delete any global widget then you can delete theme from Elementor → Templates → Global Widget and click on Trash, under the global widget name.
To delete them at bulk you can select bulk action from the dropdown and mark the ones you wish to delete.
Conclusion
In this article, we covered everything you need to know about Elementor Global widgets from editing to deleting. They are very handy to make global changes on your Elementor website because you only have to make the changes once.
Global widgets save time, and helps in maintaining consistency throughout your website.
If you have more than a widget and want to save a full Elementor section globally then you can look at Elementor Templates as a solution — Learn More about Templates
If you want to level up your Elementor design, then make sure to check out 120+ widgets on The Plus Addons for Elementor.
