清徐建站：如何将垂直滑块元素添加到Divi的滑块模块中

2019.07.03 清徐网站建设

195

要将布局导入页面，只需提取zip文件并将json文件拖到DiviBuilder中即可。

让我们开始上课，好吗？

你需要开始什么

要开始工作，您需要有以下内容：

  1. 已安装和活动的Divi主题
  2. 创建一个新页面，以便从头开始在前端构建(可视化构建器)
  3. 两幅已经逆时针旋转90度的图像。这可以很容易地使用您的操作系统的内置选项或通过任何简单的照片编辑应用程序。您还可以通过编辑媒体元素直接在WordPress中旋转图像。


    清徐建站

在那之后，你准备在迪维创作你的杰作。

基本思想

添加垂直滑块元素的基本思想是使用Divi的转换选项将滑块模块旋转90度(顺时针或逆时针方向)，以便它在页面上垂直显示。对于滑块(或幻灯片)背景图像，您需要预先旋转图像(或使用WordPress图像编辑器)，以便每当您旋转滑块时图像将垂直显示。这将显示滑块控件、箭头和文本，如您所料。棘手的部分来定制的高度和宽度的滑块，因为事情是字面上扭转。这种滑块设计在有两个或两个以上列的布局中工作得最好。

下面是一个如何做到这一点的快速示例。

在具有两列行的常规部分中，向左列添加一个滑块模块。

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

清徐建站

然后使用Divi变换选项，沿z轴旋转滑块模块90度.

清徐建站

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

清徐建站

这是结果。

清徐建站

正如您所看到的，这个概念很简单，但是这些垂直滑块元素确实可以方便地创建独特的设计。

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

在Divi的滑块模块中添加垂直滑块元素，以实现独特的标头设计

创建科和行

剖面背景

首先，创建一个具有两列行的常规节。

清徐建站

在向行添加模块之前，首先使用以下背景色更新该节：

背景色：#24272a

清徐建站

行设置

然后，我们需要给我们的行一个自定义的排水沟宽度1，然后设置宽度使用VW长度单位。使用VW长度单位是重要的，使我们的垂直滑块响应后。

打开行设置并更新以下内容：清徐建站

排水沟宽度：1
宽度：80vw(桌面和平板电脑)，95vw(电话)
最大宽度：80vw(桌面和平板电脑)，95vw(电话)

然后，我们将添加一个框阴影的设计目的。

框影：见截图
框影水平位置：-10 px
盒影垂直位置：0 px
阴影颜色：RGBA(255，255，255，0.03)

清徐建站

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

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

添加标题的文本模块

若要添加标题，请将文本模块添加到第1列。

清徐建站

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

01
<h2>My Work</h2>

清徐建站

然后更新以下内容：

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

清徐建站

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

清徐建站

添加正文内容的文本模块

接下来，在第1列的第一个文本模块下添加一个新的文本模块。

然后更新以下内容：

文本颜色：#cccccc
宽度：70%
模块对齐：右
保证金：-5%
填充物：底部5%，左10%，右5%

清徐建站

框影：见截图
框影水平位置：0 px
盒影垂直位置：10 px
阴影颜色：RGBA(255，255，255，0.03)

清徐建站

创建垂直滑块

现在，我们已经准备好创建带有垂直滑块元素的滑块。

为此，在第2列中添加一个滑翔模块。

清徐建站

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

清徐建站

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

清徐建站

然后对第二个默认幻灯片做同样的操作，给它一个不同的背景图像。

清徐建站

旋转滑块

接下来，使用Transform旋转选项旋转滑块：

变换转z轴：90度

清徐建站

滑块高度

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

更新如下：

身高：40 vw(桌面)，80 vw(平板电脑)，95 vw(电话)

清徐建站

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

填充(桌面)：0 px顶部，21 vw底部，0 px左，0 px右
填充(平板)：42 vw底部
填充(电话)：50 vw底部

清徐建站

更新文本设置

调整标题和正文文本如下：

文本对齐：左
标题字体：Karla
标题文本大小：32 px
标题线高度：1.3em
正文字母间距：3 px
身高：1.8米

清徐建站

造型按钮

若要设置按钮的样式和位置，请更新以下内容：

按钮文本大小：16 px
按钮背景颜色：#9a2508
按钮边框宽度：0 px
按钮字母间距：2 PX
按钮字体重量：半粗体
按钮图标：加上标志(见截图)
按钮对齐：右
按钮边距：10%顶部，10%底部

清徐建站

背景梯度

要为垂直滑块标题文本创建背景，我们可以向滑块添加背景梯度，如下所示：

背景渐变左颜色：#9a2508
背景渐变右颜色：RGBA(0，0，0，0)
起始位置：12%
最终位置：0%
背景图像上方的位置梯度：是

注意：如果你想，你可以调整不透明度的背景梯度右颜色，以创建覆盖您的幻灯片图像。

清徐建站

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

因为我们的按钮仍然是垂直的，所以我们需要用CSS片段将它旋转回原来的位置。将以下CSS添加到幻灯片按钮：

01
transform: rotate(-90deg);

清徐建站

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

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

清徐建站

就这样!

让我们看看最后的结果。

最终结果

清徐建站

这是在平板电脑和手机上。

清徐建站

清徐建站

通过调整垂直元素，可以自由地探索新的设计。下面是一个相同设计的例子，按钮位于左边，文本覆盖。

清徐建站

最后思想

旋转Divi的滑块模块是一种快速和有效的方式添加垂直设计元素到您的滑块。实际上，唯一具有挑战性的部分是让尺寸和间距变得漂亮和响应。但谢天谢地，Divi有足够的内置选项，可以轻松地调整设计，使其在所有设备上看起来都很棒。清徐建站

这种垂直滑块设计也将工作在您网站的其他领域，除了一个标题。我可以看到，这是用来展示特色产品或推荐信在更窄的列布局。


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP