- Easy Widget Creation: Create custom widgets using our unique widget creator framework, giving you the freedom to make anything.
Flexible application and boost your workflow: Just need to create for the one-time and easy to import/export between your websites.
Professional Workflow: Use the graphic interface to add attributes and make professionally customized widgets precisely for your website’s needs.
Enhancing Elementor: Eliminate the need for multiple plugins and build professional widgets that elevate your website in minutes.
Deatailed Tutorials to use Widget Creator
Step 1: Initialization
In the beginning, make sure that you already updated the PAFE version 7.0
Then go to your Dashboard > PAFE Panel > All Widgets Tab.
All your self-created widgets will be stored here.
Click on “Add New” to create your first widget.
On Elementor Editor Panel, search the PAFE Widget Creator, then drag & drop to the editor area.
Edit this widget > Content Tab.
For a visual example, we will demonstrate how to create a simple button widget.
Step 2: General Settings
- Title*: Displayed editor name for your widget (mandatory field)
- Name*: Similar to a slug name, this name has to be unique, with Latin characters and no space, no number. Separated by dashes like Slug’s format. E.g. your-widget (mandatory field)
- Icon: Thumbnail Icon of your widget.
- Categories: Separated by commas
- Keywords: Separated by commas
Step 3: Controls
A place to configure your main elements. Click on it to show the first element. There are two important fields that you need to take note:
- “Type”: There are various types such as Section, Text, Text Area, Number, etc.
Notice that Controls must start with “Section” type.
- “Tab”: Locate a specific Tab, there are five Tabs: Content, Style, Advanced, Layout, and Responsive.
Back to the illustration setup of the button Controls example:
Please enter button text
Step 5: Assets (JS, CSS Includes)
Please upload manually Assets files to “wp-content/uploads/piotnet-addons-for-elementor/widget-creator”
Step 7: CSS
A place to configure the custom CSS
Step 8: Apply a new widget
After completing your first widget, you can use this one in anywhere of Elementor environment.
Results in Elementor Editor:
Step 9: Import/Export Widgets
You can easily export a widget to a zip file:
Dashboard > PAFE Panel > All Widgets > Choose one and click on “Export”.
After that, a Zip file will be downloaded.
To reuse that widget on other Websites:
Dashboard > PAFE Panel > Import Widget > Choose file (Zip file) > Import Now.