You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Elementor widgets define define their own markup in the `render()` method. However, Elementor wraps each widget in two `<div>` elements, the outer `<div class="elementor-widget">` element and the inner `<div class="elementor-widget-container">` element. These additional wrapper allow Elementor to add additional styles like background, margins, borders, motion effect etc.
5
+
Elementor widgets define their own markup in the `render()` method. However, Elementor wraps each widget in two `<div>` elements; the outer `<div class="elementor-widget">` element, and the inner `<div class="elementor-widget-container">` element. These additional wrappers allow Elementor to add additional styles like background, margins, borders, motion effects, etc.
6
6
7
-
Two wrapper for each widget increase the overall DOM size, reducing page performance. To overcome this, developers can use the `has_widget_inner_wrapper()` method to control the number of wrapper elements the widget has.
7
+
Two wrappers for each widget increases the overall DOM size, reducing page performance. To overcome this, developers can use the `has_widget_inner_wrapper()` method to control the number of wrapper elements the widget has.
8
8
9
-
By switching to a single wrapper, a widget can reduces the DOM size and optimize it's footprint on the page. However, existing widgets that rely on the inner `.elementor-widget-container` wrapping element to style widgets, can keep backwards compatibility.
9
+
By switching to a single wrapper, a widget can reduce the DOM size and optimize its footprint on the page. However, existing widgets that rely on the inner `.elementor-widget-container` wrapping element to style widgets, can maintain backwards compatibility.
10
10
11
11
## Widget Markup
12
12
13
-
The current, unoptimized widget markup includes two wrapping elements:
13
+
The current, unoptimized widget markup, includes two wrapping elements:
By default, Elementor uses the unoptimized markup for backward compatibility.
31
+
By default, Elementor uses the unoptimized markup for backwards compatibility.
32
32
33
33
## Examples
34
34
@@ -85,7 +85,7 @@ class Elementor_Test_Widget extends \Elementor\Widget_Base {
85
85
}
86
86
```
87
87
88
-
This widget can't use the optimized DOM capability as is uses the inner `.elementor-widget-container` CSS class to style the widget. Therefore, setting `has_widget_inner_wrapper()` to `true` will make sure that Elementor won't remove the inner wrapper for this widget.
88
+
This widget can't use the optimized DOM capability as it uses the inner `.elementor-widget-container` CSS class to style the widget. Therefore, setting `has_widget_inner_wrapper()` to `true` will make sure that Elementor doesn't remove the inner wrapper for this widget.
Elementor offers several methods and best practices to optimize widgets and improve performance. The optimizations are not implemented for all the widgets to keep backwards compatibility for older websites. In addition, each widget has its own characteristics. The widget developer needs to add some extra for Elementor to make sure Elementor knows how to process it.
5
+
Elementor offers several methods and best practices to optimize widgets and improve performance. The optimizations are not implemented for all widgets in order to maintain backwards compatibility. In addition, each widget has its own characteristics. The widget developer needs to add some extra methods to the widget class to make sure Elementor knows how to process it.
6
6
7
7
## Performance Optimization Methods
8
8
9
-
Elementor has two performance optimization methods:
9
+
Elementor widgets has two performance optimization methods:
10
10
11
11
```php
12
12
class Elementor_Test_Widget extends \Elementor\Widget_Base {
0 commit comments