WordPress divi主题

如何使用 Divi 的新尺寸和溢出设置创建悬停部分

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

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

使用 Divi 新的可拖动大小选项不仅可以帮助您创建高度响应的网站,而且还可以真正帮助创建独特的交互。 通过使用这些选项,您可以自定义您正在创建的任何网站,并自定义您的页面结构以满足当前的设计趋势。

google广告开户

在本教程中,具体来说,我们将向您展示如何使用 Divi 创建悬停部分。 我们将创建一个新页面并允许显示所有部分标题,但每个部分只能在悬停(桌面)或点击(移动)时打开。 一旦您打开另一个部分,您之前打开的部分将自动关闭。 我们将从解释一般方法开始,然后从头开始重新创建您可以在下面看到的示例。 我们希望本教程也鼓励您创建自己的悬停部分设计!

让我们开始吧!

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

悬停部分

移动的

悬停部分

免费下载悬停部分布局

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

方法

在深入了解实际教程之前,我们将介绍用于创建悬停部分的技术。 您可以将此技术应用于您正在构建的任何类型的网站,具有任何类型的设计风格。

1.将第一部分添加到您的页面

假设您要在全新的页面上开始新设计。 您需要做的第一件事是向其中添加一个新的常规部分。

WordPress divi主题

2. 添加一个包含章节标题的新行

然后,您可以通过添加包含您的部分标题的文本模块的新行来继续。 您还可以添加分隔模块和指示行在悬停或触摸时扩展的内容(参见本文预览中的示例)。 将部分标题与部分内容的其余部分分开非常重要,因此请确保在部分标题和接下来的内容之间留有足够的空白。

3.微调其余部分内容(根据需要添加尽可能多的行和模块)

部分标题后面的设计元素完全取决于您。 您可以根据需要使部分长或短,并使用任何类型的设计风格。

4.修改节的默认和悬停最大高度

完成对部分和其中的所有设计元素的微调后,就可以创建悬停效果了。 部分的默认高度仅适合部分标题。 悬停时,该部分将恢复其初始大小。

5.隐藏垂直溢出

该技术的另一个重要部分是隐藏垂直溢出。 一旦你为你的部分设置了一个小于该部分初始高度的默认最大高度,就会创建一个溢出。 为确保溢出不显示,您必须确保它隐藏在该部分的可见性设置中。

5. 对页面上的所有部分重复步骤

对页面上的所有部分重复相同的步骤,以创建访问者会喜欢的明显用户体验。

fiverr建站WordPress程序员

订阅我们的 Youtube 频道

让我们开始重建吧!

添加新部分

默认背景颜色

现在我们已经完成了这篇文章的方法,是时候开始把事情付诸实践了! 将第一个常规部分添加到 WordPress 网站上的全新页面并打开部分设置。 将部分的默认背景颜色更改为您选择的颜色。

  • 背景颜色:#000000

悬停部分

悬停背景颜色

在悬停时更改此背景颜色。

独立站选品工具
  • 背景颜色:#ffffff

悬停部分

添加第 1 行

立柱结构

继续使用以下列结构将第一行添加到您的部分:

悬停部分

添加文本模块

添加H2含量

接下来将文本模块添加到新行。 添加一些 H2 副本以及“▼”符号,表示接下来会发生一些事情。

悬停部分

高质量外链购买

悬停部分

H2 文本设置

转到模块的设计选项卡并更改 H2 文本设置。

  • 标题 2 字体:Trebuchet
  • 标题 2 字体粗细:超粗体
  • 标题 2 文本对齐:左
  • 标题 2 文本颜色:#ff0f3b
  • 标题 2 文字大小:100 像素(桌面)、80 像素(平板电脑)、60 像素(手机)
  • 标题 2 字母间距:-5px

悬停部分

添加分频器模块

能见度

在这一行中,我们需要的第二个也是最后一个模块是 Divider Module。 确保在可见性设置中启用“显示分隔线”选项。

悬停部分

JasperAI 10000字免费额度试用

颜色

然后,转到设计选项卡并更改分隔线颜色。

悬停部分

浆纱

同时修改模块的大小设置。

  • 分隔线重量:2px
  • 宽度:14%

悬停部分

添加第 2 行

立柱结构

到下一行! 这是您需要放置悬停(桌面)或单击(平板电脑和移动设备)后要显示的所有内容的位置。 我们使用以下列结构,但请注意,您可以根据需要添加任意数量的行和模块,并根据需要设置它们的样式:

WordPress备份工具updrafplus

悬停部分

将文本模块添加到第 1 列

添加内容

在第一列放置一个文本模块,其中包含您选择的一些内容。

悬停部分

文字设置

转到文本模块的设计选项卡并更改文本方向。

  • 文本方向:对齐

悬停部分

将文本模块添加到第 2 列

添加内容

将文本模块添加到第二列以及您选择的一些内容。

悬停部分

文字设置

同样,在模块的文本设置中更改文本方向。

  • 文本方向:对齐

悬停部分

将尺寸设置添加到部分

默认尺寸

完成部分后,就可以实现悬停效果了。 打开部分设置并更改不同屏幕尺寸的最大高度:

  • 最大高度:300 像素(桌面)、280 像素(平板电脑)、260 像素(手机)

悬停部分

悬停大小

在最大高度上启用悬停选项,并添加一个足够高的值以覆盖不同屏幕尺寸的所有元素。 此值确保您的所有元素都显示在不超过部分容器的初始大小的情况下。

悬停部分

垂直溢出

然后,转到该部分的高级选项卡并更改垂直溢出。 这将隐藏超出部分容器的所有内容。

  • 垂直溢出:隐藏

悬停部分

过渡

为了创建平滑的过渡,我们还更改了高级选项卡中的过渡设置。

  • 转换持续时间:800ms
  • 转换延迟:500ms

悬停部分

根据需要多次克隆整个部分

创建完第一个悬停部分后,您可以根据需要将其克隆多次。

悬停部分

更改章节标题

当然,您需要更改重复项的部分标题。

悬停部分

更改 H2 文本颜色

为了在设计中创造一些变化,我们还将更改下面打印屏幕中突出显示的模块的文本颜色。

  • 标题 2 文本颜色:#c4c4c4

悬停部分

更改分隔线颜色

以及伴随文本模块的分隔线颜色。

悬停部分

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

悬停部分

移动的

悬停部分

最后的想法

在这篇文章中,我们向您展示了如何创造性地使用 Divi 的新可拖动大小选项在您正在创建的任何网站上使用悬停部分创建独特的交互。 我们从解释方法开始,然后从头开始重新创建设计示例。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请务必在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。