Divi 5初学者指南：如何掌握基础知识

如果您一直在听说Divi 5并想知道当前状态，那么本Divi 5初学者指南适合您。

Divi 5是Divi Visual Builder的未来，受到WordPress用户的信任和喜爱。从头开始重建，Divi 5提供更快的性能和更直观的体验。它结合了Divi在现代，可扩展的基础上闻名的一切，该基础使每个人都更容易网页设计。

在这篇文章中，无论您是新手，还是从Divi 4过渡，我们都会介绍您入门所需的一切，并对使用Divi 5的信心。

Divi 5处于Alpha阶段，但准备在今天的新网站上使用。

什么是Divi 5？

Divi 5是Divi WordPress主题的最新版本，但不仅仅是更新。这是对Divi网站构建框架的完整重建，旨在在不编写自定义代码的情况下为您提供完整的创意控制。

Divi 5的核心是一个更快的现代化视觉构建器。它更轻，反应迅速，并消除了Divi 4中用户所面临的常见问题，例如加载时间缓慢，输出和建造者滞后。一切都感觉更狡猾，更光滑，更直观。

它的构建是为了帮助您从启动到启动，而无需切换工具，编写代码或浪费时间。以下是：

• 一个实时的视觉构建器响应更快，感觉更轻，可以让您拖动，掉落和自定义，而滞后较少，更精确。在这里自己测试。
• 预先设计的Divi布局，可帮助您应用针对不同行业和目标量身定制的精美页面设计。
• 数十个Divi模块处理从文本和图像到滑块，画廊，形式，定价表等所有内容。
• Divi之类的营销工具引领了用于分裂测试的领导，用于电子邮件的盛开以及用于社交共享的君主。
• 先进的定制选项，例如预设，设计变量和全球样式，使您可以保持设计一致和表面上的品牌。

使Divi 5脱颖而出的是它的意图。从布局到界面再到性能的整个体验旨在帮助您更快地移动，保持井井有条，并享受无挫败感的无代码工作流程。

从Divi 4过渡到Divi 5是否容易？

Divi 5是Divi 4的继任者，这意味着更好。因此，如果您习惯了Divi 4，那么切换的想法可能会感到不知所措。但是，让我们开始说Divi 5是通过向后兼容的。这意味着任何Divi 4网站都将与Divi 5合作。

Divi 5还将您所爱的关于Divi 4的一切都保留，但只会使它变得更好。整体直观的体验仍然很熟悉，因此您可以快速熟悉Divi 5。让我们讨论一些您应该从Divi 4转换为Divi 5的原因。

Divi 5 Builder提供更快，更优化的性能

Divi 5是使用现代建筑建造的。最大的改进之一是去除短码，这导致了Divi 4的产出和较慢的性能。建造者现在很快加载了，总体上感觉更轻。

另一个重大升级是更智能的重新订阅。在Divi 4中，即使是小更改也可能触发整个布局不必要的更新。 Divi 5仅重新渲染实际变化的内容，减少滞后并保持体验平稳，即使在复杂的页面上也是如此。

请注意，毫秒4（在左侧）加载视觉构建器。 Divi 5几乎立即加载它。

为了支持这种速度，我们从设置面板中删除了过渡动画，最大程度地减少了不必要的重新绘制，并完善了如何实时应用更新。这些小的更改使建筑商每次点击时都会更加响应。

Divi 5提供更轻松，更简单的编辑体验

小细节通常会对您的构建方式产生最大的影响。 Divi 5引入了一系列微妙但有力的改进，使构建器接口更加直观。

对于初学者来说，编辑内容现在比以往任何时候都更快。通过一单击的编辑，您可以直接单击任何文本或模块，然后开始键入，没有额外的步骤，并且在菜单之间没有切换。它使整个体验感到直接而轻松。 （在Divi 4中，需要多次单击以打开模块的设置面板。）

另一个升级是面板对接，它使您可以将设置面板固定在屏幕的两侧。当您进行更改并防止设置覆盖您的工作区域时，这将使您的布局保持完整视图。 （Divi 4中不存在此功能。）

设置面板顶部的新面包屑向您显示了布局结构中的确切位置，因此您始终知道自己的位置，尤其是在使用深嵌套元素时。

您还可以在构建器中不存在的构建器中的光模式和深色模式之间切换。这些更新为您提供了更清洁，更专注的编辑空间，减少视觉混乱和不必要的点击，因此您可以更好地控制工作区。

Divi 5简化了设置管理和设计组织

Divi 5带来了一个更有条理和直观的系统，用于管理样式，布局设置和响应式调整。

您可以在每个设计设置中直接在响应式和悬停状态之间切换到每个交互和屏幕尺寸的微调间距，排版或效果，而无需切换视图。

同样，模块预设，设计变量和选项组预设更易于在您的网站上应用和管理。 （我们将在下面的部分中详细介绍这些。）

借助Divi 5，我们正在改善基础并添加新的，更高级的功能，以帮助您无需自定义编码就可以优化Web设计工作流程。随着更新每两周发布，它只会从这里变得更好。

您应该知道的新Divi 5功能

让我们看一下我们最近添加到Divi 5的新功能，以及它们如何帮助您更快地构建网站：

1。可自定义的断点提供了更大的响应灵活性

Divi 5中最令人兴奋的补充之一是可自定义的响应断点。在Divi 4中，您仅限于标准的三个设备尺寸：电话，平板电脑和台式机。您必须使用自定义代码来微调布局，以获得更具体的屏幕宽度。

对于Divi 5，该限制消失了。现在，您可以访问七个预定义的断点，包括手机宽，平板电脑宽，宽屏和超宽，以及熟悉的断点。

您可以根据您的设计需求启用或禁用这些额外的断点，并更改其宽度值以完全控制。这使您在构建响应式网站时会更加灵活。

要管理断点，请单击三个点以打开范围内的响应式断点面板。在要添加的任何新断点上切换，并根据需要修改其宽度控件的新值。

禁用断点时，不必担心会失去样式。 Divi将它们保存在后台，因此，如果您以后重新启用该断点，您的自定义将立即回来。这是测试不同响应式设计而不会失去工作的理想选择。

2。设计变量可帮助您定义一致的品牌系统

设计变量在表面上可能会很小，但是一旦您开始使用它们，它们就会完全改变您的工作流程。您没有在不同模块上手动调整相同的字体，颜色或间距值，而是将其定义一次并在您的站点上重复使用。当您更新变量时，每个实例会自动更新，节省时间并保持设计一致。

这对于品牌一致性很重要的多页网站或客户项目特别有用。您可以设置变量，例如身体文本大小，标题颜色，按钮填充或链接样式。如果您需要调整所有H4，则无需寻找每个块；只需一次更改变量值即可。

不仅设计属性，您还可以节省常见重复的内容值，例如公司地址，产品链接甚至背景图案，以快速访问。这可以使您免于手动工作，并有助于更好地组织重复的内容。

在视觉构建器内部，单击“变量管理器”图标，然后从六种变量类型中进行选择：数字，文本，图像，链接，颜色和字体。

就我们的示例而言，让我们创建一个文本变量。命名您的变量并添加其值，然后保存。

要应用文本变量，请单击要修改的元素。在我们的情况下，地址。由于是文本变量，请转到“设置”面板中的内容，然后悬停在身体​​上以找到动态内容图标。现在，单击您保存的变量以应用：

3。选项组预设简化了基于预设的设计系统

通过选项组预设节省和重复使用样式，例如背景设置，间距，框阴影，边界等，可以节省大量时间。您可能已经熟悉Divi 4中的传统元素预设，该预设适用于整个元素（段，行，列，模块）。

Divi 5中的期权组预设将其深入一步。它们可让您创建并将预设应用于模块内的特定设计选项组。例如，您可以将边框设置作为选项组预设保存而不会影响其他任何内容。

为此，您将首先自定义首选设置，然后将其保存为预设。在下面，我将按钮阴影保存为盒子阴影2 ，并将其应用于其他按钮。

如果您想重复使用具有特定悬停效果，边框和颜色的按钮样式，但请单独使用间距和文本样式，选项组预设可以让您这样做。您只能应用所需的设置，而不会影响其余的模块。

虽然设计变量可帮助您控制字体，颜色和间距等核心值，但选项组预设会更深入一个水平。他们让您将整个样式部分作为全球预设进行分组。它们共同形成了一个基于预设的设计系统，该系统可帮助您在不编写自定义代码的情况下快速构建一致的布局。

4。复杂布局设计的嵌套行

嵌套行是为希望没有复杂性的布局自由的设计师而建造的。使用嵌套行，您可以构建更复杂的布局，而不会不断兼顾多个部分或代码解决方法。

它们使复杂的布局更易于管理，并且更具直观的编辑，尤其是在登陆页面，产品展示，多列博客布局或在不对称投资组合中展示最佳作品时。

添加一个嵌套行作为内容模块。单击“黑色加”按钮，切换到新行，然后选择您的首选行类型。

一旦插入，它的行为就完全像顶级行。另外，每个嵌套行都保留完整的响应设置，这意味着您可以控制其在断点之间的行为。您不再限于在基本行和列中思考。借助嵌套行，您可以在层次上思考，同时保持设计工作流程清洁和视觉。

5。模块组来组织您的模块

模块组是Divi 5中的一个新容器元素。它们让您将多个相关的模块捆绑成视觉构建器中的一个可折叠组。这使得编辑页面的大部分更易于管理，尤其是在处理充满重复元素或嵌套设计的复杂布局时。

想象一个带标题，图像，描述，按钮和线除差的产品展示箱。您可以在要复制或调整设计时单独选择或移动每个模块，而是可以将它们分组为一个单元。

模块组作为另一个Divi 5模块。选择组模块添加。您可以在其中添加更多模块，并且它们都将被分组为一个模块组。

6。高级单位可帮助您优化更智能的响应式设计

在Divi 4中，大多数样式输入仅限于基本单元，例如像素和百分比。使用高级单元，您现在可以将CSS单元（包括REM，EM，VW，VH，％，甚至功能强大的CSS功能）（例如Clamp（）作为Divi 5中的视觉设置等功能强大的CSS功能。此功能对响应式设计和可扩展版式的设计师有帮助。

例如，您还可以使用clamp（）来设置填充或字体尺寸的最小，理想和最大值，因此您的设计看起来可以在跨设备上抛光，而不会创建数十个自定义断点。标题的夹具（36px，4VW，48px）将将字体尺寸设置为以36px的速度开始，根据观看端口宽度的4％进行扩展，并停止以48px的形式生长。

这些值嵌入在所有设置中。您还可以通过定义高级单位值来创建数字设计变量。

这些功能使构建灵活，响应和一致的网站变得更加容易。您将直接在构建器中直接控制设计，而无需编写自定义CSS或依靠解决方法。

但这只是开始。到目前为止，您所看到的仅代表Divi 5提供的一部分。我们正在积极研究更多功能，所有这些功能都旨在帮助您更聪明，更快。 Divi 5的核心是使Web Design更聪明。每个更新都集中在简化您的工作流程上，并为您提供更少的精力来构建美丽网站的工具。现在开始将为您提供掌握Divi 5之前的优势，然后才能准备好最终发布。

看Divi 5

让我们看看如何用Divi 5的外观构建网站。为此，您首先需要一个工作的WordPress设置。这意味着选择Web主机，注册域名并在您的网站上安装WordPress。我们假设您在专注于本文的下一部分之前一直在运行：

1。下载，安装和激活Divi 5

这是一个视频教程，用于购买，安装和激活Divi：

购买成功后，您将能够登录优雅的主题会员区域。现在下载Divi 5 Zip文件夹。

返回您的WordPress仪表板。请按照此查询：外观>主题>添加主题>上传主题。然后从您的计算机上传Divi 5 Zip文件，然后单击“立即安装”。

安装后，激活主题。

最后，激活您的Divi许可证。通过这样做，您将能够有效访问所选服务。该过程是自动的，只需与您的ET成员资格登录凭证再次登录。

完成此操作后，您可以访问Divi 5仪表板。您的仪表板为您提供了诸如Divi许可证状态，更新，页面，模板等信息。您还将看到Divi快速网站，我们将用于建立网站群。

开始从Divi开始

2。使用Divi 5创建您的网站

使用Divi 5构建整个网站的最快方法是使用Divi快速网站。

您可以在两个选项之间进行选择：

• 使用预制的入门网站，Divi 5将使用所选网站的品牌和内容构建基本网站。
• 或使用AI生成您的网站，以指示Divi AI创建独特的网站。

以下是使用入门网站的过程：您选择一个入门网站并填写一些详细信息，例如您要创建的网站徽标和页面。

这是与AI一起使用的方式。您告诉Divi AI有关您的网站，并等待它做饭：

如果您想加快网站构建过程，Divi快速站点是完美的。它为您提供了现成的结构，您可以通过自己的品牌，内容和样式进一步自定义。您不必从空白页面或从头开始设计每个布局。

如果您想从头开始构建一个新页面或访问Divi Visual Builder，请转到页面>添加页面。

现在，命名您的页面，然后单击使用Divi Builder。

您将进入Divi Visual Builder。

3。了解Divi 5视觉构建器基础知识

如果您首次访问Divi 5 Visual Builder，您会看到许多图标，因此，这是一个快速的演练：

• （1.）左侧栏面板：此面板包含构建器工具。您可以添加预制布局，访问布局库，使用图层查看结构，切换到线框视图，保存设计变量，调整建筑商设置并获得帮助。
• （2.）顶级栏：您可以在响应模式之间切换。宽度和缩放控件可帮助您跨断点进行微调布局间距。您还会在此处找到撤消/重做，清除布局，历史记录和保存选项。再加上出口，预览，保存草稿和发布按钮以管理您的进度。
• （3.）右侧栏：当您单击任何模块时，其设置在右侧打开。您可以在此处添加内容，样式并添加自定义CSS。顶部的面包屑（页面>部分>行>列）准确地显示了模块在布局内的位置。

接下来，您有两个容器元素：部分（以蓝色表示）和行（始终为绿色）。在行内，您有可以添加模块（黑色）的列。

要添加一个部分，您将单击“蓝色加”按钮。对于行，这是绿色Plus按钮，而黑色用于模块。您可以选择不同类型的行选项。一排是列。

在行和列内，您将添加内容模块，例如标题，图像等。Divi5为所有目的提供200多个内容模块，无论您是否要添加联系表格，证明书，等等。

最近的模块组模块使您可以对不同的元素进行分组，因此您可以创建和保存自己的模块。 （灰色代表一个模块组。）

4。用Divi创建您的网站页面5

即使您不使用Divi快速站点，您仍然可以导入预制作的布局或使用Divi AI来生成整个布局。单击“蓝色加”按钮。

（1.）允许您从2500多个预制布局中进行选择， （2。）让您指示Divi AI生成页面。这是导入预制布局的工作方式：

如果您选择使用Divi AI构建，则只需要告诉它要构建的页面即可。

自定义您的页面设计

如果您使用Divi快速站点，预制布局或Divi AI创建了页面，则应将其自定义以使其成为您的。为了在整个网站中始终如一地添加您的品牌，最简单的方法是定义您的设计变量。

这些全局值（例如您的原色和字体）将在您使用它们的任何地方自动应用。要修改它们，只需更改变量管理器中的变量值即可。

要编辑任何模块，请单击它，然后在右侧面板中弹出设置。

每个模块设置面板都包含三个选项卡：

• 内容：这是您添加或编辑模块的实际内容的地方。您还可以添加链接，选择背景或更改管理标签，以帮助更轻松地识别模块。
• 设计：切换到“设计”选项卡可以使您可以风格的模块视觉外观。您可以更改字体尺寸，重量，颜色，线高，间距，对齐方式等等。请记住，不同的模块具有不同的设置选项。
• 高级：“高级”选项卡可让您完全控制更多技术选项。添加自定义CSS，设置响应可见性等等。如果您想自定义设计选项卡提供的内容，则特别有用。
• 笔记本电脑图标可让您在响应式和悬停模式之间切换。通过切换到一种模式，您可以自定义所有设置并保存。
• 默认的预设按钮是Divi的预设功能。这是元素预设和选项组预设之间的区别。

如果您要处理作者的块，请使用Divi AI添加内容（文本，图像和代码）。几乎每个模块都可以让您使用AI。您需要做的就是寻找小AI图标。

自定义页面后，请记住保存草稿。然后，预览以查看所有事物正常工作并发布您的页面。

开始从Divi开始

充分利用Divi 5的5个技巧

Divi 5处于令人兴奋的阶段 - 公共alpha阶段。它经历了基础升级和重大性能的改进。现在剩下的就是新功能发行和次要修复。

这也使它成为开始使用它的理想时机。您越早开始，当Divi 5 Beta完全启动时，您就会越舒适。这里有几种充分利用Divi会员资格的方法：

1。保持新版本的更新

新功能更新不仅是修复或性能调整，还可以改变您构建网站的功能强大的工具。从可自定义的断点到设计变量，嵌套行和高级单元，每个添加都在Divi 5的新基础上建立，可以为您提供更多的控制和速度。

要保持在循环中，请订阅优雅的主题YouTube频道，尼克经常分享演练并发布公告。

订阅我们的YouTube频道

2。实验新的Divi 5建筑商

Divi 5 Visual Builder是快速，响应且为效率而建造的。每个新功能的添加都有助于优化您的工作流程，我们鼓励您继续尝试制定新策略。为了帮助您，我们还发布了新功能教程以分享我们的方法。例如，我们在不同行结构上的帖子向您展示了使用嵌套行来创建智能布局的方法。

养成定期访问优雅主题博客的习惯，以找到使用Divi 5的创新方法。

3.分享和搜索Divi 5在Divi社区中

一旦您开始尝试Divi 5，看到其他人的使用方式同样重要。世界各地的设计师和开发人员也在探索相同的新功能，尝试创意布局并分享其结果。

从断点的智能使用到节省时间的设计变量设置，您可以通过观察其他人如何接近其构建来学习很多东西。加入官方的Divi Facebook小组或以Divi为中心的论坛，发现教程，提出问题并从Divi 5工作的人们那里获得新的想法。这是提高您的技能并保持最新状态的最快方法之一。

4。用Divi建立新网站5

使用Divi 5（现在）的最佳方法是从头开始构建新网站。如果您要开始一个新的项目，就没有理由等待。开箱即用，您将获得更快的性能，更清洁的代码和更好的编辑体验。

但是，如果您正在使用现有的Divi 4网站，最好等待更长的时间，然后将其迁移到Divi 5。

由于Divi 5仍在积极发展中，因此可能尚未完全支持一些Divi 4模块和第三方扩展。也就是说，由于每个网站都是不同的，因此每次都不会这样。如果不确定，最好的办法是检查您的网站的兼容性。为了提供帮助，我们还创建了一个Divi 5迁移器工具。

它扫描了您现有的Divi 4网站，并告诉您哪些模块兼容，哪些模块不是什么，什么需要关注。这可以帮助您做出明智的决定，而无需冒险实时网站。

但是，我们非常接近Beta版本，因此我们的建议是仅使用Divi 5创建新网站，然后再等一点，然后再切换Divi 4网站。

5。建立Divi设计系统

Divi 5引入了许多功能，因此决定使用哪些功能以及不使用哪些功能。例如，如果您定义设计变量，您是否也应该使用选项组预设？弄清楚这一点的最佳方法是实验和弄清楚什么对您有用。随着新功能的发布，您可以继续完善过程。

您可以使用设计变量构建任何网站以达到一致性，然后在选项组和元素预设中使用它们。这种结构化的方法可以节省时间，使您的品牌保持一致，并可以单击几下更新全球样式。

6.遇到错误时报告错误

Divi 5仍在积极发展中，因此您可能会沿途遇到一些错误。当您这样做时，我们希望您向他们报告。它可以帮助我们的团队更快地解决问题，并使我们更接近Beta版本。您也欢迎您依靠我们解决Divi 5疑问 - 我们的支持团队很快就会做出回应，并在此处提供帮助，而专业用户也可以为任何紧急情况获得24/7的VIP支持。

选择Divi 5来启动您的网页设计旅程

Divi 5为您提供了一个完整的网站构建框架，从头开始现代化和重建。它的每个部分旨在简化您的工作流程，加快性能加快，并为您提供网页设计的未来。

• 比竞争更好：尽管大多数建筑商都专注于华丽的功能，但Divi 5专注于控制，速度和现实世界的可用性。它是为了与您合作，而不是与您合作。
• Divi 4：Divi 4的重大升级已受到WordPress用户的喜爱。 Divi 5保留了人们喜欢的一切，并修复了他们没有的一切。它更快，更轻，更可扩展。
• 一个地方的所有工具：从视觉编辑到AI内容，云存储，快速的站点创建和营销工具，Divi 5为您提供了启动强大并快速成长所需的一切。

如果您今天开始使用网页设计旅程，请从Divi 5开始。它是为网络前进的位置而不是去哪里的。

Divi 5已准备好今天在新网站上使用。