Divi 图库模块是在您的网站上展示图片库的好地方。 默认情况下，图库模块将在网格布局中显示您的图像，完全没有太多样式，这对于将图像保留为主要设计元素非常有用。 但是，如果您想获得一点创意，您可以使用不同的边框设计为您的图像构图，以帮助您的图片库脱颖而出。 图库模块使这个过程非常容易完成，结果可能会让您感到惊讶。
在本教程中，我将向您展示如何使用 Divi Gallery 模块为您的图片库创建独特的边框设计。
让我们开始吧！
抢先看
#1 宝丽来图片库
开始建筑设计#1
#2 干净的网格设计
开始建筑设计#2
#3 整个画廊背后的自定义背景图像
开始建筑设计#3
#4 每个画廊项目背后的自定义背景图像
开始建筑设计#4
#5 框阴影和边框组合
开始建筑设计#5
#6 电影地带边框设计
开始建筑设计#6
你需要什么开始
订阅我们的 Youtube 频道
对于本教程，您需要安装并激活 Divi 主题。 您还需要将 12 张图片添加到您的媒体库中，以用于构建图片库。 对于使用网格布局的 Divi 画廊模块，如果您计划在灯箱显示中打开图像，则图像的大小应约为 1500 像素 x 800 像素，以便在大多数桌面上很好地填充屏幕。
设置您的新页面
对于初学者，您需要创建一个新页面，为页面命名，然后部署 Divi Builder。 选择“从头开始构建”选项，然后发布您的页面。 然后点击在前端构建。
保存 Divi Gallery 模块模板
由于我们将为 Divi Gallery 模块设计 5 种不同的边框样式，因此将基本的图库模块模板保存到我们的库中会很有帮助，这样我们每次设计新图库时都不必从头开始.
创建一个具有一列行的新部分，然后将图库模块添加到该行。
Divi 将使用您的媒体库中的一些图像填充画廊模块，以网格显示形式显示，如下所示：
在图库模块设置中，单击灰色加号图标将 12 个图像添加到图库。 我正在使用餐厅画廊页面布局中的图像。
然后更新 Divi Gallery 模块设置，如下所示：
图片数量：12
显示标题和说明：否
显示分页：否
这将作为一个很好的模板向前发展。 要将图库模块保存到您的 Divi 库，请在将鼠标悬停在模块上时单击灰色模块菜单中的保存到库图标。 然后将模板命名为“Gallery Module Template”并将其保存到库中。
当您想将保存的图库模块添加到您的页面时，您需要做的就是像往常一样单击添加一个新模块。 然后在弹出窗口中选择从库中添加选项卡，然后单击名称为“画廊模块模板”的画廊模块。
就是这样。 现在让我们来看看那些边框设计！
#1 宝丽来图片库
下一个设计是看起来像宝丽来照片的图像的流行边框。 如果您想显示图像标题，这是一个特别有用的布局。
这是如何做到的。
部分设置
创建一个具有单列行的新常规部分。 然后从库中添加保存的 Divi Gallery 模块模板（如上所述）。 在编辑图库模块之前，打开部分设置并添加灰色背景色，以便我们的白色边框会弹出一点。
背景：#dddddd
行设置
接下来使用以下内容更新行设置：
天沟宽度：1
这将摆脱图像之间的默认边距间距。 稍后我们将添加我们自己的自定义间距。
图库模块设置
打开图库模块设置并更新以下内容：
显示标题和说明：是
标题字体粗细：粗体
标题字体样式：TT
标题文本对齐方式：居中
标题行高度：2em
图片上边框宽度：10px
图片顶部边框颜色：#ffffff
图片左边框宽度：10px
图片左边框颜色：#ffffff
图片右边框宽度：10px
图片右边框颜色：#ffffff
要在我们的图像之间创建间距，请将以下边框添加到画廊项目：
边框宽度：10px
边框颜色：#dddddd（与部分背景颜色匹配）
要为宝丽来边框设计的底部着色，我们需要为模块添加白色背景。
背景颜色：#ffffff
最后结果
这是宝丽来边框设计的最终结果。
#2 干净的网格设计
如果您正在为图像寻找简单干净的网格样式，则此边框设计是不错的选择。 它平衡良好，对眼睛很容易。
这是如何做到的。
创建一个具有单列行的新常规部分。 然后从库中添加保存的 Divi Gallery 模块模板（如上所述）。
行设置
在编辑图库模块之前，打开部分设置并更新以下内容：
天沟宽度：1
自定义填充：0px 顶部，0px 底部
边框宽度：10px
边框颜色：#dddddd
这个行边界是必要的，以匹配我们画廊的外部间距和图像之间的间距。
图库模块设置
现在打开图库模块设置并通过更新以下内容为您的图库项目和图库图像添加边框：
图片边框宽度：20px
图片边框颜色：#ffffff
边框宽度：10px
边框颜色：透明（这对于显示背景颜色很重要）
现在向图库模块添加背景颜色以完成设计。
背景颜色：#dddddd（与行边框颜色匹配）
因为您的图库项目边框是透明的，所以它继承了背景的颜色。
最终设计
通过更改背景颜色更改边框颜色
如果您想使用不同的边框颜色，您可以将背景颜色更新为您想要的任何颜色。 但是，您需要取出行边框，在模块中添加以下间距：
自定义填充：顶部 10 像素，底部 10 像素，左侧 10 像素，右侧 10 像素
现在您可以将背景颜色调整为您想要的任何颜色：
#3 整个画廊背后的自定义背景图像
此设计允许您使用背景图像作为图像边界的纹理背景。 这是使每个图像边框唯一的好方法，因为它显示了模块背景图像的特定区域。 该设置与上面的清洁网格设计非常相似。
这是如何做到的。
创建一个具有单列行的新常规部分。 然后从库中添加保存的 Divi Gallery 模块模板（如上所述）。
行设置
在编辑图库模块之前，打开部分设置并更新以下内容：
天沟宽度：1
自定义填充：0px 顶部，0px 底部
图库模块设置
现在更新图库模块设置如下：
背景图片： [add image] （你还不能看到它）
背景颜色：#dddddd（仅当您使用具有透明度的 png 背景图像时才会显示）
图片边框宽度：10px
图片边框颜色：#ffffff
边框宽度（模块）：10px
边框颜色：#ffffff
然后将以下自定义 CSS 添加到图库项：
padding: 3%;
这将创建画廊项目之间的分离以完成设计。
最后结果
#4 每个画廊项目背后的自定义背景图像
此设计允许您使用背景图像单独作为每个画廊项目的边框。 您可以创建任何您想要的自定义图像或使用我们预制布局中包含的背景图像之一。 我正在使用 Meetup Landing Page Layout 中的一个。
这是如何做到的。
创建一个具有单列行的新常规部分。 然后从库中添加保存的 Divi Gallery 模块模板（如上所述）。
行设置
在编辑图库模块之前，打开部分设置并更新以下内容：
使这一行全宽：是
天沟宽度：2
图库模块设置
现在更新图库模块设置如下：
图片边框宽度：10px
图片边框颜色：#ffffff
然后将以下自定义 CSS 添加到 Gallery Item：
padding: 30px; background-image: url(""); background-size: contain; background-repeat: no-repeat; background-position: right;
接下来，您需要上传要放在每个图库项目后面的自定义背景图像。 对于此示例，我使用的是来自我们预制布局包之一的图像。 将图像上传到 WordPress 媒体库后，将图像 URL 复制到剪贴板。
现在返回并打开图库模块设置并将 URL 粘贴到自定义 CSS 中，其中显示“在此处插入图片 url”。 确保将网址保留在引号内。
最后结果
这是最终结果。
#5 框阴影和边框组合
盒子阴影非常适合为您的画廊提供自定义风格。 您可以在 Divi 画廊模块图像上使用框阴影来创建一个破碎的网格设计，以独特的方式构图图像。 您还可以将框阴影与各种可能性的边框设计相结合。
这是如何做到的。
创建一个具有单列行的新常规部分。 然后从库中添加保存的 Divi Gallery 模块模板（如上所述）。
添加图像边框和框阴影
打开图库设置并更新以下内容：
图片边框宽度：10px
图片边框颜色：#ffffff
图像框阴影：见截图
盒子阴影水平位置：-30px
盒子阴影垂直位置：-30px
盒子阴影传播强度：-10px
阴影颜色：#e08474
添加画廊项目边框
盒子阴影设计看起来不错，就像现在一样。 但是，您还可以通过更新以下内容为您的图库项目添加额外的边框：
右边框宽度：7px
右边框颜色：#dddddd
右边框样式：虚线
底部边框宽度：7px
底部边框颜色：#dddddd
底部边框样式：虚线
我添加了一个虚线边框样式只是为了提醒您可用的不同样式。 随意使用其他样式（如实线或虚线）。
行设置
要为您的设计提供更多空间，请打开行设置并更新以下内容：
使行全宽：是
最终设计
这是最终的设计。
#6：胶片边框设计
对于最后一个设计，我想我会向您展示一些更独特的东西。 此设计仅在画廊项目的右侧和左侧使用虚线边框样式，以类似于胶片的方式划分每列图像。
这是如何做到的。
创建一个具有单列行的新常规部分。 然后从库中添加保存的 Divi Gallery 模块模板（如上所述）。
行设置
在编辑图库模块之前，打开行设置并将装订线宽度更改为 1。
天沟宽度：1
这将摆脱图像之间的默认边距。
图库模块设置
接下来，打开图库设置并更新以下内容：
添加虚线图像边框
图片右边框宽度：8px
图像右边框颜色：#dddddd
图像右边框样式：虚线
图片左边框宽度：8px
图像左边框颜色：#dddddd
图像左边框样式：虚线
为间距添加画廊项目边框
左边框宽度：20px
左边框颜色：#ffffff
右边框宽度：20px
右边框颜色：#ffffff
添加图像框阴影
图像框阴影：见截图
盒子阴影模糊强度：0px
盒子阴影传播强度：-10px
阴影颜色：#222222
添加背景颜色
背景颜色：#222222
然后将以下自定义 CSS 添加到 Gallery Item：
padding: 5px 10px;
最终结果
现在查看结果。
最后的想法
我希望这六个边框设计示例能为您在使用 Divi Gallery Module 时为您的图像创建一些自定义边框设计提供一些灵感。 一旦您掌握了 Divi Gallery 模块可用的设置，只需要一点创造力。 因此，用不同的图像、颜色和间距探索您自己的新设计选项，尽情享受吧。
我期待在评论中收到您的来信。
干杯!
