fbpx

Need Help?

Here are some good places you cant start.

Join the Community

Whats New?

Get updated about all the good stuff!

Assets

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.

1
Widget Icon

Upload a file with this name "preview_icon.svg " to add a icon to the widget in the Elementor Editor.

2
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.

3
JS / Css Includes

Add JS and CSS files for easy access in the JS / Css Includes tab.

4
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">
				
			

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!