WordPress divi主题

如何将 Divi 行转换为水平和垂直悬停选项卡

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

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

选项卡绝对可以方便地在您网站的简洁区域中提供重要信息。 这减少了用户滚动浏览长页面内容的需要。 Divi 的标签模块易于使用,非常适合在点击时切换简单的内容。

google广告开户

但在本教程中,我将向您展示如何将整个 Divi 行转换为悬停选项卡。 我还将向您展示如何创建水平和垂直选项卡。 这将释放 Divi 的功能,为每个选项卡内容区域设计具有多个模块的完整行布局。 无需插件!

让我们开始吧。

抢先看

这是我们将在本教程中一起构建的水平和垂直悬停选项卡的快速浏览。

免费下载 Divi 行悬停标签布局

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

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

让我们来看看教程好吗?

WordPress divi主题

订阅我们的 Youtube 频道

你需要什么开始

要开始使用,您需要进行以下设置:

  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)
  3. 三张用于模拟内容的图像

之后,您将有一个空白画布开始在 Divi 中构建一些悬停选项卡。

使用 Divi Rows 创建水平悬停选项卡

首先,创建一个具有两列行的新常规部分。

行背景、填充和框阴影

在我们添加我们的模块之前,让我们先自定义一下行设置。 我们稍后需要回到该行来为我们的选项卡功能定位它。

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

背景渐变左颜色:#284f91
背景渐变右颜色:#4646c4

内边距:顶部 50 像素,底部 50 像素,左侧 50 像素,右侧 50 像素
盒子阴影:见截图
盒子阴影颜色:rgba(70,70,196,0.66)

fiverr建站WordPress程序员

将内容添加到行

现在我们将向我们的行添加一些模拟内容。 请记住,您可以为内容区域添加列和模块的任意组合。

在第 1 列中,添加带有图像模块的图像。 我正在使用设计会议布局包中的一个。

在右栏中,添加一个行动号召模块并更新以下内容:

按钮链接 URL:#(现在只是显示按钮)
使用背景颜色:否

独立站选品工具

文字对齐:左
标题字体:Lato
标题文字大小:60px(桌面),50px(手机)

创建选项卡

要创建用户将鼠标悬停在此行内容上的实际选项卡,我们需要创建一个文本模块并使用一些自定义 CSS 将其放置在右上角。

继续并在第 1 列的图像下添加一个新的文本模块并更新以下内容:

高质量外链购买

内容:“标签一”

背景颜色:#284f91(这应该与行的左侧渐变颜色匹配)
文字文字对齐:居中
文字文字颜色:#ffffff
宽度:100 像素
高度:50 像素
边距:顶部 -100 像素,左侧 -50 像素
内边距:14px 顶部

最后,将以下自定义 css 添加到主元素,使其在行首具有绝对位置。

position: absolute !important;
top: 0;

JasperAI 10000字免费额度试用

这个 CSS 加上我们添加的自定义边距将确保选项卡正好位于行的左上角。 重要的是选项卡实际上位于行上方,以便用户稍后可以将鼠标悬停在它上面。

截面高度和间距

现在在我们继续创建剩余的行和选项卡之前,让我们通过在该部分添加一些顶部和底部边距来给我们的行一点喘息的空间。 对于这个设计,重要的是我们使用边距来分隔我们的部分,因为我们也会给我们的部分设置一个高度。 我们需要给我们的部分设置一个高度,因为我们希望我们的行跨越我们部分的整个高度。 这意味着我们的每一行(选项卡内容)都将具有我们部分的相同高度。 因此,最好每一行都具有相似数量的内容,否则某些行选项卡中会出现不需要的负空间。 这应该在以后更有意义。

现在,打开部分设置并更新以下内容:

高度:500px(台式机)、900px(平板电脑)、750px(手机)
边距:顶部 100 像素,底部 100 像素
内边距:0px 顶部,0px 底部

WordPress备份工具updrafplus

请注意,当行列在移动设备上堆叠时,需要调整部分的高度以适应较长的内容空间。 因此,您需要根据自己的需要对这个高度进行一些调整。

现在保存您的设置,让我们返回添加更多行。

创建标签内容的第二行

要创建第二行,请复制您之前创建的行。 将文本模块移​​至第 1 列,将图像移至第 2 列。然后使用新图像更新图像。 这将帮助您了解每个选项卡上不同内容的外观。

打开第二行的设置,将鼠标悬停在背景预览区域,点击“切换”小图标,切换背景渐变颜色。

然后打开用于在第 1 列中创建选项卡的文本模块的设置,并为其设置与新顶部渐变匹配的颜色。

背景颜色:#4646c4

然后我们需要将选项卡向右移动,这样当这一行与上面的行重叠时,您可以直接看到第一行选项卡右侧的选项卡。

边距:50px 左

为第二行添加不透明过滤器悬停效果

对于行,我们可以添加一个不透明度过滤器悬停效果,以便在悬停在选项卡上并显示行内容时有一个很好的悬停过渡。

打开行设置并添加以下过滤器:

不透明度:70%(默认),100%(悬停)

然后为不透明度滤镜悬停效果添加过渡持续时间和速度曲线。

转换持续时间:500ms
过渡速度曲线:线性

创建标签内容的第三行

现在我们可以添加最后一行标签内容。 为此,请复制您刚刚创建的第二行。 然后将文本模块移​​动到第 1 列,将图像移动到第 2 列。并使用新图像更新图像模块。

使用新的背景渐变更新行设置。

背景渐变左颜色:#333333
背景渐变右颜色:#4646c4

接下来打开用于在第 1 列中创建选项卡的文本模块的设置并更新颜色和边距。

背景颜色:#333333
边距:剩余 150 像素

在我们将行定位为彼此重叠之前,这就是您的页面应该是什么样子。

使用绝对定位重叠行

为了重叠我们的行,我们需要使用绝对定位。 然后,当鼠标悬停在选项卡上时,我们将使用 Z 索引选项将每一行置于最前面。 但是由于我们给行提供了一个绝对位置(并且父/节有一个设定的高度),我们可以为每一行添加 100% 的高度,以便它们跨越节的整个高度。

这是如何做到的。

首先,部署线框模式。 然后使用多选选择所有三行并打开其中一个的设置以部署元素设置模式。 然后将高度更新为 100%。

高度:100%

这会将所有三行的高度设置为 100%。

然后将以下自定义 CSS 添加到主元素:

position: absolute !important;
left: 0;
right: 0;
margin: auto;

现在部署桌面视图模式以查看行如何很好地重叠以创建我们的选项卡。

使用 Z 索引更改悬停时的行顺序

现在您可能已经注意到第三行/选项卡位于最前面。 因此,我们需要使用 Z 索引对行重新排序,以便第一个选项卡首先显示,直到您将鼠标悬停在另一个选项卡上。

为此,请返回线框视图模式并打开您创建的第一行的设置(使用选项卡一个)。 然后更新z索引如下:

Z指数:10

接下来使用多选选择第二行和第三行。 然后打开元素设置模式并在悬停时将以下 z 索引添加到两行。

Z 指数:11(悬停)

就是这样。 让我们看看最终结果。

最后结果

之所以可行,是因为从技术上讲,每个选项卡(文本模块)都是每行的一部分,即使它们位于行的上方和外部。 这就是为什么将鼠标悬停在选项卡上会显示它所在的行。

这是它在移动设备上的外观。

创建垂直悬停选项卡

如果您想在行中添加垂直制表符,您真正需要做的就是重新定位用于创建每个制表符的文本模块。 我们还需要调整行的大小和部分的间距,以便为选项卡腾出空间。

这是该怎么做。

继续复制包含我们刚刚构建的悬停选项卡的部分,以便您可以使用新设计。

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

填充:左侧 10%,右侧 10%

然后使用多选选择所有三行并使用以下内容更新元素设置:

宽度:70%(台式机)、70%(平板电脑)、80%(手机)
最大宽度:980px

然后将所有三个简介的渐变方向更新为 90 度,这样当我们将选项卡放在左侧时,左侧渐变颜色将与选项卡背景颜色混合。

渐变方向:90度

现在是时候将我们的文本模块选项卡放置在行的左侧以获得我们想要的垂直选项卡。

打开第一行中的文本模块选项卡设置并更新以下内容:

边距(桌面):顶部 -50 像素,左侧 -150 像素
边距(电话):顶部 -100 像素,左侧 -50 像素

手机的边距设置是将选项卡带回行上方以进行水平选项卡显示。

接下来,打开部分行中文本模块选项卡的设置并更新以下内容:

边距(桌面):顶部 0px,左侧 -150px
边距(电话):顶部 -100 像素,左侧 50 像素

对于第三行的最后一个选项卡,更新以下内容:

边距(桌面):顶部 50 像素,左侧 -150 像素
边距(电话):顶部 -100 像素,左侧 150 像素

最后结果

现在让我们看看最终结果。

这是一台平板电脑和一部手机。

最后的想法

通过一点创造性思维和 Divi 的强大功能,您可以使用 Divi 行创建一些非常酷的自定义悬停选项卡。 您可以显示的内容有一些限制。 例如,使用此设置,所有行的高度必须与该部分相同。 但是,对于不需要使用插件,我认为这是一个很好的解决方案。 并且不要忘记,由于您可以将 Divi 行用于您的内容,因此您可以通过多种方式在下一个项目中使用这些悬停选项卡。

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

干杯!

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