时间戳

首页 > 解决方案 > 如何创建自定义 HTML Elementor 包装器部分？

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

问题描述

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

我还尝试创建一个包含两个 HTML 块的 elementor 部分模板：一个在一个空的 elementor 部分之上，一个在一个之下。像这样：

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

标签： htmlcsswordpresselementor

解决方案

为此使用 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 钩子的问题。

推荐阅读