WordPress divi主题

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

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

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

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

google广告开户

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

让我们开始吧。

抢先看

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

  divi 照片库滑块

  divi 照片库滑块

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

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

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

让我们来看看教程好吗?

你需要什么开始

要开始使用,您需要进行以下设置:

WordPress divi主题
  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)
  3. 大约 6-8 个图像用于滑块图像和照片库

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

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

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

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

  divi 照片库滑块

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

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

部分和行

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

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

  • 宽度:100%(因此滑块在移动设备上为全角)
  • 内边距:0px 顶部,0px 底部
  • 圆角:20px

  divi 照片库滑块

构建滑块内容

接下来,将滑块模块添加到该行。

  divi 照片库滑块

fiverr建站WordPress程序员

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

  divi 照片库滑块

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

  • 标题:我们的画廊
  • 按钮:查看全部
  • 身体:这是我们的画廊。 看看这个。

  divi 照片库滑块

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

独立站选品工具

  divi 照片库滑块

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

  divi 照片库滑块

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

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

高质量外链购买

  divi 照片库滑块

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

  divi 照片库滑块

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

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

JasperAI 10000字免费额度试用

  divi 照片库滑块

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

滑块设置

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

图像边框和框阴影

  • 图片圆角:20px
  • 图片边框宽度:40px(桌面),0px(平板)
  • 图片边框颜色:rgba(0,0,0,0)

  divi 照片库滑块

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

  divi 照片库滑块

WordPress备份工具updrafplus

标题和正文

  • 标题字体:卡拉
  • 标题文本对齐:右
  • 标题文字大小:48px
  • 标题行高:1.3em
  • 正文大小:16px
  • 正文字母间距:2px
  • 车身线高:2em

  divi 照片库滑块

按钮样式

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

  divi 照片库滑块

  • 按钮框阴影:见截图
  • 盒子阴影垂直位置:0px
  • 盒子阴影传播强度:20px(桌面),10px(手机)
  • 阴影颜色:#ffffff

  divi 照片库滑块

滑块填充

  • 填充:顶部 10%,底部 10%

  divi 照片库滑块

向幻灯片 1 添加背景渐变

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

  • 背景渐变左颜色:#6d0066
  • 背景渐变正确颜色:#000000
  • 渐变类型:径向
  • 径向:左上

  divi 照片库滑块

创建幻灯片 2

要创建第二张幻灯片,我们可以使用复制图标复制第一张幻灯片。 然后打开复制的幻灯片(幻灯片 2)设置。

  divi 照片库滑块

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

然后更新背景渐变如下:

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

  divi 照片库滑块

最后结果

这是最终结果。

  divi 照片库滑块

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

  divi 照片库滑块

  divi 照片库滑块

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

  divi 照片库滑块

最后的想法

在 Divi 的滑块模块中嵌入 divi 画廊的能力为轻松创建一些漂亮的照片画廊滑块提供了机会。 希望本教程能给您一些灵感,帮助您创建一些漂亮的照片库滑块。

有关此 divi 画廊嵌入技术的更多信息(包括有关样式化嵌入 divi 画廊的提示),请查看有关如何将 Divi 画廊嵌入到切换中的帖子。

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

干杯!

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