WordPress divi主题

如何为您的 Divi 网站创建垂直导航菜单(或标题)

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

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

对于某些需要更多菜单项的网站,垂直导航菜单可以派上用场。 水平菜单很难适应所有需要的菜单链接,尤其是在较小的浏览器宽度上。 在本教程中,我们将向您展示如何使用 Divi Theme Builder 构建自定义垂直导航菜单。 这将为您提供更多展示 WordPress 菜单项的空间。 您将完全有能力将额外的 Divi 模块添加到垂直标头并使用 Divi builder 进行设计。

google广告开户

让我们开始吧!

抢先看

下面是我们将在本教程中构建的设计的快速浏览。

divi 垂直导航菜单和标题

divi 垂直导航菜单和标题

divi 垂直导航菜单和标题

免费下载布局

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

要上传模板,请导航到 WordPress 网站后端的 Divi Theme Builder。

Divi 营养师布局包的页眉和页脚模板

上传全球默认网站模板

然后,在右上角,您会看到一个带有两个箭头的图标。 点击图标。

WordPress divi主题

Divi 营养师布局包的页眉和页脚模板

导航到导入选项卡,上传您可以在这篇文章中下载的 JSON 文件,然后单击“导入 Divi 主题生成器模板”。

Divi 营养师布局包的页眉和页脚模板

保存 Divi 主题生成器更改

上传文件后,您会在默认网站模板中看到一个新的全局页眉和页脚。 只要您希望激活模板,就保存 Divi Theme Builder 更改。

Divi 营养师布局包的页眉和页脚模板

让我们进入教程,好吗?

第 1 部分:构建新的全局标题

对于本教程,我们将使用 Divi Theme Builder 在全局标题中构建垂直导航菜单。 但是,我们将在文章末尾向您展示如何将相同的菜单添加到页面模板的正文中,以防万一您想在站点的主菜单之外使用它。

首先,转到 WordPress 仪表板并导航到 Divi > Theme Builder。

然后单击默认网站模板的“添加全局标题”区域,然后从下拉列表中选择“构建全局标题”。

divi 垂直导航菜单和标题

fiverr建站WordPress程序员

然后选择“从头开始构建”选项。

divi 垂直导航菜单和标题

第 2 部分:设计垂直截面布局

在 Global Header Layout Editor 中,打开已经存在的常规部分的设置并更新以下内容。

  • 宽度(桌面):300px
  • 宽度(平板电脑和手机):100%
  • 高度(桌面):100vh
  • 高度(平板电脑和手机):自动
  • 填充(桌面):顶部 4vh,底部 0px
  • 填充(平板电脑和手机):0px 顶部,0px 底部

divi 垂直导航菜单和标题

通过添加框阴影继续设计,如下所示:

独立站选品工具
  • 盒子阴影:见截图
  • 盒子阴影垂直位置:0px
  • 盒子阴影模糊强度:20px
  • 盒子阴影传播强度:-10px
  • 阴影颜色:rgba(0,0,0,0.3)

divi 垂直导航菜单和标题

为了确保垂直导航菜单在用户滚动时在左侧保持可见,请将位置更新为固定并更新 z 索引,如下所示:

  • 位置:固定
  • Z指数:9999

divi 垂直导航菜单和标题

为确保我们能够看到将延伸到该部分之外的子菜单导航,请将以下自定义 CSS 添加到主元素:

overflow: visible !important;

divi 垂直导航菜单和标题

高质量外链购买

现在您的部分位于模板左侧的垂直布局中。

divi 垂直导航菜单和标题

第 3 部分:设计垂直菜单

有了这个部分,我们就可以设计垂直菜单了。 为此,我们将使用带有一些自定义 CSS 的菜单模块来设置垂直显示的导航样式。

我们还将使用 vh 长度单位,以便菜单可以随着不同的浏览器高度很好地缩放。

添加行

首先,向该部分添加一列行。

JasperAI 10000字免费额度试用

divi 垂直导航菜单和标题

然后按如下方式更新行设置:

尺寸和填充

  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:80%
  • 填充(桌面):3vh 顶部,3vh 底部
  • 填充(平板电脑和手机):0px 顶部,0px 底部

divi 垂直导航菜单和标题

边界

  • 边框宽度:1px
  • 边框颜色:#eeeeee

divi 垂直导航菜单和标题

添加菜单模块

在单列行内,添加一个新的菜单模块。

WordPress备份工具updrafplus

divi 垂直导航菜单和标题

选择要在内容切换下显示的菜单。

divi 垂直导航菜单和标题

然后将您的站点徽标添加为徽标切换下的动态内容。

divi 垂直导航菜单和标题

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

  • 风格:居中
  • 菜单字体:Nunito Sans
  • 菜单文字颜色:#535b7c
  • 菜单文字大小:18px(桌面),14px(平板电脑和手机)
  • 菜单行高:2em
  • 下拉菜单行颜色:#535b7c
  • 下拉菜单活动链接颜色:#535b7c

divi 垂直导航菜单和标题

  • 购物车图标颜色:#535b7c
  • 搜索图标颜色:#535b7c
  • 汉堡菜单图标颜色:#535b7c

divi 垂直导航菜单和标题

  • 填充(桌面):2vh 顶部,2vh 底部
  • 内边距(桌面):顶部 10 像素,底部 10 像素

divi 垂直导航菜单和标题

第 4 部分:为菜单添加自定义 CSS

菜单需要一些自定义 CSS 来获得我们想要实现的垂直导航。 首先,进入高级选项卡并将以下自定义 CSS 添加到菜单链接和菜单徽标。

菜单链接 CSS(桌面):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

菜单链接 CSS(平板电脑):

width: auto;
border:none;

菜单标志 CSS:

margin-bottom: 20px;

divi 垂直导航菜单和标题

接下来,将自定义 CSS 类添加到菜单模块,如下所示:

CSS 类:et-vert-menu

divi 垂直导航菜单和标题

将用于在我们将使用代码模块添加的外部自定义 CSS 中定位此特定菜单。

使用代码模块添加自定义 CSS

在菜单模块下,添加一个新的代码模块。

divi 垂直导航菜单和标题

然后将以下代码粘贴到代码框中(一定要放在样式标签之间):

/*Style Vertical Navigation Menu*/  
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/  
#et-main-area { 
  width: calc(100% - 300px); 
  margin-left: 300px;
}
}


divi 垂直导航菜单和标题

第 5 部分:设计按钮和社交媒体关注图标

现在菜单已经完成,我们可以添加一个按钮和一些社交媒体跟随链接来完成垂直标题。

添加行

在当前行下添加一个新的一列行。

divi 垂直导航菜单和标题

添加按钮

然后在该行中添加一个新的按钮模块。

divi 垂直导航菜单和标题

更新按钮设置如下:

  • 按钮对齐方式:居中
  • 按钮文字大小:18px(桌面),14px(平板电脑和手机)
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#535b7c
  • 按钮边框宽度:0px

divi 垂直导航菜单和标题

然后转到高级选项卡并将以下自定义 CSS 粘贴到主元素:

主元素 CSS(桌面)

display:block;
width: 100%;

主要元素 CSS(平板电脑)

display:inherit;

divi 垂直导航菜单和标题

添加社交媒体关注图标

在按钮下,添加一个社交媒体关注模块。

divi 垂直导航菜单和标题

在内容选项卡下添加所需的社交网络。

divi 垂直导航菜单和标题

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

  • 模块对齐:中心
  • 图标颜色:#535b7c

divi 垂直导航菜单和标题然后打开每个网络的设置并删除背景颜色。

divi 垂直导航菜单和标题

然后添加一点上边距,如下所示:

divi 垂直导航菜单和标题

更新行设置

社交媒体关注图标完成后,打开行设置并调整以下内容:

  • 天沟宽度:1
  • 内边距(桌面):顶部 3vh,底部 0px
  • 内边距(平板电脑和手机):顶部 10 像素

divi 垂直导航菜单和标题

保存布局和模板

完成后,保存布局和模板。

divi 垂直导航菜单和标题

最后结果

这是实时页面上的最终结果。

divi 垂直导航菜单和标题

divi 垂直导航菜单和标题

divi 垂直导航菜单和标题

如何将垂直导航菜单添加到页面模板的正文区域

如果要将垂直导航菜单添加到页面布局(而不是全局标题),则必须首先将部分布局保存到 Divi 库。

为此,请打开 Global Header Layout Editor 并将垂直部分(包含菜单)保存到 Divi 库中。

divi 垂直导航菜单和标题

然后退出布局编辑器并创建一个新模板并将其分配给您想要的任何页面。 单击以构建页面模板的自定义正文。

divi 垂直导航菜单和标题

选择从头开始构建它。

divi 垂直导航菜单和标题

在布局中添加一个新的全角部分。

divi 垂直导航菜单和标题

然后将全角帖子内容模块添加到该部分。

divi 垂直导航菜单和标题

删除页面顶部的默认常规部分,然后打开全角部分的设置,并将以下自定义 CSS 添加到主元素:

主元素 CSS(桌面)

width: calc(100% - 300px);
margin-left:300px !important;

主要元素 CSS(平板电脑)

width: 100%;

在常规部分下,单击以添加新部分,然后在“从库添加”选项卡下,选择您之前保存到库中的垂直菜单部分。

divi 垂直导航菜单和标题

因为我们不希望该部分显示在移动设备上,请打开该部分设置并禁用该部分在平板电脑和手机上的可见性。

divi 垂直导航菜单和标题

然后打开部分布局中的代码模块并替换此代码段……

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

有了这个…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

divi 垂直导航菜单和标题

这将移动主页眉和页脚以适应页面模板左侧的固定垂直菜单。 这是使用 Divi 的默认页眉和页脚在实时页面上的样子。

divi 垂直导航菜单和标题

最后的想法

此处显示的垂直导航菜单已被赋予固定位置。 但是,如果您需要更多空间来放置其他菜单项或内容,则可以将该部分的位置更改为绝对位置。 您还可以将垂直溢出更改为滚动,以使用户能够滚动浏览菜单项(请注意,您将无法通过此溢出设置查看/使用子菜单)。

垂直部分设置也为创建一些自定义侧边栏打开了大门。 我希望这对未来的项目有用。

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

干杯!