如何创建自定义 HTML Elementor 包装器部分？

Question

我用纯 HTML 和 CSS 创建了几个部分，我想将它们用作“包装器”部分，以便我的客户能够使用 Elementor 拖放界面进行填充。我尝试这样做以创建一个自定义的 Elementor 小部件，但是我找不到与 Elementor 部分或内部部分相对应的“Controls_Manager::NAME_OF_CONTROL”。 （Controls_Manager::WYSIWYG 实际上只是一个文本编辑器）。

我还尝试创建一个元素或部分模板，该模板具有两个 HTML 块：一个在空的元素或部分的上方，一个在其下方。像这样：

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

这不起作用，因为 Elementor 将这些自定义 HTML 块包装在自己的 html 标签中，这会破坏事物。

我能找到的最接近的解决方案是创建两个模板。一个模板是内容简单的 Elementor 拖放内容，客户端可以编辑。第二个只包含一个带有指向第一个模板的短代码的自定义 HTML 块。然后客户端会将其插入到他们的页面中。这并不理想，因为 1) 当您预览页面时，短编码部分的内容不会显示，并且 2) 他们必须在模板区域中与页面的其余部分分开编辑该部分并且无法创建其他部分喜欢它，而不会直接弄乱 HTML 或让我参与其中。

我已经在互联网上搜索了两天的解决方案，但没有找到。可以这样做吗？

不，我不认为我可以使用主题页面模板，因为我需要它们能够在此部分的上方和下方拖放带有 elementor 的其他部分。

总而言之，我正在尝试这样做：

[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]

我希望我能正确解释这一点。就使用的软件而言：最新的 Wordpress 和 Elementor Pro。

Answer 1

为此使用 Elementor PHP Hooks：

例如：

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
    }
} );

唯一的问题是，虽然这适用于实际呈现的页面，但它不会在 Elementor 的预览中显示额外的 HTML。这似乎是 before_render 和 after_render 钩子的问题。

Answer 2

您可以为 Elementor 使用 Unlimited Elements， 该插件具有使用 html、css 和 JS 创建自己的小部件的功能。 然后您可以在网站上的任何位置重复使用该小部件。

https://wordpress.org/plugins/unlimited-elements-for-elementor/