如何使用 Divi Gallery 模块创建全角图像库

全宽图像画廊在网站上看起来总是很棒。 全角画廊跨越浏览器窗口的整个宽度。 额外的空间允许图像保持更大的尺寸，这对用户体验很有好处。 网格布局提供了一种美学设计，将图像组织成列，可以在所有浏览器宽度上很好地调整。

在本教程中，我将向您展示如何使用 Divi Gallery 模块创建全角图像库。 您可能会惊讶于在 Divi 中这样做是多么容易。 我还将提到几种方法，您可以使用自定义间距来更好地控制移动设备上的全角画廊。

让我们开始吧。

之前和之后

这是带有 12 张图像的默认 Divi Gallery 模块。

这是您可以轻松创建的示例全角图片库。

准备您的设计元素

对于本教程，您需要安装并激活 Divi 主题。 您还需要将 12 张图片添加到您的媒体库中，以用于构建图片库。 对于使用网格布局的 Divi 画廊模块，如果您计划在灯箱显示中打开图像，则图像的大小应该在 1500 像素 x 800 像素左右，以便它在大多数桌面上很好地填充屏幕。

对于本教程，我将使用 Divi Builder 中免费提供的 Restaurant Gallery Page 预制布局中的图像。 您可以在本文底部下载所有图片。

实现全宽 Divi Gallery 模块

订阅我们的 YouTube 频道

设置新页面

首先，创建一个新页面，为页面命名，然后部署 Divi Builder。 选择“从头开始构建”选项，然后发布您的页面。 然后在前端点击构建。

创建图片库

部署 Divi Builder 后，继续创建一个具有一列行的新常规部分，并向该行添加一个 Divi Gallery 模块。

Divi 将使用您的媒体库中的一些图像以网格显示方式填充库模块，如下所示：

在 Divi 画廊模块设置中，单击灰色加号图标将 12 张图像添加到画廊。

然后更新Divi Gallery模块设置如下：

图片数量：12
显示标题和说明：否
显示分页：否

为图库创建全角布局

要为图库创建全角布局，让我们暂时保存图库设置并打开行设置。 在设计选项卡下，更新以下内容：

使这一行全宽：是
天沟宽度：1

这是启动和运行全角图片库的最简单方法。 选择“Make This Row Fullwidth”与将装订线宽度设置为“1”相结合将使图库跨越该部分的全宽（在所有浏览器尺寸上）并去除图像之间的间距。

画廊也将继续在移动设备上覆盖整个页面。

自定义图像悬停叠加选项

要完成全角图片库的设计，自定义 Divi Gallery 模块设置中内置的图像悬停叠加选项会有所帮助。 您可以更改缩放图标、图标颜色和叠加颜色。 为此，请打开图库设置并更新以下内容：

缩放图标颜色：#ffffff
悬停叠加颜色：#333d48
悬停图标：见截图

现在让我们看看最终的设计。

更多全宽图像库间距选项

使用装订线宽度间距创建全宽布局

在 Divi Gallery Module 中自定义图像间距的最简单方法是调整其父行的装订线宽度。 装订线宽度是指列之间的间距。 对于任何 Divi Row 元素，装订线宽度的可选值范围为 1 到 4。

1 表示列之间的零边距。
2 表示列之间有 3% 的右边距。
3 表示列之间的右边距为 5.5%。
4 表示列之间有 8% 的右边距。

由于我们使用的是 Divi Gallery 模块，因此装订线宽度也指的是画廊项目之间的间距。 因此，向行添加装订线宽度将调整图库模块中图库项目/图像的间距。

使用自定义宽度更好地控制移动设备上的间距

如果“使此行全宽”选项设置为“是”并且装订线宽度为 2 或更多（除 1 之外的任何值），Divi 将自动调整行的宽度以提供额外的外部间距。 这是必要的，因为装订线宽度仅适用于列/画廊项目之间的间距，而不适用于行本身。 但是，这可能会增加比您在移动设备上想要的更多的边距。 例如，如果您启用了“使此行全宽”选项并使用 2 个装订线宽度，则您的行在移动设备上的实际宽度将为 89%（不是 100%）。 因此，如果您希望该行在移动设备上跨度为 100%，则可以改用“自定义宽度”选项。 通过为行指定 100% 的自定义宽度，行的宽度将保持 100%，而不管装订线宽度值如何。 现在，您可以使用行填充简单地添加行的外部间距。 这将使您更好地控制台式机、平板电脑和智能手机上的外部间距。

这是一个如何工作的示例。 打开行设置并更新以下内容：

自定义宽度：100%
天沟宽度：2

请注意画廊的右侧或左侧没有边距。

现在将以下自定义填充添加到行：

自定义填充（桌面）：顶部 5%，底部 5%，左侧 5%，右侧 5%
自定义填充（智能手机）顶部 5%，底部 5%，左侧 0%，右侧 0%

桌面（和平板电脑）上的 5% 填充将提供我们需要匹配画廊项目之间的间距的外部间距。

通过去掉智能手机的左右自定义填充，图像将跨越浏览器的整个宽度，使图像更具可见性。

为没有装订线宽度的图库项目添加自定义间距

如果您想更好地控制 Divi Gallery 模块的间距，您实际上可以在画廊项目之间添加自己的自定义间距，而不是使用 Gutter Width。 为此，您需要将装订线宽度设置为 1，然后在 Divi 画廊模块设置中的画廊项目之间添加间距。 有关更多信息，请查看有关使用 Divi Gallery 模块创建具有自定义间距的图像库的完整教程

了解有关 Divi Gallery 模块的更多信息

查看以下教程，了解更多自定义 Divi Gallery 模块的方法：

• Divi Gallery 模块图像的 6 种独特边框设计
• 在不同断点处更改 Divi Gallery 模块中的列数
• 使用 Divi Gallery 模块创建自定义间距的图库
• 如何使用 Divi 的图库模块创建从黑白变为彩色的图库

最后的想法

希望本教程将帮助您了解如何使用 Divi Gallery Module 在您的下一个项目中创建一些漂亮的全宽图像画廊。 不要忘记探索 Divi 的所有内置设计选项和悬停效果，让您的图片库更加突出。

我期待在下面的评论中收到您的来信。

干杯!