WordPress divi主题

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

by | May 16, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

让我们开始吧!

1. 使用微动画

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

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

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

Divi UX 最佳实践

使用少量动画强度

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

Divi UX 最佳实践

2. 手动优化响应

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

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

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

WordPress divi主题

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

Divi UX 最佳实践

更改行大小

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

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

Divi UX 最佳实践

添加部分或行填充

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

  • 左填充:23vw(桌面)、30px(平板电脑)、25px(手机)
  • 右填充:23vw(桌面)、30px(平板电脑)、25px(手机)

Divi UX 最佳实践

添加列填充

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

  • 第 1 列右侧填充:1vw(桌面)、0vw(平板电脑和手机)
  • 第 2 列左侧填充:1vw(桌面)、0vw(平板电脑和手机)
  • 第 2 列右侧填充:1vw(桌面)、0vw(平板电脑和手机)
  • 第 3 列左侧填充:1vw(桌面)、0vw(平板电脑和手机)

Divi UX 最佳实践

减小文本大小

想要 100% 利用较小屏幕尺寸上的水平宽度? 虽然从笔记本电脑的角度来看,13px 的正文大小可能看起来很小,但对于移动设备来说通常绰绰有余。 尝试在手机上查看 13px 的正文大小,结合上面的步骤,你就会明白我在说什么了!

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

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

fiverr建站WordPress程序员

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

4. 文本方向的扩展样式

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

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

让我们完成这些步骤。

打开任何包含文本的模块

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

独立站选品工具

Divi UX 最佳实践

右键单击文本方向选项

右键单击文本设置中的文本方向选项,然后选择“扩展样式”选项。

Divi UX 最佳实践

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

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

Divi UX 最佳实践

高质量外链购买

5. 在可视化构建器和线框模式之间来回切换

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

您是否知道您可以打开设计元素的模态并在 Visual Builder 和 Wireframe Mode 之间切换,同时仍保持模态打开? 这使您可以在设计的后端进行更改,并随时查看新的设计设置。

Divi UX 最佳实践

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

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

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

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

JasperAI 10000字免费额度试用

Divi UX 最佳实践

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

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

这可能是我最喜欢的 Divi UX 功能之一。 我敢肯定我们以前都做过; 打开一个新的常规选项卡或隐身窗口以查看我们创建的页面的结果。 然后,使用 Chrome 扩展程序或 Firefox 插件对整个页面进行打印。 所有这些都是为了让您对您正在处理的布局有一个全新的看法,并查看所有内容是否适合整个页面结构。

尽管我仍然建议偶尔这样做,但您不必在短时间内多次这样做。 相反,请使用 Visual Builder 中的缩小选项。 这不仅会为您提供您正在寻找的观点,而且还可以帮助您进行快速更改,而无需离开页面。

Divi UX 最佳实践

WordPress备份工具updrafplus

Divi UX 最佳实践

最后的想法

在这篇文章中,我们向您展示了 7 种不同的 Divi 最佳实践,它们将帮助您在使用 Divi 创建网站时提高生产力。 在创建任何类型的网站时,这些技巧肯定会派上用场! 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

aurielaki / shutterstock.com 的特色图片

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题