如何在 Divi 中创建自定义照片库滑块

我们都知道滑块非常适合在折叠上方一个方便的位置通过特色服务、产品或页面来吸引用户。 一些网站（我认为是摄影师）需要在主页上展示他们的一个或多个照片库。 为此使用滑块可能是一个不错的选择。 但是，您可能没有考虑过像这样在滑块中展示您的照片库。

在本教程中，我将向您展示一种将 Divi 图像画廊嵌入到幻灯片中的简单方法，以在 Divi 中创建一个完全自定义的照片画廊滑块。 诀窍是在滑块的内容区域中创建一个 WordPress 图片库。 然后，您只需要确保并选择使用 Divi Gallery 而不是默认的 WordPress Gallery 样式的选项。 实施起来超级简单有趣。

让我们开始吧。

抢先看

这是我们将在本教程中构建的照片库滑块的先睹为快。

免费下载自定义照片库滑块布局

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

下载文件

免费下载

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

下载

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

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您需要进行以下设置：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）
3. 大约 6-8 张图像用于滑块图像和照片库

之后，您将有一个空白画布开始在 Divi 中构建一些悬停选项卡。

在 Divi 主题选项中启用 Divi Gallery 选项

Divi 允许您用 Divi Gallery 显示替换默认的 WordPress Gallery 显示。 因此，每当您创建一个 WordPress 画廊并将其嵌入到模块中时，该画廊就会像使用 Divi Gallery Module 的画廊一样显示。 这基本上允许您将 Divi 图像库添加到 Divi Builder 中的任何模块。 在我们的例子中，我们将向滑块模块添加一个 Divi Gallery。

要更改设置，请导航到 Divi > 主题选项。 然后在“常规”选项卡下，单击以启用“Divi Gallery”选项。

就是这样！ 现在默认的 WordPress Gallery 简码将显示一个 Divi 风格的照片库。

在 Divi 中创建自定义照片库滑块

部分和行

要开始，请继续创建一个带有一列行的常规部分。

然后按如下方式更新行设置：

• 宽度：100%（因此滑块在移动设备上为全角）
• 填充：0px 顶部，0px 底部
• 圆角：20px

构建滑块内容

接下来，向该行添加一个滑块模块。

打开滑块设置并删除默认添加的幻灯片之一。 然后单击幻灯片上的齿轮图标以打开该幻灯片的幻灯片设置。

然后使用以下内容更新幻灯片内容：

• 标题：我们的画廊
• 按钮：查看所有
• 身体：这是我们的画廊。 一探究竟。

在正文内容区域下，单击添加媒体按钮。

在 Media Library 弹出窗口中，选择左上角的 Create Gallery 选项卡。 然后选择要用于图库的 6 张图像，然后单击右下角的“创建新图库”按钮。

这将带您进入弹出窗口内的编辑类别页面。 忽略右上角的画廊设置，因为 Divi Gallery 样式将覆盖这些 WordPress Gallery 设置。

然后单击“插入图库”按钮。

这会在滑块模块内容中放置一个图库短代码。 如果您希望图库显示在当前正文之后，请确保将短代码放在内容之后。

现在，您的滑块模块的内容区域中显示了一个嵌入式 Divi 风格的画廊。 很酷的东西！

让我们通过添加主幻灯片图像来继续更新我们的幻灯片内容。

现在我们已准备好滑块内容，请保存幻灯片 1 的设置。

滑块设置

确保保存单个幻灯片的设置。 然后更新主滑块的以下设计设置。 这将确保设计更新将影响您将添加的所有单个幻灯片。

图像边框和框阴影

• 图像圆角：20px
• 图片边框宽度：40px（桌面），0px（平板）
• 图像边框颜色：rgba(0,0,0,0)

• 图像框阴影：见截图
• 框阴影水平位置：-170px
• 框阴影垂直位置：-220px
• 框阴影传播强度：-60px
• 阴影颜色：rgba(255,255,255,0.2)

标题和正文

• 标题字体：Karla
• 标题文字对齐：右
• 标题文字大小：48px
• 标题行高度：1.3em
• 正文文字大小：16px
• 正文字母间距：2px
• 车身线高：2em

按钮样式

• 按钮文字大小：16px
• 按钮背景颜色：#333333
• 按钮边框宽度：0px
• 按钮边框半径：20px
• 按钮字母间距：2px
• 按钮字体：Karla
• 按钮字体粗细：粗体
• 按钮图标：见截图
• 按钮对齐：右
• 按钮边距：-5em 右
• 按钮填充（桌面）：左 3em，右 5em
• 按钮填充（电话）：左 2em，右 6em

• 按钮框阴影：见截图
• 框阴影垂直位置：0px
• 框阴影传播强度：20px（桌面），10px（手机）
• 阴影颜色：#ffffff

滑块填充

• 填充：顶部 10%，底部 10%

向幻灯片 1 添加背景渐变

现在我们已经有了滑块样式，我们可以为我们的单个幻灯片添加自定义背景渐变。 打开幻灯片 1 的幻灯片设置并更新以下内容：

• 背景渐变左颜色：#6d0066
• 背景渐变右颜色：#000000
• 渐变类型：径向
• 径向：左上角

创建幻灯片 2

要创建第二张幻灯片，我们可以使用复制图标复制幻灯片 1。 然后打开复制的幻灯片（幻灯片 2）设置。

此时您可以根据需要更新新幻灯片的内容。 例如，您可以添加一个新的幻灯片图像并生成另一个画廊嵌入的短代码，以向幻灯片添加一个新的照片库。

然后更新背景渐变如下：

• 背景渐变左颜色：#0c71c3

最后结果

这是最终结果。

这是滑块在平板电脑和手机上的样子。

如果您取出幻灯片图像，则这里是滑块，以便仅显示幻灯片内容和图库。

最后的想法

在 Divi 的滑块模块中嵌入 divi 画廊的能力为创建一些漂亮的照片画廊滑块提供了机会，只需很少的努力。 希望本教程会给您一些灵感，以创建一些漂亮的照片库滑块。

有关此 divi 画廊嵌入技术的更多信息（包括设计嵌入 divi 画廊的提示），请查看有关如何将 Divi 画廊嵌入到切换中的帖子。

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

干杯!