如何使用 Divi 将布局包样式转换为全局默认值

已发表: 2019-07-31

新的 Divi 全局默认更新可帮助您将某些设计样式应用于整个网站的元素。 它可以节省您的时间,帮助您概览您的网站,并按照您习惯的方式设置每个全局设置的样式; 在 Divi Builder 内部。

现在,当您为网站使用布局包时,您很可能希望将布局包样式转换为全局默认值,这样您就不必来回走动了。 但最好的方法是什么? 我们将在本周的用例教程中向您展示。 我们将使用网络安全布局包来演示它,但请放心,该技术适用于您使用的任何布局包。

让我们开始吧!

1.为布局包中的每个布局创建新页面

如果您计划将布局包的样式转换为全局默认值,您需要做的第一件事就是为布局包附带的每个布局创建一个单独的页面。 每个布局都有一个单独的页面将帮助您完成第二步; 扫描整个布局包中使用的设计元素并将它们转换为全局默认值。

布局包样式

2. 检测整个布局中使用的模块并使它们全局化

为每个布局创建单独的页面后,您可以开始扫描页面以查找使用的不同模块。 我们故意跳过部分、行和列设置,因为这些取决于您创建的部分类型。 对于大多数部分和行,设计团队决定采用 Divi 的默认设置,以便您更轻松地设置自己的全局默认值。

我们已经检测到网络安全布局包中包含自定义样式的最常用模块。 这些模块也是 Divi 最受欢迎的模块之一,几乎可以在任何布局包中找到:

  • 文本模块
  • 主按钮模块
  • 分频器模块
  • 电子邮件选择模块
  • 联系表格模块

将文本模块正文和标题设置转换为全局默认值

是时候开始将模块样式转换为全局默认值了! 你需要一个模块一个模块地做这个模块。 我们将从文本模块开始。 我们建议全局化的唯一设置是标题和正文文本设置。 无论您正在创建什么设计,这两个选项组很可能保持不变。 其他设置,例如间距和大小,通常取决于您的文本模块如何受其他设计的影响并在此过程中进行调整。 我们将完成为这个特定模块设置全局默认值的过程。 然后,我们将继续列出我们建议将其转换为其他模块的全局默认值的设置。

在整个布局中,使用了三个文本模块标题; H1、H2 和 H3。 我们将这三个标题和段落文本设置转换为全局默认值。 如果你想比 H3 更进一步,你可以在 H3 全局文本设置中手动设置它们的样式。

在登录页面上,您会发现所有这些设置都分布在不同的文本模块中。 英雄部分中的第一个文本模块包含 H1 副本。 打开设置,转到 H1 文本设置,右键单击 H1 项,然后单击“使样式为默认值”。

布局包样式

布局包样式

接下来找到带有一些段落内容的文本模块。 转到文本设置,右键单击并单击“使样式默认”。

布局包样式

我们将打开的最后一个文本模块包含 H2 和 H3 文本样式。 分别右键单击每个标题项,然后单击“使样式为默认值”。 完成这些步骤后,您的文本模块就可以使用了!

布局包样式

您必须为网站上的每个重复模块重复这些步骤。 让我们继续讨论其他的。

1. 主按键模块

布局包样式

按钮设置

布局包样式

填充

布局包样式

2. 模糊模块

布局包样式

图标设置(需要时)

布局包样式

文字设置

布局包样式

标题文字设置

布局包样式

正文设置

布局包样式

3. 分频器模块

布局包样式

线路设置

布局包样式

尺寸设置

布局包样式

4. 电子邮件选择模块

布局包样式

整个模块除了:边距 + 调整大小 + 转换设置

布局包样式

5. 联系表格模块

布局包样式

整个模块除了:边距 + 调整大小 + 转换设置

布局包样式

3. 将重复元素保存为(全局)项目以供重复使用

现在,一旦您为主要使用的模块设置了全局默认值,您仍然可以考虑重用其他一些元素。 这些元素通常但不限于以下内容:

  • 辅助按钮
  • 三级按钮
  • 号召性用语部分
  • 页脚部分
  • 布局包细节:具有分区分隔符的图像模块/不同样式的模糊模块/...

我们建议您将这些元素保存到您的 Divi 库中,并随时重复使用。 它有助于将其中一些保存为全局项目而不是常规项目,例如页脚和 CTA 部分。 建议保存按钮或不同样式的模糊模块等元素,但不要全局保存,以便您可以在需要时对副本和设计进行特定更改。

您可以通过将元素悬停在 Divi 库中,单击“保存到库”图标,为您的库项目命名,选择是否要将其设为全局,然后单击“保存到库”。

布局包样式

4. 在 Divi 主题选项中创建默认调色板

一旦您设置了全局默认值并将重复元素保存到您的 Divi 库中,您就几乎可以开始使用全局默认值和库项目从头开始构建新页面了。 在您这样做之前,我们建议您更改 Divi 主题选项中的默认调色板。 这些颜色将出现在您打开的每个设计元素上,并帮助您更改颜色,而无需经常复制和粘贴颜色代码。 这使您可以专注于真正重要的事情; 创建一个美观且功能强大的网站。 转到您的 Divi 主题选项并确保在您的调色板中包含以下颜色类型:

  • 文字颜色
  • 背景颜色
  • 强调色

布局包样式

5. 在现有页面上重置模块样式

一旦您设置了全局默认值、保存了库项目并选择了默认调色板,您就可以从头开始创建新页面并立即查看方法的差异。 但是,如果您在选择全局默认值之前已经修改了现有页面,则必须返回并重置模块样式以应用全局默认值。 这就是全局默认值的工作方式。 如果您手动更改某个模块的某些内容,您还必须手动删除它,以便全局默认值可以显示出来。 幸运的是,您还可以使用 Divi 提供的扩展样式功能在整个页面中扩展重置样式!

最后的想法

在这篇文章中,我们向您展示了如何使用新的 Divi 全局默认更新将布局包转换为全局默认。 尽管我们使用了网络安全布局包,但您可以将此技术应用于您选择使用的任何布局包。 这个用例教程是我们正在进行的 Divi 设计计划的一部分,我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议,请随时在下面的评论部分留下它们!

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件时事通讯和 YouTube 频道,这样您将永远是第一批了解此免费内容并从中受益的人之一。