自定义代码元素

关于自定义代码元素

GemPages Editor V7 中的自定义代码元素使您可以灵活地添加自己的 HTML, 的CSS, JavaScript和 Liquid 代码直接添加到您的页面中。这是一个功能强大的元素，可让您：

• 轻松定制： 添加常规 GemPages 元素不支持的独特设计元素或交互功能。
• 容易 集成第三方应用程序: 无需复杂的编码即可将外部应用程序、小部件、跟踪代码或脚本嵌入到您的 Shopify 商店中。
• Boost 商店功能： 添加自定义行为和交互以改善商店的外观和为客户服务的方式。

向您的页面添加自定义代码元素

按照以下简单步骤插入自定义代码元素：

第三步： 访问 GemPages 仪表板，然后选择您的目标页面以打开编辑器。

第四步：拖放 自定义代码 元素从左侧边栏，在 先进的 部分，到所需区域。

单击元素以显示配置，包括 个人设置 标签 以及 先进的 标签。 

配置设置选项卡

此 个人设置 选项卡允许您配置自定义代码元素的行为方式及其在页面上的显示方式。以下是每个部分的工作原理：

代码

单击“+ 添加...”按钮。将显示“代码编辑器”对话框，您可以在其中输入 HTML/Liquid, 的CSS 或 JavaScript 代码片段。

完成后，点击 已保存 按钮。

注意： 在 HTML 选项卡中，您还可以插入 第三方安装代码 显示内容。

背景

在 背景 部分，您可以选择从提供的调色板中选择颜色或插入背景图像来修改视觉外观。 

颜色

选择纯色或渐变色作为元素的背景。您可以：

• 手动输入十六进制代码（例如， #E2E2E2)
• 从最近或建议的颜色中选择
• 使用百分比滑块调整不透明度

图片 

如果需要，使用此选项添加背景图像。

点击 “+ 添加…” 在图像部分上传或选择背景图像。

添加图像后，您将拥有高级配置选项：

• 来源：显示图像 URL 或让您从媒体库中选择。
• 扩展：选择图像在块内的缩放方式（例如，覆盖、包含、自动）。
• 职务：设置焦点（中心、左上、右下等）。
• 重复新密码：定义图像是否重复以及如何重复（不重复、重复、重复-X/Y）。
• 附件：设置图像滚动行为（滚动或固定）。
• 优化 LCP（最大内容绘制），R建议浏览器优先考虑此图像以提高性能，请选择 预载 = 是 if 此元素加载到折叠上方。

名称

重命名您的元素以便在编辑器中轻松识别，这对于复杂布局或多部分页面特别有用。

对齐

此参数允许您确定元素在页面上的定位方式。有三个选项可供选择：左对齐、居中和右对齐。

配置高级选项卡

如需更多高级定制，请导航至 高级选项卡 并按照中的说明进行操作 本文.

第三步： 找到要应用自定义代码的 GemPages 元素，然后右键单击并选择 “自定义代码”.

第三步： 找到适当的选项卡 的CSS 以及 脚本，并将代码片段插入对话框中。点击“已保存”当你完成时。

如何删除自定义代码或自定义 Liquid

如果您不再需要添加的自定义代码，则可以通过两种方式将其删除：

1. 删除自定义代码元素

第三步： 在编辑器中，单击要删除的自定义代码元素。

第三步： 按下顶部栏中的垃圾桶图标（删除）或右键单击元素并选择 删除.

2. 删除现有元素内的自定义 Liquid/自定义代码

第三步： 右键单击添加了自定义代码的元素→选择 自定义代码

第三步： 删除 CSS、Script 字段里面的代码。

第三步： 点击 已保存.