WordPress divi主题

如何在 Divi 中为您的网格布局创建扩展悬停效果

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

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

在您的网格布局中添加扩展悬停效果是一种独特的方式来吸引您的受众与您的页面内容进行交互。 这个想法是从您的网格的紧凑显示开始,然后扩展该网格以在用户将鼠标悬停在 Divi 中的元素上时将网格内容带到最前面。 这对于扩展图库以在悬停时显示更大的图库(带有更大的图像)非常有用。 您还可以扩展一组宣传语,以吸引访问者探索您的服务。

google广告开户

让我们开始吧。

抢先看

这是我将在本教程中介绍的扩展悬停效果示例的预览。

扩大悬停效果

扩大悬停效果

扩大悬停效果

扩大悬停效果

扩大悬停效果

入门

对于本教程,您真正需要的是 Divi。 我们还将使用 Divi Builder 中提供的 Design Agency About Page 预制布局来启动设计。

WordPress divi主题

首先,创建一个新页面,为页面命名,然后单击以使用 Divi Builder。 接下来选择选择预制布局的选项。 从从库加载弹出窗口中,选择 Design Agency Layout Pack,然后单击以使用 Design Agency About Page。

扩大悬停效果

将布局加载到页面后,发布它。 对于本教程,我将在前端使用 Divi 构建器。 为此,您需要做的就是单击后端页面编辑器顶部的“在前端构建”按钮。

现在您可以开始了!

悬停时扩展模糊

对于第一个示例,我将向您展示如何在此布局的第二部分中展开显示所提供服务的简介。

移动 Blurb 模块以仅占用一行

目前,该部分由两行三列组成,每列都有一个简介。

扩大悬停效果

由于我们将悬停效果添加到单行,因此我们需要将底行中的简介移动到顶行。 确保第一行的每一列都有两个简介。

扩大悬停效果

然后删除空的底行。

fiverr建站WordPress程序员

自定义模糊模块

接下来,我们将使用 Multiselect 来选择所有六个简介,以便我们可以同时将相同的设计应用于所有它们。 为此,请按住 ctrl(或 cmd)并单击每个简介模块,直到全部选中。 然后单击其中一个简介上的设置图标以打开元素设置模式。

扩大悬停效果

继续,取出内容框中的内容,然后更新设计设置,如下所示:

标题文字大小 16px
宽度:150 像素
模块对齐:中心
自定义填充:10px 顶部,默认底部,默认左侧,默认右侧

当我们展开行时,为模块提供 150 像素的自定义宽度可以使标题文本锁定在适当的位置。

独立站选品工具

扩大悬停效果

保存更改并单击多选。

使中心模糊更明显

接下来,打开标题为“品牌标识”的第二列中顶部简介的简介模块设置。 然后更新以下内容:

图标字体大小:120px
标题文字大小:18px(默认)

这只是使中心简介作为其他简介将向外扩展的中心部分更加明显。

高质量外链购买

扩大悬停效果

自定义行以在悬停时展开

为了在悬停时扩展我们的模块,我们将调整行的大小和间距。 打开行设置并更新以下内容:

自定义宽度:750px
天沟宽度:4
自定义填充(默认):左 150 像素,右 150 像素
自定义填充(悬停):0px 左,0px 右
自定义填充(平板电脑):0px 左,0px 右

悬停时填充值的变化是产生扩展悬停效果的原因。 该行将向右扩展 150 像素,向左扩展 150 像素。

查看最终结果。

JasperAI 10000字免费额度试用

扩大悬停效果

制作圆形网格

如果您想创建一个可扩展的圆形网格布局,只需进行一些小的调整。

首先复制一个外部简介并将其拖到第二列的大简介上方。 然后用大图标删除中间简介中的标题文本。

扩大悬停效果

要垂直对齐简介,您可以添加一小段自定义 CSS。 打开行设置并将以下自定义 CSS 添加到主元素:

WordPress备份工具updrafplus
align-items: center;

扩大悬停效果

现在查看结果。

扩大悬停效果

向右扩展网格

您还可以选择向左或向右扩展网格。 只需组织您的模块,然后更新您的行的自定义填充。 例如,如果您想将内容向右扩展,请将默认自定义填充设置为左侧 0 像素和右侧 300 像素。

扩大悬停效果

扩大悬停效果

它在手机上的样子

以下是平板电脑和智能手机上的设计。 扩展悬停效果也不会在移动设备上激活。

扩大悬停效果

向图库添加扩展悬停效果

您还可以使用图库模块在悬停时展开图像库,以展示带有更大图像的更大网格布局。 为此,请找到设计机构关于页面布局标题“我们的工作”底部的部分。

然后在包含三个图像的行下方添加一个新的一列行。 在该行内,添加一个画廊模块。

扩大悬停效果

更新图库模块设置如下:

将 4 张具有相同尺寸的图像添加到图库中,使它们在整个行中看起来相同。

图片数量:4
显示标题和说明:否
显示分页:否

扩大悬停效果

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

缩放图标颜色:#353740
悬停覆盖颜色:rgba(252,210,29,0.92)

宽度(桌面):40%
宽度(悬停):100%
宽度(平板电脑):100%

在悬停时更改图库模块的宽度是创建扩展悬停效果的原因。 将平板电脑宽度设置为 100% 也可以防止悬停效果在移动设备上发生。

这是到目前为止的样子。

扩大悬停效果

我们仍然需要更新我们的行设置以稍微改进功能并匹配布局。

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

自定义宽度:80%
天沟宽度:2
均衡柱高:是

扩大悬停效果

阻止扩展悬停效果将内容下推到页面下方

如果您希望图片库在不向下推页面内容的情况下展开,您可以通过为您的行设置最小高度来实现。 这将提供更好的用户体验,尤其是在画廊正下方的按钮上。

转到行设置并在主元素中添加以下自定义 CSS:

min-height: 350px

然后在列主元素中添加以下自定义 CSS:

margin: auto;

均衡列高会激活后端的“display: flex” css 属性,它允许“margin: auto”将列的内容对齐到现在最小高度为 350px 的行中垂直居中。 在我们关于如何在 Divi 中垂直对齐内容的完整文章中了解有关此概念的更多信息。

扩大悬停效果

查看最终结果。

扩大悬停效果

将更多图像添加到图库

您还可以在图库中再添加 4 张图像,并将行的最小高度增加到 475px,以获得以下结果。

扩大悬停效果

它在手机上的样子

这是画廊在移动设备上的样子。 扩展悬停效果未激活。

扩大悬停效果

最后的想法

给出的示例只是您使用 Divi 为整个网格内容创建扩展悬停效果的几种方法。 但我相信您可以将它用于无数其他用例。 您可以扩展投资组合模块、商店模块,甚至博客模块。 因此,发挥创造力并享受自己探索各种可能性的乐趣。

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

干杯!

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