使用Divi 5模块组构建自己的模块

您是否要在不触摸代码行的情况下创建自定义Divi模块？借助Divi 5的新模块组，您现在可以将多个元素组合为一个可重复使用的布局 - 全部来自视觉构建器内部。没有JavaScript。没有PHP。只是拖动，掉落和设计。

在此快速指南中，我们将向您展示如何使用Divi的新组来创建自己的模块。您将看到如何从头开始构建贴花，定价表，推荐或您可以想象的任何其他类型的模块。

注意： Divi 5已准备好在新网站上使用，但我们不建议将现有网站转换为Divi 5。当我们对更新过程充满信心时，您会从我们这里看到一些东西。

Divi的新模块组是什么？

组或模块组是一个新的容器元素，将多个模块和/或行配对成列中的单个单元。这具有分组多个较小元素的优势，并允许您在页面上需要将整个组移动到任何地方。

可以在整个页面上移动模块组，而释放Flexbox和Loop Builder功能时，将变得特别有用。循环构建器发布后，您将可以使用组来创建自定义的博客布局，页脚菜单，图像画廊等。因此，现在很有用，但是在几个月后，使用它会更令人印象深刻。

嵌套行是我们添加到Divi 5中的另一个高度要求的Divi功能。它们让您将行插入内心的内容。尽管“模块组”的名称可能使您似乎只能分组模块，但情况恰恰相反。实际上，您可以在组内使用嵌套行，这为建立无限嵌套的布局结构并使它们成为可重复使用的组的一部分。

如何创建自己的分区模块

模块组允许您在编辑器内部创建自己的模块。您可以将模块和嵌套行分组在一起，以创建类似于我们一些较大模块的复杂布置。

1。创建自己的蓝图模块

我们内置的蓝图模块

Blurb模块是许多Divi设计中的主食。这是一个首选模块，但是当您分解时，它只有几件事可以单击它。这些是：

图像/图标，标题/标题和身体内容。我们可以创建一个模块组并将这些模块放在其中：图像或图标，标题和文本模块。一起，这三个模块可以复制在Blurb模块中可用的相同内容。

bl

创建自己的蓝图模块组

这是一个示例的示例，该示例在左侧具有图标，并且使用A：

组，内行，列（1）带有图标模块，以及带标题和文本模块的列（2）。

X射线被打开以查看每个骨骼的骨骼，以看到它们的相似性，即使它们的构造方式不同。

这种安排唯一的特殊之处在于，第一列设置为18％的宽度，第二列的宽度为82％（列尺寸尺寸选项是新的，具有嵌套行功能更新）。

建立这样的模块具有为每个元素提供更多设计样式选项的额外好处。 Blurb模块使图像/图标放置更加容易，但具有权衡。使用最接近所需设计的方法。

2。创建自己的定价表模块

我们内置的定价表模块

一些Divi模块还有很多事情要做。定价表模块就是这种情况。如下所示，每个定价表有几个字段。

定价表模块的解剖结构

创建自己的定价表模块组

如果我们使用模块组和单个模块重新创建定价表模块，我们将获得此结果。

注意每个表七个单独的文本/选项字段。从视觉上讲，每个桌子都有三个主要部分（标题，价格和细节）。在一个组内，有几种方法可以做到这一点，但是在下面，我们为每个组使用了三个嵌套行。从那里，我们使用每个部分内部的标题和文本模块来重新创建定价表。

使用定价表模块的好处是，它处理大部分布局，并且您可以从头开始。但是有时候，这意味着当您希望使用特定的事情完成时，很难使用。通过更简单的模块来创建这个定价表布局，为我们提供了更多的设计控制和自由。

3。创建自己的推荐模块

我们内置的推荐模块

Divi的推荐模块是另一个正在进行的模块。它最多包括四个不同的文本元素和一对图像/图标选项。

创建自己的证明模块组

重新创建推荐模块最耗时的方面是正确的间距（尤其是在多个断点上）。但是一旦您得到了，事情就会很简单。在整个组布局中，我们使用了几行，以及图标，图像，标题和文本模块。

重新创建其中一些模块的好处是，您为更多的可能性开放。一些更复杂的模块具有一个自以为是的布局，只有广泛的CSS才能操纵。但是，当您自己构建它时，您有更多的自由来四处移动许多子元素。

在这样的设计时，更多的布局可能性打开了。例如，您可以通过将元素转移到更大的组布局中的完全不同的位置，从而使用推荐模块（至少不容易）做不可能的事情。如果您的设计需要一定的灵活性，则构建其中一些零碎的方法可能会帮助您达到所追求的精度。

我也喜欢您能够像上面的一个自定义的推荐模块创建自定义的推荐模块的想法，并使用即将到来的循环构建器从CPT中提取证明。它将为您提供设计自由 +通过结构化数据和内容更快地构建的能力。

将您的自定义模块保存为全局元素

当您的新模块感觉正确时，将其作为用于网站其他地方使用的全局元素。打开“组设置”菜单。单击“保存到库”选项。

将出现一种模态，您可以在其中命名模块以稍后轻松使用。切换“另存为全局”以将其存储在Divi库中。您以后进行的任何更改都会在您的网站上进行每个副本。

您的全球元素现在将具有独特的绿色，以帮助您注意到它是全球的。

您可以在仪表板> Divi> Divi库中访问所有保存的全局元素和其他库项目。在此处编辑全局元素将在整个网站上更新。您还可以直接在使用它们上使用的页面上编辑全局元素（并且将在范围内更新）。

需要您构建的每个站点上的模块吗？切换“保存到Divi Cloud ”。该模块现在在您的云库中，可以在任何地方进行任何项目。图书馆项目在一个站点上保留东西，而Divi Cloud则可以从站点到您一起旅行。使用两者来加快构建并引导更大的一致性。

获取Divi Cloud

今天建立新的东西

模块组将新的力量掌握在您的手中。您可以塑造原始的布局，也可以塑造所需的布局。首先重新创建虚拟模块，然后查看过程的拟合方式。当您习惯这种方式使用Divi时，您会注意到自己创建更复杂的设计，因为您可以使用标准模块或创建自己的模块。

在小组下降之前，上面涵盖的大部分内容都是可能的，但它们使事情变得更容易。尤其是当我们推出Flex和Loop Builder时，小组将成为您与Divi设计的主食。

准备升级了吗？抓住一个新的网站并立即测试您的第一个自定义模块。