分区分隔符仍然是Divi上流行的设计元素。 分隔符的样式很多，其中包括一些有用的选项，使您可以轻松地向页面添加独特的过渡效果和背景。
在本教程中，我们将以稍微不同的方式使用节分隔符。 Divi 允许您调整每个分隔线的高度和布局。 这允许我们将分隔符放置在该部分中的某些区域或内容之上。 通过使用分隔线高度的悬停选项，我们可以添加独特的悬停效果，显示 内容 部分隐藏。 这非常适合吸引人们对号召性用语或您希望人们点击的特定按钮的注意。 游客 点击。
让我们开始。
样品结果
你需要什么才能开始
首先，您需要：
之后，您就可以开始了！
在Divi中实现分段分隔线的高度悬停效果设计
创建节和线
让我们开始创建一个包含两列的常规部分。
在添加模块之前，请打开部分设置并更新以下内容：
左背景渐变：#73ba57
右背景渐变：#2a4c23
宽度：80％
最大宽度：1080px
部分对齐：中心
但是您也可以根据图像选择自己喜欢的配色方案。 我的配色方案是：＃fff200-＃e09900渐变色。
添加部分标题
要添加部分标题，请创建一个文本模块并更新 内容 具有以下 h2 标头的正文：
果汁
然后按如下所示更新图形：
Heading 2字体：Lato
标题2文本大小：80px
标题2字母间距：-5px
保证金：-50px位于顶部，-40px位于底部
Z-Index：-1
自定义边距和z索引将使文本位于下一步要添加的图像后面。
添加图片
在标题为第1列的文本模块下，添加一个图像模块。 然后上传具有透明背景的图像。 我使用的果汁店布局包中的图像是240像素乘300像素。
将图像调整到中心。
在第2栏中添加号召性用语
在2列中，添加对操作模块的调用。
添加按钮链接URL，以确保显示按钮。
CTA背景和标题样式
然后更新以下设计参数：
背景颜色：#ffffff
文字颜色：
标题字体：拉托
标题重量政策：重量级
标题字体样式：TT
标题文字大小：18px
样式化CTA按钮
更新按钮设计，如下所示：
按钮文字颜色：#ffffff
按钮背景颜色：＃e09900
按钮边框宽度：0 px
设置CTA边框的样式
然后添加边框以构建模块，如下所示：
边框的宽度：10px
边框颜色：rgba（224,145,0,0.25）
添加了分隔线高度悬停效果以揭示号召性用语
现在，是时候添加节分割高度悬停效果以显示号召性用语了。 为此，我们首先需要创建分区分隔符。
添加上部分隔符
使用以下参数打开节参数和上部分隔符。
顶部分隔线样式：请参见屏幕截图顶部分隔线颜色：＃73ba57顶部分隔线高度：70％（默认），0％（悬停）
翻转顶部分隔线：水平
请注意，分隔符的高度从默认高度70％开始，然后在翻转时移动到0％的高度。
下分频器的增加
然后添加具有以下参数的类似于该部分的下部分隔符。
顶部分隔线样式：请参见屏幕截图顶部分隔线颜色：＃73ba57顶部分隔线高度：70％（默认），0％（悬停）
翻转顶部分隔线：水平
分隔线布局：位于该部分的顶部 包装内容
此背景分隔符还以70％的高度开始，在悬停时变为0％。 但是，由于分隔符布局选项设置在内容的顶部，因此节分隔符将在第1列中隐藏号召性用语的下部。然后，将鼠标悬停时，其余的l号召性用语被揭示。
到目前为止检查结果。
添加了框阴影悬停效果，以实现独特的过渡和设计
对于独特的悬停过渡和设计，我们可以添加框阴影悬停效果，该效果将与分隔线高度悬停效果同时发生。 为此，将以下框的阴影添加到该部分。
Box Shadow：查看屏幕截图
框阴影水平位置：0px
框阴影垂直位置：0px
Box Shadow Spread Force：0px（默认），150px（悬停）
盒子阴影颜色：#73ba57
减慢过渡时间
最后，让我们放慢过渡的时间。
过渡时间：700ms
最终结果
这是桌面上的最终结果。
根据上述操作，您将可以在手机和平板电脑上自定义显示。
最后的想法
希望本教程对您有所启发，以创建独特的节分隔线高度悬停效果以揭示内容。 实际上，调整悬停分隔器的高度可能是一项了不起的设计元素。 设计样本应该可以帮助您开始自己的探索和设计。
希望听到您的评论。
为了您的健康！
