如何在Elementor中使用自定义代码：完整指南

Elementor 的自定义代码功能能将 HTML、JavaScript 和 CSS 代码片段添加到网站。这对于需要插入 Google Analytics、Facebook Pixel 等第三方工具的代码，或是为网站元素添加自定义样式和动态交互效果的情况非常有用。下面是如何在 Elementor 中添加自定义代码的完整指南。

自定义代码功能概述

Elementor 的自定义代码功能支持添加 HTML、JavaScript 和 CSS 代码片段，使用户能够轻松地在网站中添加额外的自定义功能。可以通过此功能插入任意 JavaScript 代码来修改 DOM（文档对象模型）、添加事件及动态效果等。此外，还可以利用 CSS 代码片段对网站中的任何元素进行自定义样式的设置。

注意：自定义代码不支持 PHP 代码片段。因此无法通过此功能添加自定义的钩子或操作。对于 PHP 代码，建议使用 functions.php 文件或第三方插件来实现。

如何添加自定义代码

按照以下步骤在 Elementor 中添加自定义代码：

步骤 1：登录到 WP Admin

进入 WordPress 管理后台。

步骤 2：导航到 Elementor > Custom Code

在 WordPress 仪表盘中，转到 Elementor > Custom Code，此时会显示自定义代码页面。

步骤 3：点击“添加新自定义代码”

点击 Add New Custom Code 按钮，新建代码页面将会显示。

步骤 4：输入代码信息

在新代码页面中，按照以下步骤填写信息：

标题 – 为代码片段添加标题，以便后续识别和管理。

位置 – 确定代码片段在网页中的位置，可选择以下选项：

<head> – 添加到网页头部
<body> – Start – 添加到网页主体的开头
<body> – End – 添加到网页主体的结尾

优先级 – 设置代码片段的优先级（1-10）。若多个脚本被分配到同一位置，优先级数值决定了执行顺序，数值越小优先级越高。例如：优先级为 1 的脚本将比优先级为 5 的脚本先执行。

代码块编辑器 – 在代码块编辑器中输入或粘贴代码片段。Elementor 内置的代码检测器会自动检查代码并提示任何错误。

步骤 5：设置发布条件

在 Publish 区域中点击 Edit 以设置发布条件，PUBLISH SETTINGS 窗口将会显示。

根据需要设置条件，指定代码片段在哪些页面或内容类型中显示。

步骤 6：发布代码片段

确认设置完成后，点击 Publish 发布自定义代码，或选择将代码保存为草稿或设置延迟发布日期与时间。

添加 CSS 代码

除了 JavaScript 脚本，还可以在代码片段中添加 CSS 代码，只需将 CSS 包裹在 <style> 标签内。通过这种方式，可以根据设置的条件有选择性地将 CSS 应用到指定页面。例如：

<style>
  .custom-class {
    color: blue;
    font-size: 18px;
  }
</style>

总结

通过使用 Elementor 的自定义代码功能，可以为网站添加各种自定义效果，如追踪代码、事件触发、动态元素及自定义样式。这一功能可以在不修改网站核心文件的情况下提升网站的个性化和功能性。

联系我们
文章看不懂？联系我们为您免费解答！免费助力个人，小企站点！
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息