To add custom files and images in our custom widgets we can assign a specific assets folder to the widget. In this article we will take you through the steps of how to create the folder and use files inside of it in your custom widgets.
Assets Tab
Click on the assets tab to navigate to it.
Create Folder
Click on the create folder button and give your folder a name, then click on the create folder button in the popup window.
Navigate to Folder
Navigate to the folder by clicking on it in the list.
Set Assets Folder
Click on the set button to assign the folder to your widget and click the update button to save.
Upload Assets
Upload assets to the asset folder.
Widget Icon
Upload a file with this name "preview_icon.svg " to add a icon to the widget in the Elementor Editor.
Widget Thumbnail
Upload a file with this name preview_addon.jpg/png/gif file in the assets folder to add a thumbnail image for the widget in the widget library.
JS / Css Includes
Add JS and CSS files for easy access in the JS / Css Includes tab.
Other Files
Other files you add can be access from the html code using {{uc_assets_url}} to access the assets path.
Assets Path In HTML
In the HTML tab you will see {{uc_assets_url}} that will allow you to access the assets path to load other types of files in your widget.
<img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGRhdGEtdT0iJTdCJTdCdWNfYXNzZXRzX3VybCU3RCU3RCUyRm15LWZpbGUuanBnIiBkYXRhLXc9IjEiIGRhdGEtaD0iMSIgZGF0YS1iaXA9IiI+PC9zdmc+" data-spai="1" alt="my file" title="Assets 7">