手风琴滑块是一种有趣且有吸引力的显示方式 内容 在有限的空间内。 手风琴式滑块通常由多个水平堆叠的元件（或面板）组成，就像窗帘的褶皱一样。 当您将鼠标悬停在其中一个面板上时，它会展开以显示 内容 而其他手风琴面板则收缩。 这就是实现膨胀和收缩的手风琴效果的地方。
在本教程中，我将向您展示如何在 Divi 仅使用 CSS。 为此，我们将使用几个模块 Divi 作为手风琴面板。 可以使用任何模块，但在本例中，我们将以一种非常有创意的方式使用 blurb 模块来创建一个漂亮的手风琴滑块，它在桌面和移动设备上看起来（和工作）都很棒。
快来看看吧！
概观
这是我们将在本教程中构建的内容的概述。
让我们开始教程
你需要什么才能开始
首先，您需要执行以下操作：
- 如果您还没有，请安装并激活 Divi主题 安装（或插件 Divi 生成器，如果您不使用 Divi主题).
- 在WordPress中创建一个新页面，并使用Divi Builder在前端（可视构造函数）上编辑该页面。
- 在库中下载大约5个不同的图像，以用作本教程所需的背景图像。
之后，您将有一块空白画布可以开始在Divi中进行设计。
在Divi上创建带有响应式手风琴的滑块
生产线
首先，将一列行添加到常规部分。
然后打开该行的设置并更新以下内容：
- 装订线宽度：1
- 宽度：100％
- 最大宽度：800px
- 高度：400像素（桌面）； 700px（平板电脑和手机）
宽度和最大宽度值可以根据您的需要进行更改。 手风琴将按比例缩放，并可以在任何行宽中使用。 此外，设置固定高度对于设计工作非常重要。 子元素（列和模块）的高度为100％。 因此，如果您未设置行的固定高度，则子元素将不会具有高度。
列参数
现在已经设置了行高，打开列设置并将以下CSS代码添加到主要元素：
办公室
display:flex;flex-direction: row;align-items:center;height: 100%;
片剂
flex-direction: column;
flex属性将使手风琴面板在桌面上水平对齐，在平板电脑和手机上垂直对齐。 100％的高度将允许我们要添加的模块也使用100％的高度值。
使用模块创建手风琴面板摘要
可以使用任何类型的模块来构建手风琴滑块。 如果需要，我们可以使用不同模块的组合作为手风琴面板。 但是对于这种设计，我们将使用Blurb Mods。
首先向该行添加一个演示模块。
抽象模块设计
打开摘要模块设置并更新以下内容：
保持标题虚构，并且 内容 来自身体。 我们以后随时可以更改此设置。
然后，按如下所示更新演示文稿图标：
- 图标（桌面）：代表水平箭头线的图标（请参见屏幕截图）
- 图标（悬停）：选中图标（请参见屏幕截图）
- 图标（平板电脑和手机）：代表垂直箭头线的图标（请参见屏幕截图）
背景
然后，为blurb提供背景图像和渐变叠加，如下所示：
- 添加至少1000像素宽的背景图片
- 背景图片的位置：左中
然后添加渐变背景叠加。
浮动
- 左渐变背景（悬停）：＃3e215b
- 右边的背景渐变颜色（悬停）：rgba（0,0,0,0）
- 渐变方向：90deg
- 将渐变放置在背景图像上方：是
图标
- 图标颜色：#ffffff
- 图片/图标位置：左
然后转到“设计”选项卡并更新以下内容：
标题和正文
- 标题字体：Poppins
- 字体名称：Semi Bold
- 文字标题颜色：透明（桌面），＃ffffff（悬停）
- 文字标题大小：23px
- 正文颜色：透明（桌面），＃ffffff（悬停）
高度和阴影
文字样式化后，为模块分配100％的高度和一个阴影框，如下所示：
- 高度：100％
- Box Shadow：查看屏幕截图
- 框的阴影水平位置：-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添加到CSS Blurb Content：
办公室
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
片剂
width: 100%;height: 100%;position: relative !important;
溢出和过渡
- 水平溢出：隐藏
- 垂直溢出：隐藏
- 过渡时间：400ms
- 过渡速度曲线：线性
好！ 这是对演示模块的认真定制。 但好消息是，我们要做的就是复制它们以创建其余的手风琴面板。
复制Blurbs以获得更多的手风琴面板
将鼠标悬停在演示模块上，然后单击重复图标四次，以创建总共五个手风琴面板（或模块）。
然后为您复制的每个新Blub更新背景图像。
最终结果
最后的想法
这个响应式手风琴滑块确实具有一些独特的元素，使它使用起来很有趣。 手风琴面板可扩展和收缩，而悬停时不会出现意外问题。 演示图标的悬停和移动会发生变化，以提高用户体验。 希望这种设计对您的下一个项目有用。
