了解 Divi 5 界面：8 项更改和改进

Divi 5 引入了许多改进，不仅在幕后，而且在您与 Visual Builder 交互的方式上。虽然长期用户可能会觉得整体界面很熟悉，但为了提高效率并使网站建设更快、更直观，我们进行了一些增强功能。

在这篇文章中，我们将探讨 Divi 5 界面的主要变化和改进，这些变化和改进旨在简化您的工作流程并增强您的设计体验。

了解有关 Divi 5 Public Alpha 以及如何下载的更多信息。

下载 Divi 5 公共 Alpha 版

Divi 5 界面的主要变化

一键编辑

Divi 5引入了一种简化的交互方式：一键编辑。在 Divi 4 中，您必须小心单击模块内的小图标才能访问其设置。有时，这些图标重叠或很难找到，导致沮丧和不必要的步骤。

运作原理：
您现在可以单击模块上的任意位置来访问其设置，而无需单击特定的小图标。单击后，设置面板会立即打开，无需查找特定图标或菜单。

好处：
这减少了访问设置所需的点击次数，节省了时间并使设计过程更加顺畅，尤其是在页面上使用多个模块时。

现实生活中的例子：
想象一下您正在开发一个包含许多文本和图像模块的复杂主页。在 Divi 4 中，您必须单击每个模块上的小齿轮图标才能打开设置面板。使用 Divi 5，您只需单击任何文本块或图像即可直接对其进行编辑，从而加快了流程并使其感觉更加流畅和直观。

右键单击控件

在 Divi 5 中，右键单击任何模块以调出上下文菜单的功能改变了高效设计的游戏规则。您现在可以立即访问各种设置，而无需浏览多个菜单或层。

运作原理：
右键单击任何模块或部分以打开自定义上下文菜单。此菜单提供用于复制模块样式、调整设置、将模块保存到库等的选项。

好处：
这显着加快了任务的速度，例如跨模块复制样式或进行快速调整，而无需在侧边栏搜索正确的设置。

现实生活中的例子：
假设您正在构建一个作品集页面，并且想要将相同的样式应用于多个图像库。在 Divi 4 中，您必须手动调整每个图库的设置。在 Divi 5 中，您可以右键单击图库模块，复制其设计设置，然后右键单击另一个图库以粘贴样式。这可以节省时间并确保设计的一致性。

多面板对接和选项卡面板

Divi 5 最强大的功能之一是引入了多面板对接和选项卡式面板。在 Divi 4 中，管理复杂的设计可能会让人感到不知所措。单面板设置意味着不断在不同的设置之间切换，使您的工作空间变得混乱并且难以同时处理多项任务。

运作原理：
在 Divi 5 中，您现在可以同时打开多个设置面板并将它们并排停靠。当处理页面的不同部分并需要同时快速访问多个设置时，这尤其有用。您还可以将面板组织成选项卡，以便在它们之间轻松切换，而不会丢失您的工作。

好处：
此功能非常适合多任务处理，因为它允许您保持不同的设置面板打开并准备好进行调整，而无需关闭一个设置面板来打开另一个设置面板。

现实生活中的例子：
想象一下您正在设计具有复杂设置的登录页面的场景。您正在调整英雄和 CTA 区域的设计。在 Divi 5 之前，您必须不断在构建器设置和图层面板之间切换。现在，您可以单击并并排拖动它们，从而提供一种更有效地设计页面的快速方法。

明暗模式

Divi 5 新增了备受期待的浅色和深色模式，允许用户根据环境在主题之间切换。此功能不仅仅涉及美观，还涉及在长时间的设计过程中提高舒适度和可用性。

运作原理：
您可以从构建器设置中在浅色模式和深色模式之间切换。这使您可以在最适合您环境的主题下工作，从而减轻眼睛疲劳。

好处：
工作到深夜或在弱光环境下的设计师现在可以切换到黑暗模式，这可以减少眩光并使编辑体验更加舒适。相反，喜欢更明亮工作空间的用户可以坚持使用浅色模式。

现实生活中的例子：
如果您曾经在深夜从事过一个项目，您就会知道明亮的界面有多么刺眼。在 Divi 5 中，您可以切换到深色模式，以将注意力集中在设计上，而不会伤害您的眼睛。这是一个简单的改变，但它对舒适度和生产力产生了巨大的影响。

响应式、悬停式和粘性编辑改进

在 Divi 的早期版本中，响应式编辑、悬停效果或粘性定位需要在选项级别启用这些功能。 Divi 5 通过使这些设置更易于访问和实施来简化此过程。

运作原理：
这些功能现在可直接在设置面板中使用，使您可以更快地进行调整，而无需先启用它们。您现在可以轻松应用响应式设计设置、悬停效果或粘性定位，无需额外的步骤。用户可以在默认、悬停、粘滞和响应状态之间切换，而无需打开单独的控件或激活单独的模式。

好处：
这可以节省使用高级设计效果的时间，从而更轻松地即时应用响应式设置、悬停效果或粘性定位。

现实生活中的例子：
假设您正在创建一个具有悬停效果的号召性用语按钮。在 Divi 4 中，您首先必须启用悬停设置，然后才能应用效果。在 Divi 5 中，悬停选项直接内置于设置面板中，因此您可以立即添加效果，从而简化设计过程。

设置面板面包屑

在 Divi 4 中的模块的嵌套设置中导航常常会让用户对自己所在的位置感到困惑。如果没有清晰的返回路径，在进行调整时很容易迷失方向，尤其是在更复杂的设计中。 Divi 5 引入了一项新功能：设置面板中的面包屑。这个小但有用的添加使浏览不同层的设置变得更加容易，特别是在使用复杂的模块时。

运作原理：
面包屑显示在设置面板的顶部，向您显示当前正在查看的设置的层次结构。您可以通过单击面包屑链接快速跳回到之前的级别，从而可以更快地导航而不会丢失您的位置。

好处：
面包屑使复杂模块设置的导航变得更快、更直观，减少了回溯或搜索特定选项所花费的时间。无需关闭或重新打开各种设置。只需点击您想要编辑的区域，Divi 就会快速打开您想要编辑的模块，无需麻烦。

现实生活中的例子：
想象一下，您正在编辑一个定价表模块，其中包含多个层级和每个层级的设置。在 Divi 4 中，您可能会发现自己点击了多个面板，却忘记了自己所在的位置。借助 Divi 5，面包屑可引导您返回设置，从而更轻松地在不同定价等级之间跳转并快速进行调整。

画布缩放

对于从事响应式设计的用户来说，缩放画布的功能是 Divi 5 最有用的功能之一。在 Divi 4 中，针对不同屏幕尺寸进行设计可能会很麻烦。用户通常必须调整浏览器窗口大小或手动切换视图才能查看其设计在较小设备上的外观，从而为该过程添加了不必要的步骤。

运作原理：
Divi 5 允许您直接在构建器中缩放画布。您可以调整画布的大小，以查看您的设计在不同断点处的外观，而无需调整浏览器窗口的大小。

通过画布缩放，您可以在桌面、平板电脑和移动视图之间快速切换，实时调整您的设计，以确保它在每个屏幕上看起来都很完美。这可以节省您的时间并消除猜测，使响应式设计更快、更直观。

好处：
这对于设计响应式布局特别有用，因为它允许您进行实时调整，而无需不断在设备或断点之间切换。通过放大和缩小的功能，用户可以更好地控制设计元素或立即获得整个网页的概览。

现实生活中的例子：
如果您正在设计一个主页，需要在桌面和移动设备上都具有良好的外观，您可以在 Divi 5 中缩放画布，以预览您的设计在移动设备上的外观，而无需调整浏览器窗口或离开构建器。这使得响应式设计更快、更准确。

较小的对接面板且无重叠

Divi 5 最显着的改进之一是引入了更小的停靠面板，旨在消除模态窗口造成的持续中断。以前，用户必须处理频繁打开和关闭的模式，这常常会妨碍用户并需要进行调整才能看到完整的布局。 Divi 5 通过更干净、更精简的方法解决了这个问题。

运作原理：

Divi 5 中新的、更小的停靠面板提供了一种与 Visual Builder 交互的更有效的方式。 Divi 5 引入了紧凑的对接面板系统，而​​不是阻碍您视线的大型浮动模态。面板固定在构建器界面的侧面，确保它们不会干扰您的工作空间。

好处：

通过使用停靠面板，用户可以防止其工作流程不断中断。设置始终可见，让您可以快速进行更改，而无需进行不必要的点击或导航。不仅如此，停靠面板还提供了更干净、更有条理的工作空间。您可以管理多个任务，同时停靠多个面板，并在不同的工具和设置之间轻松切换，让您成为更高效的设计师。

现实生活中的例子：

想象一下，您正在为一家杂货店设计复杂的布局。您的任务包括更改多个部分、调整颜色、添加动画以及确保设计具有响应能力。通过不美观的工作空间，您可以更多地专注于任务，而不是在工作时关闭侵入性模式。

精益、平均且免费的动画

Divi 5 的设计精益求精、刻薄且无动画，去掉了任何不能直接让用户受益的内容。 Divi 5 并没有被不必要的功能或华而不实的效果所拖累，而是纯粹专注于性能和可用性。

运作原理：

Divi 5 已从头开始重建，重点是消除臃肿、过时的代码。结果是一个更快、更高效的构建器，可以提供更流畅的性能，同时减少加载时间和服务器资源。重点不是依赖分散注意力的动画，而是让内容占据中心舞台。由于这种方法，Visual Builder 加载速度更快，并提供干净、专业的用户体验。

好处：

Divi 5 界面直观、响应灵敏，并且仅提供构建和自定义网站所需的工具。 Visual Builder 的作用是帮助设计师创建令人惊叹的网站，而不是与他们正在创建的内容竞争。

现实生活中的例子：

想象一下，你的任务是为当地一家餐馆建立一个网站。客户没有很大的预算，所以你必须提高效率才能获得丰厚的利润。通过利用 Divi 5 构建您的网站，您将使用更快、更精简的构建器来节省时间，该构建器允许您设计网站，而不会分散注意力的动画或滞后的构建体验。

速度与性能

Divi 5 进行了重大的性能改进，带来了比 Divi 4 更快、更流畅的 Visual Builder 体验。这种改进的体验带来了更快的加载时间、改进的重新渲染速度，并消除了构建器中拖慢速度的不必要的动画。

运作原理：

Divi 5 的底层架构已经通过完整的框架检修进行了彻底的重新设计，以优化性能和响应能力。它通过减少 JavaScript 负载来实现这一点，这意味着只加载必要的脚本。 Divi 5 不再依赖短代码；相反，它是基于块的，以使事情变得更快。

好处：

有了新的框架，Visual Builder 几乎可以立即加载，消除了双重加载，同时改进了重新渲染。对模块、行或部分的更改会立即显示。 Visual Builder 对响应式视图之间的切换反应更快，更好地处理复杂的布局，并允许用户实时查看设计调整。

现实生活中的例子：

想象一下编辑一个带有复杂动画和代码的长格式登陆页面。在 Divi 4 中，您在进行设计更改时可能会遇到延迟，尤其是在响应式视图模式之间切换或添加新模块时。在 Divi 5 中，该过程更加流畅且响应更加灵敏，让您能够专注于设计而不会受到干扰。

与 Divi 4 的比较

虽然 Divi 5 引入了各种界面增强功能，但了解这些更改与之前版本相比有何变化非常重要。让我们看看 Divi 5 相对于 Divi 4 的一些关键改进：

一键编辑与基于图标的编辑：

在 Divi 4 中，您必须单击小图标才能访问模块设置，这些设置可能很难找到或与其他元素重叠。

Divi 5 通过一键编辑简化了这一过程。您可以单击模块上的任意位置来访问其设置。

右键菜单与分层选项：

Divi 4 要求用户浏览多层设置以找到他们需要的控件。

在 Divi 5 中，右键菜单允许即时访问设置，提高效率并加快设计过程。

选项卡式面板和多面板对接：

Divi 4 采用单面板设置，这可能会使使用多个设置变得很麻烦。

Divi 5 引入了多面板对接和选项卡式面板，使用户能够更轻松地执行多任务和管理复杂的设计。

浅色模式和深色模式：

Divi 4 仅提供浅色模式，而 Divi 5 则引入了浅色和深色模式，根据用户偏好和照明条件提供更舒适的编辑环境。

响应式设计的画布缩放：

在 Divi 4 中，需要调整浏览器大小才能预览响应式设计。 Divi 5 允许您直接在构建器中缩放画布，从而使响应式设计调整更快、更准确，从而使此过程更加高效。

响应式、悬停式和粘性编辑：

在 Divi 4 中，这些模式必须单独启用，需要更多步骤（和时间）。

Divi 5 使这些流程易于使用，无需在选项级别激活它们，从而简化了这些流程。

较小的对接面板且无重叠

在 Divi 4 中，每当您想要调整设计时，模态框就会出现，从而使界面变得混乱，通常需要用户移动它们来进行设计。

在 Divi 5 中，面板停靠在页面的两侧，使您可以更轻松地专注于正在处理的设计。

精益、简朴且无动画的界面

在 Divi 4 中，界面充满了笨重的动画，可能会减慢 Visual Builder 的速度。这可能会分散注意力并影响设计体验。

在 Divi 5 中，这些都被剥离，呈现出干净、快速的界面，没有动画或干扰。

性能和速度：

在 Divi 4 中，Visual Builder 是标志性的，但有时感觉有点慢，特别是在视图模式之间切换时。

在 Divi 5 中，Visual Builder 的速度和响应速度更快，元素的重新渲染速度更快、更流畅。

这些变化如何影响工作流程

Divi 5 中的界面更改旨在简化您的工作流程并使设计过程更加高效。以下是这些改进如何转化为现实效益的一些示例：

通过一键单击和右键单击控件进行更快的编辑：

一键编辑和右键菜单大大减少了浏览菜单所花费的时间。例如，如果您正在处理包含多个模块的页面，现在只需右键单击或直接单击模块即可快速访问设置。这意味着花在寻找选项上的时间更少，而花在设计上的时间更多。

通过可停靠面板改进多任务处理：

多面板对接可以更轻松地同时处理多个设置。例如，您可以在调整另一个模块的同时保持一个模块的设计设置打开，从而使您能够有效地处理复杂的设计，而无需在设置面板之间不断切换。

使用选项卡式面板更好地组织：

在处理具有多个设计元素的大型项目时，选项卡式面板特别有用。您可以将设置组织到选项卡中，这有助于保持工作区整洁并最大限度地减少滚动或在选项之间切换的需要。

使用明暗模式进行舒适的编辑：

明暗模式之间的切换可以带来更舒适的编辑体验。无论您是在明亮还是昏暗的环境中工作，Divi 5 都能满足您的需求，在长时间的设计过程中减轻眼睛疲劳并提高注意力。

通过画布缩放使响应式设计变得更容易：

在处理响应式布局时，画布缩放可以节省大量时间。您无需不断调整浏览器窗口大小以在不同断点预览设计，而是可以直接在构建器中调整画布，从而更轻松地创建在任何设备上看起来都很棒的响应式网站。

这些变化虽然很微妙，但却对您与 Divi 的交互方式产生了重大影响，并最终加快了整体设计过程。

接下来会发生什么……

当我们结束对 Divi 5 界面的探索时，请继续关注明天的帖子，我们将深入探讨Divi 5 的前端性能改进。我们将探讨重写的 Divi 框架如何显着减少加载时间、增强服务器响应并全面优化用户体验。

您不会想错过速度和性能的提升，使 Divi 5 成为构建闪电般快速网站的游戏规则改变者。

对于许多 Divi 4 用户来说，创建漂亮的网站有时会遇到令人沮丧的时刻 - 单击小图标、浏览层层菜单以及处理多个设置。 Divi 5 改变了这一切。它注重速度、简单性和可用性，引入了一系列界面改进，使您的设计工作流程比以往更加顺畅。

探索新的 Divi 5 界面，看看它如何将那些旧有的挫败感转变为更快、更直观的体验！

结论：更好的设计体验的承诺

Divi 5 的界面变化不仅仅是新功能。它们是许多用户在 Divi 4 中遇到的日常挫折的解决方案。例如，Divi 5 通过一键单击和右键单击控件提供更快、更直观的编辑。此外，工作区更有组织性和灵活性，具有可停靠面板和面包屑。因此，Divi 5 旨在让您的工作流程更加顺畅、更加愉快。

通过添加深色模式，可随时进行舒适的编辑，Divi 5 确保您可以比以往更快、更高效地创建令人惊叹的网站。此外，画布缩放可轻松实现响应式设计，进一步增强了网站创建过程。

下载 Divi 5 公共 Alpha 版

接下来会发生什么……

在下一篇文章中，我们将仔细研究 Divi 5 的前端性能改进。我们将探讨重写的 Divi 框架如何显着减少加载时间并增强服务器响应。此外，我们还将展示 Divi 5 如何优化用户体验。准备好迎接速度提升，这将改变您使用 Divi 构建网站的方式！