Customizing Elementor Widgets Using Unlimited Elements
When we first created Unlimited Elements our vision was to make a tool that has unlimited possibilities. All the widgets in our widget library can be fully customized using the widget creator. You can edit the HTML of each widget and add your own settings to allow users to edit the widget easily from Elementors graphical user interface. In this article, I will show you step by step how I edit an existing widget from the widget library using a real use case sent to our support system. Do remember that using the widget creator requires some minimal knowledge of HTML.
Below you can see the request sent to us in our support system. We are happy to get these kind of requests since they sync with our vision of creating a tool that helps Elementor become truly unlimited.
The request was for adding a second button to an existing widget called “Content Hover Box Text Reveal”. Let me take you over the steps of how I approached this request.
Step 1: Edit the widget HTML
To access the HTML of the widget for editing from the Elementor editor just go to the advanced section and click on the “EDIT WIDGET HTML” button.
A new tab will open with the widget creator and the specific widgets HTML ready for editing.
Step 2: Attributes Tab
Before we make changes in the HTML tab we will navigate to the Attributes tab and add new attributes or duplicate existing ones.
In this specific use case i will duplicate the existing attributes since we want to add a second button.
Step 3: Edit Attributes
Click on the attribute name to edit it and adjust the settings according to your needs.
Step 4: Edit HTML and Add Attributes
After finishing adding your attributes it’s time to go back to the HTML tab and edit the HTML. Once you have added the HTML you wish to add it’s then time to replace or add the new attributes inside of the html.
Step 5: Save & Test
Don’t forget to save the changes by clicking on the blue update button. Then go back to the Elementor Page and refresh. When clicking back on the widget for editing you should now see the changes you have made in the HTML and the new settings you have added.