您应该牢记的 7 个 Divi UX 最佳实践

我认为我们都同意 Divi 的多功能性。 自定义和个性化您正在构建的任何网站有很多可能性。 如果您希望提高工作效率，这可能是您的理想职位。 我们将介绍您可能熟悉或不熟悉的 7 个 Divi UX 最佳实践。 我将分享的 7 个技巧是我个人在每天与 Divi 合作时经常使用并从中受益的一些技巧。

让我们开始吧！

1. 使用微动画

您可能要记住的第一个 Divi UX 最佳实践是使用微动画而不是过多的动画。 曾经有一段时间，网站拥有的动画越多，它在公众看来就越“定制化”或“先进”。 然而，那些时代已经过去了。 除了看起来很花哨之外，过多的动画对人们在您网站上的整体用户体验没有贡献。 事实上，它们常常会使访问者从真正重要的事情上分心。 选择微动画才是正确的选择。 Divi 的动画选项允许您自定义添加的任何动画的速度和强度。 创建微动画的关键是使用低动画强度和稍长的动画持续时间。

转到设计元素的设计选项卡

打开您选择的任何设计元素并转到高级选项卡。 在那里，您会找到动画选项。

使用少量动画强度

您可以选择任何动画类型并降低动画强度。 你走得越低，动画就越微妙。 通过增加动画持续时间，您将确保动画不会被忽视。

2. 手动优化响应

Divi 最大的优势之一是，您可以轻松地使您正在创建的任何布局都具有响应性。 事实上，Divi 已经为您完成了大部分工作。 从添加的那一刻起，您创建的所有内容都会变得具有响应性。 从那时起，唯一要做的就是手动更改设计元素。 例如，这包括根据屏幕大小更改您共享的副本的文本大小。

现在，行和列具有内置的预定义边距值，该值根据屏幕大小而变化。 但是您不一定必须使用这些默认值。 例如，我发现许多流行的网站在较小的屏幕尺寸上使用较少的左右边距。 这样，您可以水平放置更多内容，这意味着需要更少的垂直滚动。

用于较小屏幕尺寸的默认左右边距为 40px。 为了利用较小屏幕尺寸的整个宽度，我建议将此值替换为 25px。

让我们一步一步地完成这个过程。

更改行大小

您需要做的第一件事是通过在行的大小设置中启用以下选项来删除部分、行和模块之间的所有空间：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

添加部分或行填充

现在，我们仍然希望在节和行之间有足够的空间。 您可以选择是否要向正在处理的行或部分添加左右自定义填充。 将其添加到该行不会影响该部分中的其他行。 但另一方面，将其应用于部分将确保这些边距在整个部分中保持不变，无论您添加多少行。

• 左填充：23vw（桌面）、30px（平板电脑）、25px（手机）
• 右内边距：23vw（桌面）、30px（平板电脑）、25px（手机）

添加列填充

列和模块之间的空间也很重要。 您可以根据不同的屏幕尺寸自定义这些值。

• 第 1 列右填充：1vw（台式机）、0vw（平板电脑和手机）
• 第 2 列左填充：1vw（台式机）、0vw（平板电脑和手机）
• 第 2 列右填充：1vw（台式机）、0vw（平板电脑和手机）
• 第 3 列左填充：1vw（台式机）、0vw（平板电脑和手机）

减小文本大小

想要 100% 利用您在较小屏幕尺寸上获得的水平宽度吗？ 虽然从笔记本电脑的角度来看，13px 的正文大小可能看起来很小，但对于移动设备来说通常已经足够了。 结合上述步骤，尝试从您的手机查看 13px 的正文大小，您就会明白我在说什么！

3. 使用视口单位而不是像素

这也是我们在上一步中所做的事情之一。 为了确保您的网站在所有桌面屏幕尺寸上都保持响应，建议您使用视口单位而不是像素。 这将确保您的网站看起来很棒并且完全符合您的设计方式，即使在 27 英寸桌面显示器上也是如此。

另一方面，较小的屏幕尺寸与 15 英寸和 27 英寸桌面屏幕的差别不大。 在创建垂直重叠时使用视口单位可能会有所帮助，但坚持左右填充/边距的像素不会造成任何伤害。

4. 扩展文本方向的样式

人们会在您的网站上迅速注意到的一件事，甚至是下意识的，就是您在构建的设计中的一致性。 这包括但不限于您在整个页面中使用的文本方向。 Divi 的用户体验最佳实践之一是通过检查文本方向来完成设计。 如果经过深思熟虑和发挥作用，您肯定可以在页面中组合不同的文本方向。 但是，当您在一个特定部分中组合不同的文本方向时，这会变得更加困难。 最佳场景； 您在整个页面中保持一个文本方向。 但是，如果您想尝试更多，请尝试至少为每个部分保留一种文本方向。 您可以通过查看所有不同的设计元素来做到这一点，或者您可以使用 Divi 的效率功能之一来为您完成工作。

只需几个步骤，您就可以确保在整个页面或部分中使用相同的文本方向和一致性。

让我们来完成这些步骤。

打开任何包含文本的模块

打开页面上包含文本的任何模块并转到文本设置。

右键单击文本方向选项

右键单击您可以在文本设置中找到的文本方向选项，然后选择“扩展样式”选项。

在整个部分或整个页面中扩展选择的文本方向

现在，根据您希望文本方向在整个页面中的一致性，您可以选择在整个布局或特定部分中扩展您选择的文本方向。

5. 在 Visual Builder 和 Wireframe 模式之间来回切换

Divi 的 Visual Builder 的一大优点是您甚至不必在后端或前端编辑内容之间做出选择。 两者之间的转换实际上不到一秒钟。 我认为，如果将两者结合起来，您可以获得最佳水平的生产力和概览。 特别是如果您要处理布局中的多个重叠，切换到线框模式可以帮助您快速进行更改。 或者，如果您希望将某个设计元素拖放到页面上的其他位置，则可以通过切换到线框模式并拖动该特定元素而无需无休止地滚动，从而更轻松地实现。

您是否知道您可以打开设计元素的模态并在 Visual Builder 和线框模式之间切换，同时仍保持模态打开？ 这使您可以在设计的后端进行更改，并随时观察新的设计设置是否到位。

6. 直接在页面上导入/导出布局

到目前为止，我们都已经习惯了预制布局、保存的布局和 Divi 库。 但是假设您正在本地主机上处理特定页面，并且希望在完成后将其上传到实时网站，而无需经历以下麻烦：

• 将布局保存到您的 Divi 库
• 转到您的 Divi 库并导出 JSON 文件
• 转到您的实时网站的 Divi 库
• 上传 JSON 文件
• 转到您的实时网站页面
• 从您保存的布局上传 JSON 文件

然后，您只需使用页面上的导入/导出选项即可。 这将允许您创建一个 JSON 文件，而无需访问 Divi 库。

与导出布局的方式相同，您将能够将布局导入到新页面。 但是要知道，一旦选择了这种方法，您将无法将布局导入到实时网站上的 Divi 库中。 只能直接到一个页面。

7. 定期使用“缩小”选项以保持透视

这可能是我最喜欢的 Divi UX 功能之一。 我相信我们以前都做过； 打开一个新的常规选项卡或隐身窗口以查看我们制作的页面的结果。 然后，使用 Chrome 扩展程序或 Firefox 插件获取整个页面的打印屏幕。 所有这些都是为了让您对您正在处理的布局有一个全新的认识，并查看所有内容是否适合整个页面结构。

虽然我仍然建议偶尔这样做，但您不必在短时间内多次这样做。 相反，请使用 Visual Builder 中的缩小选项。 这不仅可以为您提供所需的视角，还可以帮助您快速更改，而无需离开页面。

最后的想法

在这篇文章中，我们向您展示了 7 种不同的 Divi 最佳实践，它们将帮助您在使用 Divi 创建网站时提高工作效率。 创建任何类型的网站时，这些提示肯定会派上用场！ 如果您有任何问题或建议，请务必在下方评论区留言！

精选图片由 aurielaki/shutterstock.com 提供