WordPress divi主题

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

by | May 11, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

让我们开始吧!

预览

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

图像角落

免费下载画廊部分布局

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

订阅我们的 Youtube 频道

让我们开始重新创建

添加新部分

间距

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

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

图像角落

添加新行

立柱结构

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

WordPress divi主题

图像角落

背景颜色

接下来添加白色背景颜色。

  • 背景颜色:#ffffff

图像角落

浆纱

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

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

图像角落

间距

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

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

图像角落

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

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

width: 25% !important;

图像角落

将图像模块添加到第 1 列

上传 1:1 图片

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

fiverr建站WordPress程序员

图像角落

灯箱

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

图像角落

浆纱

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

图像角落

独立站选品工具

默认过滤器

我们也在改变亮度。

图像角落

悬停过滤器

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

图像角落

默认 Z 索引

继续进行可见性设置并确保 Z 索引在其默认状态下保持为“0”。

高质量外链购买

图像角落

悬停 Z 指数

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

图像角落

克隆图像模块 3 次并放置在剩余列中

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

图像角落

JasperAI 10000字免费额度试用

更改图像

更改副本中的图像。

图像角落

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

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

图像角落

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

添加内容

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

WordPress备份工具updrafplus

图像角落

背景颜色

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

  • 背景颜色:#ffffff

图像角落

文字设置

转到设计选项卡并更改文本设置。

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

图像角落

浆纱

我们也在缩小模块的宽度。

图像角落

间距

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

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

图像角落

Z 指数

并增加 Z 指数。

图像角落

克隆文本模块 3 次

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

图像角落

定位

相应地定位重复项:

图像角落

自定义文本模块

文本模块 #1

负上边距

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

图像角落

盒子阴影

我们还使用以下设置添加了一个盒子阴影:

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

图像角落

文本模块 #2

更改编号

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

图像角落

文本对齐

修改文本对齐方式。

图像角落

模块对齐

并在尺寸设置中更改模块对齐方式。

图像角落

间距

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

  • 最高边距:-6vw
  • 左填充:0.9vw

图像角落

盒子阴影

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

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

图像角落

文本模块#3

更改编号

进入第 3 列的文本模块! 更改内容框中的数字。

图像角落

负上边距

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

图像角落

盒子阴影

也使用盒子阴影。

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

图像角落

文本模块#4

更改编号

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

图像角落

文本对齐

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

图像角落

模块对齐

在尺寸设置中修改模块对齐方式。

图像角落

更改间距

接下来修改间距设置。

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

图像角落

盒子阴影

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

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

图像角落

克隆整行

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

图像角落

更改编号和图像

确保你改变了所有的图像和数字,你就完成了!

图像角落

预览

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

图像角落

最后的想法

在这篇文章中,我们向您展示了如何创建一个带有标记图像角的漂亮画廊。 这是一种以美观的方式展示您的图像的独特方式。 您还可以在教程开始时下载 JSON 文件。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题