关于Divi 5模块组,您需要了解的一切
已发表: 2025-05-13Divi 5通过新功能和无与伦比的灵活性改进了网站创建。模块组是Divi 5的最新添加程序之一。此功能使您可以将多个元素整理成一个可管理的组,您可以单击一次,可以将其样式,移动或重复。一旦发布了即将发布的功能,此功能将变得特别有用。
在这篇文章中,我们将探讨有关Divi 5的模块组所需的所有信息。从了解它们是什么以及为什么它们重要到学习如何有效使用它们,我们就可以为您服务。
注意: Divi 5已准备好在新网站上使用,但我们不建议将现有网站转换为Divi 5。
让我们探索模块组的可能性。
- 1什么是模块组?
- 1.1为什么模块组很重要
- 2如何在Divi 5中使用模块组
- 3个用于模块组的实际用例
- 3.1 1。未来用例:帖子和产品
- 3.2 2。呼吁行动部分
- 3.3 3。
- 3.4 4。产品类别
- 3.5 5。餐厅菜单
- 在Divi 5的背景下的4个模块组
- 4.1嵌套行
- 4.2设计变量
- 4.3高级单位
- 最大化模块组的5个提示
- 在Divi 5中使用模块组的6个设计更聪明
什么是模块组?
模块组是一个新的容器元素,可让您将多个模块捆绑到列内的一个凝聚力单元中。一旦分组,可以将模块进行样式,重复或重新定位,从而增强您的工作流程并确保设计的一致性。模块组使您的模块整齐地包装,使它们更易于集体处理。
模块组具有重要的组织优势。例如,如果您的列带有标题,文本模块和按钮,则将它们分组,可以应用统一的背景,调整间距或以单个操作移动整个构图。这样可以节省时间并降低设计不一致的风险,使模块组成为轻松创建精美的专业布局的重要工具。
为什么模块组很重要
Divi 5中的模块组不仅仅是一个方便的功能 - 它们引入了新的控制和效率层。它们允许设计师和开发人员以更高的精确性和创造力来创造。这就是为什么他们有可能对您如何设计网站的方式产生重大影响的原因。
- 它们是Divi未来的一部分:模块组是在Divi 5的前瞻性架构中构建的。它们用于即将发行的功能,例如Flexbox和查询循环构建器,这将使创建动态布局变得轻而易举。现在,投资模块组可以为您带来长期成功,尤其是随着Divi 5的发展。
- 他们节省了时间:对于模块组,您不必处理重复的编辑。您可以在一个动作中进行样式,重新定位或重复的复杂布局,从而大大切割设计时间。模块组的预设通过让您立即保存和应用预定义的配置来进一步采取。
- 它们促进设计一致性:模块组允许您确保组中的每个元素,从按钮到文本,都遵循相同的样式规则。对于那些管理品牌网站的人,模块组可以在整个网站上保持设计和专业的设计。
- 更具创意的自由:模块组可让您进行实验,而无需单独编辑每个元素。即使您是Divi的新手,您也可以轻松地创建出色的设计。组合嵌套的行和模块组可以帮助您解锁无限可嵌套的容器。
无论您是独奏设计师还是企业主,模块小组都会提供提升项目所需的控制和效率。
如何在Divi 5中使用模块组
从模块组开始很容易。在Divi 5中的页面中添加新行,然后选择3列布局。
在Divi 5中,您会注意到一个新的组模块。单击将其添加到第一列。
从那里,您可以添加任何要构建可重复使用的布局的模块。为了证明,我们将创建一个用于特色服务的模块组。首先将2列嵌套行添加到模块组。
在嵌套行的第一列中,添加图像模块。

在嵌套行的第二列中,添加标题模块并根据需要进行样式。
接下来,添加一个单列嵌套行,然后再添加另一个标题,文本和按钮模块。添加后,您的布局应与下图相似。
模块组可以像单个模块一样样式,添加背景颜色或渐变,调整间距或添加边框效果。您还可以通过访问模块组设置,单击预设选项并保存配置来保存模块组作为预设。然后,可以单击一次将此预设应用于其他模块组,以确保您的网站或多个项目之间的相同样式和结构。创建模块组后,您可以将其复制,将其保存到Divi Cloud,或在整个网站中重复使用预设。
模块组的实际用例
Divi 5中的模块组非常适合构建专业,高效的网站。将模块捆绑到可重复使用的样式单元中,可以节省时间,并将您的设计提升到新的高度。无论是构建登陆页面还是管理客户网站的投资组合,模块组都使复杂的布局毫不费力。以下是一些实用的用例,可以展示其功能并简化设计过程。
1。未来用例:帖子和产品
模块组的建造旨在通过Divi 5的即将到来的循环构建器发光。立即通过对动态布局进行分组元素来准备,例如博客文章预览或WooCommerce产品列表。循环构建器到达后,这些组将毫不费力地填充动态内容,从而节省您的时间,并确保完美无瑕,可扩展的设计。
2。呼吁行动部分
组大胆的标题,有说服力的子标题和一个充满活力的按钮,具有悬停效果,可以创建可重复使用的CTA。在多个页面上需要相同的CTA吗?在几秒钟内复制该组或将其保存到Divi Cloud以进行即时访问。这削减了设置时间,同时确保每个CTA都与您品牌的外观保持一致。
3。证明部分
将客户的报价,图像和名称组合到单个模块组中,以进行一致的专业证明布局。将小组拖放到重新排列部分,或单击一次统一样式(例如圆角或微妙的阴影)。
4。产品类别
模块组非常适合展示产品类别。例如,创建一个组,以突出类别,标题,图像和按钮中的产品数量,然后将其复制为其他类别。这种方法确保了产品页面之间的视觉一致性,并加快了电子商务网站的设计。
5。餐厅菜单
使用模块组的另一种好方法是用于需要配备菜单的网站。动态构造文本可能是耗时的,因此使用模块组非常适合加速过程。您可以将群组和嵌套行组合起来,使一个部分看起来令人难以置信且易于复制。
在Divi 5的背景下的模块组
Divi 5是WordPress设计的大胆飞跃,优先考虑快速性能,灵活性和创新功能(例如模块组)。 Divi 5以现代建筑为基础,可让您创建既有美丽的网站又有效率。模块组是该愿景的基石,与其他Divi 5功能无缝集成以提高您的工作流程。随着Divi 5在其公共alpha阶段的发展,每两周更新,模块组就可以重新定义您的构建方式。这就是它们适合更大的情况的方式。
嵌套行
将模块组与Divi 5的无限行嵌套配对,以创建复杂的,有条理的布局。例如,将A标题,图像和按钮组成带有嵌套行的按钮,以构建定价表或团队成员展示的部分。
设计变量
您可以通过在模块组中应用可重复使用的样式值,例如品牌颜色,字体或夹具()计算来保持设计一致性。您可以一次更新一个变量,每个组立即反映更改,使其非常适合大规模项目。
高级单位
您可以使用CSS单元REM,EM,VW,VH或其他人来为模块组构建响应的间距和尺寸。这确保了分组的元素在每个设备上看起来都令人惊叹,从台式机到智能手机。
最大化模块组的提示
为了充分利用模块组,一些明智的策略可以将您的设计能力提升到一个新的水平。这是使它们为您努力工作的方法。
- 计划布局:在分组模块之前,绘制部分的结构或使用原型工具来帮助您计划要使用的元素。这种前期计划可防止额外的工作,并确保您的团队合理且可重复使用。
- 利用Divi Cloud:将您喜欢的模块组保存到Divi Cloud,以将其变成交叉项目的资产。例如,您可以保存一个抛光的团队成员组,并单击几下将其拉入任何站点。
- 带有断点的测试响应能力:使用Divi 5的可自定义断点,以确保您的模块组在每个设备上看起来都很完美。调整小组设置中移动设备的间距或字体尺寸,以避免进行手动调整。
- 利用设计变量:为您的设计增加内聚力,为颜色,文本,字体或数字规则(例如Clamp()计算)设置设计变量,以使小更改更加容易。
- 通过样式发挥创造力:尝试大胆效果,例如悬停动画或模块组中的同步过渡。例如,为动态CTA的分组按钮和图像添加比例效果。
- Divi 5: Divi 5的公共alpha是您的操场 - 建立一个测试网站来探索模块组。尝试分组不同的模块组合或测试新的样式想法以发现可能的方法。
在Divi 5中使用模块组的设计更聪明
Divi 5的模块组简化了您的工作流程,确保设计一致性并为您的动态布局做准备。无论是将可重复使用的CTA的设计元素捆绑,创建具有凝聚力的推荐部分,还是尝试大胆的样式,模块组都可以使您更聪明地工作并更快地创建网站。随着Divi 5的发展,此功能使您能够构建高效而美丽的网站。
开始在Divi 5的公共Alpha中尝试模块组,并体验一种使用Divi建立网站的新方法。如前所述,Divi 5已准备好用于新的网站,但我们暂时不建议现有网站。
我们鼓励您加入Divi社区,分享您的模块组创作。将您的设计发布在Divi Facebook组或X上的@elegantThemes中。
让我们一起建造一些惊人的东西!