WordPress divi主题

如何在 Divi 中通过扩展角选项卡显示悬停内容(免费下载)

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

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

使用独特的悬停效果发现新的和创造性的方式让用户参与您的内容总是很有趣。 一种很好的方法是使用展开的角落标签显示悬停时的内容。 这允许用户将鼠标悬停在列或图像角落的选项卡上,以扩展覆盖层,为用户提供额外的有用内容。

google广告开户

对于本教程,我们将创建一个完全独特的 Divi 布局,该布局将使用展开的角标签在悬停时显示内容。 事实上,我们将向您展示如何在 Divi 中为列的所有四个角设计一个扩展的角选项卡。

让我们开始吧!

抢先看

下面是我们将共同构建的扩展角选项卡布局的快速浏览。 注意悬停效果和内容是如何完美对称的。

扩展角落标签

免费下载布局

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

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

让我们来看看教程好吗?

你需要什么开始

扩展角落标签

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

WordPress divi主题
  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

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

从头开始创建扩展内容覆盖布局

第 1 部分:从右下角位置创建扩展角选项卡

首先,在常规部分添加一个两列(一半一半)的行。

扩展角落标签

在添加模块之前,使用自定义装订线宽度更新行设置,如下所示:

扩展角落标签

对于第一个特色项目,我们将创建一个列背景图像,该列的右下角有一个角选项卡(使用简介模块),在悬停时展开并覆盖整个列/图像。

让我们从添加一个简介模块开始。

添加模糊模块

将简介模块添加到第 1 列。

扩展角落标签

我们还不打算对其进行样式设置。 我们基本上需要一些内容,以便我们可以设置包含简介的列的样式。

fiverr建站WordPress程序员

第 1 列设置

使用简介,打开行设置,然后单击以编辑第 1 列设置。 然后更新以下内容:

  • 背景图片 [insert image]
  • 背景图像尺寸:实际尺寸

扩展角落标签

注意:对于我的示例,我使用的是从 Brewery Layout Pack 中获取的透明背景啤酒图像。 它们是 128 像素 x 359 像素,这就是我使用图像的实际尺寸的原因。

第 1 列边框
  • 圆角:10px 右下角
  • 右边框宽度:2px
  • 右边框颜色:#e94558
  • 底部边框宽度:2px
  • 底部边框颜色:#e94558

扩展角落标签

自定义 CSS 和溢出

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

独立站选品工具
height: 400px;

更新如下:

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

扩展角落标签

这个自定义高度是必要的,以便我们的简介模块(角落选项卡)扩展列的整个高度。 并且需要隐藏溢出,以便我们可以将大部分的简介模块隐藏在列之外,直到悬停状态。

添加模糊模块内容

现在我们准备开始在第 1 列中自定义简介模块。打开简介设置并更新以下内容:

  • 品名:芒果IPA
  • 身体:
    <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
    <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
    <p>4.8% ABV / 4 IBUs</p>
    
  • 图像:添加用于列背景的相同图像

扩展角落标签

高质量外链购买

设计模糊模块

在悬停时为简介提供背景颜色,如下所示:

  • 背景颜色(桌面):透明
  • 背景颜色(悬停):rgba(255,255,255,0.9)

扩展角落标签

在设计选项卡下,更新以下内容:

  • 图像/图标位置:左
  • 标题字体:Oswald
  • 标题字体样式:TT
  • 标题文字大小:40px
  • 正文字体粗细:半粗体
  • 正文文本颜色(桌面):透明
  • 正文文本颜色(悬停):#121212

扩展角落标签

  • 图片宽度:100px(桌面),64px(手机)
  • 内容宽度:100%
  • 高度:100%
  • 填充(桌面):顶部 15%,底部 15%,左侧 8%,右侧 8%
  • 填充(悬停):顶部 8%,底部 8%,左侧 8%,右侧 8%

扩展角落标签

JasperAI 10000字免费额度试用
  • 圆角(默认):左上角 20px
  • 圆角(悬停):左上角 10px
  • 顶部边框宽度:4px(桌面),2px(悬停)
  • 顶部边框颜色:#e94558
  • 左边框宽度:4px(桌面),2px(悬停)
  • 左边框颜色:#e94558

扩展角落标签

转换选项(桌面)
  • 变换比例 Y 轴:50%
  • 变换比例 X 轴:50%
  • 变换平移 Y 轴:50%
  • 变换平移 X 轴:30%
  • 变换原点:右下角

扩展角落标签

变换选项(悬停)
  • 变换比例 Y 轴(悬停):100%
  • 变换缩放 X 轴(悬停):100%
  • 变换平移 Y 轴(悬停):0%
  • 变换平移 X 轴(悬停):0%

扩展角落标签

为了将模糊图像翻转到右侧,将以下自定义 CSS 添加到模糊内容框:

direction: rtl

注意:方向“rtl”代表“从右到左”,它切换内容的默认顺序(从左到右)。

WordPress备份工具updrafplus

扩展角落标签

结果

让我们从右下角查看我们展开角标签的最终结果。 注意它是如何在悬停时扩展以填充整个列的。

扩展角落标签

第 2 部分:从左下位置创建扩展角选项卡

复制列

要从左下角位置创建扩展角选项卡,我们可以通过复制整个列来快速启动设计。 打开行设置并复制第 1 列。然后删除多余的列,以便您只有两个完全重复的列。

扩展角落标签

更新第 2 列设置

接下来,打开第 2 列的设置并更新以下内容:

  • 圆角:左下角 10px
  • 右边框宽度:0px
  • 左边框宽度:2px
  • 左边框颜色:#e94558

扩展角落标签

更新模糊设置

接下来,更新模糊设置,如下所示:

  • 文字对齐:右
  • 圆角(桌面):右上角 20px
  • 圆角(悬停):右上角 10px
  • 左边框宽度:0px
  • 右边框宽度:4px(桌面),2px(悬停)
  • 右边框颜色:#e94558

扩展角落标签

  • 变换平移 X 轴(桌面):-30%
  • 变换原点(桌面):左下角

然后确保删除 Blurb Content 框中的自定义 CSS。

扩展角落标签

结果

这是结果。 注意这个是如何与第一个对称并从列的左下角扩展的。

扩展角落标签

第 3 部分:从右上角位置创建扩展角选项卡

现在我们准备开始我们最后两个扩展的角标签设计。 为了抢占先机,让我们复制包含我们已经设计的简介的整行。

扩展角落标签

更新第 1 列设置

接下来打开重复行的设置,然后打开第 1 列的设置并更新以下内容:

  • 圆角 10px 右上角
  • 底部边框宽度:0px
  • 顶部边框宽度:2px
  • 顶部边框颜色:#e94558

扩展角落标签

更新 Blurb 模块设置

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

  • 圆角(桌面):左下角 20px
  • 圆角(悬停):左下角 10px
  • 顶部边框宽度:0px
  • 底部边框宽度:4px(桌面),2px(悬停)
  • 底部边框颜色:#e94558
  • 变换平移 Y 轴(桌面):-50%
  • 变换原点:右上角

扩展角落标签

模糊自定义 CSS

现在我们只能看到简介模块的左下部分,它没有像上面一行中的其他两个简介那样显示我们的标题。 为了在选项卡内显示标题,我们需要使用一些自定义 CSS 将标题重新定位到简介的左下角。

将以下自定义 CSS 添加到 Blurb Title 框中:

position: absolute;
bottom: 0;
left: 15px;

然后将以下 CSS 添加到 Blurb 内容框:

direction: rtl;
height: 100%;

扩展角落标签

第 4 部分:从左上角位置创建扩展角选项卡

对于我们的第四个也是最后一个扩展角标签悬停效果,我们将把它定位在左上角,以完成整个网格布局的对称设计。

更新第 2 列设置

在行设置下,打开第 2 列的设置并更新以下内容:

  • 圆角:左上角 10px
  • 底部边框宽度:0px
  • 顶部边框宽度:2px
  • 顶部边框颜色:#e94558

扩展角落标签

更新模糊设置

接下来,打开第 2 列中的简介设置并更新以下内容:

  • 圆角(桌面):右下角 20px
  • 圆角(悬停):右下角 10px
  • 顶部边框宽度:0px
  • 底部边框宽度:4px(桌面),2px(悬停)
  • 底部边框颜色:#e94558

扩展角落标签

然后更新转换选项:

  • 变换平移 X 轴(桌面):-30%
  • 变换原点:左上角

扩展角落标签

模糊自定义 CSS

然后将以下自定义 CSS 添加到 Blurb Title 框中:

position: absolute;
bottom: 0%;
right: 0%;

然后将以下 CSS 添加到 Blurb Content 框中:

height: 100%;

扩展角落标签

第 4 部分:完成布局设计

部分背景颜色

添加部分背景颜色,如下所示:

  • 背景颜色:#efefef

扩展角落标签

添加标题

要创建标题,请在两行中间添加一行,并将文本模块添加到一列行。

扩展角落标签

添加内容:“季节性”。

然后更新以下设置:

  • 标题 2 字体:Merriweather
  • 标题 2 字体粗细:粗体
  • 标题 2 字体样式:TT
  • 标题 2 文本对齐:居中
  • 标题 2 文字颜色:#999999
  • 标题 2 文字大小:50 像素(桌面)、30 像素(平板电脑)、24 像素(手机)
  • 标题 2 字母间距:1em
  • 内边距:左侧 50 像素(桌面),左侧 30 像素(平板电脑),左侧 24 像素(手机)

扩展角落标签

最后结果

使用扩展的角标签查看布局的最终​​结果。

扩展角落标签

扩展角落标签

这是移动设备上的设计。

最后的想法

此布局设计中的扩展角标签肯定适用于您希望在 Divi 网站上展示的各种内容。 您也不必使用所有四个角。 例如,您可以为图像创建网格布局,仅使用右上角的选项卡以在悬停时显示内容。 这个设计能力很丰富。 玩得开心。

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

干杯!

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