Elementor Customize by Sergey Samokvalov (Redirex)

Recently i'm faced with a challenge to resolve some w3 validator and optimiziation (like PageSpeedInsights) issues. So i'm decided that it's will be well if i create this repo for share some solutions about not trivial methods of resolve elementor issues.

My list of solutions here willn't cover all stuff like simply edditing html-elements from visual interface or accessable methods of edditing your templates for regular user of layout designer.

Here you'll not found solution like: dont contain ‹a› into ‹a› tag ot what difference betwen HTML block and inline elements.

Here we'll review how resolve some issues throw elementor systems code and append this code for additional improvement.

So, let's get down to business

1. Error: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

Description:

From line 79, column 1; to line 79, column 7
ntainer">↩<style>@media
Contexts in which element style may be used:
Where metadata content is expected.
In a noscript element that is a child of a head element.
Content model for element div:
If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.
If the element is not a child of a dl element: flow content.

Solution:

That error means that w3-validator dont allow us contain ‹script› tag into sort of elements like ‹div›. Unfortunatly Elementor use "elementor widget container" that include all styles from visual editor into

elements following initializate your blocks on page and don't get access/feature to change this for developer from interface. So what you need for chenging it?

1. You should follow by this path: /wp-content/plugins/elementor/includes/base
2. Find widget-base.php
3. Open this file and find the line :576 that starts by ‹div class="elementor-widget-container"› into public function render_content() {
4. Replace this code $this->print_widget_css(); to this: add_action('wp_footer', function(){ $this->print_widget_css(); // add same styles to footer }); as you can see - we move all widget css code to footer by wp_footer Wordpress hook that resolve our issue.
5. Done :-).