WordPress divi主题

如何使用 Divi Blurbs 创建分段圆形菜单

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

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

使用 Divi 的转换选项获得创意总是很有趣。 它们允许您创建一些令人惊叹的“开箱即用”设计。 在本教程中,我们将把一些 Divi 简介转换成一个漂亮的分段圆形菜单,点击时会展开和折叠。 创建分段区域(如饼图)的技巧是以一种非常独特的方式使用变换倾斜。 这个想法的灵感来自本教程,我不得不说使用 Divi 构建非常有趣。

google广告开户

让我们开始吧。

抢先看

这是我们将在本教程中构建的分段圆形菜单的峰值。

divi分段圆形菜单

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 Blurbs 创建分段圆形菜单

此设计将使用内置 Divi 设置和外部代码的组合。 我们将利用视觉构建器来创建我们菜单的大部分设计。 然后,我们将部署线框视图模式,以在元素绝对定位后获得那些难以达到的设置。 我们将从创建由连续多个简介组成的圆形菜单开始。 然后我们将在单独的部分中设计一个附加信息作为重叠菜单按钮。

为菜单项创建行

在默认的常规部分中,添加一列行。

divi分段圆形菜单

样式化行

在添加模块之前,让我们设置行的样式以获得我们的圆形和背景颜色。 打开行设置并更新以下内容:

  • 背景颜色:#8857f2
  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:30em
  • 高度:30em
  • 内边距:0px 顶部,0px 底部

divi分段圆形菜单

然后添加圆角和盒子阴影。

圆角:50%
盒子阴影:见截图

divi分段圆形菜单

我们将回来为该行添加更多自定义,但现在我们可以开始添加我们的简介。

fiverr建站WordPress程序员

为菜单创建模糊

在圆形行内的一列行中添加一个新的简介。

divi分段圆形菜单

造型简介#1

更新第一个简介的内容以包含标题和图标。

  • 标题:链接
  • 使用图标:是
  • 图标:见截图

之后,更新设计设置如下:

  • 背景颜色:#773ef2
  • 背景颜色(悬停):#222222
  • 图标颜色:#ffffff
  • 图标字体大小:40px(桌面),30px(平板)
  • 文字对齐:居中

divi分段圆形菜单

独立站选品工具

然后更新标题文本样式如下:

  • 标题字体:Archivo Narrow
  • 标题字体样式:TT
  • 标题文字颜色:#ffffff
  • 标题文字大小:14px(桌面),12px(平板)

divi分段圆形菜单

接下来,我们需要使用一些自定义 CSS 来定位简介。 转到高级选项卡并将以下自定义 CSS 添加到主元素:

position:absolute !important;
left: 50%;
top: 50%;

divi分段圆形菜单
现在返回设计选项卡并更新简介的大小和间距,如下所示:

  • 宽度:15em
  • 高度:15em
  • 边距:-15em 左

这会将简介的右下角直接放在圆的中心。

高质量外链购买

divi分段圆形菜单

使用转换选项创建分段

为了将宣传片变成圆的一部分,我们将倾斜和旋转宣传片。 为此,请更新以下转换选项:

  • 变换倾斜 X 轴:60 度

divi分段圆形菜单

  • 变换原点:100% 100%(右下)

由于我们的简介的右下角直接在圆的中心,我们希望变换原点也设置在右下角。 这将确保倾斜的简介的尖端位于圆的中心,从而形成片段。

divi分段圆形菜单

JasperAI 10000字免费额度试用

消除模糊内容的倾斜

实际上,我们想要倾斜的只是创建片段形状的简介的形状,而不是里面的内容(即图标和文本)。 但是由于这是不可能的,我们需要做的就是添加一个转换属性来反转倾斜效果,使其看起来正常。 为此,请转到高级选项卡并添加以下自定义 CSS:

模糊内容 CSS:


transform: skew(-60deg) rotate(-75deg);
position: absolute;
height: 27em;
width: 27em;
bottom: -13.5em;
right: -13.5em;


然后通过为 Blurb Image 添加以下 CSS 来减少图标和标题文本之间的边距:

模糊图像 CSS

margin-bottom: 15px;

divi分段圆形菜单

WordPress备份工具updrafplus

现在,由于简介内容空间超出了简介(即使您看不到它),我们需要隐藏溢出,如下所示:

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

如果我们不添加它,我们将有不需要的悬停空间。

divi分段圆形菜单

创建其余的模糊

要创建其余的简介,请部署线框视图模式并将现有简介复制 5 次,这样您总共有 6 个相同的简介。

divi分段圆形菜单

旋转模糊 #2

然后打开 blurb #2 的设置并旋转模块,如下所示:

  • 变换旋转Z轴:30度

divi分段圆形菜单

这将从圆的中心点顺时针旋转 blurb #2。

divi分段圆形菜单

然后我们可以继续以 30 度的增量旋转其余的简介,以创建一个半圆的线段。

旋转模糊 #3

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

  • 变换旋转Z轴:60度

divi分段圆形菜单

旋转模糊 #4

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

  • 变换旋转Z轴:90度

divi分段圆形菜单

旋转模糊 #5

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

  • 变换旋转Z轴:120度

divi分段圆形菜单

旋转模糊 #6

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

  • 变换旋转Z轴:150度

divi分段圆形菜单

这是迄今为止的结果。

divi分段圆形菜单

创建菜单按钮

要创建菜单按钮,我们将缩小整个部分的大小,然后在按钮设计中使用模糊图标。

为此,首先在当前部分下添加一个新的常规部分。

divi分段圆形菜单

然后向该部分添加一列行。

divi分段圆形菜单

为按钮创建模糊图标

然后在该行中添加一个简介模块。

divi分段圆形菜单

删除默认的标题和正文内容,使用图标如下:

  • 使用图标:是
  • 图标:加号(见截图)

divi分段圆形菜单

继续更新设置如下:

  • 图标颜色:#222222
  • 使用图标字体大小:是
  • 图标字体大小:50px
  • 图像/图标动画:无动画

然后将以下自定义 CSS 添加到 Main Element 以摆脱图标下的默认边距。

主要元素 CSS

margin-bottom: 0px;

divi分段圆形菜单

行填充

接下来,取出行的默认填充。

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

divi分段圆形菜单

部分设置

为了完成按钮,我们将把我们的部分塑造成一个圆圈。

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

  • 宽度:100 像素
  • 高度:100 像素
  • 内边距:0px 顶部,0px 底部
  • 圆角:50%
  • 盒子阴影:见截图

divi分段圆形菜单

然后给它一个白色背景。

  • 背景颜色:#ffffff

divi分段圆形菜单

在高级选项卡下,将以下自定义 CSS 添加到主元素以将按钮固定在窗口底部。

position: fixed !important;
bottom: -50px;
left: 50%;
margin-left: -50px;

divi分段圆形菜单

我们还需要添加一个可以使用 jQuery 定位的 CSS 类。 添加以下内容:

  • CSS 类:transform_target

divi分段圆形菜单

然后更新 Z 索引,使按钮保持在页面上其余内容的上方。

divi分段圆形菜单

定位循环菜单行

现在菜单按钮就位,我们需要定位包含分段圆形菜单的行,使其也固定在页面底部居中,只有圆形的上半部分可见。

为此,请打开包含菜单简介的行的行设置并添加以下自定义 CSS:

主要元素 CSS

position: fixed !important;
bottom: -10em;
left: 50%;
margin-left: -15em;
margin-bottom: -5em;

更新 z 索引如下:

divi分段圆形菜单

接下来添加以下 CSS 类。

divi分段圆形菜单

最后,我们需要使用变换比例完全缩小(或缩小)圆形菜单。 这将允许我们使用 jQuery 打开和关闭效果,这将在单击时展开和折叠菜单。

更新以下内容:

divi分段圆形菜单

有了我们的分段圆形菜单和菜单按钮,剩下要做的就是添加自定义 CSS 和 jQuery 来完成按钮的功能。

将外部自定义 CSS 添加到页面设置

从可视化构建器底部的菜单中打开页面设置,并在高级选项卡下添加以下自定义 CSS:


.has-transform, .transform_target .et-pb-icon, .toggle-transform-animation {
  transition: all 400ms ease-in-out;
} 
.has-transform, .toggle-transform-animation {
  font-size:14px;
}
.toggle-transform-animation {
  transform: none !important;
}
.transform_target {
  cursor: pointer;
}
.toggle-active-target .et_pb_blurb .et-pb-icon {
  transform: rotateZ(45deg);
}

@media all and (max-width: 980px) {
  .has-transform {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  .has-transform, .toggle-transform-animation {
    font-size:10px;
  } 
} 


divi分段圆形菜单

使用代码模块添加 jQuery

接下来,部署线框视图模式并在菜单按钮简介下添加一个代码模块。

divi分段圆形菜单

然后将以下代码添加到模块中。

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

最后结果

现在让我们在实时页面上查看最终结果。

divi分段圆形菜单

该菜单适用于您当前的页面或我们的任何预制布局,您可以通过单击设置菜单中的加号图标来添加这些布局。

divi分段圆形菜单

这是它在我们的心理学家登陆页面布局上的外观。

divi分段圆形菜单

它在移动设备上。

divi分段圆形菜单

调整圆形菜单的大小

分段圆形菜单是使用与父正文字体大小相关的 em 长度单位构建的。 这使得增加和减少菜单的大小变得容易。 要更改字体大小,只需更改 has-transform 类的 font-size 属性,该类以我们添加到页面设置的自定义 CSS 中的行为目标。

divi分段圆形菜单

最后的想法

在本教程中,我们介绍了如何通过使用 Divi 的转换选项获得创意,在 Divi 中创建分段圆形菜单。 我们还使用了一些自定义 CSS,例如固定定位和“取消”倾斜菜单项的宣传内容。 jQuery 允许我们在单击菜单按钮时打开和关闭变换缩放属性以创建菜单的展开和折叠效果。

总的来说,我想你会从这篇文章中找到很多灵感。 随意扩展此概念以创建更多设计。 例如,您可以继续添加简介并以 30 度增量旋转它们,以创建带有分段菜单链接的整个圆圈。

divi分段圆形菜单

或者您甚至可以创建一个交互式饼图!

这是您可能喜欢的圆形图标菜单。

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

干杯!

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