WordPress divi主题

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

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

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

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

google广告开户

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

看看这个!

抢先看

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

桌面

divi 响应式手风琴滑块

平板电脑和手机

divi 响应式手风琴滑块

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

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

订阅我们的 Youtube 频道

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

WordPress divi主题

让我们来看看教程好吗?

你需要什么开始

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活已安装的 Divi 主题(如果不使用 Divi 主题,则安装并激活 Divi Builder 插件)。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 将大约 5 个不同的模拟图像上传到媒体库,用于教程中所需的背景图像。

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

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

创建行

首先,在常规部分添加一列行。

divi 响应式手风琴滑块

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

  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:800px
  • 高度:400px(桌面); 700px(平板电脑和手机)

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

列设置

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

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

divi 响应式手风琴滑块

药片

fiverr建站WordPress程序员
display:flex;
flex-direction: column;
align-items:center;
height: 100%;

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

使用 Blurb 模块创建 Accordion 面板

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

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

divi 响应式手风琴滑块

设计模糊模块

打开简介模块设置并更新以下内容:

独立站选品工具

保留模拟标题和正文内容。 我们以后总是可以改变它。

然后更新简介图标如下:

  • 图标(桌面):水平箭头线图标(见截图)

divi 响应式手风琴滑块

  • 图标(悬停):检查图标(见截图)

divi 响应式手风琴滑块

  • 图标(平板电脑和手机):垂直箭头线图标(见截图)

divi 响应式手风琴滑块

高质量外链购买

背景

然后在悬停时为简介提供背景图像和渐变叠加,如下所示:

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

divi 响应式手风琴滑块

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

徘徊

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

divi 响应式手风琴滑块

JasperAI 10000字免费额度试用

图标

  • 图标颜色:#ffffff
  • 图像/图标位置:左

divi 响应式手风琴滑块

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

标题和正文

  • 标题字体:Poppins
  • 标题字体粗细:半粗体
  • 标题文本颜色:透明(桌面)、#ffffff(悬停)
  • 标题文字大小:22px
  • 正文文本颜色:透明(桌面)、#ffffff(悬停)

divi 响应式手风琴滑块

高度和盒子阴影

文本样式化后,给模块一个 100% 的高度和一个盒子阴影,如下所示:

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

divi 响应式手风琴滑块

WordPress备份工具updrafplus

模糊自定义 CSS

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

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

桌面

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

药片

flex:5;

divi 响应式手风琴滑块

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

桌面

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

divi 响应式手风琴滑块

药片

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

divi 响应式手风琴滑块

溢出和过渡

  • 水平溢出:隐藏
  • 垂直溢出:隐藏
  • 过渡时间:400ms
  • 过渡速度曲线:线性

divi 响应式手风琴滑块

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

为更多手风琴面板复制模糊

将鼠标悬停在简介模块上并单击复制图标四次以创建总共五个手风琴面板(或模块)。

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

divi 响应式手风琴滑块

最后结果

桌面

divi 响应式手风琴滑块

平板电脑和手机

divi 响应式手风琴滑块

最后的想法

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

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

干杯!

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