嘿神国! 感谢您加入我们每周一次的 Divi 设计计划的下一部分,每周我们都会赠送全新的免费赠品。 今天,我们将分享一个免费的全局预设样式指南框架,您可以将其用于您计划构建的任何网站。 Divi 的全局预设可帮助您立即加快网页设计过程,让我们来看看吧!
下载全局预设样式指南框架
要使用免费的全局预设样式指南框架,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
为您的下一个 Divi 网站设置全局预设样式指南
什么是全局预设样式指南?
全局预设样式指南概述了您将在 Divi 网站中使用的最重要元素的样式。 它由三部分组成:
1.调色板
2.文字样式
3.模块样式
尽管全局预设不仅限于模块——列、行和部分也可以包含全局预设——但我们专注于您网站中一些最统一的元素,即上述三个部分。 这个想法是您将在一个地方设置所有元素的样式,并且一旦您对应用的设计样式感到满意,您就可以将不同的文本样式和模块样式转换为全局预设。
调色板是您可以添加到您的 Divi 主题选项中的东西,但更多的是在帖子的后面。 在设计页面和模板时,您也可以将样式指南保存在单独的窗口中。 这将帮助您在进行过程中复制和过去渐变背景设置,而不必一一手动应用设置。
何时创建/使用全局预设样式指南
最好在构建页面、模板等之前创建并开始使用全局预设样式指南。其背后的原因是,您可以在构建设计时立即访问全局预设,而不必去回到您的设计,在元素级别重置内联样式并应用全局预设。
开始您的 Divi 构建过程 创建样式指南之后 帮助您避免手动更改模块各自设置中的内容。 如果您从一开始就使用全局预设,您将能够在一个地方修改它们,并立即观察整个网站的变化。
我们在这篇文章中分享的免费全局预设框架样式指南将帮助您直接进入设计灵感阶段。 您可以专注于创建和谐平衡的设计风格,而不必自己构建风格指南。 在样式指南中完成 UI 元素的样式设置后,您就可以将它们转换为全局预设,并在构建页面和模板时使用它们。
如何使用全局预设样式指南
下载并上传框架布局到您的 Divi 库
首先在这篇文章中下载免费的全局预设样式指南框架布局。 然后,解压下载文件夹后,导航到网站后端内的 Divi 库,然后单击顶部的“导入/导出”。 在那里,切换到“导入”选项卡并上传您可以在下载文件夹中找到的样式指南框架布局。
为布局和上传框架布局创建一个新的草稿页面
上传布局后,您可以在库本身中打开它,或为其创建单独的页面草稿。 为了保持页面体验继续进行,我们将选择第二个选项。 添加一个新页面并在“Your Saved Layouts”中找到该布局。
设置调色板
一旦进入样式指南框架,您就可以设置您选择的调色板。 您添加的颜色数量完全取决于您。 为了在我们的样式指南中直观地显示颜色,我们使用了文本模块的背景设置。 打开该文本模块,转到其背景设置并修改背景颜色。 复制您正在使用的十六进制代码并将其放在其下方的文本模块中,这样您在全局预设样式指南中也始终拥有每个十六进制颜色代码的书面版本。
在 Divi 主题生成器中使用颜色代码创建自定义调色板
转到 Divi 主题选项
样式指南中的十六进制代码可用于创建自定义调色板,您可以在 Divi 内部构建时快速访问该调色板。 我们建议您在样式指南框架内的文本和模块样式之前执行此操作。 要添加调色板,请转到您的 Divi 主题选项。
在样式指南中使用十六进制代码自定义调色板
将您选择的十六进制颜色代码(您可以在样式指南中找到)添加到默认调色板。
添加文本样式
接下来,您将能够在样式指南框架中设置不同文本类型的样式。 您为每种文本类型提供多少备选方案完全取决于您,仅仅因为其中有“主要”、“次要”和“第三”选项,并不意味着您应该为每种文本类型提供 3 个变体。 随意删除或添加更多可能性。
样式模块
在样式指南框架的最后一部分,我们列出了所有最常用的 Divi 模块。 在这里,您可以根据您的想法开始修改模块。 所有模块都如此触手可及的事实将帮助您更好地了解设计风格及其平衡。 对于每个流行的模块,我们还提供了“初级”、“次级”和“第三级”选项。 但是,同样,您可以自行确定在整个页面和模板构建过程中使用的每个模块有多少变体。
将模块转换为全局预设(一个接一个并带有选择的名称)
一旦所有文本样式和模块样式都完成了——不要忘记它的响应方面——是时候将模块变成全局预设了。 为此,您可以在单独的级别上打开每个样式模块,并从模式顶部的当前样式创建新预设。 您也可以选择将主模块设为默认模块。 创建全局预设后,请确保为模块选择了特定预设,这将帮助您使用样式指南布局导入和导出全局预设。
尝试找到一种简化的模块命名方式,以便在您感到困惑时可以轻松查阅样式指南。 命名 Blurb Module 样式的三种变体的一个好方法是:
- 主按钮
- 辅助按钮
- 第三按钮
您可以对变成全局预设的每个文本样式或模块重复此方法。
嵌套模块:将嵌套元素也变成全局预设
对于嵌套模块,例如社交媒体关注模块,您需要打开模块内的项目并将该元素也保存为新预设。
不同网站上的导出和导入样式指南布局(带预设)
一旦您将所有模块转换为全局预设,并在模块设置中选择了这些预设,您就可以导出包含所有预设的布局。 然后,只要您将布局上传到另一个网站,您就可以将预设与布局一起导入,从而帮助您节省时间。 将完成的样式指南布局(包括预设)保存到 Divi 库。 然后,导出文件。
转到您要上传新样式指南的网站,导航到 Divi 库并上传带有预设的 JSON 文件,以开始 Divi 构建过程!
提示:将样式指南保留在单独的选项卡中以复制/粘贴特定样式(渐变/框阴影/边框/…)
最后但并非最不重要的一点是,始终将样式指南保留在单独的选项卡中是一个好主意。 使用 Divi 的内置和跨页复制粘贴选项将帮助您快速将样式(如渐变背景)从一个元素转移到另一个元素!
每周都有新的全球预设风格指南!
我们希望您喜欢这个全局预设样式指南框架。 您可以将此框架用于您构建的任何类型的网站。 我们期待在下面的评论部分听到您的意见。 确保您下周回来查看更多免费赠品!