WordPress divi主题

如何导出具有自定义代码的 Divi 页面布局

by | May 14, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

我喜欢能够导出和导入 Divi 页面布局。 只需单击几下,我就可以将所有设计元素放在一个方便打包的 json 文件中,该文件可以存储用于另一个项目。 但是,如果您的页面布局依赖于自定义外部代码(CSS 或 Javascript)怎么办? 当然,您需要在页面布局导出中包含该代码,以保持页面元素的样式和功能。

google广告开户

在本教程中,我将展示如何在页面布局中包含自定义(外部)代码,以便在不同站点上导出和导入布局时保留布局设计和功能。

让我们开始吧!

基本思想解释

如果您添加了用于设置特定 Divi 页面布局样式的自定义 CSS(无论是在主题定制器中还是在页面设置中),则 CSS 外部存储在不同的文件中。 在主题选项下可能已添加到标题中的任何 javascript 也是如此。 由于此代码存储在外部,因此不会自动与您的 Divi 页面布局一起导出。

要将自定义代码与 Divi 页面布局一起导出,我们可以使用 Divi 代码模块将代码存储在您的页面内容中。 这样,代码模块中的代码将与页面布局一起导出。 这有助于将自定义布局存储在您自己的计算机上。 这样,每当您在另一个项目中导入布局时,您将拥有页面的自定义功能和样式。 您还可以使用此技术来保存和导出也使用自定义代码的各个部分、行或模块。

这种方法实际上只对您想要保存以供将来使用的单个页面或页面元素有意义。 这不是为整个站点保存布局的最佳方式。 利用 Divi 的可移植性选项让您导出主题定制器设置和/或主题选项会更有意义。

订阅我们的 Youtube 频道

如何使用 Divi 代码模块导出具有自定义代码的 Divi 页面布局

假设您有一个使用自定义 CSS 和 Javascript 的 Divi 页面布局,并且您希望在导出 (.json) 文件中包含该自定义代码。 首先,您需要打开要导出的页面并部署 Divi 构建器。

对于这个例子,我有一个使用 Bakery Landing Page Layout 的页面。 我添加了一些自定义 CSS 和 Javascript 以在单击按钮时切换联系表单。

WordPress divi主题

div 页面布局

自定义 CSS 已添加到高级选项卡下的页面设置自定义 CSS。

div 页面布局

自定义 Javascript 已添加到集成选项卡下 Divi 主题选项中的标题标签中。

div 页面布局

使用代码模块将自定义 CSS 添加到页面

为了将 CSS 与页面布局一起导出,我们需要将其添加到页面内的代码模块中。 为此,请打开页面设置,将自定义 CSS 复制到剪贴板。

div 页面布局

这是我为此示例复制的自定义 CSS:

#toggle-container {
  display:none;
}
.toggle-active {
  display: block !important;
}

然后将代码模块添加到您的页面。 您可以在任何地方添加代码模块。 例如,如果您想将其添加到页面的最顶部,那么以后查找和编辑可能会更容易。 或者,您可以将代码模块放在您知道 CSS 所针对的元素旁边。 在这种情况下,CSS 用于隐藏和显示我的联系表单模块。 因此,我将直接在 Contact Form 模块下方添加代码模块。

div 页面布局

fiverr建站WordPress程序员

在代码模块设置中,粘贴您复制的外部自定义 CSS,然后将其粘贴到代码模块内容中。 因为您要将 CSS 添加到页面内容中,所以您需要将 CSS 包装在样式标签中。 下面是代码模块中的 css 代码:

<style>
#toggle-container {
  display:none;
}
.toggle-active {
  display: block !important;
}
</style>

div 页面布局

完成后,最好将管理标签添加到代码模块以供以后参考。 例如,您可以将其命名为“CSS 代码”,以便在线框视图中查看布局时知道它是什么。

div 页面布局

之后,保存代码模块设置就完成了。

独立站选品工具

使用代码模块将 Javascript 添加到页面

接下来,您将希望对主题选项下的标题自定义 Javascript 执行相同的操作。 将代码复制到剪贴板,然后在 Divi Builder 处于活动状态时返回页面。 然后在页面的任意位置添加另一个代码模块。 我将我的直接放在联系表单模块下,因为我知道此 javascript 仅适用于该元素,但您可以将其添加到任何地方。

添加代码模块后,将复制的 Javascript 粘贴到内容框中。 确保代码包含在脚本标记中,因为它是 Javascript。

<script>
jQuery(document).ready(function(){
 jQuery(".toggle-trigger").click(function(){
 jQuery("#toggle-container").toggleClass("toggle-active");
 });
});
</script>

div 页面布局

给代码模块一个管理标签(如“JS代码”)以便于参考。

div 页面布局

高质量外链购买

由于这两个代码模块没有任何代码可以将实际内容添加到页面中,因此这些模块不会破坏页面的设计,因此无需担心。

如何导出页面布局

现在您已准备好导出页面布局。 要使用 Divi Builder 导出页面布局,请打开设置菜单并单击可移植性图标。 在可移植性弹出窗口中,输入名称(“自定义页面布局”)并单击“导出 Divi Builder 布局”按钮。

div 页面布局

这会将 json 文件导出到您的计算机。

现在,您的 json 文件已准备好用于另一个具有自定义代码功能齐全的项目。

JasperAI 10000字免费额度试用

如何导入页面布局

要将 json 文件上传到新页面,请打开要导入布局的页面。 确保 Divi Builder 处于活动状态。 然后您需要做的就是将 json 文件拖放到页面上。 可移植性模式会自动弹出,允许您选择替换现有内容的选项,或预先创建备份。 由于您不需要替换任何内容,您只需单击导入按钮,它就会立即加载到页面中。

div 页面布局

将代码放回它所属的位置

将页面布局成功导入页面后,您可能需要将 CSS 和 JS 放回它所属的位置。 如果您希望 CSS 仅设置当前页面的样式,您可以将 CSS 添加到页面设置自定义 CSS 中我们开始之前的位置。 而且,如果您希望 CSS 在整个站点的所有页面上都可用,您可以在 Theme Customizer 设置中将 CSS 添加到 Additional CSS。

您可能还希望将您的 Javascript 代码添加回主题选项> 原始位置下的主题标题。 或者您可以考虑将代码留在代码模块中,以便脚本仅适用于该页面。

最后的想法

在存储页面布局以供以后使用时,存储页面所需的任何自定义代码也很重要。 诀窍是使用 Divi Code 模块将代码存储在页面本身中。 然后代码将保留在导出的 json 文件中。 它还有助于标记这些代码模块,以便以后在导入布局时轻松找到。

WordPress备份工具updrafplus

此外,我意识到还有其他方法可能会更适合您。 例如,您可能决定将代码保存为单独的文件。 使用代码编辑器,您可以粘贴自定义代码并保存 .css 文件和 .js 文件。 然后,您可以将它们与您的 json 文件一起存储在一个文件夹中。

无论如何,我希望这会派上用场,我期待在下面的评论中听到您的想法。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题