+
+## Using Controls
+
+Learn more about the available control types Elementor has:
+
+* [Control Types](./control-types)
+* [UI Controls](./ui-controls)
+* [Data_Controls](./data-controls)
+* [Multi Value Controls](./multi-value-controls)
+* [Unit Controls](./unit-controls)
+* [Group Controls](./group-controls)
+
+## Creating Controls
+
+Learn more about how to create your own custom controls:
+
+* [Control Structure](./control-structure)
+* [Control Template](./control-template)
+* [Control Settings](./control-settings)
+* [Control Values](./control-values)
+* [Control Enqueue](./control-enqueue)
+
+## Code Examples
+
+Learn by examples. See how easy it is to to create new controls:
+
+* [Simple Example](./simple-example)
+* [Complex Example](./complex-example)
diff --git a/src/controls/multi-value-controls.md b/src/controls/multi-value-controls.md
new file mode 100644
index 00000000..30dd35dc
--- /dev/null
+++ b/src/controls/multi-value-controls.md
@@ -0,0 +1,23 @@
+# Multi Value Controls
+
+Multi-value controls are used to return more than a single value. Each value in the multi-value control will be returned as an item in a `key => value` array.
+
+## Using Multi Value Controls
+
+The following controls come with Elementor:
+
+* [URL]() – A URL field with a button to open the link in an external tab.
+* [Media]() – A media chooser section based on the WordPress media library.
+* [Image Dimensions]() – A component with image width, input, image height input and an apply button.
+* [Text Shadow]() – Input fields for horizontal shadow, vertical shadow, shadow blur and shadow color.
+* [Box Shadow]() – Input fields for horizontal shadow, vertical shadow, shadow blur, shadow spread and shadow color.
+* [Icons Control]() – Elementor’s Icon Library for Font Icons or SVG upload based on the WordPress media library.
+
+## Extending Multi Value Controls
+
+To create your own multi value control, you need to extend the `\Elementor\Control_Base_Multiple` abstract class:
+
+```php {1}
+class Control_Test extends \Elementor\Control_Base_Multiple {
+}
+```
diff --git a/src/controls/simple-example.md b/src/controls/simple-example.md
new file mode 100644
index 00000000..7e6c6cd0
--- /dev/null
+++ b/src/controls/simple-example.md
@@ -0,0 +1,3 @@
+# Simple Example
+
+xxx
diff --git a/src/controls/test.md b/src/controls/test.md
new file mode 100644
index 00000000..bc0d39ae
--- /dev/null
+++ b/src/controls/test.md
@@ -0,0 +1,3 @@
+# Test
+
+xxx
diff --git a/src/controls/ui-controls.md b/src/controls/ui-controls.md
new file mode 100644
index 00000000..d2918719
--- /dev/null
+++ b/src/controls/ui-controls.md
@@ -0,0 +1,22 @@
+# UI Controls
+
+The UI controls are not a regular controls that the user can interact with, those are special controls visible only in [The Editor](/editor/). Please note that those controls don’t return any value.
+
+## Using UI Controls
+
+The following controls come with Elementor:
+
+* [Heading]() – Display a heading in the panel.
+* [Raw HTML]() – Display an HTML content in the panel.
+* [Button]() – Display a button in the panel that can trigger an event.
+* [Divider]() – Display a separator between controls.
+* [Deprecated Notice]() - Display deprecation notices in the panel.
+
+## Extending UI Controls
+
+To create your own UI control, you need to extend the `\Elementor\Base_UI_Control` abstract class:
+
+```php {1}
+class Control_Test extends \Elementor\Base_UI_Control {
+}
+```
diff --git a/src/controls/unit-controls.md b/src/controls/unit-controls.md
new file mode 100644
index 00000000..9b4f8c19
--- /dev/null
+++ b/src/controls/unit-controls.md
@@ -0,0 +1,19 @@
+# Unit Controls
+
+Unit controls are used to return unit based values.
+
+## Using Unit Controls
+
+The following controls come with Elementor:
+
+* [Slider]() – A draggable scale to choose between a range of numeric values.
+* [Dimensions]() – A component with 4 number fields, suitable for setting top/right/bottom/left settings.
+
+## Extending Unit Controls
+
+To create your own unit control, you need to extend the `\Elementor\Control_Base_Units` abstract class:
+
+```php {1}
+class Control_Test extends \Elementor\Control_Base_Units {
+}
+```
diff --git a/src/docs/coding-standards.md b/src/docs/coding-standards.md
new file mode 100644
index 00000000..974c88d3
--- /dev/null
+++ b/src/docs/coding-standards.md
@@ -0,0 +1,36 @@
+# Coding Standards
+
+But before we start, let’s examine the proper way to write code for Elementor. In this page you can find the best practice for Elementor developers.
+
+## Coding Standards
+
+Websites use Elementor daily, any extension developed for Elementor should have an unified and pleasant experience while maintaining WordPress plugin guidelines, [coding standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/), [best practice](https://make.wordpress.org/core/handbook/best-practices/), and not do anything malicious.
+
+Note that you can also [define a check for code standard in PHPStorm](https://kellenmace.com/set-up-php-codesniffer-in-phpstorm-with-wordpress-coding-standards/).
+
+## Plugin File Name
+
+The name of the file that runs the plugin should be in-tune with the plugin folder name. For example: `plugin-name/plugin-name.php`.
+
+## Domain Names
+
+We recommend using autoloader and namespace according to the [PSR-2](http://www.php-fig.org/psr/psr-2/) standard.
+
+## Translation
+
+The texts oriented for the user should be written in English, while using the WordPress translation function: `__()` / `_e()`. The translation text domain should be consistent with the plugin name. For example `plugin-name` and not initials like `pn`.
+
+## Testing
+
+The code should be tested with [WP_DEBUG](https://codex.wordpress.org/Debugging_in_WordPress) mode on, this way you can see the PHP notices and warnings. This will make sure you catch bugs before releasing your extension to the general public.
+
+## Prevent Data Leaks
+
+Elementor extensions should try to prevent direct access to PHP files. This can be done by adding the following code after the opening PHP tag in each PHP file:
+
+```php
+=' ) ) {
+ add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
+ return false;
+ }
+
+ // Check for required PHP version
+ if ( version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<' ) ) {
+ add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
+ return false;
+ }
+
+ return true;
+
+ }
+
+ /**
+ * Admin notice
+ *
+ * Warning when the site doesn't have Elementor installed or activated.
+ *
+ * @since 1.0.0
+ * @access public
+ */
+ public function admin_notice_missing_main_plugin() {
+
+ if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );
+
+ $message = sprintf(
+ /* translators: 1: Plugin name 2: Elementor */
+ esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'elementor-test-extension' ),
+ '' . esc_html__( 'Elementor Test Extension', 'elementor-test-extension' ) . '',
+ '' . esc_html__( 'Elementor', 'elementor-test-extension' ) . ''
+ );
+
+ printf( '
+
+In some panels, Elementor uses tab navigation to display controls. When extending Elementor, you can use any tab you need or create new ones.
+
+## Built-in Tabs
+
+Elementor has 6 pre-defined tabs used in different panels:
+
+| Name/ID | Label | Constant |
+|--------------|------------|------------------------------------------------|
+| `content` | Content | `\Elementor\Controls_Manager::TAB_CONTENT` |
+| `style` | Style | `\Elementor\Controls_Manager::TAB_ADVANCED` |
+| `advanced` | Advanced | `\Elementor\Controls_Manager::TAB_RESPONSIVE` |
+| `responsive` | Responsive | `\Elementor\Controls_Manager::TAB_LAYOUT` |
+| `layout` | Layout | `\Elementor\Controls_Manager::TAB_LAYOUT` |
+| `settings` | Settings | `\Elementor\Controls_Manager::TAB_SETTINGS` |
+
+The tabs set in `\Elementor\Controls_Manager` class. They are defined as constants and registered using in the `init_tabs()` method, each constant containing the tab name and tab label.
+
+## Usage Examples
+
+[Widgets Panel](./widgets-panel), for example, display controls in a **Content Tab** to allow the user to set the widget content, and a **Style Tab** to design the content. In addition, Elementor adds an **Advanced Tab** to all the widgets.
+
+[Page Settings Panel](./page-settings-panel), on the other hand, display controls in the **Settings Tab**, the **Style Tab**, the **Layout Tab** and others – depending on the setting screen.
+
+## Using Tabs
+
+When we add a new control to the element panel we use the inherited `add_control()` method. Before adding new control, we need to create a new section using the `start_controls_section()` method. In this method we define the tab:
+
+```php {5}
+$this->start_controls_section(
+ 'style_section',
+ [
+ 'label' => __( 'Style Section', 'plugin-name' ),
+ 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
+ ]
+);
+```
+
+## Add New Tabs
+
+To create custom tabs use the `add_tab()` method.
+
+```php
+\Elementor\Controls_Manager::add_tab(
+ 'new-tab',
+ __( 'New Tab', 'plugin-name' )
+);
+```
+
+To add custom icon above the tab label you will need to add custom CSS:
+
+```css
+.elementor-panel .elementor-tab-control-new-tab a:before {
+ font-family: eicons;
+ content: '\e942';
+}
+```
+
+## Best Practices
+
+::: warning Official Guidelines
+Please note that the official Elementor guidelines regarding to **Tabs** is to use one of the default tabs.
+:::
+
+Saying that, we did document this feature as some plugin authors use code workarounds that slow the Editor and in some edge cases break it.
diff --git a/src/editor/finder-panel.md b/src/editor/finder-panel.md
new file mode 100644
index 00000000..f52690c6
--- /dev/null
+++ b/src/editor/finder-panel.md
@@ -0,0 +1,3 @@
+# Finder Panel
+
+xxx
diff --git a/src/editor/history-panel.md b/src/editor/history-panel.md
new file mode 100644
index 00000000..844cd177
--- /dev/null
+++ b/src/editor/history-panel.md
@@ -0,0 +1,7 @@
+# History Panel
+
+
+
+The **History Settings** is a panel in [The Editor](/editor/) where the user can see his latest actions and revisions. This panel let's the user to undo / redo his actions and restore previous versions of the page.
+
+## Extending the History Panel
diff --git a/src/editor/index.md b/src/editor/index.md
new file mode 100644
index 00000000..c42d4353
--- /dev/null
+++ b/src/editor/index.md
@@ -0,0 +1,23 @@
+# Elementor Editor
+
+The editor is the environment in which the user creates the page and controls site settings. The editor is a general term that describes several areas. In turn, each area consists from several other inner areas. Some of them can be extended by 3rd party developers, others are not.
+
+## Structure
+
+The editor is the entire editing screen where the user sees two main areas:
+
+* [Elementor Preview](./elementor-preview)
+* [Elementor Panel](./elementor-panel)
+
+## Editor Panels
+
+Elementor Panels can be compared to an editing dashboard. It has many inner panels, each controlling different aspects.
+
+* [Menu Panel](./menu-panel)
+* [Site Settings Panel](./site-settings-panel)
+* [User Preferences Panel](./user-preferences-panel)
+* [Page Settings Panel](./page-settings-panel)
+* [History Panel](./history-panel)
+* [Widgets Panel](./widgets-panel)
+* [Finder Panel](./finder-panel)
+* [Navigator Panel](./navigator-panel)
diff --git a/src/editor/menu-panel.md b/src/editor/menu-panel.md
new file mode 100644
index 00000000..015f4e6a
--- /dev/null
+++ b/src/editor/menu-panel.md
@@ -0,0 +1,7 @@
+# Menu Panel
+
+
+
+The **Menu Panel** is the main panel in [The Editor](/editor/) from where the user can navigate to other panel. In other words it's like the dashboard for other Elementor panels.
+
+## Extending the Menu Panel
diff --git a/src/editor/navigator-panel.md b/src/editor/navigator-panel.md
new file mode 100644
index 00000000..85dfe55c
--- /dev/null
+++ b/src/editor/navigator-panel.md
@@ -0,0 +1,3 @@
+# Navigator Panel
+
+xxx
diff --git a/src/editor/page-settings-panel.md b/src/editor/page-settings-panel.md
new file mode 100644
index 00000000..654c8c24
--- /dev/null
+++ b/src/editor/page-settings-panel.md
@@ -0,0 +1,7 @@
+# Page Settings Panel
+
+
+
+The **Page Settings** is a panel in [The Editor](/editor/) where the user can change the Post/Page fields like the title, the excerpt (if the post type supports excerpts), feature image etc.
+
+## Extending the Page Settings Panel
diff --git a/src/editor/site-settings-panel.md b/src/editor/site-settings-panel.md
new file mode 100644
index 00000000..904a1db3
--- /dev/null
+++ b/src/editor/site-settings-panel.md
@@ -0,0 +1,7 @@
+# Site Settings Panel
+
+
+
+The **Site Settings** is a panel in [The Editor](/editor/) where the user can globally define site settings like the global colors, typography, site identity and much more.
+
+## Extending the Site Settings Panel
diff --git a/src/editor/user-preferences-panel.md b/src/editor/user-preferences-panel.md
new file mode 100644
index 00000000..d297780b
--- /dev/null
+++ b/src/editor/user-preferences-panel.md
@@ -0,0 +1,7 @@
+# User Preferences Panel
+
+
+
+The **User Preferences** is a panel in [The Editor](/editor/) where you can control the look and feel of the Elementor Editor. You can choose whether to display a light or a dart theme, set the default panel width, whether to show/hide editing buttons etc.
+
+## Extending the User Preferences Panel
diff --git a/src/editor/widgets-panel.md b/src/editor/widgets-panel.md
new file mode 100644
index 00000000..c9686a16
--- /dev/null
+++ b/src/editor/widgets-panel.md
@@ -0,0 +1,9 @@
+# Widgets Panel
+
+
+
+The **Widgets Panel** is the gate panel in [The Editor](/editor/) from where the user can drag & drop widgets to the [Elementor Preview](./elementor-preview).
+
+## Extending the Widgets Panel
+
+This panel is the first panel displayed to the user, although you can set a different [default panel](./default-panel), and [create new widgets](/widgets/).
diff --git a/src/finder/add-items-to-existing-category.md b/src/finder/add-items-to-existing-category.md
new file mode 100644
index 00000000..a7a3fbd1
--- /dev/null
+++ b/src/finder/add-items-to-existing-category.md
@@ -0,0 +1,24 @@
+# Add Items to Existing Category
+
+In some cases you would like to add new items to existing Finder categories. You can do that using the `elementor/finder/categories` filter hook.
+
+## Add Items
+
+To add a new items to an existing category, for example we would like to allow the user to add new theme templates we will add the `theme-template` item to the `create` category as follows:
+
+```php
+public function add_new_finder_items( array $categories ) {
+
+ $categories['create']['items']['theme-template'] = [
+ 'title' => __( 'Add New Theme Template', 'plugin-name' ),
+ 'icon' => 'plus-circle-o',
+ 'url' => $this->get_admin_templates_url() . '#add_new',
+ 'keywords' => [ 'template', 'theme', 'new', 'create' ],
+ ];
+ return $categories;
+
+}
+add_filter( 'elementor/finder/categories', 'add_new_finder_items' );
+```
+
+The filter hook accepts the `$categories` parameter, which is basically an array of Finder categories. We can filter categories from this array and return an updated array.
diff --git a/src/finder/add-new-finder-items.md b/src/finder/add-new-finder-items.md
new file mode 100644
index 00000000..0d968673
--- /dev/null
+++ b/src/finder/add-new-finder-items.md
@@ -0,0 +1,50 @@
+# Add New Finder Items
+
+For each new link we add to the Finder we need to define several fields like the label, the URL, the icon etc. All the links are grouped together in an array and returned together.
+
+## Category Name
+
+First we define the category:
+
+```php
+class New_Finder_Category extends \Elementor\Core\Common\Modules\Finder\Base_Category {
+
+ public function get_title() {
+ return __( 'Some Label', 'plugin-name' );
+ }
+
+}
+```
+
+## List of Items
+
+Next are the items. Each item have to include the following properties:
+
+* **name** – Used to define the ID in the `$items` array (Required).
+ * **title** – Used to define the label displayed to the user (Required).
+ * **icon** – Used to define the icon displayed before the title/label.
+ * **url** – Used to define the URL (Required).
+ * **keywords** – Used to define relevant search keywords.
+
+```php
+class New_Finder_Category extends \Elementor\Core\Common\Modules\Finder\Base_Category {
+
+ public function get_category_items( array $options = [] ) {
+ return [
+ 'elementor-website' => [
+ 'title' => __( 'Elementor', 'plugin-name' ),
+ 'icon' => 'elementor',
+ 'url' => 'https://elementor.com/',
+ 'keywords' => [ 'elementor', 'website' ],
+ ],
+ 'wordpress-website' => [
+ 'title' => __( 'WordPress', 'plugin-name' ),
+ 'icon' => 'wordpress',
+ 'url' => 'https://wordpress.org/',
+ 'keywords' => [ 'wordpress', 'website' ],
+ ],
+ ];
+ }
+
+}
+```
diff --git a/src/finder/advanced-example.md b/src/finder/advanced-example.md
new file mode 100644
index 00000000..ae3069b9
--- /dev/null
+++ b/src/finder/advanced-example.md
@@ -0,0 +1,92 @@
+# Advanced Example
+
+For more advanced use cases we can will replace static links with core WordPress functions linking to WordPress dashboard settings panels.
+
+## The Code
+
+```php
+/**
+ * Elementor Finder - WordPress Settings
+ *
+ * Provides searchable items related to WordPress settings.
+ */
+class Elementor_Finder_WordPress_Settings extends \Elementor\Core\Common\Modules\Finder\Base_Category {
+
+ /**
+ * Get finder category title.
+ *
+ * @since 1.0.0
+ * @access public
+ * @return string Finder category title.
+ */
+ public function get_title() {
+ return __( 'WordPress Settings', 'plugin-name' );
+ }
+
+ /**
+ * Get finder category items.
+ *
+ * @since 1.0.0
+ * @access public
+ * @param array $options
+ * @return array An array of category items.
+ */
+ public function get_category_items( array $options = [] ) {
+ return [
+ 'general' => [
+ 'title' => __( 'General', 'plugin-name' ),
+ 'icon' => 'wordpress',
+ 'url' => admin_url( 'options-general.php' ),
+ 'keywords' => [ 'wordpress', 'dashboard', 'general', 'settings' ],
+ ],
+ 'writing' => [
+ 'title' => __( 'Writing', 'plugin-name' ),
+ 'icon' => 'edit',
+ 'url' => admin_url( 'options-writing.php' ),
+ 'keywords' => [ 'wordpress', 'dashboard', 'writing', 'settings' ],
+ ],
+ 'reading' => [
+ 'title' => __( 'Reading', 'plugin-name' ),
+ 'icon' => 'post-content',
+ 'url' => admin_url( 'options-reading.php' ),
+ 'keywords' => [ 'wordpress', 'dashboard', 'reading', 'settings' ],
+ ],
+ 'discussion' => [
+ 'title' => __( 'Discussion', 'plugin-name' ),
+ 'icon' => 'comments',
+ 'url' => admin_url( 'options-discussion.php' ),
+ 'keywords' => [ 'wordpress', 'dashboard', 'discussion', 'settings' ],
+ ],
+ 'media' => [
+ 'title' => __( 'Media', 'plugin-name' ),
+ 'icon' => 'media',
+ 'url' => admin_url( 'options-media.php' ),
+ 'keywords' => [ 'wordpress', 'dashboard', 'media', 'settings' ],
+ ],
+ 'permalink' => [
+ 'title' => __( 'Permalink', 'plugin-name' ),
+ 'icon' => 'editor-link',
+ 'url' => admin_url( 'options-permalink.php' ),
+ 'keywords' => [ 'wordpress', 'dashboard', 'permalink', 'settings' ],
+ ],
+ ];
+ }
+
+}
+
+/**
+ * Add custom Finder categories.
+ *
+ * @since 1.0.0
+ * @param \Elementor\Core\Common\Modules\Finder\Categories_Manager $categories_manager.
+ */
+function elementor_finder_wordpress_settings( $categories_manager ) {
+
+ $categories_manager->add_category(
+ 'wordpress-settings',
+ new Elementor_Finder_WordPress_Settings()
+ );
+
+};
+add_action( 'elementor/finder/categories/init', 'elementor_finder_wordpress_settings' );
+```
diff --git a/src/finder/finder-structure.md b/src/finder/finder-structure.md
new file mode 100644
index 00000000..ae69fa6e
--- /dev/null
+++ b/src/finder/finder-structure.md
@@ -0,0 +1,34 @@
+# Finder Structure
+
+Elementor Finder is organized into categories, each includes an array of links.
+
+## Finder Class
+
+First we need to create a class that extends the `\Elementor\Core\Common\Modules\Finder\Base_Category` class which is the base Finder Category class:
+
+```php
+class New_Finder_Category extends \Elementor\Core\Common\Modules\Finder\Base_Category {
+}
+```
+
+## Finder Methods
+
+The class will have the following methods:
+
+```php
+class New_Finder_Category extends \Elementor\Core\Common\Modules\Finder\Base_Category {
+
+ public function get_title() {}
+
+ public function get_category_items() {}
+
+ public function is_dynamic() {}
+
+}
+```
+
+* **Category Title** - The `get_title()` method returns the label displayed to the user.
+
+* **Category Items** - The `get_category_items()` method returns an array of links belong to the category.
+
+* **Is Dynamic** - The `is_dynamic()` method is an optional method that return a boolean value. It is being used when the category items return data using ajax requests (like posts/pages titles). We won't be covering this method.
diff --git a/src/finder/index.md b/src/finder/index.md
new file mode 100644
index 00000000..6d407ead
--- /dev/null
+++ b/src/finder/index.md
@@ -0,0 +1,40 @@
+# Elementor Finder
+
+
+
+## Creating New Widgets
+
+Learn more about the widget anatomy and how to create your own custom widgets:
+
+* [Widget Structure](./widget-structure)
+* [Widget Data](./widget-data)
+* [Widget Categories](./widget-categories)
+* [Widget Dependencies](./widget-dependencies)
+* [Widget Controls](./widget-controls)
+* [Widget Rendering](./widget-rendering)
+
+## Mastering Widget Controls
+
+Learn more about the controls you can use in your widgets:
+
+* [Regular Control](./regular-control)
+* [Responsive Control](./responsive-control)
+* [Group Control](./group-control)
+
+And UI wrappers to group and rearranged controls:
+
+* [Control Section](./control-section)
+* [Control Tabs](./control-tabs)
+* [Control Popovers](./control-popovers)
+
+## Rendering Widgets
+
+Learn how the widget render mechanism works and how to use in your widgets:
+
+* [Widget Settings](./widget-settings)
+* [Rendering Text](./rendering-text)
+* [Rendering Style](./rendering-style)
+* [Rendering Media](./rendering-media)
+* [Rendering Repeater](./rendering-repeaters)
+* [Rendering HTML Attribute](./rendering-html-attribute)
+* [Rendering Inline Editing](./rendering-inline-editing)
+
+## Code Examples
+
+Learn by examples. See how easy it is to create Elementor widgets:
+
+* [Simple Example](./simple-example)
+* [Complex Example](./complex-example)
diff --git a/src/widgets/regular-control.md b/src/widgets/regular-control.md
new file mode 100644
index 00000000..5a5097d1
--- /dev/null
+++ b/src/widgets/regular-control.md
@@ -0,0 +1,256 @@
+# Regular Control
+
+Regular [widget controls](./widget-controls) are added to Elementor widgets using the `add_control()` method.
+
+## Regular Control Structure
+
+Adding a new controls is done as follows:
+
+```php
+$this->add_control(
+ 'control-name',
+ [
+ 'type' => \Elementor\Controls_Manager::TEXT,
+ 'label' => __( 'Control Name', 'plugin-name' ),
+ ]
+);
+```
+
+## Control Parameters
+
+Each control has the following key parameters:
+
+* **Control Name** `(string)` – Unique id used in the code.
+* **Control Setting** `(array)` – Extra control parameters.
+ * **Type** `(string)` – The control type.
+ * **Label** `(string)` – The label displayed to the user in the panel.
+ * **Show Label** `(bool)` – Whether to show the label.
+ * **Label Block** `(bool)` – Whether to display the label in a separate line.
+ * **Separator** `(string)` – The position of the separator.
+
+**Note**: Each control has its own set of *Custom Settings* in addition to the default settings mentioned above. For Example, text control has a *placeholder* settings, slider has a *range* settings, color controls has a *default* settings etc.
+
+## Examples
+
+### Text Control
+
+In this example we are going to add a simple text control defined at the `Control_Text` class which to allow the user to save a simple string, the control will have a placeholder set:
+
+```php {12-19}
+class Elementor_Test_Widget extends \Elementor\Widget_Base {
+
+ protected function _register_controls() {
+
+ $this->start_controls_section(
+ 'content_section',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ ]
+ );
+
+ $this->add_control(
+ 'title',
+ [
+ 'type' => \Elementor\Controls_Manager::TEXT,
+ 'label' => __( 'Title', 'plugin-name' ),
+ 'placeholder' => __( 'Enter your title', 'plugin-name' ),
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+}
+```
+
+### Select Control
+
+Another simple example is the `Control_Select` class which to allow to choose predefined fields:
+
+```php {12-24}
+class Elementor_Test_Widget extends \Elementor\Widget_Base {
+
+ protected function _register_controls() {
+
+ $this->start_controls_section(
+ 'content_section',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ ]
+ );
+
+ $this->add_control(
+ 'open_lightbox',
+ [
+ 'type' => \Elementor\Controls_Manager::SELECT,
+ 'label' => __( 'Lightbox', 'plugin-name' ),
+ 'options' => [
+ 'default' => __( 'Default', 'plugin-name' ),
+ 'yes' => __( 'Yes', 'plugin-name' ),
+ 'no' => __( 'No', 'plugin-name' ),
+ ],
+ 'default' => 'no',
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+}
+```
+
+### Choose Control
+
+If you liked the select control, you will love the choose control. The `Control_Choose` class allows the user to choose predefined fields but the components are styled component with an icon for each option.
+
+```php {12-33}
+class Elementor_Test_Widget extends \Elementor\Widget_Base {
+
+ protected function _register_controls() {
+
+ $this->start_controls_section(
+ 'content_section',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ ]
+ );
+
+ $this->add_control(
+ 'alignment',
+ [
+ 'type' => \Elementor\Controls_Manager::CHOOSE,
+ 'label' => __( 'Alignment', 'plugin-name' ),
+ 'options' => [
+ 'left' => [
+ 'title' => __( 'Left', 'plugin-name' ),
+ 'icon' => 'fa fa-align-left',
+ ],
+ 'center' => [
+ 'title' => __( 'Center', 'plugin-name' ),
+ 'icon' => 'fa fa-align-center',
+ ],
+ 'right' => [
+ 'title' => __( 'Right', 'plugin-name' ),
+ 'icon' => 'fa fa-align-right',
+ ],
+ ],
+ 'default' => 'center',
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+}
+```
+
+### Slider Control
+
+Another useful control is the `Control_Slider` that displays a draggable range slider:
+
+```php {12-29}
+class Elementor_Test_Widget extends \Elementor\Widget_Base {
+
+ protected function _register_controls() {
+
+ $this->start_controls_section(
+ 'content_section',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ ]
+ );
+
+ $this->add_control(
+ 'font_size',
+ [
+ 'type' => \Elementor\Controls_Manager::SLIDER,
+ 'label' => __( 'Size', 'plugin-name' ),
+ 'size_units' => [ 'px', 'em', 'rem' ],
+ 'range' => [
+ 'px' => [
+ 'min' => 1,
+ 'max' => 200,
+ ],
+ ],
+ 'default' => [
+ 'unit' => 'px',
+ 'size' => 20,
+ ],
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+}
+```
+
+### Color Control
+
+One of the more more popular controls is the `Control_Color`, it allows to choose a color:
+
+```php {12-19}
+class Elementor_Test_Widget extends \Elementor\Widget_Base {
+
+ protected function _register_controls() {
+
+ $this->start_controls_section(
+ 'content_section',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ ]
+ );
+
+ $this->add_control(
+ 'text_color',
+ [
+ 'type' => \Elementor\Controls_Manager::COLOR,
+ 'label' => __( 'Text Color', 'plugin-name' ),
+ 'default' => '#fefefe',
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+}
+```
+
+### Media Control
+
+And finally for advanced uses you can use the `Control_Media` to select images from the WordPress media library:
+
+```php {12-21}
+class Elementor_Test_Widget extends \Elementor\Widget_Base {
+
+ protected function _register_controls() {
+
+ $this->start_controls_section(
+ 'content_section',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ ]
+ );
+
+ $this->add_control(
+ 'image',
+ [
+ 'type' => \Elementor\Controls_Manager::MEDIA,
+ 'label' => __( 'Choose Image', 'plugin-name' ),
+ 'default' => [
+ 'url' => \Elementor\Utils::get_placeholder_image_src(),
+ ]
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+}
+```
diff --git a/src/widgets/rendering-html-attribute.md b/src/widgets/rendering-html-attribute.md
new file mode 100644
index 00000000..fcaa8f1a
--- /dev/null
+++ b/src/widgets/rendering-html-attribute.md
@@ -0,0 +1,59 @@
+# Rendering HTML Attribute
+
+Used to add render attribute to specific HTML elements. For example a widget can add a new `` tag with hardcoded "class" attribute or add a new `` tag with hardcoded "target" and "rel" attributes. This way you need to add `if` statements to check whether it has classes/target/rel attributed before adding them to the HTML tag. In addition you need to escape user data with `esc_attr()` to improve security.
+
+Elementor offers another way to add HTML attributes using `add_render_attribute()` and `get_render_attribute_string()` methods.
+
+## Simple Widget Output
+
+```html
+
';
+
+ // Get image by id
+ echo wp_get_attachment_image( $settings['image']['id'], 'thumbnail' );
+ }
+
+ protected function _content_template() {
+ ?>
+ 
+ start_controls_section(
+ 'section_content',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
+ ]
+ );
+
+ $this->add_control(
+ 'image',
+ [
+ 'label' => __( 'Choose Image', 'plugin-name' ),
+ 'type' => \Elementor\Controls_Manager::MEDIA,
+ 'default' => [
+ 'url' => \Elementor\Utils::get_placeholder_image_src(),
+ ],
+ ]
+ );
+
+ $this->add_group_control(
+ \Elementor\Group_Control_Image_Size::get_type(),
+ [
+ 'name' => 'image',
+ 'default' => 'large',
+ 'separator' => 'none',
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+ protected function render() {
+ $settings = $this->get_settings_for_display();
+ echo \Elementor\Group_Control_Image_Size::get_attachment_image_html( $settings );
+ }
+
+ protected function _content_template() {
+ ?>
+ <#
+ var image = {
+ id: settings.image.id,
+ url: settings.image.url,
+ size: settings.image_size,
+ dimension: settings.image_custom_dimension,
+ model: view.getEditModel()
+ };
+
+ var image_url = elementor.imagesManager.getImageUrl( image );
+
+ if ( ! image_url ) {
+ return;
+ }
+ #>
+ 
+ start_controls_section(
+ 'section_content',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
+ ]
+ );
+
+ $this->add_control(
+ 'list',
+ [
+ 'label' => __( 'List', 'plugin-name' ),
+ 'type' => \Elementor\Controls_Manager::REPEATER,
+ 'fields' => [
+ [
+ 'name' => 'text',
+ 'label' => __( 'Text', 'plugin-name' ),
+ 'type' => \Elementor\Controls_Manager::TEXT,
+ 'placeholder' => __( 'List Item', 'plugin-name' ),
+ 'default' => __( 'List Item', 'plugin-name' ),
+ ],
+ [
+ 'name' => 'link',
+ 'label' => __( 'Link', 'plugin-name' ),
+ 'type' => \Elementor\Controls_Manager::URL,
+ 'placeholder' => __( 'https://your-link.com', 'plugin-name' ),
+ ],
+ ],
+ 'default' => [
+ [
+ 'text' => __( 'List Item #1', 'plugin-name' ),
+ 'link' => 'https://elementor.com/',
+ ],
+ [
+ 'text' => __( 'List Item #2', 'plugin-name' ),
+ 'link' => 'https://elementor.com/',
+ ],
+ ],
+ 'title_field' => '{{{ text }}}',
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+ protected function render() {
+ $settings = $this->get_settings_for_display();
+ ?>
+
+
+
...
+```
+
+## PHP Render Attribute
+
+In the `render()` method we can add attributes to the HTML tag using `add_render_attribute()` and retrieve the attribute using `get_render_attribute_string()`.
+
+```php
+add_render_attribute(
+ 'wrapper',
+ [
+ 'id' => 'custom-widget-id',
+ 'class' => [ 'custom-widget-wrapper-class', settings['custom_class'] ],
+ 'role' => settings['role'],
+ 'aria-label' => settings['name'],
+ ]
+ );
+ ?>
+ get_render_attribute_string( 'wrapper' ); ?>> ...
+
+ <#
+ view.addRenderAttribute(
+ 'wrapper',
+ {
+ 'id': 'custom-widget-id',
+ 'class': [ 'elementor-tab-title', settings.custom_class ],
+ 'role': settings.role,
+ 'aria-label': settings.name,
+ }
+ );
+ #>
+ ...
+
+
+## Inline Editing Toolbars
+
+Elementor supports the following types of toolbars for inline editing:
+
+* **No Toolbar** – `(none)` Inline text editing without a toolbar, just typing text inline.
+* **Basic Toolbar** – `(basic)` Inline text editing with a minimal toolbar, including: bold, italic and underline buttons.
+* **Advanced Toolbar** – `(advanced)` Inline text editing with a full toolbar, including: adding/removing links, H1-H6 heading, blockquote, preformatting and bulleted or numbered list buttons.
+
+
+
+Keep in mind that we recommend to use inline editing the following way:
+
+* **Input controls** – use inline editing without any toolbars in simple text/number/url/email fields.
+* **Textarea controls** – use inline editing with a minimal toolbar.
+* **Wysiwyg controls** – use inline editing with a full toolbar.
+
+## Adding Inline Editing
+
+Inline editing support is added using the `add_inline_editing_attributes()` method inside your widget `render()` and the `addInlineEditingAttributes()` method in `_content_template()`.
+
+Each inline editing attribute has two parameters:
+
+* **Key** `(string)` – Unique name used in the code.
+* **Toolbar** `(string)` – Toolbar type. Accepted values are: `advanced`, `basic` or `none`. Default is `none`.
+
+Adding a new inline editing attributes is done as follows:
+
+```php {5-6,11-12}
+add_inline_editing_attributes( 'text', 'advanced' );
+ echo 'get_render_attribute_string( 'text_attr' ) . '>' . $this->get_settings( 'text' ) . '
';
+ }
+
+ protected function _content_template() {
+ ?>
+ <# view.addInlineEditingAttributes( 'text', 'advanced' ); #>
+ {{{ settings.text }}}
+ start_controls_section(
+ 'content_section',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
+ ]
+ );
+
+ $this->add_control(
+ 'title',
+ [
+ 'label' => __( 'Title', 'plugin-name' ),
+ 'type' => \Elementor\Controls_Manager::TEXT,
+ 'default' => __( 'Title', 'plugin-name' ),
+ ]
+ );
+
+ $this->add_control(
+ 'description',
+ [
+ 'label' => __( 'Description', 'plugin-name' ),
+ 'type' => \Elementor\Controls_Manager::TEXTAREA,
+ 'default' => __( 'Description', 'plugin-name' ),
+ ]
+ );
+
+ $this->add_control(
+ 'content',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ 'type' => \Elementor\Controls_Manager::WYSIWYG,
+ 'default' => __( 'Content', 'plugin-name' ),
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+ protected function render() {
+ $settings = $this->get_settings_for_display();
+
+ $this->add_inline_editing_attributes( 'title', 'none' );
+ $this->add_inline_editing_attributes( 'description', 'basic' );
+ $this->add_inline_editing_attributes( 'content', 'advanced' );
+ ?>
+ get_render_attribute_string( 'title' ); ?>>
+get_render_attribute_string( 'description' ); ?>>
+ get_render_attribute_string( 'content' ); ?>>
+
+ <#
+ view.addInlineEditingAttributes( 'title', 'none' );
+ view.addInlineEditingAttributes( 'description', 'basic' );
+ view.addInlineEditingAttributes( 'content', 'advanced' );
+ #>
+ {{{ settings.title }}}
+{{{ settings.description }}}
+ {{{ settings.content }}}
+ ` tag. You can also use the [wp_get_attachment_image()](https://developer.wordpress.org/reference/functions/wp_get_attachment_image/) function generate the image markup.
+
+```php {14-23,33,36,41}
+start_controls_section(
+ 'section_content',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
+ ]
+ );
+
+ $this->add_control(
+ 'image',
+ [
+ 'label' => __( 'Choose Image', 'plugin-name' ),
+ 'type' => \Elementor\Controls_Manager::MEDIA,
+ 'default' => [
+ 'url' => \Elementor\Utils::get_placeholder_image_src(),
+ ],
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+ protected function render() {
+ $settings = $this->get_settings_for_display();
+
+ // Get image url
+ echo '
+ start_controls_section(
+ 'section_content',
+ [
+ 'label' => __( 'Content', 'plugin-name' ),
+ 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
+ ]
+ );
+
+ $this->add_control(
+ 'image',
+ [
+ 'label' => __( 'Choose Image', 'plugin-name' ),
+ 'type' => \Elementor\Controls_Manager::MEDIA,
+ 'default' => [
+ 'url' => \Elementor\Utils::get_placeholder_image_src(),
+ ],
+ ]
+ );
+
+ $this->add_group_control(
+ \Elementor\Group_Control_Image_Size::get_type(),
+ [
+ 'name' => 'image',
+ 'default' => 'large',
+ 'separator' => 'none',
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+ protected function render() {
+ $settings = $this->get_settings_for_display();
+ echo \Elementor\Group_Control_Image_Size::get_attachment_image_html( $settings );
+ }
+
+ protected function _content_template() {
+ ?>
+ <#
+ var image = {
+ id: settings.image.id,
+ url: settings.image.url,
+ size: settings.image_size,
+ dimension: settings.image_custom_dimension,
+ model: view.getEditModel()
+ };
+
+ var image_url = elementor.imagesManager.getImageUrl( image );
+
+ if ( ! image_url ) {
+ return;
+ }
+ #>
+ -
+ <#
+ if ( settings.list ) {
+ _.each( settings.list, function( item, index ) {
+ #>
+
- + <# if ( item.link && item.link.url ) { #> + {{{ item.text }}} + <# } else { #> + {{{ item.text }}} + <# } #> + + <# + } ); + } + #> +