WordPress divi主题

如何使用多个滑块通过自动动画展示服务

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

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

大多数公司需要在其网站上向访问者展示服务。 在首屏展示服务的一种方法是使用滑块。 这使您可以逐个突出显示每项服务,但缺点是用户必须来回导航才能找到他们需要的服务。 更好的用户体验可能是让这些服务始终对用户可见。

google广告开户

在本教程中,我将向您展示如何使用滑块展示服务,同时保持每个服务内容始终对用户可见。 为此,我们将使用多个滑块和自动动画,以便使用特定的幻灯片设计逐个突出显示每个服务。 我们将使用 Divi 的内置设计选项来做到这一点。

让我们开始吧。

抢先看

这是使用多个滑块逐个展示服务的设计的快速浏览。

免费下载具有多个滑块布局的展示服务

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

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

让我们来看看教程好吗?

订阅我们的 Youtube 频道

WordPress divi主题

你需要什么开始

要开始,您需要具备以下条件:

  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)
  3. 用于模拟内容的图像

之后,您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中使用多个滑块设计创建展示服务

创建部分和第 1 行

首先,创建一个包含一列行的常规部分。

然后在添加任何模块之前,打开部分设置并添加深色背景图像(或背景颜色)。

然后打开行设置并更新以下内容:

最大宽度:80%

使用文本模块添加标题文本

要为设计添加标题文本,让我们使用文本模块。 继续并在该行中添加一个文本模块。

fiverr建站WordPress程序员

然后使用以下 HTML 更新文本模块正文内容:

<h1>How can we help?</h1>

然后更新设计设置如下:

标题字体:蒙特塞拉特
标题文字颜色:#ffffff
标题文字大小:6vw
填充:5% 顶部,5% 底部

独立站选品工具

添加第二行

接下来,添加具有三列布局的另一行。

然后更新最大宽度为 80% 的行设置。

最大宽度:80%

高质量外链购买

将滑块添加到第 1 列

现在我们准备开始将我们的滑块添加到每一列。 首先将滑块模块添加到第 1 列。

删除第二张默认幻灯片,以便只保留一张幻灯片。

然后更新以下内容:

JasperAI 10000字免费额度试用

显示箭头:否
显示控件:否
背景颜色:rgba(0,0,0,0)

文本对齐:左
标题字体:蒙特塞拉特
标题字体粗细:半粗体
按钮背景颜色:#38b3cb
按钮边框宽度:0px

然后设置自动动画选项如下:

WordPress备份工具updrafplus

自动动画:开
自动动画速度:3000
悬停时继续自动滑动:开

默认情况下,Divi 会在幻灯片之间添加一个微妙的淡入淡出动画。 我们希望禁用此功能,以便幻灯片之间没有明显的变化。 为此,请将以下自定义 CSS 添加到幻灯片说明:

animation: none !important;

这负责滑块设置。 现在我们需要更新我们的个人幻灯片。

为 Slider 1 创建幻灯片

我们将使用三个滑块,三列中的每一列都有一个滑块。 为了让幻灯片的时间点一张一张地突出显示每个服务,我们需要为每个滑块设置三张幻灯片。 然后我们可以选择其中一张幻灯片来设计用于展示或突出服务。

让我们从为 Slider 1 创建三张幻灯片开始。

打开单个幻灯片的设置。 然后将正文内容调整为只包含一个短句。

现在保存单个幻灯片设置并将幻灯片复制 2 次,这样您总共拥有三张幻灯片。 请记住,对于这种设计,您需要拥有与滑块/列相同数量的幻灯片。

将滑块复制并粘贴到每个剩余的列中

在 Slider 1 上放置了三张幻灯片后,我们可以复制滑块模块并将其粘贴到第 2 列和第 3 列中。

现在您应该在每一列中都有相同的滑块。 每个滑块都有三个相同的幻灯片,设置为每 3000 毫秒自动转换一次。 而且由于我们禁用了淡入淡出动画,您无法看到幻灯片之间的过渡。 但是,如果我们更改其中一张幻灯片的设计,我们将能够在滑块转到该幻灯片时看到差异。 这允许我们更改每个滑块中一张幻灯片的设计,以便通过自动动画展示(或突出显示)服务。

使用展示幻灯片更新每个滑块

为此,我们将更改滑块 1 中的第一张幻灯片、滑块 2 中的第二张幻灯片和滑块 3 中的第三张幻灯片的设计。这将从左列开始自动突出显示每个服务(每 3000 毫秒)并以右侧的第三列。 然后它会继续重复这个自动动画。

更新 Slider 1 展示幻灯片

首先打开滑块 1 的设置,然后打开第一张幻灯片的设置。

为了突出显示该服务,我们将使用背景颜色(与按钮匹配)和使用乘法混合模式与背景颜色混合在一起的背景图像来更新幻灯片。

为此,请添加以下更新:

背景颜色:#00b2ca
背景图片: [upload image of your choice]
背景图像混合:相乘

然后更新此幻灯片的按钮样式,如下所示:

按钮文字颜色:#00b2ca
按钮背景颜色:#ffffff

保存设置。

现在,在第一张幻灯片中添加了新设计,您将看到第一张幻灯片在滑块到达第一张幻灯片时突出显示该服务。

更新 Slider 2 展示幻灯片

对于 Slider 2,我们希望第二张幻灯片成为我们的展示幻灯片,以便它立即出现在滑块 1 中的展示幻灯片之后。

打开第 2 列中滑块的滑块模块设置并更改按钮背景颜色。

按钮背景颜色:#1d4e89

然后打开第二张幻灯片的单个幻灯片设置并更新以下内容:

背景颜色:#1d4e89
背景图片: [upload image of choice]
背景图像混合:柔光(或相乘以获得更暗的效果)

然后更新幻灯片的按钮样式。

按钮文字颜色:#1d4e89
按钮背景颜色:#ffffff

更新 Slider 3 展示幻灯片

对于 Slider 3(在第 3 列中),我们需要将第三张幻灯片更新为我们的展示幻灯片,以便它立即出现在第二张幻灯片展示幻灯片之后。

首先,更改滑块 3 的按钮颜色,如下所示:

按钮背景颜色:#ef476f

然后打开第三张幻灯片的设置并更新以下内容:

背景颜色:#ef476f
背景图片 [insert image of choice]
背景图像混合:相乘

然后更新幻灯片的按钮样式如下:

按钮文本颜色:#ef476f
按钮背景颜色:#ffffff

最后结果

让我们看看最终结果。

以下是平板电脑和手机上的设计堆叠方式。

最后的想法

使用带有自动动画的多个滑块展示服务似乎有点棘手。 但是一旦你理解了这个概念,它实际上很容易。

由于每个滑块代表一项服务,因此您需要保持内容相同,并确保每张幻灯片的按钮 url 相同。

还有许多其他方法可以使用此设置。 例如,您可以将自动动画持续时间设置为不同的速度,以使服务偶尔突出显示。 您甚至可以在滑块的每张幻灯片中添加不同的服务,以弹出更多服务。

我个人喜欢当前的设置,因为它显示了进度并且可以用来向访问者展示一个过程。 但我很想听听你的想法和想法。

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

干杯!

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