Divi 5的嵌套行制成的10个网格布局（免费下载）

网格布局提供了一种结构化但灵活的方式来组织内容，增强用户体验并确保各个设备之间的无缝响应能力。随着Divi 5公共Alpha的发布，网页设计人员拥有一个新的工具集，可以创建精美的网格布局来突破创意界限。有了完全重新设计的视觉构建器和功能强大的新功能，例如嵌套行，高级单元和模块组，您可以轻松地构建分层的复杂布局。

在这篇文章中，我们将展示网格布局，您可以通过Divi 5轻松构建，从对称功能网格到动态的砖石博客和交互式投资组合展示。无论您是设计投资组合，电子商务商店还是公司网站，这些布局都会激发您提升设计并吸引观众的设计。

让我们探讨Divi 5的高级功能如何使这些创意网格风格的布局成为可能。

Divi 5已准备好在新网站上使用，但我们不建议将现有网站转换为Divi 5。

密钥Divi 5个网格布局功能

Divi 5的重建基础引入了功能，使创建网格布局比以往任何时候都更加容易。这些工具使设计人员能够以精确和效率创建复杂的，视觉上吸引人的网格，同时保持整个设备的灵活性。在下面，我们探索了使制作精美的网格布局成为可能的关键Divi 5功能。

订阅我们的YouTube频道

嵌套行

Divi 5的嵌套行功能使您可以将行放在行之内，提供无限的嵌套性，以创建具有直观的拖放接口的复杂网格结构。此功能简化了多层网格的设计，使您可以精确控制模块位置。

无论是构建复杂的产品展示柜还是分层的投资组合网格，临近行都可以使您更加巧妙地组织内容，从而使布局动态和视觉上吸引人。

可自定义的断点

响应式设计对于现代网站至关重要，而Divi 5的可自定义断点使您可以轻松确保您的电网在任何设备上看起来无瑕。您可以使用七个台式机，平板电脑和移动断点，从而使网格无缝地适应各种屏幕尺寸。

与Canvas缩放层配对，该缩放比例可在视觉构建器内的不同断点上进行实时预览，此功能可确保您的电网对响应性进行了优化，从而在所有设备上提供一致的用户体验。

模块组

模块组简化了设计和维持一致的网格美学的过程。通过将模块分组在一起，您可以应用集体样式并在多个页面上重复使用这些组，从而节省时间并确保设计一致性。

这对于像博客文章或产品卡（例如字体，颜色或悬停效果）这样的网格布局特别有用，对于整个网站的凝聚力外观至关重要。

设计变量

使用设计变量，Divi 5提供了关键设计元素（例如颜色，字体，链接，排版等）的集中管理。此功能可确保您的网格布局以及整个网站的统一性，从而易于保持一致的视觉标识。样式设置在变量管理器中，可以在您想要的任何地方应用

需要更新颜色或字体样式吗？设计变量使您可以在一个地方进行更改，并立即在所有部分和页面上应用它们，简化工作流程并保持设计抛光。

高级单位

Divi 5的高级单元可以通过大众，VH，REM和EM等选项来控制间距和尺寸。这些单元启用动态和响应式网格布局，可完美地跨设备扩展。您可以使用变量管理器调整填充，边距或元素大小。高级单元提供了对齐和精确缩放网格组件的灵活性，以确保您的布局功能和视觉上和谐。

属性管理

属性管理通过允许您在设计元素中复制，粘贴和重置属性来加速设计过程。此功能对于将一致样式（例如悬停效果或间距）应用于多个模块而言是至关重要的。通过减少重复任务，属性管理使您可以专注于创造力，同时加快复杂的网格布局的开发。

这些Divi 5功能共同使用，以提供无与伦比的灵活性和效率，从而更容易创建令人惊叹的响应式网格布局，从而增强用户体验并提升您的网络设计。

Divi 5中的10个创意网格布局示例

网格布局是现代网络设计的基石，使用Divi 5，建造它们从未如此简单。无论您是展示产品，投资组合，团队成员还是常见问题解答，Divi 5都能构建功能性和视觉上令人惊叹的布局。让我们看一下可以使用Divi 5创建的10个网格布局示例。

1。对称特征网格

对称功能网格提供了一种很好的方式来展示产品，服务或投资组合项目。这种网格样式非常适合突出显示结构化内容，并且在其应用中具有多功能性。它们可用于业务网站，投资组合和着陆页，提供精美的外观，可轻松地指导用户获取信息。

在下面的示例中，我们建立了一个四列网格，以展示一个药剂师业务。我们可以使用嵌套行，模块组和属性管理来几分钟内实现专业，精美的外观。

2。砌体网格

砌体网格是一种充满活力的，Pinterest风格的布局，它在视觉上引人入胜的，紧密的网格中安排了博客文章，投资组合项目，甚至是不同高度的食谱。与带有固定排高度的传统网格不同，砌体网格可以自然流动，从而填补了垂直间隙，从而产生了无缝的有机外观。这种网格风格非常适合优先考虑视觉讲故事的网站，例如博客，杂志或创意作品集。凭借Divi 5的本地功能，创建时尚且敏感的砌体网格是直观有效的。

在下面的示例中，我们使用Divi的快捷方式将嵌套的行和模块组组合在一起，为食谱创建砌体网格，以更快地复制组。

3。交互式投资组合网格

交互式投资组合网格布局提供了一种展示您作品的引人入胜的方法。您可以将Lightbox弹出窗口，悬停效果，按钮等组合起来，以允许用户探索您的内容。这种网格风格非常适合旨在通过视觉作品（例如摄影，设计或两者兼而有之）吸引观众的网站，同时提供无缝的导航和互动性。

借助Divi 5的高级功能，设计师可以创建响应式，用户友好的投资组合网格，从而有效地突出创意工作。

4。产品展示网格

产品展示网格提供了一种独特的方式，可以使您的畅销产品，特色产品或您介绍给世界的新产品。您可以为电子商务商店优化的图像，标题，价格和按钮创建结构化的，视觉上吸引人的布局。使用网格布局，您可以创建一个干净的有组织的布局，以使用户易于浏览和做出购买决策。

使用Divi 5，您可以利用强大的功能来创建响应式，品牌一致的布局，以推动参与度和转化。

5。团队成员网格

团队成员网格可让您展示具有图像，名称，角色和社交链接的团队资料。这种网格风格创造了专业且平易近人的演示文稿，非常适合强调团队的专业知识和个性的网站。团队网格非常适合公司网站，代理商或非营利组织，但可以在您需要展示人员的任何网站上应用。

在下面的示例中，我们使用带有嵌套行的三列网格，并应用设计变量来响应地控制字体大小。

6。服务网格

网格布局是展示公司服务的好方法。它以有组织的，可扫描的格式突出显示服务，使其非常适合需要传达其价值主张的网站。该网格非常适合代理商，自由职业者或基于服务的业务，使用Divi 5的高级功能来创建响应迅速，引人入胜的布局，以驱动客户端查询和转换。

在下面的示例中，我们使用了一个四列行，为行间距分配了一个计算公式，并结合了模块组和嵌套行来加快设计过程。

7。活动时间表网格

活动时间表网格风格非常适合组织和展示时间敏感的信息，专业和整洁，非常适合举办会议，研讨会或社区聚会等活动的网站。 Divi 5的功能使您可以以网格格式添加日期，标题和描述，从而使访问者易于找到所需的东西。

下面的示例展示了一个带有嵌套行的三列布局，以在功能和美学上显示事件。

8。定价桌网格

Divi 4（和Divi 5）带有一个定价模块，但仅限于定价，按钮和扣子。对于那些希望扩展Divi的本地功能并建立适合其需求的定价网格的人，Divi 5提供了一种方法。您可以创建一个定价网格，该网格通过使用嵌套行，模块组和属性管理来惊人地显示您的内容。

例如，您可以创建一个三列布局，可提供定价，功能和多个按钮，而不必符合内置定价模块的局限性。您可以为较小的屏幕调整响应式设置，然后为50％的宽度列创建一个选项组预设，以确保您的列在平板电脑和移动设备上完美排列。

9。常见问题手风琴网格

在您的网站上拥有一个常见问题解答可以帮助用户访问常见问题的列表，从而更好地了解您提供的内容。这种网格样式将网格的清晰度与手风琴模块的交互性结合在一起，使其非常适合需要提供简洁，可访问的信息的网站。 FAQ网格利用Divi 5的强大功能来创建响应迅速，引人入胜的布局，从而增强用户体验。

在此示例中，我们使用嵌套行来创建一个引人入胜的常见问题解答部分，其中包含信息视频和问答，为用户提供了他们做出明智决定所需的相关信息。

10。图片库网格

带有灯箱弹出窗口的画廊网格是展示摄影，投资组合示例或其他图像的一种视觉惊人方式。这种网格风格非常适合展示视觉讲故事，非常适合优先考虑令人惊叹的图像的网站，例如美术馆，旅行博客或摄影。使用Divi 5，设计师可以创建吸引人的响应式，引人入胜的画廊网格。

在下面的示例中，我们使用简单的四列布局来展示图像。为了增加触摸，我们在图像上启用了Lightbox，并在每张照片的右下角添加了一个社交共享模块。

在Divi 5中创建有效的网格布局的提示

得益于Divi 5的强大灵活功能，构建有效的网格布局比以往任何时候都容易。无论您是构建功能网格还是带有覆盖元素的动态图像库，这些技巧都将帮助您最大程度地提高Divi 5的功能，以创建响应迅速，凝聚力和高效的设计，从而促进您的网站的用户体验。

1。利用嵌套行

Divi 5的嵌套行特征创建复杂的多层网格结构。您可以通过将行嵌套在行中来组织内容，例如将图像和文本放在单个网格单元格中以进行精确对齐。嵌套行非常适合构建诸如投资组合网格或活动时间表之类的布局，使您可以灵活地设计创意，结构化的网格。

2。优化响应能力

使用帆布缩放和可自定义的断点，您可以确保网格在每个设备上看起来都无瑕。实时的视觉构建器内测试布局，以预览它们如何在台式机，平板电脑和移动设备中适应。您可以在特定断点处调整列宽度，间距或字体大小，以保持可用性和视觉吸引力。借助Divi 5的可自定义断点，您可以确保所有用户的无缝体验，从大型屏幕到智能手机。

3。使用模块组提高效率

Divi 5中的模块组可以通过分组类似的网格元素（例如产品卡或团队成员配置文件）来简化您的工作流程。您可以同时应用一致的样式（字体，颜色，悬停效果等）来多个模块，并在页面上重复使用它们。这是在定价表或常见问题等网格中保持均匀性，减少重复性编辑并确保抛光外观的时间节省时间。

4。与设计变量保持一致性

使用设计变量来集中对颜色，字体，间距，链接等的控制。通过将这些元素定义在一个地方，您可以在全球更新样式，非常适合保持服务网格或画廊布局在视觉上和谐中。

5。实验高级单位

通过使用高级单元（例如VH，VW，REM，calc（）或clamp（）进行动态间距和尺寸，从而增强网格的灵活性。这些单元允许您的网格元素根据视口尺寸或字体设置来流畅地扩展，从而确保响应能力和视觉平衡。

免费下载网格部分布局

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

下载文件

免费下载

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

下载

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

用Divi 5释放创造力

Divi 5的功能套件，从嵌套行到属性管理，使设计人员可以轻松地构建多功能，响应和视觉上令人惊叹的网格布局。 Divi 5提供了无与伦比的灵活性，精度和效率，以创建从特征网格到交互式投资组合的任何网格布局。无论您是构建电子商务网站，关于页面还是常见问题解答部分，Divi 5的现代界面和增强功能都使您的创造力变得简单。

您准备好探索可能性了吗？潜入Divi 5 Public Alpha，以尝试创建网格布局。如前所述，Divi 5适用于新网站，但我们不建议在现有网站上使用它，至少还没有。

我们很想看到您的作品。在我们的社交媒体上分享您独特的网格布局或下面评论。