WordPress divi主题

如何将垂直滑块元素添加到 Divi 的滑块模块以获得独特的标题设计

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

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

Divi 的滑块模块包含多种设计选项,可让您轻松跳出框框思考并创建令人惊叹的滑块设计。 所以今天,我们要扭转一些事情(字面意思)。 在接下来的文章中,我们将向 Divi 的滑块模块添加垂直滑块元素。 拥有一个带有垂直元素(如标题文本和幻灯片控件)的滑块允许访问者在更窄的列中看到更多的幻灯片内容和背景图像(尤其是在移动设备上)。 垂直元素为整体设计增添了清新的气息。

google广告开户

为此,我们将使用 Divi 的变换旋转选项来旋转整个滑块,然后根据需要反向旋转每张幻灯片中的其他元素,以创建现代垂直滑块设计。 我们将从介绍基本技术开始。 然后我们将使用这个垂直滑块创建一个完全独特的标题设计。

让我们潜入吧!

抢先看

Divi 垂直滑块元素

Divi 垂直滑块元素

Divi 垂直滑块元素

免费下载 Divi 垂直滑块元素布局

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

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

让我们来看看教程好吗?

WordPress divi主题

订阅我们的 Youtube 频道

你需要什么开始

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

  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)
  3. 逆时针旋转 90 度的两张图像。 这可以使用操作系统的内置选项或通过任何简单的照片编辑应用程序轻松完成。 您还可以通过编辑媒体元素直接在 WordPress 中旋转图像。
    Divi 垂直滑块元素

之后,您就可以在 Divi 中创建您的杰作了。

基本理念

添加垂直滑块元素的基本思想是使用 Divi 的变换选项将滑块模块旋转 90 度(顺时针或逆时针),使其垂直显示在页面上。 对于滑块(或幻灯片)背景图像,您需要预先旋转图像(或使用 WordPress 图像编辑器),以便在您旋转滑块时图像将直立显示。 这将按照您的预期垂直显示滑块控件、箭头和文本。 棘手的部分是自定义滑块的高度和宽度,因为事情实际上是转过来的。 此滑块设计在具有两列或更多列的布局中效果最佳。

这是一个如何执行此操作的快速示例。

在具有两列行的常规部分中,将滑块模块添加到左列。

然后添加几张幻灯片,每张幻灯片都有一个标题、一个正文内容和一个先前已逆时针旋转 90 度的背景图像。

Divi 垂直滑块元素

然后使用 Divi 的变换选项将滑块模块沿 z 轴旋转 90 度。

Divi 垂直滑块元素

fiverr建站WordPress程序员

然后向滑块添加间距(底部填充)以创建额外的宽度并将文本与每张幻灯片的右侧对齐。

Divi 垂直滑块元素

这是结果。

Divi 垂直滑块元素

如您所见,这个概念很简单,但是这些垂直滑块元素确实可以派上用场,以创建独特的设计。

独立站选品工具

下面,我们将一起创造这些独特的滑块设计之一。

将垂直滑块元素添加到 Divi 的滑块模块以实现独特的标题设计

创建节和行

部分背景

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

Divi 垂直滑块元素

在将模块添加到行之前,首先使用以下背景颜色更新该部分:

背景颜色:#24272a

高质量外链购买

Divi 垂直滑块元素

行设置

然后我们需要给我们的行一个自定义的间距宽度 1,然后使用 vw 长度单位设置宽度。 使用 vw 长度单位对于使我们的垂直滑块稍后响应非常重要。

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

天沟宽度:1
宽度:80vw(台式机和平板电脑),95vw(手机)
最大宽度:80vw(台式机和平板电脑),95vw(手机)

然后我们将添加一个用于设计目的的盒子阴影。

JasperAI 10000字免费额度试用

盒子阴影:见截图
盒子阴影水平位置:-10px
盒子阴影垂直位置:0px
阴影颜色:rgba(255,255,255,0.03)

Divi 垂直滑块元素

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

我们最终将在第 2 列中添加滑块,但现在让我们在第 1 列中添加带有一些附加文本的标题标题。为此,我们将在第 1 列中添加两个文本模块。

为标题添加文本模块

要添加我们的标题标题,请在第 1 列添加一个文本模块。

Divi 垂直滑块元素

WordPress备份工具updrafplus

使用以下 h2 标题更新正文内容:

<h2>My Work</h2>

Divi 垂直滑块元素

然后更新以下内容:

标题 2 字体:Karla
标题 2 文本颜色:#ffffff
标题 2 文字大小:5vw(桌面)、60px(平板电脑)、50px(手机)
填充:顶部 15%,底部 20%,左侧 5%,右侧 5%

Divi 垂直滑块元素

盒子阴影:见截图
盒子阴影水平位置:60px
盒子阴影垂直位置:0px
阴影颜色:#9a2508

Divi 垂直滑块元素

为正文内容添加文本模块

接下来,在第 1 列的第一个文本模块下添加一个新的文本模块。我们现在可以保留默认内容。

然后更新以下内容:

文字文字颜色:#cccccc
宽度:70%
模块对齐:右
保证金:-5% 顶部
填充:底部 5%,左侧 10%,右侧 5%

Divi 垂直滑块元素

盒子阴影:见截图
盒子阴影水平位置:0px
盒子阴影垂直位置:10px
阴影颜色:rgba(255,255,255,0.03)

Divi 垂直滑块元素

创建垂直滑块

现在我们准备使用垂直滑块元素创建滑块。

为此,请在第 2 列中添加一个滑块模块。

Divi 垂直滑块元素

打开两张默认幻灯片中第一张的幻灯片设置。

Divi 垂直滑块元素

减少默认正文文本以包含单行文本。 然后添加之前已逆时针旋转 90 度的背景图像。

Divi 垂直滑块元素

然后对第二张默认幻灯片执行相同的操作,为其提供不同的背景图像。

Divi 垂直滑块元素

旋转滑块

接下来,使用变换旋转选项旋转滑块:

变换旋转z轴:90度

Divi 垂直滑块元素

滑块高度

我们不需要担心滑块的宽度,因为它会自动跨越 100% 的列。 该列是 80vw(行宽)的 50%,所以默认情况下宽度基本上是 40vw。 现在我们需要在桌面上给滑块一个匹配的高度 40vw,然后在平板电脑上将高度调整为 80vw,在手机上调整为 95vw。

更新以下内容:

高度:40vw(台式机)、80vw(平板电脑)、95vw(手机)

Divi 垂直滑块元素

然后调整填充以将文本与垂直滑块的右侧对齐。

内边距(桌面):顶部 0px,底部 21vw,左侧 0px,右侧 0px
填充物(平板电脑):42vw 底部
填充物(电话):50vw 底部

Divi 垂直滑块元素

更新文本设置

调整标题和正文如下:

文字对齐:左
标题字体:卡拉
标题文字大小:32px
标题行高:1.3em
正文字母间距:3px
车身线高:1.8em

Divi 垂直滑块元素

样式化按钮

要设置按钮的样式和位置,请更新以下内容:

按钮文字大小:16px
按钮背景颜色:#9a2508
按钮边框宽度:0px
按钮字母间距:2px
按钮字体粗细:半粗体
按钮图标:加号(见截图)
按钮对齐方式:右
按钮边距:顶部 10%,底部 10%

Divi 垂直滑块元素

背景渐变

要为我们的垂直滑块标题文本创建背景,我们可以为滑块添加背景渐变,如下所示:

背景渐变左颜色:#9a2508
背景渐变右颜色:rgba(0,0,0,0)
起始位置:12%
结束位置:0%
在背景图像上方放置渐变:是

注意:如果需要,您可以调整背景渐变颜色的不透明度,以创建幻灯片图像的叠加层。

Divi 垂直滑块元素

使用自定义 CSS 旋转按钮和滑块箭头

由于我们的按钮仍然是垂直的,我们需要使用一段 CSS 将其旋转回原来的位置。 将以下 CSS 添加到滑动按钮:

transform: rotate(-90deg);

Divi 垂直滑块元素

对于滑块箭头,您可以添加相同的 css 片段,使它们指向左右而不是上下。 当我们在那里时,我们也可以增加箭头的大小。 将以下 CSS 添加到

transform: rotate(-90deg);
font-size: 80px;

Divi 垂直滑块元素

就是这样!

让我们看看最终结果。

最后结果

Divi 垂直滑块元素

它在平板电脑和手机上。

Divi 垂直滑块元素

Divi 垂直滑块元素

随意调整垂直元素来探索新设计。 这是相同设计的示例,其中按钮位于左侧,文本覆盖。

divi 垂直滑块元素

最后的想法

旋转 Divi 的滑块模块是向滑块添加垂直设计元素的一种快速有效的方法。 确实,唯一具有挑战性的部分是使尺寸和间距变得美观且响应迅速。 但值得庆幸的是,Divi 有足够的内置选项,可以轻松调整设计以在所有设备上看起来都很棒。

除了页眉之外,这种垂直滑块设计也适用于您网站的其他区域。 我可以看到这被用于在更窄的列布局中展示特色产品或推荐。

希望这将为您的下一个项目提供一些灵感。

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

干杯!

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