使用Divi 5的嵌套行和模块组创建的9张卡片布局

有了Divi 5，建立令人惊叹的专业网站比以往任何时候都容易。借助嵌套行和模块组之类的功能，您只需单击几下即可在整个网站中创建高级卡布局。 Divi 5引入了现代化的代码库和改进的性能，非常适合构建复杂的布局。这些新功能将使您能够以无限的灵活性构建。

在这篇文章中，我们将展示使用Divi 5的嵌套行和模块组构建的9张卡片布局，以说明创建灵活，可重复使用的设计非常容易。无论是展示服务，强调证词还是构建投资组合，这些布局都将帮助您获得抛光，一致的结果。最后，您将看到Divi 5的这些新功能如何帮助您创建可重复使用的可重复使用的模块，以节省时间并确保您的项目整个项目的一致性。

让我们潜入！

了解Divi 5中的嵌套行和模块组

Divi 5的嵌套行和模块组是使您可以轻松创建高级卡布局的功能。让我们探讨这些工具如何工作以及为什么它们非常适合构建复杂的布局。

订阅我们的YouTube频道

嵌套行

嵌套行可以使您可以在行内部放置行，从而在视觉构建器中提供无限的嵌套性。此功能打破了传统布局的局限性，使您可以灵活地构建复杂的设计。使用嵌套行，您可以在单列中创建整齐组织的高级卡布局。好处是明确的：嵌套行提供了响应式的柱结构，可在设备之间无缝调整。

模块组

模块组是Divi 5中的一个新容器元素，使您可以在列中进行多个模块，以进行统一的样式和管理。此功能通过让您的样式，移动或复制整个组中的一个动作来简化您的工作流程。模块组还旨在与诸如Flexbox和Loop Builder之类的功能集成，使它们在动态布局方面进行了防止。

他们为什么一起工作

组合嵌套行和模块组将解锁创建复杂的可重复使用卡布局的能力。嵌套行提供了组织复杂元素的结构灵活性，而模块组通过将这些元素视为一个单元来简化样式和管理。它们一起允许您在网站上易于构建复制的布局。无论您是展示团队成员，服务还是常见问题解答，该二人组都使创建专业，可扩展的设计变得简单。

Divi 5的9张卡片布局

在下面，我们探索了9个高级卡布局，显示了Divi 5的嵌套行和模块组的功能。这些布局从定价页面到视频画廊，展示了如何轻松创建视觉令人惊叹，响应迅速的设计。通过利用嵌套行进行灵活的结构和模块组以保持一致的样式和重复使用，您可以为任何目的构建专业的可扩展布局。每个示例都强调了实用的示例和节省时间的技术，以提升您的Divi网站。

1。定价计划

组合嵌套行和模块组是在您的网站上展示定价的好方法。使用Divi 5的嵌套行，您可以创建一个结构化的布局，其中每个定价卡都包含在其自己的模块组中，从而允许您可以轻松复制和粘贴的灵活布局。在此示例中，我们从一个模块组开始，对其进行了样式，并为按钮组合了嵌套行。使用模块组创建卡片布局，可以轻松保存和重复使用整个网站。

2。服务

服务页面对于希望以清晰，视觉上吸引人的方式强调其产品的企业至关重要。使用Divi 5，您可以创建一个多层布局，其中每个服务卡都包含在模块组中，从而允许独特的样式和内容深度。例如，在组中嵌套一排以进行标题和链接，为标题和正文文本创建一个列行，然后用一个两列嵌套的行以按钮对其进行跟进。您可以复制模块组并在几秒钟内进行小型设计更改。

3。餐厅菜单项目

餐厅菜单需要视觉吸引力和有组织的信息。 Divi 5允许您创建类似网格的结构，其中每个菜单项卡都包含在模块组中。通过将设计元素添加到组以保持一致的样式，您可以轻松地在菜单中添加新项目，而无需重新设计整个卡。

4.团队成员BIOS

展示您的团队为您的品牌建立信任和个性。使用Divi 5，您可以在单列中创建具有分层内容的动态团队成员卡，例如照片，名称，角色和生物。然后，您可以将嵌套行和社交媒体链接的布局和指向单个团队页面的链接合并到您的布局中。将模块组保存到您的Divi库，将来添加新的团队成员很轻松。

5。客户证明

推荐提高了信誉，Divi 5使它们在视觉上引人注目。使用嵌套行在网格布局中组织证明卡，每个卡都包含客户的报价，名称和作业标题。模块组允许您将这些元素捆绑以进行统一样式。此设置使您可以轻松添加或重新排列推荐，同时保持设计一致性。借助Divi 5的响应控制，您可以确保您的布局看起来不错，无论您要查看其设备如何。

6。事件列表

事件促销页面需要引起注意并传达关键细节。 Divi 5中的嵌套行允许您构建具有分层内容的事件卡，例如事件图像，位置，标题，日期和链接进行参加。模块组通过对这些元素进行分组来简化样式，从而可以快速重复多个事件。

7。房地产清单

房地产清单需要清晰，有吸引力的物业陈述。使用Divi 5中的嵌套行和模块组可让您构建具有分层，易于复制内容的清单卡。这种方法简化了添加新列表，从而避免以经常性成本避免昂贵的清单服务。

8。产品显示

电子商务产品页面需要有效地突出产品。多亏了模块组和嵌套行，Divi 5使您可以在单列中创建具有多个列的产品卡。以这种方式创建一个产品清单页面，使您摆脱了Vanilla WooCommerce网站的限制，并为您的访问者提供了一种浏览您特色产品的美丽方式。

9。视频库

视频库非常适合显示教程，演示或其他创意视频内容。使用嵌套行和模块组，您可以创建一个网格，其中每个视频卡都在其自己的列中，并具有唯一的布局。这种设置使添加新视频在保持凝聚力，专业外观的同时很容易。

创建和重复使用高级卡布局的最佳实践

为了最大程度地发挥Divi 5的嵌套行和模块组在创建高级卡布局时的潜力，采用战略方法可确保效率，一致性和可扩展性。以下是一些技巧，可以帮助您创建专业，可重复使用的设计，以提高您的网站的美学和功能。

风格始终如一

Divi 5的设计变量使您可以为字体，颜色，间距等定义通用样式。通过在开始时设置这些变量，您可以确保所有卡片布局在您的网站上保持凝聚力。例如，在变量管理器中定义主要调色板，排版设置和间距值。将这些应用于模块组，以避免重复手动样式。

保存模块组以重复使用

将您的样式模块组保存到Divi库或Divi Cloud，以便于多个页面或项目访问。例如，如果您创建定价卡布局，则将其保存允许您在其他网站或页面上重复使用它，而无需从头开始重新构建。用清晰的描述性名称组织布局，以便以后快速找到它们。

响应式设计

随着设备和屏幕尺寸的种类越来越多，响应式设计是必须的。 Divi 5的可自定义断点使您可以为每个设备微调卡片布局。在设计布局时，请在不同的断点处进行测试布局，以确保所有设计元素按预期缩放。

杠杆预设以快速更新

Divi 5的元素和选项组预设允许您在模块或特定设计元素的所有实例中应用样式更改。例如，如果您决定更新卡片布局中的按钮样式，则预设确保更改会立即传播到所有相关模块。对于具有多个布局的大型网站来说，这是一个很好的工具。为布局中的按钮，标题或图像等常用元素创建预设是保持一致性并加快设计过程的好习惯。

通过遵循这些最佳实践，您可以利用Divi 5的嵌套行和模块组的全部潜力，以创建视觉上令人惊叹，响应且易于维护的高级卡片布局。

免费下载卡布局

是否想开始使用Divi 5中的卡布局？订阅以下订阅以访问JSON文件。您可以将其上传到Divi库，然后将其导入到您的页面上。

下载文件

免费下载

加入Divi新闻通讯，我们将向您发送终极Divi着陆页布局包的副本，以及大量其他惊人和免费的Divi资源，提示和技巧。跟进，您将立即成为Divi大师。如果您已经订阅，则只需在下面的电子邮件地址中输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获取免费的每周Divi布局包！

用Divi 5创建卡片布局很轻松

Divi 5的嵌套行和模块组更改您构建高级卡布局的方式，提供无与伦比的灵活性和效率。从定价页面到视频画廊，这些功能使您可以创建令人惊叹的可重复使用的设计，以节省时间并确保整个网站的一致性。结合这些功能使您可以构建专业布局，以无缝适应任何设备。使用Divi 5，创建复杂的，视觉上吸引人的卡片布局从未如此简单。

我们鼓励您下载最新的Divi 5 Alpha版本，并使用这些工具进行尝试，以体验Divi 5所提供的所有内容。在我们的社交媒体渠道上与我们分享您的创作，或在下面发表评论，让我们知道您计划如何将Divi 5用于卡片布局。