如何在 Divi 中创建响应式手风琴滑块

手风琴滑块是一种在小空间内显示内容的有趣且引人入胜的方式。 手风琴滑块通常由水平堆叠的多个元素（或面板）组成，就像窗帘的褶皱一样。 当您将鼠标悬停在其中一个面板上时，它会随着其他手风琴面板收缩而扩展以显示内容。 这就是我们获得伸缩的手风琴式效果的地方。

在本教程中，我将向您展示如何仅使用 CSS 在 Divi 中创建响应式手风琴滑块。 为此，我们将使用多个 Divi 模块作为手风琴面板。 任何模块都可以使用，但对于这个例子，我们将以一种非常有创意的方式使用模糊模块来构建一个漂亮的手风琴滑块，在桌面和移动设备上看起来（和工作）都很棒。

一探究竟！

抢先看

这是我们将在本教程中构建的内容的快速浏览。

桌面

平板电脑和手机

免费下载 Divi 响应式手风琴滑块布局

要将您的手放在本教程中设计的手风琴滑块上，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

订阅我们的 YouTube 频道

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

让我们进入教程好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有，请安装并激活已安装的 Divi 主题（如果不使用 Divi 主题，请安装并激活 Divi Builder 插件）。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 将大约 5 个不同的模拟图像上传到媒体库，以用于教程中所需的背景图像。

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

在 Divi 中创建响应式手风琴滑块

创建行

首先，向常规部分添加一列行。

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

• 天沟宽度：1
• 宽度：100%
• 最大宽度：800px
• 高度：400px（桌面）； 700px（平板电脑和手机）

宽度和最大宽度值可以更改为您需要的任何值。 手风琴将在任何行宽内缩放和运行。 此外，为设计工作设置固定高度非常重要。 子元素（列和模块）的高度为 100%，因此如果您不设置行的固定高度，子元素将根本没有高度。

列设置

现在我们已经为行设置了高度，打开列设置并将以下 CSS 添加到主元素：
桌面

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

药片

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

flex 属性将在桌面上水平对齐手风琴面板，在平板电脑和手机上垂直对齐。 100% 高度将允许我们将添加的模块也使用 100% 高度值。

使用 Blurb 模块创建手风琴面板

手风琴滑块可以使用任何类型的模块构建。 如果我们愿意，我们可以使用不同模块的组合作为我们的手风琴面板。 但是对于这个设计，我们将使用模糊模块。

首先向该行添加一个模糊模块。

设计 Blurb 模块

打开模糊模块设置并更新以下内容：

保留模拟标题和正文内容。 我们以后可以随时更改。

然后更新模糊图标如下：

• 图标（桌面）：水平箭头线图标（见截图）

• 图标（悬停）：勾选图标（见截图）

• 图标（平板电脑和手机）：垂直箭头线图标（见截图）

背景

然后在悬停时为模糊提供背景图像和渐变叠加，如下所示：

• 添加至少 1000 像素宽的背景图像
• 背景图像位置：左中

然后在悬停时添加渐变背景叠加层。

徘徊

• 背景渐变左颜色（悬停）：#3e215b
• 背景渐变右颜色（悬停）：rgba(0,0,0,0)
• 梯度方向：90度
• 将渐变放在背景图像上方：是

图标

• 图标颜色：#ffffff
• 图像/图标放置：左

接下来，跳转到设计选项卡并更新以下内容：

标题和正文

• 标题字体: Poppins
• 标题字体粗细：半粗体
• 标题文字颜色：透明（桌面），#ffffff（悬停）
• 标题文字大小：22px
• 正文颜色：透明（桌面），#ffffff（悬停）

高度和框阴影

文本样式化后，给模块一个 100% 的高度和一个框阴影，如下所示：

• 高度：100%
• 盒子阴影：见截图
• 框阴影水平位置：-12px
• 框阴影垂直位置：0px

模糊自定义 CSS

为了让我们的手风琴面板（或模糊模块）与其他模块一起扩展和收缩，我们需要添加一些自定义 css 以使用 flex-grow 更改模块的大小。 由于我们将总共有 5 个模块组成手风琴，因此我们为默认状态添加“flex:1”，然后在悬停状态将其更改为“flex:5”。

在高级选项卡下，将以下自定义 CSS 添加到 Blurb 主元素：

桌面

flex:1;
position: relative !important;
transition: flex 800ms !important;

药片

flex:5;

然后将以下自定义 css 添加到 Blurb Content CSS：

桌面

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;

药片

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;

溢出和过渡

• 水平溢出：隐藏
• 垂直溢出：隐藏
• 转换持续时间：400ms
• 过渡速度曲线：线性

好吧！ 那是对模糊模块的一些严重定制。 但好消息是我们需要做的就是复制它们以创建剩余的手风琴面板。

为更多手风琴面板复制 Blurbs

将鼠标悬停在模糊模块上并单击重复图标四次以创建总共五个手风琴面板（或模块）。

然后为您复制的每个新简介更新背景图像。

最后结果

桌面

平板电脑和手机

最后的想法

这个响应式手风琴滑块确实有一些独特的元素，使其使用起来很有趣。 手风琴面板在悬停时无缝扩展和收缩，没有任何意外故障。 并且模糊图标会在悬停和移动设备上发生变化以提升用户体验。 希望这个设计能在你的下一个项目中派上用场。

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

干杯!