使用 Divi 在令人惊叹的画廊网格中标记图像角

正在寻找一种独特而美丽的方式在您网站的画廊中显示图像？ 如果是这样，我们相信你会喜欢这篇文章。 我们将向您展示如何使用文本模块切断图像边角，作为在所有屏幕尺寸上保持 100% 响应的漂亮设计的一部分。 这是在保持出色设计的同时为图像添加编号标签的好方法。 您还可以免费下载设计示例的 JSON 文件。

让我们开始吧！

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

免费下载画廊部分布局

要了解免费的画廊部分布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

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

订阅我们的 YouTube 频道

让我们开始重建

添加新部分

间距

您需要做的第一件事是向您正在处理的页面添加一个新部分。 打开部分设置并删除所有默认的顶部和底部填充。

• 顶部填充：0px
• 底部填充：0px

添加新行

列结构

继续使用以下列结构添加新行：

背景颜色

接下来添加白色背景色。

• 背景颜色：#ffffff

浆纱

继续调整大小设置，并通过应用以下设置删除列、行和节之间的所有空间：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

间距

继续删除所有默认的顶部和底部填充。

• 顶部填充：0px
• 底部填充：0px

第 1、2、3 和 4 列主要元素

现在，为了确保所有屏幕尺寸都保持 4 列结构，我们将通过将以下 CSS 代码行分别添加到每个列主要元素来确保每一列保持其 25% 的宽度：

width: 25% !important;

将图像模块添加到第 1 列

上传 1:1 图片

是时候开始添加模块了！ 将新的图像模块添加到第一列并上传您选择的方形图像（或使用您可以在本文开头下载的压缩文件夹中找到的图像）。

灯箱

接下来在链接设置中启用灯箱选项。

• 在灯箱中打开：是

浆纱

为了确保图像在所有屏幕尺寸上都保持响应，我们还将启用“强制全宽”选项。

• 强制全角：是

默认过滤器

我们也在改变亮度。

• 亮度：50%

悬停过滤器

我们将在悬停时将其恢复为“100%”。

• 亮度：100%

默认 Z 索引

转到可见性设置并确保 Z 索引在其默认状态下保持“0”。

• Z 指数：0

悬停 Z 索引

但是，在悬停时，我们希望它与我们将在接下来的步骤中添加的编号标签文本模块重叠。 为此，我们将增加悬停 Z 索引值。

• Z指数：100

在剩余列中克隆图像模块 3 次和位置

完成第 1 列中的图像模块后，您可以将其克隆 3 次。 将重复项放在该行的其余三列中。

更改图像

更改副本中的图像。

将顶部边距添加到第 2 列中的图像模块

并在第二列中为图像模块添加一个上边距。

• 最高利润率：24.7vw

在图像模块 #1 下方添加文本模块

添加内容

我们在第 1 列中需要的下一个模块是文本模块。 向内容框中添加一个数字。

背景颜色

接下来更改背景颜色。 此颜色需要与您分配给该行的任何背景颜色相匹配。

• 背景颜色：#ffffff

文字设置

移至设计选项卡并更改文本设置。

• 文字字体：Lora
• 文本对齐：右
• 文字颜色：#000000
• 文字大小：3vw
• 文本行高：3vw

浆纱

我们还缩小了模块的宽度。

• 宽度：7vw

间距

接下来在间距设置中为模块创建一些空间。

• 顶部填充：0.5vw
• 底部填充：2.5vw
• 右填充：0.9vw

Z索引

并增加 Z 指数。

• Z指数：99

克隆文本模块 3 次

完成文本模块的一般步骤后，您可以将其克隆 3 次。

定位

相应地定位重复项：

自定义文本模块

文本模块 #1

负最高保证金

是时候根据它们的位置开始定制不同的文本模块了！ 打开第 1 列中的文本模块并添加一些负上边距。

• 最高利润率：-5.9vw

盒子阴影

我们还使用以下设置添加框阴影：

• 框阴影水平位置：7vw
• 框阴影垂直位置：5.9vw
• 框阴影传播强度：0px
• 阴影颜色：rgba(35,50,255,0.94)

文本模块 #2

更改编号

继续打开第二列中的文本模块并更改数字。

文本对齐

还要修改文本对齐方式。

• 文本对齐方式：左

模块对齐

并在大小设置中更改模块对齐方式。

• 模块对齐：右

间距

转到间距设置并添加一些负上边距。 也将填充添加到左侧而不是右侧。

• 上边距：-6vw
• 左填充：0.9vw

盒子阴影

通过添加框阴影完成文本模块设计。

• 框阴影水平位置：7vw
• 框阴影垂直位置：-6vw
• 框阴影传播强度：0px
• 阴影颜色：#ededed

文本模块 #3

更改编号

转到第 3 列中的文本模块！ 更改内容框中的数字。

负最高保证金

转到设计选项卡并添加一些负上边距。

• 上边距：-6vw

盒子阴影

也使用框阴影。

• 框阴影水平位置：-7vw
• 框阴影垂直位置：-6vw
• 框阴影传播强度：0px
• 阴影颜色：#ff2323

文本模块 #4

更改编号

进入下一个也是最后一个文本模块。 也在这里更改数字。

文本对齐

然后，更改文本对齐方式。

• 文本对齐方式：左

模块对齐

也在大小设置中修改模块对齐方式。

• 模块对齐：右

更改间距

接下来修改间距设置。

• 最高利润率：24.7vw
• 底部边距：-6vw
• 左填充：0.9vw

盒子阴影

并通过添加具有以下设置的框阴影来完成文本模块设计：

• 框阴影水平位置：-7vw
• 框阴影垂直位置：-5.9vw
• 框阴影传播强度：0px
• 阴影颜色：#000000

克隆整行

完成该行后，您可以根据需要将其克隆多少次，具体取决于要显示的图像数量。

更改编号和图像

确保更改所有图像和数字并完成！

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

最后的想法

在这篇文章中，我们向您展示了如何创建一个带有标记图像角的漂亮画廊。 这是一种以美观的方式展示您的图像的独特方式。 您还可以在本教程开头下载 JSON 文件。 如果您有任何问题或建议，请务必在下方评论区留言！

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。