6个使用Divi 5的嵌套行建造的新图像画廊（免费下载）

如果您曾经尝试过手动构建图像库，那么您会知道事情变得多么凌乱。不均匀的图像，未对准的行和无反应的设计将简单的画廊变成了布局的噩梦。

即使在Divi 4中，复杂的图像结构通常意味着堆叠多行和专业部分，调整间距以及小时的手动定制。但是有了Divi 5，您可以跳过所有这些。

由于其新的嵌套行功能，您可以构建更高级的图像库结构。在这篇文章中，我们将向您展示如何并为您提供6个图库布局设计，以使您有个启动。

Divi 5已准备好在新网站上使用，但是请等一下，然后再迁移现有网站。

使用嵌套行构建复杂的布局

Divi 4已经拥有您建造图像库所需的一切，但是创建复杂的布局通常会感到笨拙。 Divi 5引入了嵌套行，为您提供了更快，更清洁的方式，可以在视觉上构建高级画廊布局，而无需黑客攻击。

订阅我们的YouTube频道

什么是嵌套行？

嵌套行是Divi 5中功能强大的新布局功能，可让您将一行放在另一行，使您可以更好地控制您的构造页面。这使得可以直接在视觉构建器内部设计复杂的部分，而无需编写代码或依靠解决方法。

筑巢一行就像添加另一个模块。您只需要悬停在要放置行的元素上，然后单击“加号”按钮以选择新行。然后，您可以从所有这些行布局中进行选择，这些布局非常适合各种画廊结构。

此嵌套行的行为完全像常规行。您可以选择一个列结构，添加模块，并在需要时嵌套另一行 - 借助其无限嵌套性。您还可以通过拖动来调整列的大小，因此调整宽度会感觉直观，并且不涉及数学或间距hacks。

默认情况下，嵌套行也完全响应。从构建器中，您可以在各个屏幕上调整布局。由于它是Divi 5框架的一部分，因此它可以与其他功能（例如选项组预设和设计变量）完美搭配。我们还将分享将嵌套行与Divi 5的高级功能相结合的技巧，以优化您的画廊设计工作流程。

了解有关Divi 5的嵌套行

是什么使嵌套行不同？

在Divi 4中，使用行，专业部分和布局创造性地涉及自定义图像库布局，以实现更高级的设计。这意味着如果您没有设计专有技术，那将是具有挑战性的。即使您有经验，您也仅限于一些布局结构。

嵌套行提供了一种更直观的方法。您不再需要依靠单独的行或专业部分。您可以轻松地嵌套行，并与模块混合并匹配它们以创建无限的设计模式。想创建产品展示柜吗？创建一个两列行，在左侧添加特色图像，并在右侧添加描述，在左图下方筑巢一个三列行，然后添加支持图像。您的想象力是极限！

6图库布局，您可以使用嵌套行构建

为了让您了解可能的可能性，我们创建了六个图像库布局设计，并提供了有关如何使用嵌套行用于设计它们的说明。让我们浏览它们。

布局1：内联CTA画廊

分层的网格布局使用了现代的杂志式网格，该网格以大型视觉效果，支撑镜头和精心放置的文本结合突出显示一个项目。第一部分是一个2列嵌套的行（嵌套在另一个2列行中），其中有两个图像，接下来是另一个大图像。水平文本横幅破坏了网格，添加了上下文和通话行动。底部带来了另一个三列布局，以继续故事，但具有更长的文本描述的空间。

此设计非常适合需要视觉节奏和清晰内容层次结构的投资组合，房地产展示或编辑布局。它在屏幕尺寸的同时仍然感到结构和故意。

如何构建它

从两列行开始。在右侧添加一个图像，然后在左列中嵌套另一排。向所有人添加图片。然后，将另一个嵌套的行放在横幅下，以将文本段落与另一组视觉效果一起放置。重复整个结构或进行一些更改，例如将文本行放在嵌套图像上。

这种布局在每个视觉部分内部使用嵌套行的使用方式是独一无二的。 Divi 5的嵌套行允许结构灵活性，将单列中的行格式混合并在上下文元素下进行分层。

布局2：拆分焦点画廊

一个两列布局，左列在短文本块上方堆叠垂直图像，右列具有大图像，然后是一排三个较小的支撑图像。这种布置突出了一个主要的视觉时刻，同时为书面上下文和同一布局内的辅助图像带允许空间。

分裂的焦点画廊布局非常适合婚礼，活动或花卉画廊，每个视觉块都会捕捉到一个时刻或情感。当您想将大胆的焦点图像与支撑缩略图和小报价，推荐或简介消息旁边的小焦点相结合时，它也可以很好地工作。

如何构建它

创建一个2列行。在左列中，在顶部堆叠垂直图像，并使用两个单独的行在其下方的文本模块上堆叠。在右列中，在特色照片的顶部插入一个单个图像模块，然后在其下方添加一个嵌套的行，直接在其下方插入三个列以保持较小的支撑图像。

钥匙是在嵌套行中调整填充物，并将排水沟的宽度设置为1 ，以保持所有内容的紧绷和清洁。稍后，当您添加图像时，创建一个边框预设（将边框宽度设置为2 ，并将边框颜色为白色），然后将其应用于所有元素。

布局3：项目聚光灯画廊

这种布局将您的图像库转换为单个项目或产品的展示。每个项目不仅显示视觉效果，还具有自己的标签和呼吁性，使其非常适合投资组合，食谱，产品亮点或案例研究。

每个图像都遵循短两列行。左侧包含一个快速描述或项目名称，右侧具有一个按钮，邀请用户采取行动，例如现在的订单。项目Spotlight Gallery布局为您的画廊带来了更多的目的和互动。

如何构建它

在每个图像下，我们添加了一个两列嵌套行。我们使用左列进行简短说明，右列用于呼叫行动按钮。然后，我们使用全局样式对按钮进行了设计，并为每个画廊项目重复此结构以保持一致性。为了使行覆盖图像，我们将位置设置为绝对使用垂直偏移40px和z索引1000。

我们还为所有图像添加了阴影预设，这不仅使画廊具有抛光外观，而且还可以通过单击几下，让我在多个模块上应用一致的品牌来节省我的时间。

布局4：滚动揭示画廊

滚动揭示图库布局设计用于用户滚动随着用户滚动而展开的视觉讲故事。每个部分都有一个大图，并配对较小的支撑视觉效果（通过将多行嵌套在一起创建）。

它非常适合编辑画廊，食谱展示（突出显示步骤或成分），或者希望互动地捕获小组时刻的公司团队页面。它不是压倒性的观众，而是从视觉上引导他们完成每个故事，一次一次街区。

如何构建它

结构很简单：创建一个两列行。在左侧添加图像模块，标题，文本和一个按钮。在右侧，将一个带有两个列的新行嵌套在每个行中，并将图像模块插入每个行以支持视觉效果。然后，您可以堆叠单一和两列行以创建类似砌体的网格。

该布局的关键播放器是左图，它粘贴。要使您的特色截面棒，您需要创建一个模块组并启用滚动效果设置。单击您的模块组，然后转到设置>“高级>滚动效果”。

使您的模块组坚持到顶部，并将底部粘性限制到身体区域。当用户向下滚动时，特色图像将粘贴，而其他图像不断向上移动。

布局5：交错产品库

并非每个画廊都需要焦点图像或复杂的结构。有时，您只需要一组以交错结构排列的图像，这就是嵌套行悄悄地发光的地方。

这种布局非常适合电子商务或以产品为中心的网站，您想突出一个收藏，而不会使其感觉像典型的网格。它使用大量的空白和嵌套行来打破视觉单调，通过将一个，两个和三列图像行混合在单个部分中。结果是一种平衡的布局，感觉是手工制作和社论，非常适合展示产品详细信息，材料特写或互补物品。

它对于具有触觉或豪华产品的品牌（例如皮革制品，陶瓷或视觉讲故事的手工制作物品）特别有效。

如何构建它

创建一个两列行。在左列中使用嵌套行添加图像的堆叠布局。一排并排两张小照片，另一个有垂直图像。在右列中，嵌套一个带有三个列的新行，然后插入产品图像。在此下方，放置您的文本和按钮。

要创建重叠的手提包效果（例如在手工制作的部分中） ，请在其行中添加一个图像模块，然后使用绝对定位（高级>“位置”>“绝对” ）。然后，使用偏移滑块和z索引将其分层在两个部分之间。这使您可以创建杂志风格的布局，其中图像破坏了网格以增加视觉兴趣。

布局6：非对称投资组合网格

不对称的投资组合电网布局以干净的两列格式将讲故事和图像结合在一起。使用左列介绍一个带有标题，简短描述和CTA的项目。在右列中，一个三柱嵌套的行贴在大型特色图像上方，为通过支撑镜头显示了关键视觉效果的绝佳机会。

此设计非常适合介绍精选案例研究或投资组合的设计师，摄影师或机构。它在提供自然的滚动节奏和移动友好的流程时，一直集中注意力。

如何构建它

从两列行开始。在左列中，为您的标题和描述添加一个文本模块，然后是按钮模块（如果需要的话）。

在右列中添加嵌套行。选择三列布局，然后堆叠另一个图像模块。在嵌套行中插入三个支持图像，并在堆叠的图像模块中插入一个大图像。使用其他行结构创建更多模式。

为了保持一切对齐，请将天沟宽度设置为1 ，然后在上传之前将图片裁剪为一致的高度。使用全局图像预设（例如软边框或落下阴影），并悬停效果来保持互动效果但精致。

您还会注意到另一个嵌套的嵌套图像。我们将位置设定为绝对创建覆盖效果。

建立交互式图像画廊的主要技巧

布局到位后，撒上一些额外的细节，以使您的画廊更加精致。以下是：

1。创建悬停效果

添加悬停效果是使您的图像画廊感觉更加动态的最简单方法之一。它增加了互动性而不会分散内容，并在用户与它们互动时帮助图像感到活跃。

在Divi 5中，在图像中添加悬停效果很容易。在编辑时，您可以轻松切换到悬停（响应式模式）并自定义设置。

您不必为每个不同的图像或设置选项切换到悬停；只需切换一次，更改要自定义的所有元素，然后保存。我们更改了边框颜色，但您也可以尝试过滤器，更轻松地添加阴影，并更轻松地尝试过滤器。

如果您希望所有图像以相同的方式行事，则可以将其应用于单个图像或将其保存为预设。这是一个小细节，但它使您的画廊感到周到和互动，而Divi使它毫不费力。

2。使用复制/粘贴属性快速将样式应用于图像

在画廊中手动自定义每个图像可能很耗时，尤其是在应用诸如边界，阴影或悬停效果之类的一致样式时。虽然预设非常适合全球样式，但您可能不想为每个次要调整创建一个新的预设。

Divi 5的属性管理系统提供了简化的解决方案。只需单击几下，您就可以从一个图像中复制样式并将其应用于其他图像。您不必为每个图像手动重复相同的自定义过程。您可以复制和粘贴并保持一致性。

例如，自定义一个元素并将其属性复制并粘贴到其他元素中以复制样式。

Divi 5还允许更多的颗粒状控制。例如，您可以复制和粘贴特定属性组，例如仅设计设置或仅悬停效果。这使您的工作流程效率高和凝聚力。

3。使用夹具创建流体和响应式图像

在现代画廊的布局中，您的图像不仅应该扩展，而且还应对不同的屏幕尺寸进行智能响应。这正是Clamp（）函数可以帮助您实现的目标。

Divi 5支持Clamp（）和许多其他高级单元，这些单元允许您在任何地方手动输入尺寸值，包括图像宽度，填充和边距字段。夹具（）是响应能力的理想选择。它使您可以将最小，理想和最大值设置为一行。

例如，一个夹具（1200px，30vw，1400px）告诉Divi永远不要以1200px的速度低于1200px，扩展高达视口宽度的30％，但以1400px的限制。

这对于图像条或交错布局特别有用，您希望在没有断点的情况下更流畅的网格。当与嵌套行结合使用时，Clamp（）帮助每个块自然适应，而无需单独的移动调整。

4。预览和调整不同的设备

一旦您的布局在台式机上看起来不错，就可以使用Divi的内置响应式编辑工具轻松地对平板电脑和移动设备进行微调。在设备视图之间切换并调整每个屏幕的图像大小，间距和文本对齐等设置。

例如，您可能希望以不同的方式减少移动或堆栈列上的行之间的填充，以获得更好的滚动体验。花几分钟来调整这些设置可以使您的画廊在每个屏幕上都感到干净和专业。

免费下载图库布局

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

下载文件

免费下载

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

下载

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

用Divi 5建立嵌套的图像画廊（以及更多）

Divi 5的嵌套行通过允许您将行放置在行中来简化复杂的布局。他们还提供无限的嵌套性和对您的设计的精确控制。

嵌套行只是Divi 5的独家功能之一。请注意Divi新的基于Flexbox的布局系统，该系统还引入了各种新的行模板和Flexbox控件，以为您提供所有工具和简单性，以制作您可以想象的任何布局。

随着我们继续改善Divi 5，您可以期望更多功能可以增强您的设计功能并简化工作流程。

如果您一直在艰难地建造画廊，那么现在是尝试Divi 5并体验嵌套行和视觉布局工具如何简化所有内容的最佳时机。

Divi 5已准备好在新网站上使用，但是请等一下，然后再迁移现有网站。