Divi 主题定制器的终极指南

Divi Theme Customizer 是一款功能强大且方便的工具，可用于对 Divi 主题进行自定义。 与 Visual Builder 一样，Divi Theme Customizer 允许视觉前端自定义和设计更改，从而将猜谜游戏从自定义过程中解脱出来。 如果有效使用，此工具可以为未来的项目节省大量时间和启动器。

今天的帖子旨在帮助您更好地了解主题定制器的工作原理，以便您可以使用它来提高未来项目的生产力。 我涵盖了主题定制器中几乎所有可用的选项，并重点介绍了特定于 Divi 的那些选项。 在某种程度上，这篇文章可以作为一个文档，在此过程中提供一些深入的解释和设计技巧。 我还将向您展示如何导出定制器设置以用于您的下一个项目。

我们有很多东西要讲，所以让我们从头开始。

以 WordPress 为基础构建

主题定制器是在 WordPress 3.4 中引入的。 这个方便的功能允许 WordPress 用户实时预览他们对主题所做的更改，然后一键保存这些更改。 过去需要多个窗口和无数次刷新，现在可以在一个浏览器窗口中快速完成。

以下是主题“TwentySeventeen”上的“主题定制器”选项示例：

如您所见，以前驻留在 WordPress 后端不同页面中的许多 WordPress 功能（站点标识、菜单、小部件等）现在可以在此前端定制器中集中访问。

另一方面，Divi 主题定制器是作为该主题定制器的增强版本而构建的，具有各种特定于 Divi 的选项。 对于用户来说，这使得自定义 Divi 的过程变得更加容易。 事实上，您可以在编辑时（同时）实际看到自定义设置，这使其成为一种方便的设计工具。

Divi 主题定制器仍然有许多标准的 WordPress 定制器选项，但它还有更多。

如您所见，Divi 主题定制器中添加了更多设置。 现在让我们开始更深入地探索这些。

通用设置

当您开始自定义您的主题时，我认为最好从常规设置的顶部开始，然后按照您的方式进行。

站点标识

这部分不是 Divi 独有的。 这是更改站点标题和标语的方便位置。 您还可以输入用于浏览器和应用程序的站点图标，不同于您可以在 Divi 主题选项中添加的网站图标。

布局设置

布局设置允许您通过确定部分和行之间有多少空间以及主要内容部分的最大宽度来调整主题的框架。

启用盒装布局

在这里，您可以将您的网站更改为框式布局，该布局将您的网站内容框起来并显示可自定义的背景。

网站内容宽度

您可以在此处设置内容部分的最大宽度。 由于您的内容采用响应式布局，它会调整为较小的尺寸，但不会扩展到超过此处设置的最大宽度。

默认设置为 1080 像素。 对于大多数标准笔记本电脑和台式机来说，这是一个很好的宽度。

网站装订线宽度

装订线宽度对应于每行中列之间的水平空间（边距）量。

装订线宽度的可选值范围为 1 到 4。

1 表示列之间的零边距。
2 表示列之间有 3% 的右边距。
3 表示列之间的右边距为 5.5%。
4 表示列之间有 8% 的右边距。

使用自定义边栏宽度

这会为您的主题设置默认的侧边栏宽度。 这适用于您的主题中具有侧边栏且不是使用 Divi Builder 构建的所有页面。

截面和行高

这些选项调整每个部分和行的垂直间距（顶部和底部填充）量。

默认情况下，顶部和底部的部分填充为50px 。 对于行，顶部和底部的默认填充为30px 。 但是，通过使用定制器更改部分或行填充，填充值会变成与主题定制器上选项拨盘上的数字相对应的百分比。

例如，“0”代表顶部和底部填充的 0%，“1”代表顶部和底部填充的 1%，“2”代表 2%，依此类推。 填充的百分比基于容器的宽度（部分或行）。 因此，如果该部分的实际宽度为 1080px 并且您已将部分高度设置为 1，这意味着您将...

1080 像素 x 0.01 = 10.8 像素

... 10.8px 的顶部和底部填充。

选项范围从 0 到 10，因此您可以拥有多达 10% 的填充。

主题强调色

在开始更改其他元素的颜色之前，您应该先更改它。 更改后，保存并发布设置并刷新页面。 现在更新的主题强调色应该自动填充其他元素。

更新主题强调色也会更新以下内容：

• 车身链接颜色
• 小部件标题颜色
• 小部件项目符号颜色
• 页脚社交图标悬停颜色
• 图标的默认颜色
• 页脚菜单活动链接颜色
• 二级菜单背景色
• 滑入和全屏标题样式背景颜色
• 移动菜单颜色的汉堡菜单图标
• 主菜单活动链接颜色
• 下拉菜单行颜色
• 二级菜单背景色
• 二级下拉菜单背景颜色
• 二级菜单背景色
• 活动主菜单链接颜色
• 页脚菜单活动链接颜色

排版

这是您网站最重要的方面之一，但往往被用户和开发人员忽视。 不要犯忽略这些选项的错误。 正确处理这些细节可以产生很大的不同。 从长远来看，花时间为主题设置默认排版也可以节省时间，因为您不必在模块级别进行自定义。

正文大小

这会更改主题的默认正文文本。 默认大小为 14px。

设计提示：对于标准的正文大小来说，14px 似乎有点太小了。 对于基本级别的正文字体大小，您确实不应该小于 16px。 我们这些接近 40 岁及以上的人会感谢你。 甚至大多数浏览器都使用 16px 作为它们的标准基本字体大小。

车身高度

每行文本的行高。

设计提示：行高以长度值“em”来衡量。 Divi 的正文默认为 1.7em。 这个 em 值优于像素 (px) 值，因为它基于元素的当前字体大小，因此它与父行内值（或在我们的例子中，当前字体大小）一起缩放。 值“1.7em”基本上代表当前字体大小的 1.7 倍。 因此，如果您当前的字体大小为 16 像素，则行高将为 27.2 像素。 这为您提供了顶部 5.6 像素和底部 5.6 像素的额外空间。 这似乎是提高可读性的一个很好的引导（副本行之间的空格）。

页眉文字大小

Divi 允许您在此处设置默认的 h1 标题文本大小。 这会影响 Divi 的元素，例如 Fullwidth Header Module 标题。 如果你想调整其他标题级别（h2、h3 等）的大小，那么我建议在附加 CSS 中添加它们（这将在后面的文章中介绍）。

设计提示：在大多数情况下，每页只有一个页眉，所以要算数。 把它想象成一本书封面上的标题。 这是一个人注意到的第一件事。 而且，与流行的口号相反，人们仍然通过封面来判断书籍，尤其是在这种情况下。

标题文本大小的默认值为 30 像素。 这是一个很好的安全尺寸。 特别是因为某些标题需要更长的副本。 但是，我倾向于使用更大的标题尺寸以适应不断增长的显示器尺寸。 此外，大多数客户需要具有简单和简短标题的网站，例如“关于我们”和“联系我们”，使用较大的字体看起来更好。 我喜欢将我的 h1 标头设置为至少 48px 。

标题字母间距

字母间距调整字母之间的水平间距。 标题字母间距值影响所有标题级别（h1、h2、h3、h4、h5、h6）、块引用和幻灯片标题。

设计提示：对于较大的文本减少字母间距并为较小的文本增加字母间距是一种很好的设计技巧。 在标题方面，具有更大字体粗细（粗体）的较大文本可以通过减小 -1px 的字母间距看起来更好。

但是，如果您将相同的标题以大写形式放置，您可能会发现将字母间距增加到 1-2 像素会更好看。

标题线高度

就像字母间距值一样，标题行高度值影响所有标题级别（h1、h2、h3、h4、h5、h6）、块引用和幻灯片标题。 由于字体较大，1em 是默认设置。 我认为 1em 和 1.3em 之间的行高看起来不错，尤其是当标题变为两行或更多行时。

标题字体样式

使用这些选项来更改标题的字体样式。

标题和正文字体

Divi 中的默认字体是Open Sans ，但 Divi Theme Customizer 有近百种字体可供选择！ 利用这些内置字体并测试哪些字体最适合您的主题。

设计提示：有关字体配对的灵感，您可以查看 fontpair.co，它有助于将 Google 字体配对在一起。 Divi 不会开箱即用地支持所有这些字体，但您可以搜索 Divi 支持的字体，以查看可以很好地协同工作的配对。

体链颜色

正文链接颜色由您的主题强调色继承。 但是您可以随时在此处更改它。

设计提示：如果需要，您可以使用其他 CSS 为所有正文链接添加下划线属性（请参阅文章末尾）。

正文颜色

您可以在此处更改正文的颜色。 纽约时报和 Smashing Magazine 等热门博客使用#333333作为正文颜色。 在我看来，这往往在白色背景下读起来更好。

标题文字颜色

您可以在此处更改标题的颜色。 如果你坚持使用黑色阴影，我会比正文更暗一点，以使其突出一点。 像#121212这样的东西会起作用。

背景

此选项为您的主题设置背景。 对于 Divi 主题，此选项实际上仅适用于框布局。 默认背景颜色为白色 (#ffffff)，除非您在此处更改。 如果您愿意，还可以添加背景图像。

这就是布局设置。 布局到位后，您可以开始查看更具体的元素。

标题和导航

标题和导航菜单可能是您主题中最重要的元素。 本节有很多选项可以创建您想要的几乎任何类型的标题。

标题格式

标题样式

只需单击一下，四种标题样式就可以让您的网站焕然一新。 这些样式包括居中、居中内嵌徽标、滑入式和全屏。

您还可以向您的网站添加垂直导航，这可能是一项独特的功能。 并且，您可以选择在滚动之前隐藏导航。 这对于想要突出显示首屏更多内容而不干扰导航栏的单页站点非常有用。

主菜单栏

您的主菜单栏是网站标题内的主菜单。 您可以完全自定义主菜单的外观。

设计提示：在开始使用 Divi 主题定制器完善菜单之前，您确实需要知道菜单链接将是什么。 不要忘记您将要设计一个响应式菜单的样式，所以请花时间确保菜单在所有屏幕尺寸上看起来都很棒。 您可以通过单击定制器底部的设备图标或简单地调整浏览器的大小来执行此操作。 如果您有兴趣，可以在此处了解如何修复响应式导航。

制作全宽

这将菜单扩展到浏览器窗口的整个宽度。

隐藏徽标图像

如果需要，您可以在此处完全隐藏菜单中的徽标图像。

菜单高度

在这里，您可以将菜单高度更改为您想要的任何高度。 尽管如此，请注意不要使菜单高度过大，因为您可能会在菜单而不是主页内容上浪费宝贵的空间。

徽标最大高度

在这里，您可以增加或减少徽标的最大宽度百分比以使其更大或更小。

文字大小、字母间距、字体、字体样式、文字颜色、活动链接颜色

这些选项允许您以任何方式自定义菜单链接。

背景颜色

这允许您更改主菜单的背景颜色。

设计提示：如果您为标题使用半透明（或完全透明）颜色，Divi 将自动将标题与下方的部分无缝重叠。 这创造了一个非常酷的效果。 例如，这是一个居中的标题样式，具有透明背景和正下方的全角标题。 注意 Divi 如何自动调整背景图像以很好地适应标题后面：

下拉菜单设置

您的下拉菜单不必继承主菜单的样式。 在这里，您可以为下拉菜单创建独特的设计。 您甚至可以在显示下拉菜单时添加自定义动画。

二级菜单栏

您可以在此处使用提供的选项自定义二级菜单栏。

启用后，二级菜单栏位于浏览器最顶部的主菜单栏上方。 它可以包含其他元素，包括电子邮件地址、社交媒体链接和二级菜单。

默认情况下，二级菜单将保持隐藏，除非您进入二级菜单或在标题元素部分下添加元素。 您可能需要保存并刷新主题定制器才能看到菜单。

固定导航设置

固定导航是指当用户向下滚动页面时菜单被“固定”或卡在浏览器窗口顶部的状态。 默认情况下，固定导航会缩小高度以提供更大的视口来显示站点内容。

设计提示：您还可以将固定主菜单背景颜色设置为半透明颜色，以显示其背后的一些内容。 这使得它的侵入性更低，但仍然可以访问。

标题元素

标题元素是您可以添加到标题的附加元素。 这些元素包括社交图标、搜索图标、电话号码和电子邮件。 除了搜索图标外，所有这些元素都将显示在二级菜单中。

社交图标

默认情况下，Divi 显示 Facebook、Twitter、Google+ 和 RSS 的图标。 您可以在 Divi 的主题选项中编辑这些配置文件。

页脚

默认情况下，页脚部分是隐藏的，除非由内容填充。 此外，页脚不应与底部栏混淆，底部栏默认显示在网站的最底部，包括页脚信用和社交图标。

布局

您可以在此处为页脚部分选择 5 种布局。

您还可以设置默认设置为#222222 的页脚背景颜色。

设计提示：此部分将显示在您网站的所有页面上（除非您选择空白页面模板）。 因此，使颜色更中性以匹配您网站的所有页面是有意义的。

小工具

如果您向页脚部分添加了小部件，您可以在此处设置这些小部件的样式。

小部件并不是 Divi 独有的。 这些内置于 wordpress 中，可以在Appearance > Widgets下的 wordpress 仪表板中找到。 在那里您可以看到四个页脚区域，您可以在其中添加小部件。 您添加到这些部分的任何小部件都将显示在页脚区域中。

但是，您也可以访问小部件区域而无需离开主题定制器（这是我最喜欢的事情之一）。

页脚元素

在这里，您可以选择在底部栏上显示您的社交图标，就像在二级菜单中一样。

页脚菜单

如果您有页脚菜单，则可以在此处设置样式。

底栏

底部栏位于您网站的最底部，默认情况下会显示您的页脚积分和社交图标。 您可以在此处自定义这些元素的样式，包括更改社交图标的字体大小和颜色。

编辑页脚积分

您还可以使用此框中所需的任何 html 替换默认的页脚信用。

纽扣

此部分控制您想要的默认按钮样式。

按钮样式

在这里，您可以为您的主题自定义按钮的样式。 我不会在这里详细介绍每个选项。 您可以访问我们关于按钮模块的文档，了解有关如何设置按钮样式的更多信息。

文字颜色

如果您注意到，默认情况下，按钮颜色由常规设置中设置的主题强调颜色继承。 这仅适用于文本设置为“深色”的模块。 当模块文本设置为“亮”时，按钮为白色。 但是，一旦您为按钮设置了自定义文本颜色，就会为某个模块中的深色和浅色文本版本设置此颜色。

设计提示：让您的主题重点颜色设置按钮的文本颜色，以便您可以保持在模块中添加按钮的深色和浅色版本的能力。

按钮悬停样式

您可以在此处自定义按钮悬停状态的样式。

让用户了解他们将要单击的实际上是一个按钮很重要。 添加悬停效果可以巩固这一点，并鼓励他们进行互动。 默认情况下，Divi 添加了浅色背景并为右侧的箭头图标设置动画。 但是，您可以将其更改为您想要的任何内容。

设计提示：将背景更改为更深或更浅的颜色并不像确保按钮以某种方式更改那么重要。 您还可以增加字母间距或调整边框半径，使您的按钮在悬停时具有独特的效果。

博客

邮政

此部分更改单个帖子中帖子标题内容的样式。 这不会改变博客页面或博客模块上博客摘录的外观。 有时，您的博客文章标题需要与网站其余部分的标题不同。 您将在此处进行这些调整。

如果您选择使用 Post Header Module，这些选项将无效。

移动样式

我喜欢这个部分。 您可以在此处调整您的网站在移动设备上的显示方式并实时查看结果。

平板电脑和手机款式

您可以选择平板电脑或手机，定制器右侧的窗口将自动调整以显示页面在设备上的外观。 然后就像我们在布局下的常规设置中所做的那样，您可以调整节高、行高、正文文本大小和标题文本大小。

设计提示#1：我喜欢为手机布局进行的一项自定义是将行高设置为“0”。 这会在手机上滚动时创建更好的内容流，因为它消除了行之间的间距。

设计技巧#2：找到适合您网站的字体比例。 这是我喜欢为我的标题遵循的一个很好的：

桌面：48px

平板电脑：40px

电话：32px

手机菜单

不要忽视这一点，否则您可能会错过为您的移动菜单创建一个完全独特的标题。 您可以仅在移动设备上隐藏徽标并更改背景和文本颜色。

配色方案

这些可以方便地快速解决。 但是，如果您打算稍后在主题定制器中更改其中一些颜色，我不建议使用这些配色方案。 一旦设置，这些颜色就不能在定制器中被覆盖，因为生成的 CSS 包含 !important 规则。

在我看来，最好将此设置保留为默认值。

菜单和小工具

您不再需要在 wordpress 仪表板中盲目编辑菜单或小部件。 现在，您可以添加和自定义这些项目，并在您的页面上实时查看它们。 我喜欢方便！

静态首页

默认情况下，WordPress 会在您的首页（主页）上显示您的最新帖子。 您可以将此部分更改为您想要的任何静态页面。 您还可以指定您的帖子页面（或博客页面）。

直到写这篇文章时我才知道这一点，但您实际上可以从主题定制器中部署一个新页面作为您的首页或博客页面，而无需离开定制器。

额外的 CSS

附加 CSS 部分提供了对主题设置进行最后润色的绝佳机会。 Divi Theme Customizer 无法控制的任何样式更改，您都可以在此处使用一些自定义 CSS 来完成。 因为定制器允许您实时查看 CSS 更改，所以您可以对主题进行必要的调整，而不是在外部样式表上来回切换。

其他 CSS 示例

示例 #1：调整所有标题的大小

附加 CSS 的一个很好的例子是为剩余的标题标签设置样式。 Divi 允许您自定义标题字体的设置，但这仅适用于您的 h1 标题。 您可以使用附加 CSS 框输入其余的标题标签（h2、h3、h4 等）自定义。 我喜欢使用以下比例：16、18、21、24、36、48。

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

示例 #2：将底部段落填充与正文线高度匹配

如果您将正文文本行高设置为 1.7em，您可能还想为段落之间的底部填充设置相同的值，以保持一致的基线网格和垂直节奏。 换句话说，段落之间的距离等于行高。 为此，您只需添加以下内容：

p { padding-bottom: 1.7em}

因为长度值 em 基于父字体大小，如果您在主题定制器中将基本字体大小更改为其他值，则 1.7em 值将相应调整。

示例 #3：向链接添加下划线属性

为正文链接添加下划线属性。

a {
    text-decoration: underline;
}

为您的下一个项目导出和导入 Divi 定制器设置

Divi 主题定制器具有可移植性选项，允许用户导出或导入定制器设置。 这为开发人员提供了一个很好的机会来制作一种定制器设置模板以用于他们未来的项目。

首先，我建议花点时间弄清楚您在构建网站时倾向于进行哪些自定义。 确定这些设置后，您可以将这些自定义设置输入到 Divi 主题定制器中，然后导出这些设置，以便您在下一个项目中处于领先地位。 当你已经可以完成相同的事情时，为什么还要一遍又一遍地做同样的事情？ 此外，这将有助于确保您不会跳过任何重要的自定义设置。

要导出您的设置，请单击 Divi 主题定制器顶部的便携性图标。

为您的导出文件命名，然后单击“导出 Divi 定制器设置”按钮

现在，您可以在未来使用此 .json 文件，方法是在 Divi 主题定制器中单击相同的可移植性图标并选择导入而不是导出。 然后您需要做的就是上传 .json 文件并单击“导入 Divi 定制器设置”。

就是这样。

Divi 定制器设置包括哪些内容？

定制器设置基本上包括前 7 个部分中的所有内容。

1. 通用设置
2. 标题和导航
3. 页脚
4. 纽扣
5. 博客
6. 移动样式
7. 配色方案

最后 4 个部分是 WordPress 特定的，不会延续到其他 Divi 安装。 这些部分包括：

1. 菜单
2. 小工具
3. 静态首页
4. 额外的 CSS

重要的是要注意附加 CSS 不会延续。 您可能会依赖这些设置来节省下一次构建的时间。 如果是这种情况，我建议使用该 CSS 创建一个子主题，以便您可以在下一个项目中使用自定义程序设置添加它。

如何存储 Divi 定制器样式

对于 Divi 定制器（以及 Divi Options 和 Divi Builder），Divi 提供静态 CSS 资源，这些资源可以被浏览器缓存以减少页面加载时间。 这意味着样式不会打印在页面上，而是存储在单独的静态 CSS 文件中。 每次保存定制器设置时，静态 CSS 文件都会更新。 这也包括您添加的任何附加 CSS。

闭幕式

Divi 主题定制器带有一些非常强大的选项，定制过程既方便又愉快。 更深入地了解这些选项的作用肯定会改善您使用 Divi 构建网站的方式。 如果您还没有，请花一些时间探索项目的最佳基线设置，将它们插入定制器，然后创建导出文件。 当您开始一个新项目时，您会惊讶于这会给您带来的提升（和信心）。

我期待在评论中收到您的来信。

干杯!