WordPress divi主题

如何创建在 Divi 中单击时展开的圆形图标菜单

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

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

圆形图标菜单是为您的 Divi 网站添加简单菜单的优雅解决方案。 这种菜单风格很直观,非常适合作为移动设备的固定菜单。 今天,我们将展示如何在 Divi 中创建圆形图标菜单,以真正突出 Divi Builder 强大的设计能力。 我们将提供一个简单的 JavaScript 片段来打开和关闭单击菜单。

google广告开户

让我们开始吧

抢先看

这是我们将构建的圆形图标菜单的快速浏览。

divi 圆形图标菜单

divi 圆形图标菜单

divi 圆形图标菜单

免费下载圆形图标菜单布局

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

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

让我们来看看教程好吗?

你需要什么开始

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

WordPress divi主题
  1. 如果您还没有,请安装并激活已安装的 Divi 主题(如果不使用 Divi 主题,则安装并激活 Divi Builder 插件)。
  2. 在 WordPress 中创建一个新页面并启用 Divi Builder 以在前端编辑页面(可视化构建器)。

在本教程中,我们将使用来自简介模块的 Divi 内置图标,因此不需要任何外部资源。

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

第1部分

启用 Divi Builder 以在前端编辑页面后,将一列行添加到默认常规部分。

divi 圆形图标菜单

然后打开行设置并添加以下填充:

内边距:300px 顶部

divi 圆形图标菜单

这只是为单击时弹出的圆形菜单项提供一些空间。

使用 Blurb 模块创建菜单图标

模糊#1

行填充到位后,向列添加一个简介模块。 这将是我们将添加以组成圆形图标菜单的总共 5 个简介中的第一个。 我们将其称为简介#1。

divi 圆形图标菜单

fiverr建站WordPress程序员

然后通过取出标题和正文来更新简介内容。 然后将图标添加到简介中,如下所示。

使用图标:是
图标:见截图

divi 圆形图标菜单

接下来,我们将更新设计设置,如下所示:

图标颜色:#29a1f2
圆圈图标:是
圆圈颜色:#222222
显示圆形边框:是
圆形边框颜色:#29a1f2
使用图标字体大小:是
图标字体大小:25px
正文大小:20px
边距:0px

独立站选品工具

divi 圆形图标菜单

除了设置圆形图标的样式外,我们还添加了正文大小。 没有正文,但是稍后当我们使用 em 长度单位(相对于父正文文本大小)使用转换翻译来分隔菜单项/模糊时,这将派上用场。 稍后再谈。

之后,取出默认的图像/图标动画。

图像/图标动画:无动画

然后将此模块的 Z 索引设置为 1,以便它位于最终将位于其后面的其他模块之上。

高质量外链购买

Z指数:1

最后,通过将以下自定义 CSS 添加到 Blurb Image 中,取出图标下的默认下边距。

margin-bottom: 0px;

divi 圆形图标菜单

模糊 #2

要创建第二个简介,只需复制简介#1。

divi 圆形图标菜单

JasperAI 10000字免费额度试用

然后打开新的模糊(模糊#2)的设置并更改图标并将Z索引设置回默认值(0)。

divi 圆形图标菜单

之后,让我们使用变换比例缩小图标,如下所示:

变形比例:70%

创建模糊 #3、#4 和 #5

可以通过复制 blurb #2 并更新每个 blurb 的图标来创建接下来的三个 blurbs。

WordPress备份工具updrafplus

divi 圆形图标菜单

在相同的绝对位置堆叠模糊

我们菜单的默认状态将使所有的简介都处于绝对位置,四个菜单项简介堆叠在主汉堡菜单图标简介的后面。 要将我们的简介放在相同的绝对位置,请使用多选功能(按住 ctrl/cmd 并单击每个)来选择所有五个简介模块。 然后打开所选摘要之一的设置以同时更新所有 5 个的元素设置。

divi 圆形图标菜单

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

position: absolute !important;
bottom: 20px;
left: 20px;

这会将简介定位在该行的左下角。

divi 圆形图标菜单

使用转换翻译定位菜单图标

一旦所有的简介都定位为默认状态,我们就可以开始定位单击状态的菜单项(单击主菜单按钮后它们将结束)。 为此,我们可以在 Divi 构建器中使用 transform translate 属性。 Divi 构建器中没有可用的单击状态(如悬停),因为这是由 JavaScript 处理的。 所以我们将把我们的菜单项定位在我们希望它们现在点击的位置。 然后我们将使用 Javascript 在单击主菜单按钮时打开和关闭该位置。

我们希望保留 blurb #1,因为它是主菜单按钮。 但是,我们确实想要移动简介 #2、#3、#4 和 #5。 由于我们的简介现在堆叠在可视化构建器中,让我们部署线框模式来更新每个简介的位置。

位置模糊 #2

打开简介 #2 的设置并更新以下内容:

变换平移 Y 轴:-10em

divi 圆形图标菜单

这是简介#2 的新位置。

divi 圆形图标菜单

位置模糊#3

打开 blurb #3 的设置并更新以下内容:

变换平移 Y 轴:-8.6em
变换平移X轴:5em

divi 圆形图标菜单

这是blurb #3的新位置。

divi 圆形图标菜单

位置模糊#4

打开简介 #4 的设置并更新以下内容:

变换平移 Y 轴:-5em
变换平移 X 轴:8.6em

divi 圆形图标菜单

这是简介#4的新位置。

divi 圆形图标菜单

位置模糊 #5

打开 blurb #5 的设置并更新以下内容:

变换平移 Y 轴:0px
变换平移 X 轴:10em

divi 圆形图标菜单

这是简介#5的新位置。

divi 圆形图标菜单

将自定义 CSS 类添加到 Blurbs

为了让我们的 JavaScript 正常工作,我们需要添加一些 CSS 类,这些类将作为选择器来提供额外的样式和功能。

添加 CSS 类到 Blurb #1

在线框视图模式下,打开 blurb #1 的设置并添加以下 CSS 类:

CSS 类:transform_target

divi 圆形图标菜单

将 CSS 类添加到 Blurbs #2、#3、#4 和 #5

其他四个简介都将共享相同的 CSS 类,因此我们可以使用多选功能选择 Blurb #2、#3、#4 和 #5 并更新所有四个的 CSS 类,如下所示:

CSS 类:has-transform toggle-transform-animation

请注意,有两个由空格分隔的 css 类。

divi 圆形图标菜单

使用代码模块添加外部 CSS 和 JavaScript

一旦我们的 CSS 类被添加到简介中,我们就可以使用代码模块将我们的代码添加到页面中了。 为此,请在简介 #5 下添加一个代码模块。

divi 圆形图标菜单

然后将以下代码粘贴到代码模块中:

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

这是用于结合 jQuery 代码的外部 CSS。

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

这就是 JavaScript 在单击菜单按钮时需要让圆形图标菜单项向外扩展。

确保您保留 style 标签包裹在 CSS 和 script 包裹在 JavaScript/jQuery 周围的标签。

divi 圆形图标菜单

检查实时页面上功能的最终结果。

divi 圆形图标菜单

添加菜单项 URL

由于这是一个菜单,因此四个菜单项将需要链接/URL。 为了添加每个菜单项所需的 URL,请打开 4 个菜单项中的每一个的简介模块设置并添加一个模块链接 URL。

divi 圆形图标菜单

使菜单按钮粘滞(或固定)

由于此菜单对于移动设备来说很小且直观,因此您可能希望使菜单具有粘性,使其保持固定在浏览器的左下方。

为此,请使用多选功能选择所有五个简介,然后通过将位置值“absolute”替换为“fixed”来更新主元素中的自定义 CSS。

position: fixed !important;
bottom: 20px;
left: 20px;

divi 圆形图标菜单

现在菜单将保持固定在浏览器窗口的左下方。

divi 圆形图标菜单

要确保菜单位于页面上的其他内容之上,请按如下方式更新该行的 z 索引:

Z指数:11

divi 圆形图标菜单

然后取出行的填充:

内边距:0px 顶部,0px 底部

divi 圆形图标菜单

最终设计

这是带有预制布局的固定圆形图标的最终设计。

divi 圆形图标菜单

它在移动设备上。

divi 圆形图标菜单

如何轻松调整菜单大小和间距

如前所述,菜单是使用 em 长度单位设计的,用于菜单项在 x 和 y 轴上的定位(使用 transform translate)。 em 长度单位是相对于父正文文本大小的大小。 因此,由于我们的每个简介模块都具有相同的 20 像素正文大小,我们可以使用多选来一次更改所有简介的正文。

divi 圆形图标菜单

这将根据需要增加或减少菜单项之间的间距。

您也可以对 Icon 字体大小执行相同操作。 只需使用多选即可一次调整所有菜单项的图标字体大小。

最后的想法

谁知道在页面上添加一个固定的圆形图标菜单可以使用 Divi 这么简单。 它也是移动设备的完美菜单类型! 当然,需要一些自定义代码片段,但是您可以使用可视化构建器设计和定位菜单项的单击状态这一事实非常酷。 不要忘记探索不同的颜色、大小和悬停设计,以便轻松使菜单与您自己的网站相匹配。

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

干杯!

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