×
HIDE

How to create Elementor Widgets using PAFE Widget Creator

Widget Creator is one of the highlighted features in PAFE version 7.0

A unique and easy-to-use framework that helps you create custom widgets for Elementor in minutes with just basic coding knowledge instead of setting up third platforms or customizing your function file in Themes.

  1. Easy Widget Creation: Create custom widgets using our unique widget creator framework, giving you the freedom to make anything.
  2. Flexible application and boost your workflow: Just need to create for the one-time and easy to import/export between your websites.

  3. Professional Workflow: Use the graphic interface to add attributes and make professionally customized widgets precisely for your website’s needs.

  4. Enhancing Elementor: Eliminate the need for multiple plugins and build professional widgets that elevate your website in minutes.

Tutorials

Step 1:

In the beginning, make sure that you already updated the PAFE version 7.0

Go to your Dashboard > PAFE Panel > All Widgets Tab.

PAFE Panel

All your self-created widgets will be stored here.

Click on “Add New” to create your first widget.

Add a new widget

On Elementor Editor Panel, search the PAFE Widget Creator, then drag & drop to the editor area.

Edit this widget > Content Tab.

There are 6 remarkable categories to configure: Settings, Controls, Render, Assets, JavaScript, and CSS.

Content Tab illustration

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

General settings

Step 3: Controls

A place to configure your main elements. Click on to show the first element.

“Type”: There are various types such as Section, Text, Text Area, Number, etc. 

Controls must start with Section Type.

Details controls

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:

Step 4: Render

You can use PHP or Twig. Twig Document
Control Value:
– PHP: $control_name
– Twig: {{control_name}}

				
					<?php if(!empty($button_text)) : ?>
<button><?php echo $button_text; ?></button>
<?php else: ?>
Please enter button text 
<?php endif; ?>
				
			

Step 5: Assets (JS, CSS Includes)

Please upload manually Assets files to “wp-content/uploads/piotnet-addons-for-elementor/widget-creator”

We will optimize this automatic operation in the next beta versions. (Updating)

Step 6: JavaScript

You can customize your JavaScript here.

Step 7: CSS

A place to configure the custom CSS

Step 8:

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.

mailbox illustrator

Please check your email inbox. If you haven’t received anything,

also check your spam folder.

images with text "you just made my day"

PAFE Form Builder

Extensions

PAFE Widgets

piotnet addons for elementor white icon
Popup Trigger URL
Piotnet Addons For Elementor