Skip to content

Commit ac39e7e

Browse files
Update
1 parent d60524d commit ac39e7e

File tree

2 files changed

+9
-9
lines changed

2 files changed

+9
-9
lines changed

src/widgets/widget-inner-wrapper.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22

33
<Badge type="tip" vertical="top" text="Elementor Core" /> <Badge type="warning" vertical="top" text="Intermediate" />
44

5-
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.
66

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

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

1111
## Widget Markup
1212

13-
The current, unoptimized widget markup includes two wrapping elements:
13+
The current, unoptimized widget markup, includes two wrapping elements:
1414

1515
```html
1616
<div class="elementor-widget elementor-widget-{widget-name}">
@@ -20,15 +20,15 @@ The current, unoptimized widget markup includes two wrapping elements:
2020
</div>
2121
```
2222

23-
The optimized markup, has only one wrapping element:
23+
The optimized markup has only one wrapping element:
2424

2525
```html
2626
<div class="elementor-widget elementor-widget-{widget-name}">
2727
...
2828
</div>
2929
```
3030

31-
By default, Elementor uses the unoptimized markup for backward compatibility.
31+
By default, Elementor uses the unoptimized markup for backwards compatibility.
3232

3333
## Examples
3434

@@ -85,7 +85,7 @@ class Elementor_Test_Widget extends \Elementor\Widget_Base {
8585
}
8686
```
8787

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

9090
## Notes
9191

src/widgets/widget-optimization.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
<Badge type="tip" vertical="top" text="Elementor Core" /> <Badge type="warning" vertical="top" text="Intermediate" />
44

5-
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.
66

77
## Performance Optimization Methods
88

9-
Elementor has two performance optimization methods:
9+
Elementor widgets has two performance optimization methods:
1010

1111
```php
1212
class Elementor_Test_Widget extends \Elementor\Widget_Base {

0 commit comments

Comments
 (0)