WordPress divi主题

如何自定义 Divi 滑块以更改每张幻灯片的特定元素

| 5月 15, 2022 | Divi主题使用教程 | 0 条评论

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

我们都知道滑块非常适合最大化您网站的首屏部分。 他们都是伟大的! 欢迎用户使用多个 CTA 和重要功能,无需向下滚动页面即可滑入视图。 但是,有时幻灯片之间的设计和内容变化太大可能会分散访问者的注意力或使他们不知所措。 这就是为什么在本教程中,我将向您展示如何自定义 Divi 滑块以仅更改每个幻灯片过渡的特定元素。 这使您可以保持滑块的核心内容和设计组件一致,同时您只更改每张幻灯片的特定元素(如单个单词或按钮)。 访问者将能够轻松处理更改并清楚地了解您的行动呼吁。

google广告开户

让我们潜入吧!

Divi 滑块先睹为快

听一下我们将在今天的教程中构建的 Divi 滑块的设计和功能。

请注意这如何仅更改每张幻灯片正文中的一个单词。

分度滑块

请注意,在此示例中,正文单词以及按钮和句点的颜色都随每张幻灯片而变化。

分度滑块

基本概念解释

默认情况下,Divi 滑块将在每次过渡到新幻灯片时为描述文本设置动画,该幻灯片淡入并略微向上移动内容到位。

分度滑块

但是,通过一行简单的自定义 CSS,我们可以禁用文本的向上动画。 而且,如果我们复制幻灯片,去掉背景,只更改其中一个元素(如正文中的一个单词),您将看到每张幻灯片只更改一个单词。

WordPress divi主题

分度滑块

您可以使用此概念仅更改特定的特定文本、按钮或颜色,同时保持其余设计元素与每张幻灯片一起使用。

入门

订阅我们的 Youtube 频道

对于本教程,您只需要安装并激活 Divi 主题即可。 我们将使用前端的 Divi 构建器从头开始构建我们的 Divi 滑块。

首先,创建一个新页面并为您的页面命名。 然后单击以使用 Divi Builder 并选择“从头开始构建”选项。 然后单击“在前端构建”按钮。

现在您已准备好开始设计。

设置 Divi 滑块内容

对于本示例,我将使用全角滑块模块,但本教程也适用于常规滑块模块。 让我们首先在您的页面中添加一个带有全角滑块模块的全角部分。

分度滑块

为了让我们可以看到滑块的内容变化,让我们先暂时为全角部分添加深色背景色。 打开部分设置并将其设置为黑色背景颜色 (#222222)。

fiverr建站WordPress程序员

分度滑块

您将无法看到这一点,因为默认的滑块背景颜色会覆盖它。 我们将在后面的教程中绕回完成部分背景设计。

现在让我们跳到全角滑块设置并删除一张默认幻灯片,只留下一张。 然后打开幻灯片设置。

分度滑块

更新幻灯片设置如下:

独立站选品工具

标题:“为您提供更多……的网站”
按钮文本:“开始”

在内容下添加以下 html:

Business<span style="color: #EE164D;">.</span>

(这会在单词后面的点(或句点)上添加自定义颜色。)

背景颜色:rgba(255,255,255,0)

分度滑块

高质量外链购买

保存设置。

现在将幻灯片复制两次,这样您总共有三张幻灯片。

分度滑块

打开第二张幻灯片设置。 在“内容”下,仅将“业务”一词替换为“金钱”,保持 html、标题和按钮文本的其余部分相同。 我们只想在每张幻灯片上更改这个单词。 然后保存设置。

分度滑块

JasperAI 10000字免费额度试用

然后打开第三张幻灯片设置。 在内容下,将“业务”一词替换为“成功”并保存设置。

分度滑块

全部做完! 这会处理我们的滑块内容。

优化描述文本动画

在我们的滑块内容到位后,我们需要禁用我们的动画,以便我们的文本不会随着每张幻灯片跳来跳去。 为此,请转到全角滑块设置并在幻灯片描述下添加以下自定义 CSS:

animation-name: none;

分度滑块

WordPress备份工具updrafplus

对于这个例子,让我们的滑块动画自动并提高动画速度是有意义的,这样用户可以更快地看到每张幻灯片中的单词变化。 为此,请转到设计选项卡并更新以下内容:

自动动画:开
自动动画速度(以毫秒为单位):3000

分度滑块

现在看看到目前为止的结果。 您应该只看到每个滑块内容中的一个单词发生变化,而没有向上的动画。

分度滑块

设计滑块

有了我们的内容和功能,我们就可以开始用漂亮优雅的设计来设计我们的滑块了。

打开全角滑块设置并更新以下内容:

文字方向:左
标题字体:Lato
标题字体粗细:Light
标题文字大小:32px
标题文字阴影:见截图
标题文字阴影模糊强度:0em(这基本上去掉了默认的文字阴影)

分度滑块

正文字体:Lato
正文大小:5vw(桌面)、50px(平板电脑)、40px(智能手机)
车身线高:1.6em
正文文本阴影:见截图
Body Text Shadow Blur Strength:0em(这个基本上去掉了默认的文字阴影)

分度滑块

按钮文字大小:16px
按钮背景颜色:#ee164d
按钮边框宽度:8px
按钮边框颜色:#ee164d
按钮边框半径:0px
按钮字母间距:1px
按钮字体:Lato
按钮对齐方式:右

宽度:70%(台式机)、100%(平板电脑)、100%(智能手机)
模块对齐:中心

自定义填充(桌面):19vw 顶部,8vw 底部
自定义填充(平板电脑):19vw 顶部,4vw 底部。 0px 左,0px 右
自定义填充(智能手机):顶部 30vw,底部 4vw,左侧 0px,右侧 0px

分度滑块

盒子阴影:见截图
盒子阴影水平位置:-190px
盒子阴影垂直位置:60px
盒子阴影颜色:rgba(0,16,17,0.7)

分度滑块

最后一步,让我们禁用滑块元素,这样我们就看不到滑块箭头或控件。

分度滑块

这照顾了我们的 Divi 滑块设计!

自定义截面样式

设计的其余部分将添加到我们的部分,包括我们的背景图像,它将作为我们所有幻灯片的静态背景。 将背景图像添加到该部分更适合这种用法,因为您不会看到从一个图像到另一个图像的任何轻微过渡,就像您将背景图像添加到滑块模块时一样。

打开部分设置并更新以下内容:

背景图片: [insert image around 1920px by 800px]
背景渐变左颜色:rgba(0,16,17,0.45)
背景渐变右颜色:rgba(0,16,17,0.92)
起始位置:34%
结束位置:0%
在背景图像上方放置渐变:是

分度滑块

接下来,为您的部分设置右边框,如下所示:

右边框宽度:5vw
右边框颜色:#001011

分度滑块

最后,给你一个盒子阴影来帮助平衡设计的框架。

盒子阴影:见截图
盒子阴影水平位置:-200px
盒子阴影垂直位置:-150px
盒子阴影颜色:rgba(0,16,17,0.74)

就是这样!

Divi 滑块的最终设计

这是自定义 Divi 滑块的最终设计。

分度滑块

这是幻灯片的功能。 注意每张幻灯片只有一个单词是如何变化的。

分度滑块

移动端的最终设计

药片

手机

尝试更改其他元素

您可以尝试在每张幻灯片中更改其他元素,以获得更具创意的设计和功能。 例如,您可以为每张幻灯片赋予每个幻灯片按钮不同的颜色,并将句点的颜色与每张幻灯片上的新按钮颜色相匹配。

这就是它的样子。

分度滑块

您甚至可以探索更改幻灯片框阴影颜色或其他一些设计元素。 有无数种可能!

最后的想法

这种定制的 Divi 滑块设计和功能为那些传统的滑块提供了一个很好的选择。 设计的核心不会改变,这进一步突出了 CTA 的重要方面,它会随着每张幻灯片而改变。 似乎这可能是您可以测试的东西,看看它是否可以提高转化率!

在下面的评论中让我知道您的想法。

干杯!