如何使用 Divi 向下滑动显示您画廊图片的标题和说明

如果您正在构建一个图像在设计中发挥核心作用的网站，您可能希望在某个时候包含一个画廊。 这就是 Divi Gallery 模块的用武之地。它允许您直接从媒体库中选择图像并以有组织的结构显示它们。 默认情况下，您也可以动态显示每个图像的标题和说明。 但是，如果您希望限制设计中显示的文本数量，您可能希望在悬停图像时向下滑动显示图像的标题和说明。 在本教程中，我们将向您展示如何做到这一点。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载布局

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

下载文件

免费下载

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

下载

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

https://youtu.be/p6Bh7wz3HMc

订阅我们的 YouTube 频道

1. 上传带有标题和说明的图片

前往媒体库

本教程的第一部分重点介绍在媒体库中添加带有标题和说明的图像。 要到达那里，请导航到您的WordPress 仪表板 > 媒体 > 库。

上传图片

在那里，上传要包含在图库中的图像。

添加标题和说明

您需要为每张图片分别添加标题和说明。 为了获得最佳结果，请尝试为每个图像保持相似的文本长度。

2. 用 Divi 创造设计

创建新页面或打开现有页面

上传图像后，就可以在 Divi 中构建设计了。 创建一个新页面或打开一个新页面并在顶部启用 Visual Builder。

添加第 1 节

背景颜色

向您的页面添加新版块并打开版块设置。 应用以下背景颜色：

• 背景颜色：#ededed

添加第 1 行

列结构

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

间距

尚未添加模块，打开行设置，转到设计选项卡并应用以下顶部和底部边距：

• 最高利润率：5%
• 底边距：5%

将文本模块添加到第 1 列

添加 H2 内容

是时候添加模块了，从第 1 列中包含一些 H2 内容的文本模块开始。

H2 文本设置

转到模块的设计选项卡并相应地更改 H2 文本设置：

• 标题 2 字体：蒙特塞拉特
• 标题 2 文字大小：
  • 桌面：62px
  • 平板电脑：48px
  • 电话：32px
• 标题 2 行高：1.3em

浆纱

也修改模块在不同屏幕尺寸上的最大宽度。

• 最大宽度：
  • 桌面：500px
  • 平板电脑：400px
  • 电话：250px

将分频器模块添加到第 1 列

能见度

我们在第 1 列中需要的下一个也是最后一个模块是分频器模块。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

线

然后，转到设计选项卡并更改线条颜色。

• 线条颜色：#ffc000

浆纱

也修改模块的大小设置。

• 分隔线重量：5px
• 最大宽度：100px
• 高度：5px

将文本模块添加到第 2 列

添加内容

在第 2 列中，我们唯一需要的模块是带有一些描述内容的文本模块。

文字设置

更改模块的文本设置如下：

• 文字字体：Lato
• 文本行高：2.2em

间距

也应用一些上边距。

• 上边距：50px

添加第 2 节

在前一个下面添加另一个部分。

渐变背景

打开部分设置并应用渐变背景。

• 颜色 1：#ededed
• 颜色 2：#ffffff
• 渐变类型：线性
• 起始位置：20%
• 结束位置：20%

间距

转到该部分的设计选项卡并删除所有默认的顶部和底部填充。

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

添加第 1 行

列结构

继续使用以下列结构向该部分添加新行：

背景颜色

尚未添加模块，打开行设置并应用背景颜色。

• 背景颜色：#f4f4f4

浆纱

接下来转到行的大小设置并应用以下更改：

• 使用自定义装订线宽度：是
• 天沟宽度：2
• 宽度：90%
• 最大宽度：1580px

间距

我们也在自定义填充值。

• 顶部填充：150px
• 底部填充：0px
• 左填充：5%
• 右填充：5%

将图库模块添加到列

选择上传的图片

是时候使用图库模块添加图像了！ 在本教程的第一部分中选择您上传到媒体库的图像。

元素

悬停效果仅在桌面上有意义。 在较小的屏幕尺寸上，没有悬停，而触摸会触发灯箱效果。 出于这个原因，我们只在桌面上显示标题和说明，我们在较小的屏幕尺寸上禁用它们。 我们还禁用了分页。 您可以在元素设置中找到这些选项。

• 显示标题和说明
  • 台式机：是
  • 平板电脑和手机：否
• 显示分页：否

布局

转到模块的设计选项卡，然后更改布局。

• 布局：网格
• 缩略图方向：纵向

覆盖

我们也在修改覆盖设置。

• 叠加图标颜色：#ffffff
• 叠加背景颜色：rgba(0,0,0,0.25)

文字设置

接下来，我们将在文本设置中更改文本颜色。

• 文字颜色：浅

标题文字设置

然后，我们将设置标题文本的样式。

• 标题标题级别：H3
• 标题字体：蒙特塞拉特
• 标题文字大小：20px

字幕文本设置

我们也在更改标题文本设置。

• 字幕字体：Lato
• 标题文字颜色：#efefef
• 标题字母间距：0.5px
• 字幕行高度：1.9em

画廊项目 CSS

然后，我们将转到高级选项卡。 在那里，我们将以下 CSS 代码行添加到画廊项目标题 CSS 框：

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

画廊项目标题 CSS

我们将在画廊项目标题 CSS 框中使用这些代码行：

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;
padding-bottom: 20px;

3. 应用显示效果

将 CSS ID 添加到图库模块

现在我们的设计已经到位，我们可以专注于一些必要的步骤来创建显示效果。 我们要做的第一件事是向我们的画廊模块添加一个 CSS ID。

• CSS ID：divi-gallery

在图库模块下方添加代码模块

然后，我们将在 Gallery Module 下方添加一个 Code Module。

添加样式标签

为了创建效果，我们将使用一些 CSS 代码。 为了为该代码准备我们的代码模块，我们将在代码框中放置一些样式标签。

在样式标签之间插入 CSS 代码

我们将在样式标签之间复制粘贴以下 CSS 代码行：

#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #FE7541;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

就是这样！ 保存页面设置并退出 Visual Builder 以查看将鼠标悬停在图库项目之一时的结果。

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的内置图库模块发挥创意。 更具体地说，我们向您展示了如何在将图像悬停在桌面上时向下滑动显示图像的标题和说明。 这有助于您保持视觉设计，而不会一次显示太多文本。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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