为下一个项目使用新的 Divi 布局包的 10 个步骤
已发表: 2017-11-08作为 Elegant Themes 的 Divi 设计计划的一部分，Kenny 和设计团队每周都会用全新的免费 Divi 布局包宠爱我们。 布局包可以从每周一介绍布局包的博客文章中下载。 你们中的许多人已经使用布局包在很短的时间内构建了全新的网站。
在今天的帖子中，我将向您展示如何在下一个项目中使用新的 Divi 布局包时提供 10 个要遵循的关键步骤来充分利用这些布局。 我还包含了一些不太知名的技巧来像专业人士一样处理这些布局。
享受！
注意：与所有步骤一样，这些步骤应按列出的顺序完成。 例如，如果您没有先设置默认调色板，则在更改默认强调色时它将不可用。
为下一个项目使用新的 Divi 布局包的 10 个步骤
订阅我们的 YouTube 频道
#1 首先将布局导入您的 Divi 库
将新布局添加到 Divi 主题的最佳方法是先将它们导入 Divi 库。 然后，在创建新页面时，您可以从库中添加新布局。
在将布局添加到您的网站之前，您需要确保并从博客文章中下载布局包并解压缩文件。
从您的 WordPress 仪表板，转到 Divi > Divi 库，然后单击页面左上角的导入和导出按钮。 在弹出的可移植性模式中，选择导入选项卡，然后单击选择文件。 找到解压后的布局包文件夹并选择文件名中带有“All”的json文件。 这会将所有布局一次上传到您的库，而不必单独执行每个布局。 例如，如果您要上传时尚版式包，您可以从版式文件夹中选择名为 Fashion_All.json 的文件。 然后单击导入 Divi Builder 布局。
#2 向新页面添加布局
这个过程非常简单。 从您的 WordPress 仪表板，转到页面 > 添加新的。 输入您需要创建的页面的标题。 单击以使用 Divi Builder 并部署 Visual Builder。 打开页面底部的设置菜单，然后单击左侧的“从库加载”加号图标。 在弹出的从库加载模式中，单击“从库添加”选项卡并从列表中选择新布局以加载新布局。
对每个新页面重复此过程，为每个页面添加一个新布局。
#3 创建主菜单
如果这是新安装，您将开始在顶部标题的主菜单栏中看到这些新页面。 这是因为您还没有创建主菜单，因此默认情况下，您添加到站点的所有页面和帖子都会填充您的菜单。
要创建主菜单，请转到 WordPress 仪表板执行以下操作：
1. 导航到外观 > 菜单。
2. 选择页面顶部的“创建新菜单”链接。
3. 输入菜单名称。
4. 在页面下方的左侧切换中选择您的菜单项。
5. 单击添加到菜单
6. 通过将菜单项拖到位来组织菜单项。
7. 在页面底部的菜单设置下，选择“主菜单”作为显示位置。
8. 保存菜单
#4 设置默认调色板
经常忘记做这一步，每次都后悔。 设置默认调色板可以非常方便地使用 Divi builder 编辑颜色。 我无法告诉你我必须返回另一个模块多少次才能找到颜色代码，或者使用开发人员工具检查项目，或者使用我的滴管浏览器扩展找到我一直在使用的相同颜色，然后再次。 不要对自己这样做！
您可以通过转到 WordPress 仪表板并导航到 Divi > 主题选项来设置默认调色板。 在常规选项卡中，您会找到列出的选项。 在那里添加您需要的颜色。 保持白色 (#ffffff) 和一些深色（如 #333333 或您为深色字体颜色设置的任何颜色）轻松用于样式化背景和文本总是一个好主意。
#5 设置全局重点色
在自定义新站点的过程中，您可能会很早就找到使用主题定制器的方法。 这样做时，您应该首先更改全局强调色。
要更改全局强调色，请转到主题定制器并导航到常规设置 > 布局设置，然后在底部找到主题强调色选项。
请注意调色板中可用的新颜色，因为您更新了主题选项中的默认调色板。
然后，一旦您更改它，保存并发布您的设置并刷新您的页面。
更新后的主题强调颜色将自动应用于大约 20 个其他元素，这就是为什么首先更新它很重要。
一些自动更新的元素包括：
车身链接颜色
小部件标题颜色
小部件项目符号颜色
页脚社交图标悬停颜色
图标的默认颜色
页脚菜单活动链接颜色
二级菜单背景色
滑入和全屏标题样式背景颜色
移动菜单颜色的汉堡菜单图标
主菜单活动链接颜色
下拉菜单行颜色
二级菜单背景色
二级下拉菜单背景颜色
二级菜单背景色
活动主菜单链接颜色
页脚菜单活动链接颜色
如果您没有看到更改立即对这些元素生效，您可能需要保存并退出定制器，刷新页面，然后返回定制器。
#6 设置标题样式
您可以从主题定制器中设置标题样式。 只需转到您的 WordPress 仪表板并导航到 Divi > 主题定制器 > 标题和导航。
您肯定需要设计标题以匹配您的新布局。 首先，我会先决定您想要的标题样式（默认、全角、居中等……），但无论您选择什么，请确保将标题样式与新布局相匹配。 并且，确保菜单中的项目易于阅读和导航。
您可以选择主要、次要和固定导航菜单。 花点时间设计所有适用于您网站的样式。
如果您设置了全局强调色，一些标题颜色设置将会为您更改。 这就是为什么首先设置该颜色很重要的原因。
#7 设计你的底部栏
您也可以从主题定制器设置底部栏的样式。 只需转到您的 WordPress 仪表板并导航到 Divi > 主题定制器 > 页脚 > 底部栏。
底部栏不应该被忽视。 与页面顶部的导航栏相结合，它成为一个必要的书挡，可以构成整个页面的框架。 当然，默认的黑色背景几乎可以在任何网站上“工作”，但我会尝试更多。 有时我喜欢给底部栏一个背景颜色，它是直接位于它上面的页脚部分背景颜色的略深阴影。
#8 使用快捷方式对页面布局进行设计更改
由于您的布局带有内置于模块中的设计设置，因此在全球范围内（站点范围内）更改您的设计设置可能有点乏味。 但是有一些技巧可以加快这个过程。 首先，我会先更改一个页面布局。 这样您就可以保存编辑页面中的元素以添加到需要更改设计的其他页面。 这里有一些技巧可以加快对特定布局进行设计更改的过程。
使用右键单击选项
不要忘记您可以使用右键单击选项将模块样式从一个模块复制并粘贴到下一个模块，只要它是相同的模块类型。
恢复默认值，以便您可以使用主题定制器控制它们
目前，某些设置可用于主题定制器无法定制的模块（例如框阴影）。 作为一般规则，如果该设置在定制器中可用，则主题定制器将更改模块中保留的默认设置。 但是对于某些模块，您可以继续将某些设计设置恢复为默认值，以便您可以从主题定制器中控制样式。
一个很好的用例是正文和标题文本设置。 因此，例如，如果您的布局中有一个具有自定义字体、文本颜色和文本大小的文本模块，则在将它们恢复到默认状态之前，您将无法从主题定制器中更改这些元素。
使用搜索框找到要更改的设置
轻松识别设置为默认值的内容
当您搜索要更改的选项时，您会注意到某些选项旁边有一个“恢复默认值”图标。 这意味着它已从默认值更改。
一键将所有设计设置恢复为默认值
对于那些和我一样喜欢视觉构建器的人，您可能还没有发现这个有用的技巧。 如果您在后端构建器中，请单击以编辑模块的设置，然后选择设计选项卡。 注意到什么了吗？ 它是位于选项卡内的一个小“恢复为默认值”图标/按钮。
单击它会提示您确认要丢失这些设置。 如果您选择是，您的所有设计选项卡设置都将恢复为默认状态。 当然，这将在未来添加到可视化构建器中。
#9 保存关键元素以构建新页面或帖子
有时您需要创建需要不同布局的其他页面或帖子。 也许您想要一个更通用的页面布局，包括页眉、内容部分和页脚部分。 或者，您可能想创建一个更精细的登录页面。 您甚至可以为您的博客文章创建自定义文章布局。 实现这一点的最简单方法是使用您已经拥有的布局元素来构建新的布局。 而且，这是在整个站点中保持设计一致的最有效方法。 让我们回顾一些您应该考虑使用的基本元素来构建其他页面布局。
页眉
这是不费吹灰之力的。 每个页面都需要一个标题。 我肯定会为您的图书馆保存一个标题部分。 我建议找到一个更通用的标题版本，以便它适合任何页面类型。 通常联系页面布局是一个很好的候选者，因为它通常有一个基本的居中标题、副标题和背景颜色。
章节标题
保存部分标题的版本也是一个好主意。 这样，当您向新页面添加更多内容时，您将拥有一个新的标题样式并准备就绪。
内容部分
在许多情况下，您只需要一个带有白色背景的简单文本模块即可，但有时您的新布局具有独特的内容部分。 这可能是带有框阴影的文本模块或以独特方式设计的多个模糊模块。 为了保持一致性，请将您需要的内容保存到库中以备将来使用。
按钮（浅色和深色）
创建新页面时，您可能需要添加更多按钮。 在您的库中提供深色和浅色版本的按钮非常方便。 我建议为深色和浅色版本保存一个按钮模块。
页脚部分
每个布局通常都有一个漂亮的页脚部分，位于页面底部栏的正上方。 某些布局具有此页脚部分的不同版本。 这些部分通常包括联系信息、电子邮件选项和其他重要信息。 找到您要使用的一个并将其保存到您的库中以备将来使用。
现在，无论何时您想要构建新页面，您都可以从这些部分、行和模块中进行选择。
#10 设置全局项目
将来对您的网站进行编辑时，全局可以节省大量时间，但这需要一点远见。 您需要确定哪些布局元素将在整个站点中频繁使用，并且需要更统一的更新。 全局项目的良好候选者是页脚部分、号召性用语模块、按钮模块和电子邮件选项，因为它们需要分散在您的网站中，但需要相同的统一样式和内容。 这样更新一个将更新所有。
最后的想法
希望这些步骤对您有所帮助。 我这篇文章的目标是在新安装中导入这些布局以创建新网站时提供一些通用指南或最佳实践。 按顺序执行这些步骤将使您免于浪费时间，并为您打下良好的基础。