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

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

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

让我们开始吧。

之前和之后

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

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

准备你的设计元素

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

对于本教程，我将使用来自餐厅画廊页面预制布局的图像，该布局可从 Divi Builder 中免费获得。 您可以下载这篇文章底部的所有图片。

实现全宽 Divi Gallery 模块

订阅我们的 Youtube 频道

设置新页面

对于初学者，创建一个新页面，给你的页面一个标题，然后部署 Divi Builder。 选择“从头开始构建”选项，然后发布您的页面。 然后点击在前端构建。

创建图片库

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

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

在 Divi 图库模块设置中，单击灰色加号图标可将 12 个图像添加到图库。

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

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

为图片库创建全角布局

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

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

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

并且画廊也将继续跨越移动页面的全宽。

自定义图像悬停覆盖选项

要完成全宽图像库的设计，它有助于自定义 Divi 库模块设置中内置的图像悬停覆盖选项。 您可以更改缩放图标、图标颜色和覆盖颜色。 为此，请打开图库设置并更新以下内容：

缩放图标颜色：#ffffff
悬停覆盖颜色：#333d48
悬停图标：见截图

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

更多全宽图片库间距选项

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

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

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

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

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

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

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

自定义宽度：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 模块在您的下一个项目中创建一些漂亮的全角图像画廊。 不要忘记探索 Divi 的所有内置设计选项和悬停效果，以使您的图片库更加突出。

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

干杯!