How to create custom HTML Elementor wrapper section? - html

Question

I have created several sections with plain HTML and CSS that I would like to use as "wrapper" sections for my clients to be able to populate using Elementor drag and drop interface. I have tried to do this creating a custom Elementor widget, but there is no "Controls_Manager::NAME_OF_CONTROL" that I could find that would correspond to an Elementor section or inner section. (Controls_Manager::WYSIWYG is actually just a text editor).
I've also tried creating an elementor section template that has two HTML blocks: one above and one below an empty elementor section. Like this:
---------- begin HTML (Elementor or Wordpress type) block ----------
<div class="myOpeningSectionDiv"> <!-- no, it's not just a single div, I'm using opening div as an example here for brevity -->
---------- end first HTML block ----------
---------- standard empty Elementor block with the little + button goes here ----------
---------- begin second HTML (Elementor or Wordpress type) block ----------
</div>
---------- end second HTML block ----------
This does not work, because Elementor wraps those custom HTML blocks in its own html tags which breaks things.
The closest I solution I could find is creating two templates. One template is the contents simple Elementor drag and drop contents that the client can edit. The second contains just one custom HTML block with a short-code pointing towards the first template. The client would then insert that into their page. This is not ideal because 1) When you preview the page, the contents of the shortcoded section do not show up, and 2) they have to edit that section separately from the rest of the page in the templates area and can't create other sections like it without messing with HTML directly or getting me involved.
I've been searching the internet for two days for a solution and came up short. Is this possible to do?
And no, I don't think I can use a theme page template, because I need them to be able to drag and drop other sections with elementor above and below this section.
To summorize I'm trying to do this:
[Some elemnentor drag and drop content]
<someCustomReusableHtmlIWroteHere>
[Section where you can drag and drop buttons, text, form, etc using Elementor]
</someCustomReusableHtmlIWroteHere>
[Some more elemnentor drag and drop content]
I hope I'm explaining this correctly. As far as software used: latest Wordpress and Elementor Pro.

Answer 1

Use Elementor PHP Hooks for this:
For example:
add_action( 'elementor/frontend/section/before_render', function ( \Elementor\Element_Base $element ) {
if('section' === $element->get_name()){
// your code here
}
} );
add_action( 'elementor/frontend/section/after_render', function ( \Elementor\Element_Base $element ) {
if('section' === $element->get_name()){
// your code here
}
} );
The only issue is that while this works on the actual rendered page,it doesn't show the extra HTML in the preview in Elementor. This seems to be an issue with the before_render and after_render hooks.

Answer 2

you can use Unlimited Elements for Elementor,
this plugin has functionality to create own widget with html, css and JS.
then you can re-use that widget anywhere on website.
https://wordpress.org/plugins/unlimited-elements-for-elementor/