Divi 4 和 Divi 5(公开 Alpha 版)之间的 10 个主要区别

已发表: 2024-10-21

随着 Divi 5 Public Alpha 的推出,Divi 主题发生了重大转变。虽然 Divi 4 拥有坚实的基础,但它面临着性能、技术债务和过时结构的挑战。随着 Web 标准的发展,Divi 5 通过彻底改革解决了这些限制,在性能、灵活性和用户体验方面提供了实质性改进。

Divi 5 的新框架提高了 Visual Builder 的速度和性能,使其更具可扩展性和面向未来。 Divi 5 经得起时间的考验,提供长期的生存能力,并确保您的网站可以轻松适应 WordPress 的未来发展。无论您是自由职业者、网络代理机构还是小企业主,Divi 5 都提供了一个更快、更强大的平台,使您可以比以往更轻松、更快速地构建网站。

下载 Divi 5 公共 Alpha 版

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

下载 Divi 5 公共 Alpha 版

目录
  • 1为什么过渡到 Divi 5 很重要
  • 2 10 Divi 4 和 Divi 5 之间的主要区别
    • 2.1 1.核心架构重写
    • 2.2 2. 不再使用短代码
    • 2.3 3. Visual Builder 中增强的性能和速度
    • 2.4 4.一键编辑
    • 2.5 5. 开发人员的可扩展性
    • 2.6 6.响应式设计工具
    • 2.7 7. 面板对接与管理
    • 2.8 8. 方便导航的面包屑
    • 2.9 9. 明暗模式
    • 2.10 10.预设管理
  • 3 Divi 5 帮助更快地设计和构建网站

为什么过渡到 Divi 5 很重要

Divi 5 公共 Alpha 登陆页面 2024 年 10 月

Divi 5 Public Alpha 的发布标志着 Divi 主题演变的关键时刻。随着网络技术的不断进步,对更灵活、可扩展和高性能主题的需求显着增长。 Divi 4 为数百万网站奠定了坚实的基础,但也开始显示出技术限制的迹象,例如由于多年的功能添加而导致性能下降和代码复杂性。

Divi 5 不仅仅是一个升级——它是对主题框架的完全重写。通过从头开始构建 Divi 5,Elegant Themes 团队提供了一个解决方案,可以解决过去的限制,同时为 Divi 的未来发展做好准备。此次改革意味着更快的加载时间、更流畅的编辑体验以及面向未来的平台。

如果您使用 Divi 4 构建了网站,那么过渡到 Divi 5 将释放新的可能性和简化的新界面。在公共 Alpha 阶段,我们鼓励您下载 Divi 5,试用一下,并让我们知道您的想法。在此阶段,并非所有功能都可用,但您将很好地了解 Divi 的功能。

下载 Divi 5 公共 Alpha 版

Divi 4 和 Divi 5 之间的 10 个主要区别

Divi 5 引入了重大更改,可增强性能、可扩展性和整体 Web 设计体验。让我们深入探讨 Divi 5 与其前身 Divi 4 的最关键差异。

1.核心架构重写

迪维4

随着时间的推移,Divi 4 的架构随着新功能的添加而不断发展和调整。虽然这允许添加许多新功能,但也导致代码库更加复杂。随着 Divi 4 框架的扩展,其原始结构受到技术债务的拖累——必须维护旧的、低效的代码以实现向后兼容性。这种复杂的设置有时会导致性能下降,尤其是在 Visual Builder 中。短代码处理(稍后会详细介绍)添加了另一层,导致渲染内容延迟和页面加载时间更长。

挑战

  • 逐个功能的开发,导致技术债务
  • 性能较低,因为构建器和前端必须处理短代码并加载大量不必要的代码
  • 由于代码库的不断发展,代码复杂性增加

迪维5

随着 Divi 5 Public Alpha 的发布,整个框架已经从头开始重写。 Divi 没有修补旧代码,而是使用现代的模块化框架进行了重建。每个模块(文本、图像库等)现在独立运行,这意味着当您在 Visual Builder 中工作或渲染网页时,仅加载必要的组件。通过采用这种模块化方法,速度和效率得到了提高,使得将来添加功能变得更加容易,而不会减慢系统速度。 Divi 5 更干净的代码库不仅确保了现在更好的性能,还为未来的开发提供了可扩展的基础。

好处

  • 更快、响应更灵敏的 Visual Builder 体验
  • 更干净、更易于维护的代码
  • 简化的前端性能和更快的页面加载时间
  • 未来更新和功能具有更大的可扩展性和灵活性

Divi 5 重建的核心是其性能改进的核心,使用户能够更高效地工作,同时确保使用 Divi 构建的网站坚固且面向未来。

2.不再使用短代码

迪维4

在 Divi 4 中,短代码是系统的支柱,负责表示每个模块及其设置。当您向页面添加模块时,Divi 会生成关联的短代码,WordPress 随后会解释该短代码并将其转换为内容。例如,当禁用 Divi 主题时,网页的后端将有一系列包含页面内容的短代码:

Divi 4 简码

虽然这种方法通常是有效的,但它在页面渲染期间增加了显着的开销。添加的内容越多,创建的短代码就越多,从而减慢网页加载和显示过程。

挑战

  • 短代码解析为内容处理添加了额外的步骤,增加了页面加载时间。
  • 随着页面大小的增加,短代码的数量也会增加,这可能会影响性能。
  • 如果短代码存在冲突或问题,可能会破坏页面的布局。
  • 禁用 Divi 主题会造成混乱,导致难以破译页面内容

迪维5

Divi 5 完全消除了短代码,转向更加模块化的框架。这意味着 Divi 5 不是生成和解析短代码,而是直接使用页面上的组件,仅在需要时加载它们。这提高了性能并使 Divi 与 WordPress 及其块编辑器的未来保持一致。 Divi 5 通过这种转变提高了当前性能,并确保与未来 WordPress 版本的兼容性。

好处

  • 由于无需处理短代码,因此页面渲染速度更快。
  • 内容更加稳定可靠,减少布局问题或内容破坏的可能性。
  • 与 WordPress 更新及其基于块的生态系统的未来兼容性。

通过删除短代码,Divi 5 提供了一个更快、更稳定的平台,改善了前端的构建体验和页面速度。

3. Visual Builder 中增强的性能和速度

迪维4

正如我们已经表明的那样,技术债务的积累和短代码的使用影响了 Visual Builder 的速度和 Divi 网站的前端性能。除此之外,Divi 4 管理 CSS 和 JavaScript 的方式进一步减慢了这些交互的速度。因此,Visual Builder 可能会变得缓慢,尤其是在更大、更复杂的网站上。

构建器中的每次更改都需要重新处理短代码和附加资源来加载和呈现页面。这也适用于前端,较大的 CSS 和 JavaScript 文件以及短代码内容会导致页面加载时间更长,从而对用户体验和 SEO 产生负面影响。

挑战

  • 视觉生成器更加缓慢,尤其是对于较大的网站。
  • 由于 CSS 和 JavaScript 文件较多,页面加载时间较长。
  • 处理短代码需要额外的步骤,从而降低了整体性能。

迪维5

Divi 5 的重建结构将速度和性能放在首位。新框架根据需要加载组件,而不是重新加载整个页面。此外,通过剥离未使用的样式和脚本,CSS 和 JavaScript 文件的大小已大大减小,有助于减少页面加载时间。在 Divi 5 的 Visual Builder 中进行更改时,只会重新渲染特定于您正在处理的部分的元素,从而提供更快、响应更灵敏的体验。

好处:

  • 添加模块或进行设计更改时减少延迟并加快交互速度。
  • 更精简的 CSS 和 JavaScript 文件可以加快前端的加载时间,尤其是对于复杂的网站。
  • 增强用户体验,降低跳出率,提高 SEO 排名。

通过这些性能增强,Divi 5 在页面加载速度和网页构建体验方面比 Divi 4 有了显着的飞跃。

4.一键编辑

迪维4

在 Divi 4 中,对模块进行更改需要浏览模块设置中的图标和选项。虽然这种方法有效,但它通常会减慢设计过程,因为用户必须找到设置图标并切换不同的设置选项卡才能进行调整。这个额外的步骤增加了时间,尤其是在快速工作或跨不同模块进行多次编辑时。

挑战

  • 单击模块内的小图标来访问设置需要额外的时间。
  • 编辑过程较慢,尤其是在多个模块之间进行频繁更改时。
  • 对于新用户或经验不足的用户来说,界面不太直观。

迪维5

在 Divi 5 中,通过引入一键编辑功能彻底重组了编辑过程。用户可以直接单击他们想要编辑的模块上的任意位置,而不是寻找小图标或浏览多个选项卡来进行更改。从那里,模块的设置会立即显示,使整个过程更加直观。无论是修改文本、添加图像还是调整颜色,一键编辑都可以实现更快的更改和更直观的工作流程。

好处

  • 只需单击一下即可即时访问模块设置。
  • 更直观的界面适合初学者和经验丰富的开发人员。
  • 由于花时间进行设计编辑,因此提高了生产力。

通过一键编辑,Divi 5 提供了更加用户友好的 Visual Builder 体验,使用户能够比以往更快地构建 Divi 网站。

5. 开发人员的可扩展性

迪维4

在 Divi 4 中,第三方开发人员对 Divi API 的访问受到限制,这使得定制和集成更具挑战性。虽然可以创建自定义模块或添加功能,但开发人员必须围绕现有框架进行工作。这限制了开发人员可以使用 Divi 做的事情,使得实现高级自定义模块或与第三方插件和工具的无缝集成变得更加困难。

挑战

  • 有限的 API 访问限制了开发人员可以构建或定制的内容。
  • 创建自定义模块或功能通常需要更复杂的解决方法。
  • 与第三方工具或外部系统深度集成的机会更少。

迪维5

Divi 的最新版本凭借更加灵活和强大的 API 极大地提高了平台的可扩展性。第三方开发人员可以访问 Divi 开发团队使用的相同工具和资源,从而实现更深入的定制和更复杂的集成。这种开放方法将使开发人员能够创建在 Divi 生态系统中运行的自定义模块、功能和集成。无论是添加新功能、与第三方系统集成还是构建自定义工作流程,Divi 5 的开发人员友好框架都可以让您更轻松地自定义 Divi 以满足您的需求。

好处

  • Divi 5 提供了更大的灵活性来构建更复杂的解决方案。
  • 简化的第三方集成方法可以使与外部工具和服务的连接更加顺畅。
  • 访问与 Divi 团队相同的开发人员工具可以鼓励创新以及割草机插件和功能的创建。

Divi 5 增强的可扩展性为开发人员打开了一个充满可能性的世界,使其成为开发人员更加通用和适应性更强的平台。

6.响应式设计工具

迪维4

在 Divi 4 中创建响应式设计需要多个步骤来针对较小的屏幕微调设计。如果您想微调移动设备的布局,则必须深入研究各种设置和选项卡。虽然此过程有效,但它为您的工作流程添加了额外的步骤,使响应式编辑速度更慢且不太直观。

挑战

  • 需要额外的步骤来访问响应式编辑选项。
  • 调整悬停和粘滞状态涉及浏览多个设置。
  • 在不同屏幕尺寸上进行响应式调整的工作流程较慢。

迪维5

在 Divi 5 中,您将通过使工具更易于访问和直观来获得更加简化的响应式编辑流程。响应式设计选项以及悬停和粘滞状态并未直接集成到设置面板中,从而消除了 Divi 4 中所需的额外步骤。用户可以在不同设备视图(桌面、平板电脑和移动设备)之间快速切换,并跨设备进行实时调整多个模块同时进行。无论您是调整内边距和边距、调整字体大小,还是向按钮添加悬停,Divi 5 都提供了更快、更高效的响应式设计方式。

好处

  • 在主设置面板中可以更轻松地访问响应式编辑工具。
  • 可以更轻松地访问特定于设备的设置,从而更快地更改设计。
  • 管理悬停和粘性设置的更简单方法。

7.面板对接与管理

迪维4

在 Divi 4 中,用户必须移动模态以避免遮挡设计视图。这导致模块的设计设置和图层面板的视图受阻,从而难以执行多任务或快速浏览不同的模块或设计元素。这也导致了更多的混乱,特别是在处理需要跨多个设置不断调整的复杂设计时。

挑战

  • 用户一次只能编辑一个面板,限制了多任务处理。
  • 频繁移动和重新定位设置模式会减慢工作流程。
  • 当用户手动浏览不同的设置时,屏幕更加混乱。

迪维5

Divi 5引入了多面板对接,显着提升了整体用户体验。该系统允许用户同时打开多个面板并轻松地在它们之间进行切换。这使得多任务处理变得更加容易,因为用户可以在模块设置、图层、页面设置等之间切换,而无需关闭或重新打开面板。借助 Divi 5,您可以自定义工作区,使其最适合您的设计风格,同时减少混乱。

好处

  • 用户可以保持多个面板打开,以便于访问和更快地编辑。
  • 在面板之间切换并将其拖动到选项卡部分,从而提高工作效率并加快设计过程。
  • 对接面板系统无需不断移动面板,从而创建一个更干净、整洁的工作空间。

借助Divi 5的多面板对接,用户可以更高效地管理设置,从而实现更快的设计迭代和更流畅、更直观的编辑体验。

8. 方便导航的面包屑

迪维4

在 Divi 4 中,没有内置的面包屑导航来帮助用户跟踪他们在布局中的工作位置。缺乏快速导航使得在各部分之间移动变得更加困难,尤其是在处理大型、复杂的布局时。因此,用户必须手动滚动、打开线框视图或利用图层面板来查找特定元素,从而减慢了设计过程。

挑战

  • 没有面包屑导航意味着页面结构的导航速度较慢。
  • 用户必须依靠手动滚动或切换视图来查找和编辑部分。
  • 管理具有多层的复杂布局时,工作流程效率较低。

迪维5

Divi 5 引入了面包屑导航,使得在复杂的页面结构中移动变得更加容易。这项新功能显示当前部分、行和模块层次结构的清晰路径,允许用户在设计中的不同元素之间快速跳转。无论是编辑嵌套模块还是在部分之间切换,面包屑都可以通过提供更清晰的页面内位置概览来改善整体用户体验。

好处

  • 用户只需单击一下即可在部分、行和模块之间快速移动。
  • 面包屑减少了手动滚动或打开不同视图的需要,从而加快了设计过程。
  • 一种更清晰、更有条理的方法来导航复杂的布局,使页面编辑更加直观。

借助 Divi 5 中的面包屑导航,用户可以更有效地导航页面布局,从而提高处理更大、更复杂的设计的速度和易用性。

9. 明暗模式

迪维4

Divi 4 不包含深色模式选项,将其界面限制为默认的浅色模式。虽然该界面功能齐全,但对于喜欢在低光环境下工作的用户或喜欢在长时间设计过程中减少眼睛疲劳的黑暗模式的用户来说,它的适应性较差。与提供浅色和深色模式选项的更现代的软件工具相比,缺乏深色模式使 Divi 感觉其 UI 的可定制性较差。

迪维4接口

挑战

  • 没有深色模式,限制了用户界面的适应性。
  • 在弱光条件下工作的用户会增加眼睛疲劳。
  • 总体而言,用户界面体验不太灵活,特别是对于那些喜欢深色主题的人来说。

迪维5

Divi 5 引入了浅色和深色模式选项,为用户提供了更大的灵活性和对其工作环境的控制。用户现在可以根据个人喜好或环境照明在明暗模式之间切换,确保更舒适和可定制的设计体验。无论是白天工作还是深夜,全新的深色模式选项都有助于减轻眼睛疲劳并增强可用性,使 Divi 5 更能适应不同的用户需求。

好处

  • 浅色和深色模式允许用户自定义他们的工作环境以适应不同的喜好。
  • 深色模式有助于减轻眼睛疲劳,尤其是在弱光环境下进行长时间编辑时。
  • 在各种工作条件下提供更现代、适应性更强的用户体验。

10. 预设管理

迪维4

在 Divi 4 中,管理预设是一个手动过程。在应用预设或进行调整时,由于 Divi 的框架,用户经常会遇到延迟,这需要系统重新加载并处理更改。这不仅使编辑预设速度变慢,而且影响了工作流程的整体效率,特别是在跨页面或整个网站管理具有一致样式的多个元素时。

Divi 4 预设

挑战

  • 编辑或应用预设时响应时间较慢。
  • 需要更多的手动工作才能跨多个模块应用预设。
  • 工作流程效率较低,尤其是在处理大型项目时。

迪维5

Divi 5 借助新的基于类别的结构引入了更快、更高效的预设管理系统。该系统允许用户更快地创建和管理预设,只需点击几下即可在模块之间应用一致的样式。内置预设和可重用类通过启用全局更改并减少重复编辑的需要,使设计过程变得更加容易。这个基于类的新系统可确保对预设的任何更新立即应用于所有元素,从而节省时间并提供更具凝聚力的设计体验。

Divi 5 预设

好处

  • 基于类的系统允许跨多个模块更快地应用和更新预设。
  • 现成的预设可加快设计过程。
  • 设计师只需点击几下即可保持网站的一致性。

借助 Divi 5 增强的预设管理系统,用户可以受益于更快的编辑、改进的设计一致性和改进的工作流程,从而更轻松地在整个网站上实施和维护有凝聚力的样式。

Divi 5 帮助更快地设计和构建网站

Divi 5 不仅仅是一次增量更新,它代表了一次完整的平台转型。通过解决 Divi 4 的缺点并消除技术债务和基于简短代码的结构等问题,Divi 5 旨在为设计人员和开发人员提供更快、响应更灵敏的体验。该框架的模块化框架更类似于 WordPress 基于块的古腾堡编辑器,因此该框架具有更高的可扩展性,并且能够适应 WordPress 的未来变化。

下载 Divi 5 公共 Alpha 版