WordPress divi主题

如何在悬停时创建旋转菜单轮

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

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

在悬停时创建旋转菜单轮是一种在您的网站上展示有用链接的有趣方式。 这将是在标题中提供多个号召性用语以将用户引导到他们需要去的地方的好方法。 它也是您博客的一个很酷的子类别菜单。

google广告开户

在本教程中,我将向您展示如何在 Divi 中悬停时创建旋转菜单轮。 这可以通过使用内置 Divi 选项和一些自定义 css 片段的组合来完成。

抢先看

免费下载布局

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

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

让我们来看看教程好吗?

订阅我们的 Youtube 频道

你需要什么开始

要开始,您需要具备以下条件:

WordPress divi主题
  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)

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

在 Divi 中创建旋转菜单轮设计

基本理念

轮子是通过将一行变成一个圆形元素来创建的,方法是给它一个 500 像素的高度和宽度以及 50% 的圆角。 每个菜单链接都在单独的文本模块中创建,并通过沿行的半径(中心)旋转每个文本模块沿圆形行的周边对齐。 此设置类似于在 Divi 中创建弯曲文本的方式。

创建部分和第 1 行

创建具有一列行的常规部分。

然后将文本模块添加到具有以下内容的行。

然后更新文本设计如下:

文字字体:分享技术
文字字母间距:1px
标题 2 文字大小:8vw

添加第 2 行以构建轮子

接下来,我们需要在第 1 行下添加一个新的一列行。

fiverr建站WordPress程序员

在开始为链接添加文本模块之前,我们需要将行设计为轮子。 行将需要进行大量优化以进行轮设计。 首先,打开第 2 行的设置并更新以下内容:

背景颜色:#02366b
背景渐变左颜色:rgba(0,0,0,0.45)
背景渐变正确颜色:#02366b
渐变类型:径向
径向:中心
起始位置:36%
结束位置:0%

使用自定义装订线宽度:是
天沟宽度:1
宽度:500 像素
最大宽度:500px(桌面),自动(平板电脑和手机)
高度:500px(桌面),自动(平板电脑和手机)
填充(桌面):0px 顶部,0px 底部
内边距(平板电脑和手机):顶部 20 像素,底部 20 像素,左侧 20 像素
保证金(电话):-10% 正确

独立站选品工具

我们需要将行的高度和宽度都设置为 500px,以便它是一个完美的正方形。 这将允许我们使用 Divi 中的圆角(边界半径)选项为其提供完美的圆形形状。

圆角:50%

然后我们可以使用盒子阴影添加另一个级别的圆形设计,如下所示:

盒子阴影:见截图
盒子阴影模糊强度:0px
盒子阴影传播强度:210px
阴影颜色:rgba(2,54,107,0.66)

高质量外链购买

接下来,我们将添加一小段 CSS 以使我们的行内容垂直居中。 在高级选项卡下,在主元素中添加以下自定义 CSS。

display:flex;
align-items:center;

现在负责行设置。 我们稍后会回来添加我们的旋转悬停效果。

添加链接

轮子中的每个链接都将使用文本模块创建。 我们将创建总共六个文本模块。 其中五个文本模块将包含滚轮的链接,其中一个文本模块将包含菜单标题。

JasperAI 10000字免费额度试用

首先创建一个新的文本模块。

然后更新文本设置如下:

正文内容:“链接项目”

WordPress备份工具updrafplus

文字字体:分享技术
文字文字颜色:#ffffff
文字文字大小:16px(默认),20px(悬停)
文字字母间距:1px
文字行高:60px
宽度:250px(桌面),自动(平板电脑和手机)
高度:60 像素
内边距:左 20 像素

暂时保存设置。 然后将文本模块复制 4 次,总共创建 5 个文本模块。

定位链接/文本模块

现在我们准备好沿着轮子的周边定位我们的链接。 为此,我们将使用转换选项更新每个文本模块,这些转换选项将模块移动/翻译和旋转到位。

为了使这更容易,部署线框视图模式并标记文本模块,从顶部的链接 1 一直到底部的链接 5。

链接 1

我们将从编辑链接 1 开始。打开链接 1 的文本模块设置并更新以下内容:

变换平移 Y 轴:120px(桌面),0px(平板电脑和手机)
变换旋转 Z 轴:60 度(桌面),0 像素(平板电脑和手机)
变换原点:50% 100%(右中)

链接 2

打开 Link 2 的文本模块设置并更新以下内容:

变换平移 Y 轴:60px(桌面),0px(平板电脑和手机)
变换旋转 Z 轴:30 度(桌面),0 像素(平板电脑和手机)
变换原点:50% 100%(右中)

链接 3

由于链接 3 的文本模块在中间,我们可以将其保留在原处。

链接 4

打开 Link 2 的文本模块设置并更新以下内容:

变换平移 Y 轴:-60px(桌面),0px(平板电脑和手机)
变换旋转 Z 轴:-30deg(桌面),0px(平板电脑和手机)
变换原点:50% 100%(右中)

链接 5

打开 Link 2 的文本模块设置并更新以下内容:

变换平移 Y 轴:-120px(桌面),0px(平板电脑和手机)
变换旋转 Z 轴:-60deg(桌面),0px(平板电脑和手机)
变换原点:50% 100%(右中)

现在让我们看看到目前为止的结果。 注意文本模块中的链接/文本如何沿着圆圈的周边完美旋转。

添加菜单标签

要添加菜单标签,我们需要在已有的五个文本模块的顶部添加另一个文本模块。 继续在 Link 1 上方添加一个新的文本模块。

然后使用以下内容更新正文内容:

<p>menu</p>

确保菜单标签包含在 ap 标签中。 这将确保在文本设置中识别行高。

然后为了加快设计速度,复制 Link 3 文本模块的模块样式并将这些模块样式粘贴到新的文本模块中。

然后更新以下内容:

行高:300px(桌面),20px(平板电脑和手机)
高度:恢复默认设置(自动)

行高需要为 300 像素,以便它等于内容列的高度,也就是 300 像素(5 个文本模块,每个模块的高度为 60 像素等于 300 像素)。 这将确保文本保持垂直居中。

然后我们需要将菜单标签文本模块旋转 180 度,以便它正确显示在轮子的另一侧。 这将允许访问者在悬停状态之前看到菜单标签,从而在视图中旋转链接。

变换旋转 Z 轴:180 度(桌面)、0 度(平板电脑和手机)
变换原点:50% 100%(右中)

完成后,我们需要给菜单标签文本模块一个绝对位置。 为此,请将以下自定义 CSS 添加到主元素:

position: absolute !important;

现在查看结果。 您应该看到菜单项在轮子的右侧是倒置的。

将旋转悬停效果添加到行/轮

要将旋转悬停效果添加到行,请按如下方式更新行设置:

变换旋转Z轴:180度(桌面),0度(悬停,0度(平板电脑和手机)

然后更新转换设置如下:

转换持续时间:450ms
过渡速度曲线:渐入渐出

现在看看轮子在悬停时是如何旋转的。

为该部分制作两列布局

现在,布局由两个堆叠在一起的单列行组成。 但是,我们可以使用 flex css 属性将两行水平对齐。 为此,我们可以向该部分添加一小段自定义 CSS。 完成后,我们将需要稍微调整间距以使事情看起来恰到好处。

打开部分设置并将以下自定义 css 添加到主元素:

display:flex;

更新第 1 行间距

接下来,更新第 1 行的大小和间距,如下所示:

宽度:40%(台式机)、100%(平板电脑和手机)
保证金(桌面):剩余 5%
边距(平板电脑):左侧 5%,右侧 5%
保证金(电话):5% 对

最后的润色

在平板电脑和手机显示屏上,您需要为 Link 1 Text 模块添加一些上边距。

边距(平板电脑):顶部 30 像素

并且您始终可以在部分中添加部分分隔线以使设计完整。

最后结果

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

另类半轮设计

一种很酷的替代设计是将轮子的右半部分隐藏在该部分之外,以便隐藏链接,然后在悬停时显示。 为此,请继续复制包含我们刚刚制作的设计的整个部分。 在重复部分,更新第 1 行设置,如下所示:

宽度:70%(桌面)

然后更新第 2 行的设置,以便将轮子推到该部分之外,如下所示:

边距:-250px 右

我们需要使用 -250px 因为轮子的总宽度是 500px 并且我们想要隐藏行的一半。

然后将部分可见性设置为隐藏,如下所示:

这是最终的设计。

最后的想法

旋转的链轮是优雅的设计元素之一,可以通过微妙而独特的悬停效果吸引游客。 令人惊讶的是,仅使用 Divi 的内置设计设置,您就可以完成如此​​多的设计。 我希望这会为您的下一个项目在您的设计工具带中添加一些额外的东西。

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

干杯!

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