提高生产力和设计的 25 个“隐藏”Divi 功能

凭借多年来发布的所有强大的 Divi 功能，可以肯定地说，其中一些功能可能被忽略（或忽略）。 我们这些每天使用 Divi 的人有时会卡在我们的 Divi 方式中，需要一些可用的新功能的提醒。 而且，那些不熟悉 Divi 的人可能需要有人来了解那些“隐藏”在普通网站中的功能。 无论如何，无论您是 Divi 大师还是 Youngling，仔细查看 Divi 中的所有可用功能都不会受到伤害。 你可能只是学到了一些新东西！

在这篇文章中，我将重点介绍 25 个 Divi 功能，这些功能旨在提高生产力和设计，但可能没有引起许多用户的注意。 我知道并非所有这些功能对您来说都是新的（其中一些功能从 Divi 开始就已经存在），但我很确定其中一些功能会让您大吃一惊。

享受！

提高生产力和设计的 25 个“隐藏”Divi 功能

订阅我们的 YouTube 频道

#1 搜索选项搜索栏

好吧，这并不是真正的“隐藏”，但我怀疑你们中的一些人没有使用这个功能的习惯。 我得到它。 旧习惯很难改掉，但绝对值得将此搜索栏纳入您的工作流程。 如果您需要向模块添加自定义填充，不要满足于单击设计选项卡，向下滚动，打开大小切换，然后添加自定义边距。 只需在搜索选项栏中输入“margin”，您就在那里！ 想要确保所有字体都与某个模块匹配吗？ 只需在搜索选项栏中键入“字体”一词，然后在一个小列表中更新正文字体、标题字体和按钮字体。

提示：您不必在搜索前单击特定选项卡。 无论您在文本设置中的哪个位置，搜索结果都将从所有三个选项卡的所有选项中提取。

添加新模块时也可以找到搜索栏。 只需开始输入您想要的模块的名称，您的模块就会出现在列表的顶部，而无需滚动查找。

#2 将渐变放置在背景图像上方

这是一个很棒的功能，可以改进设计过程。 向图像添加渐变叠加是网页设计中的必要条件，此功能可以轻松地在 Divi Builder 中添加这些叠加。 只需将背景图像添加到您的模块，然后添加渐变背景颜色组合。 在渐变背景选项下，选择“在背景图像上方放置渐变”。 只需确保您的渐变颜色具有一定的不透明度，以便您可以看到渐变后面的图像。 使用 Visual Builder，您可以轻松地将渐变调整为背景图像的完美不透明度和颜色。

#3 交替你的两种渐变背景颜色：有一个按钮。

这不是一个大功能，但我想提一下它，因为我晚上无法入睡，因为我知道你们中的一些人仍在手动切换这些颜色代码。 获得正确的渐变背景有时可能具有挑战性，因此有这样的选项是很好的。

要交替您的颜色，只需将鼠标悬停在颜色选择器上，然后单击“颜色交替”（不确定官方术语）图标。 下一个也是删除图标。

#4 键盘快捷键

这些很容易错过，也经常被遗忘。 但是，如果您承诺使用它们，它们将加快您的工作流程。 与不使用快捷键所花费的时间相比，使用快捷键节省的时间可能相当可观。 我的意思是，我们学习打字而不是满足于手写是有原因的（尽管我确实喜欢手写）。 建立网站也是如此。

您可以在 Divi Builder Helper 模式中找到键盘快捷键列表。 只需在 Visual Builder 中的键盘上键入问号 (shift + ?)，然后单击快捷键选项卡。

哦，是的，可以通过相同的方式访问帮助文档视频。 让我们不要忘记那些。

这是所有可用快捷键的列表。 我已经强调了我建议开始的那些（我个人一直使用这些）：

#5 线框视图

我提到这个是因为它填补了在使用可视化构建器进行设计时必须进行后端构建的空白。 因此，对于所有后端构建器死忠的人，您可以考虑向可视化构建器迈进。

并且不要忘记打开和关闭线框视图的快捷键：shift + w

要在 Wireview 中获得更广泛的布局视图，您可以选择每个部分或行上的切换箭头图标以折叠整个部分。

#6 内联编辑

有几个地方可以进行内联编辑。 当您使用 Visual Builder 并且想要编辑某个模块内的文本时，您不必单击编辑模块设置来更改内容。 只需单击文本，内联编辑器就会部署，允许您编辑文本。

当您在 Visual Builder 中使用线框视图时，您还可以内联编辑标签。 想要更改部分标签的名称？ 您不必从行设置模式或右键单击选项中执行此操作。 只需单击标签并在那里进行编辑。

提示：退出内联编辑器可能会令人困惑，但并非必须如此。 只需按 esc 键即可退出。

#7 使用右键单击选项的 Visual Builder 拆分测试

我总是惊讶于在 Visual Builder 中使用拆分测试功能是多么容易。 我不打算在这里详细介绍，因为您可以阅读完整的功能版本。 但是，这是其工作原理的要点。 右键单击要测试的部分、行或模块，然后从右键单击菜单中选择拆分测试。 然后选择测试的目标（联系表单输入、按钮点击等...）。 Divi 将自动创建另一个版本（拆分）您正在测试的元素，以便您可以创建新版本。 当第一次测试这个功能时，我不明白如何从可视化构建器中看到我的拆分测试的两个版本，所以我打开了线框视图来查看这两个版本。 但这不是必须的。 激活拆分测试目标后，您会注意到设置菜单中会出现箭头，可让您浏览拆分测试的不同版本。

#8 可定制的生成器设置

如果您还没有探索过构建器设置，现在还为时不晚。 这里有一些有用的设置，可以改善您与 Visual Builder 的日常交互。

这里有三个我想强调的。

设置模态默认位置

我不了解你，但我有一定的偏好，我喜欢我的模态框在我的大显示器上进行编辑时如何弹出（如果你想知道，这是固定的左侧边栏位置）。 但有时我需要打破传统并更改模式位置（通常是在我的笔记本电脑等较小的屏幕上进行编辑时）。 所以我将默认位置设置为固定左侧边栏。 这样，在我意识到需要将它放回我喜欢的方式之前，我就不会沉迷于使用我不舒服的模态位置。

将设置分组到关闭的切换中

默认情况下，Divi 会将您的设置选项分组到切换中。 这意味着您必须单击以打开这些切换按钮才能查看每个选项中的选项。 您可以禁用该功能，以便您的设置不再分组到切换中，从而允许您滚动浏览设置而无需单击以查看更多内容。

Builder 默认交互模式

像本文列出的许多功能一样，这个绝对是个人喜好。 但我可以看到每个人的好处。 默认悬停交互模式突出显示并部署悬停时任何部分、行或模块的设置菜单。

点击模式也很有用。 有时，可能不清楚您正在编辑或悬停在哪个模块上，尤其是当模块关闭在一起和/或具有自定义边距时。 单击模式通过在单击以编辑模块之前突出显示和概述悬停时的模块内容来完全消除猜测。

网格模式将一次突出显示并显示所有部分、行和模块的设置菜单。 虽然我个人并不默认使用这种模式，但当我在整个页面中移动/重新排列元素时，我确实看到了使用网格模式的价值。

#9 带有文本模块的链接、列表和块引用设计选项

不要忘记用于在 Divi 的文本模块中管理自定义文本样式的新选项卡式界面。 这些选项卡允许您自定义链接、列表（无序和有序）和块引用的设计。 使用 CSS 进行这些更改可能会很麻烦。 另外，您可能希望在模块之间切换。 这些选项使您可以轻松地做到这一点。

以下是您可能忽略的两个我最喜欢的选项。

列表样式选项

在 Unordered 和 Ordered Lists 选项卡下，您可以轻松更改列表样式类型或将其全部删除。

您还可以更改列表项的缩进边距和样式位置。

块引用样式选项

在 Blockquote 选项卡下，您可以更改将 blockquote 分开的设计元素的边框粗细和颜色。

#10 所有 6 个标题级别的设计选项

与上面的#9 相同，文本标题级别也存在新的选项卡式界面。 这意味着如果您有一个带有多个标题（h1、h2、h3 等）的模块，您可以在模块设计设置中为每个标题设置一个独特的样式。 在“设计”选项卡下，切换打开“标题标题”或“标题文本”部分，然后选择控制要自定义的标题类型的选项卡。

提示：您将知道选项卡上的蓝色标签自定义了哪些标题级别。 如果标签保持灰色，则该标题级别的默认设置处于活动状态。

#11 使用 Divi 模块上传自定义字体

谁知道？ 也许对于你们中的一些人来说，上传按钮一直隐藏在普通网站中。 如果是这样，您绝对应该利用这个方便的功能。 您不仅可以轻松上传各种文件类型（eot、woff2、woff、ttf、otf）的自定义字体，Divi 还会为您存储这些自定义字体，以便它们可用于整个站点的所有模块。

您需要做的就是选择更改文本元素的字体，然后单击上传按钮。

将弹出一个上传字体模式，允许命名和添加您的字体文件。

选择文件后，单击上传按钮。 然后，您将能够从 Divi Builder 中包含的相同字体列表中访问这些自定义字体。

#12 删除图像下方的空间

此功能已经存在一段时间了，但您可能已经错过了它，或者您可能不了解它的重要性。

此选项仅影响作为列中最后一个模块的图像。 启用后，图像底部与下一部分之间的距离将被移除，从而允许图像与页面上下一部分的顶部相接。

利用此功能的一种方法是定位您的标题图像，以便它们与下面的部分接壤。

#13 为不同的输入添加不同的单位

默认情况下，当您在整个 Divi Builder 设置中为某些输入输入数字时，Divi 会将其视为像素单位。 但您不仅限于为这些输入选项输入像素单位。 您还可以输入其他单位，包括 %、em、vh 和 vw。

例如，百分比非常适合移动设备。 如果您在桌面上将顶部边距设置为 5%（而不是 100px 之类的值），边距将按比例缩放到移动设备上部分大小的 5%（而不是继承 100px 的大间隙，这会占用太多空间在移动）。 这是一种很好的技术，可以在不同的浏览器尺寸上保持部分折叠。

您甚至可以使用单位组合。 您可能希望通过将顶部和底部边距设置为特定像素数，然后将左右边距设置为特定百分比来保持高度固定。

您需要做的就是在填写不同的输入时输入带有您的号码的单位后缀。

#14 历史状态

历史状态有点像您在 Divi 构建器中进行编辑的时间机器。 您可以通过单击设置菜单中的编辑历史链接来方便地查看编辑列表，而不是使用撤消和重做右键单击选项或热键。

此功能的酷炫之处在于它列出了历史状态列表中每个编辑的时间戳和简短描述。

此外，如果选择历史状态返回到过去状态，您可以随时重新访问列表以前进到您所做的最新编辑。 基本上，它允许您在以前的编辑中前后移动，同时使用 Visual Builder 实时查看这些更改。

请记住，这些历史状态保存为 Backbone 集合/Javascript 对象，不会保存到您的数据库中，也不会使您的数据库膨胀。 因此，如果您在编辑页面时退出构建器，您将无法恢复之前创建的历史状态。 因此，请确保在完成设计之前保持建筑物开放。 历史状态在您加载页面/构建器时开始。

#15 自定义装订线宽度选项（非常适合网格布局）

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

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

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

这在设计网格布局时绝对派上用场。 可以使用列结构和模块手动创建网格布局，但您也可以在某些模块（如投资组合模块和博客模块）中自动分配网格布局。

例如，假设您想创建一个全角网格布局来显示图像，它们之间没有任何间距。 您可以创建一个包含三列的新行，将图像添加到您的列中，使行全宽，然后将其自定义装订线宽度设置为 1。

#16 右键单击​​选项

功能位置：只需右键单击 Divi Builder 中的任何部分。

虽然我不会在这里介绍所有的右键单击选项，但我想指出几个仅在右键单击时才可以访问的选项，这些选项太方便而无法忽略。

锁

作为管理员，您可以单独锁定某些项目。 这是一种方便的方法，可以防止您的编辑人员更改您想要更改的内容。 它还可以防止您意外更改重要部分。

折叠和重命名

当我构建更长的网页时，我喜欢结合使用这两个选项。 我不了解你，但我真的厌倦了上下滚动以找到我需要编辑的部分。 这就是为什么我使用右键单击折叠选项来压缩已完成的网页的大部分内容。 折叠后，我使用右键单击选项重命名该部分以获得可识别的管理标签。

#17 禁用顶级下拉菜单链接

功能位置：Divi → 主题选项 → 导航 → 常规设置

需要明确的是，顶层下拉菜单链接是在导航菜单上保持可见的主要父链接。 子层链接是将鼠标悬停在顶层父链接上后显示的链接。

通过禁用顶层下拉菜单链接，顶层父链接不再是可点击的链接。 相反，它们可以作为不可点击的占位符来标记和组织您的子链接。

例如，假设您正在为一家提供三种主要服务的公司构建一个站点，而这些服务中的每一种都需要自己的页面。 正常的设置是有一个名为“服务”的顶级链接，其中三种类型的服务作为子菜单项。 不必处理链接到一般服务页面，您可以禁用顶层“服务”链接并将其用作组织标签。

#18 替代滚动到锚点方法

功能位置：Divi → 主题选项 → 导航 → 常规设置

如果您曾尝试使用来自外部页面的锚链接直接链接到 CSS ID，您可能已经注意到页面的最终静止位置不太正确。 有时它太低，以至于某些内容在顶部被切断。

这是从外部页面链接到我的 CSS ID 后我的屏幕的样子。 您看不到它，但该部分的标题已被截断。

启用 Alternative scroll-to-anchor 方法可以解决此问题。 它不仅将用户置于正确的位置，而且在滚动到 CSS ID 之前首先加载页面顶部。 我发现这对于可能会感到困惑并且最初没有意识到他们正在查看页面的一部分的用户很有帮助。

#19 在移动设备上隐藏徽标

功能位置：Divi → 主题定制器 → 手机样式 → 手机菜单

如果您需要在移动设备上隐藏徽标，Divi 可以让这一切变得非常简单。 但它是容易被忽视的选项之一。 为自己节省一些时间，不要担心弄乱额外的 CSS。

#20 主菜单和二级菜单下拉动画

主菜单功能位置：Divi → 主题定制器 → 标题和导航 → 主菜单栏下拉菜单动画

二级菜单功能位置：Divi → 主题定制器 → 标题和导航 → 二级菜单栏 –> 下拉菜单动画

您不必满足于下拉菜单的默认淡入淡出动画。 下拉菜单动画部分包括四个选项：

1.淡入淡出（默认）

2. 展开

3. 滑动

4. 翻转

有时像这样的微交互真的可以让你的菜单脱颖而出。

#21 编辑（或禁用）页脚积分

功能位置：Divi→主题定制器→页脚→底栏→禁用页脚信用/编辑页脚信用

如果您已经使用 Divi 一段时间了，您可能已经习惯了通过编辑子主题中的 footer.php 文件来编辑页脚的底部栏。 这不再是必要的。

您可以轻松地完全禁用底部栏，或者您可以通过在文本框中输入文本或 html 来插入自己的页脚学分。

#22 更改 Divi 的默认调色板

功能位置：Divi → 主题选项 → 常规选项卡 → 颜色选择器默认调色板

暂时停止复制和粘贴十六进制颜色代码。

颜色选择器默认调色板是将在整个 Divi Builder 中使用的调色板。

如果您知道网站的颜色主题，只需更新默认颜色以包含您的设计所需的颜色。 从长远来看，此选项可以为您节省大量时间，因为在构建和编辑站点时，您可以在所有模块中访问这些颜色。

#23 Divi 的页面设置

位置：Visual Builder 底部设置菜单中的齿轮图标。

从 Divi 2.7 开始，Divi Builder 设置允许您为您在 Divi Builder 中处理的特定页面设置默认设置（并覆盖主题设置）。 这种设置页面特定设置的能力对于构建登录页面或其他需要偏离规范的特定设计的页面来说非常方便，可以节省时间。

您可以为您的页面设置一个调色板，它将覆盖您的主题选项中的默认调色板。

您还可以添加页面特定的自定义 CSS。 由于 CSS 只会在特定页面上加载，因此您无需经历定位特定帖子 ID 或访问子主题 style.css 文件的麻烦。

Divi Builder Settings 的一项独特功能是能够为您的页面启用 Divi Leads 拆分测试系统。 这个强大的工具非常有价值，不容忽视。 如果您还没有使用过，请采纳我的建议，今天就开始您的第一次测试吧！

#24 选择要在博客文章上显示的元信息

虽然这个 Divi 功能从 Divi 开始就已经存在，但很容易被忽视。 您的每篇博客文章都有特定的元信息，显示在文章标题（作者、类别、日期、评论）下。 但是，根据您使用博客的方式，您可能不希望这些额外的信息分散您提供的内容的注意力。 Divi 可以轻松为您自定义此信息。

更改单个帖子布局的元信息

位置：Divi → 主题选项 → 布局（选项卡）→ 单个帖子布局

您可以轻松地单击以禁用或启用所有单个博客文章的四个元信息中的每一个，方法是单击它们中的每一个。 禁用的元信息将显示为淡出。

更改博客页面帖子摘录的元信息

位置：Divi → 主题选项 → 布局（选项卡）→ 常规设置

要更改博客页面文章摘录上显示的元信息，只需单击要显示或隐藏的四个元项目中的每一个。

如果您的博客页面使用的是 Divi 博客模块，则上述设置将不起作用。 您需要更改要在博客模块常规设置中显示的元信息。

#25 代码模块

代码模块是 Divi 最好的隐藏功能之一。 它使您能够不受限制地将 html 添加到您的页面。 该模块还允许您将 html 元素添加到某些页面而不影响其他页面。 代码模块的功能无穷无尽，但您可以通过以下几种方式使用它：

• 只为需要动画的页面导入 Animate.css 等外部 css 文件。
• 添加仅适用于页面的 javascript 代码块或库。
• 集成第三方插件，如革命滑块。
• 您可以使用 Fullwidth Code Module 嵌入 Typeform 以获取更多交互式问卷、联系表格等......
• 添加浮动操作菜单
• 创建一个滑入式顶栏广告。
• 添加浮动操作按钮。

在结束

第一次学习某些东西时，有时会感觉像是从消防栓里喝水，而有些东西您无疑会错过并需要复习。 我在这篇文章中的目标是回顾一些我认为很容易错过并且非常有用而不容忽视的 Divi 功能。

您是否有任何您认为应该在列表中的功能？ 请分享，我相信我们都会受益。

我将期待您的评论。