如何使用推动业务的 Divi 创建垂直导航

已发表: 2017-08-29

在今天的 Divi 教程中，我们将向您展示如何创建垂直导航来推动您网站的业务发展。我们将向您展示如何制作的垂直导航通常用于认为让访问者立即采取行动很重要的企业。例如，如果您拥有一家允许客户在线订购的餐厅，您可能希望您的网站能够帮助访问者快速采取行动。

我们将向您展示如何制作的垂直导航将包含重要信息和号召性用语，而不是页面。将这些包含在垂直导航中会刺激访问者下订单，从而提高网站的转化率。

结果

在深入研究不同的步骤和灵感之前，让我们先看看这篇文章结尾处您将能够实现的垂直导航结果：

垂直的

除了向您展示如何将所有不同的菜单项添加到垂直导航之外，我们还将使用固定导航。这样，您就可以确保信息在整个一页式页面中跟随访问者。

灵感

我们在推动业务的垂直导航方面的灵感来自我们在上一篇文章中展示的网站。在那篇文章中，我们列出了 12 个使用垂直导航来实现自己网站目的的网站。引起人们注意的例子之一是 Eat Thai Restaurant 网站。他们的垂直导航是那些开箱即用的概念之一。他们的网站是一页式的，但他们找到了一种仍然可以利用导航可能性的好方法。他们的网站是这样的：

垂直的

如何使用推动业务的 Divi 创建垂直导航

订阅我们的 YouTube 频道

启用垂直导航

首先，我们必须激活 Divi 提供的垂直导航选项。为此，请转到您的WordPress 仪表板 > 外观 > 标题和导航 > 标题格式 > 启用垂直导航。

垂直的

启用固定导航

我们正在重新创建的垂直导航将像 Eat Thai Restaurant 网站一样得到修复。要固定垂直导航，请转到WordPress 仪表板 > Divi > 主题选项 > 常规选项卡 > 启用固定导航。

垂直的

主菜单设置（主题定制器）

您需要做的下一件事是对主菜单进行一些更改。如果您在 WordPress 仪表板上，请转到外观 > 自定义 > 标题和导航 > 主菜单栏。到达那里后，您可以对其进行以下更改（或您希望进行的任何其他更改）：

隐藏徽标图像：禁用
徽标最大高度：100
菜单顶部边距：0
文字大小：14
字母间距：-1
字体: Lato Light
文字颜色：#FFFFFF
活动链接颜色：#FFFFFF
背景颜色：#004159
下拉菜单背景颜色：#004159

垂直的

固定导航菜单设置（主题定制器）

我们需要在主题定制器中做的最后一件事是确保滚动时也显示徽标。如果您仍在使用主题定制器，请转到标题和导航 > 固定导航设置 > 并确保禁用“隐藏徽标”选项。

垂直的

添加菜单项

继续，我们将把菜单项添加到我们的垂直导航中。帖子的这一部分可能会占用您的大部分时间。您必须通过自定义链接单独添加每一项。

激活 CSS 类

但是在我们开始添加菜单项之前，您必须确保启用了 CSS Classes 选项。此选项允许您单独为每个菜单项分配一个类。在这种情况下，这是必要的，因为大多数项目都有自己的样式设置。要启用 CSS 类选项，请单击菜单页面右上角的“屏幕选项”并启用 CSS 类选项，如下面的屏幕截图所示。

垂直的

添加新菜单

为菜单项激活 CSS 类后，您可以继续创建一个新菜单。为其命名并确保将此新菜单设为主菜单。

垂直的

添加所有菜单项（我们将逐步向您展示）后，您的菜单在后端将如下所示：

垂直的

电话号码

由于这是一个单页机，菜单中不会包含任何页面。我们要添加到菜单中的所有项目都将是自定义链接。这使我们可以尝试添加我们想要添加的东西。

要添加您的第一个菜单项，请单击自定义链接并在导航标签字段中添加电话号码。您可以选择是否要向其添加 URL。但是，将菜单项添加到菜单时，您必须填写 URL。将菜单项添加到您的菜单后，您可以删除 URL，您将确保当有人单击菜单项时不会发生任何事情。

垂直的

将菜单项添加到菜单后，您还将看到 CSS 类出现。这就是您必须决定将修改菜单项样式的 CSS 类的地方。在本例中，我们使用“电话号码”类。如果您只想复制并粘贴本文末尾的 CSS 代码行，请确保使用这些步骤中提到的 CSS 类。

垂直的

地址

同样，我们将添加地址。在导航标签中填写地址并根据需要添加 URL。我们用于地址菜单项的类只是“地址”。

垂直的

社交图标

将社交图标添加到垂直导航需要更多的努力。在上一篇文章中，我们明确处理了向主菜单添加社交图标的问题。但是，在这种情况下，该方法将略有不同，因为我们必须在垂直导航中将图标排列在一起。

添加字体真棒

如果您还没有，您需要做的第一件事是将 Font Awesome 添加到您的主题选项中。为此，请转到您的WordPress 仪表板 > Divi > 主题选项 > 集成 > 并将以下短代码粘贴到您网站的头部：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

垂直的

获取简码

获取社交图标的简码；在 Font Awesome 的网站上打开此页面。在您将在该页面上看到的搜索字段中，搜索您想要添加到垂直导航中的不同图标。

单击该图标后，您将看到链接到该图标的短代码。将这些短代码中的每一个都保存在某处。

垂直的

将社交图标添加到菜单

继续，我们将添加社交图标。通常，您可以将每个社交图标单独添加为菜单项。但由于我们希望它们紧挨着出现，我们必须将它们放在同一个菜单项中。您需要添加到导航标签的 HTML 代码如下：

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

垂直的

不要忘记为每个图标添加一个 URL。我们为所有三个社交图标组合使用的类是“icon-wrapper”，但我们还为每个社交图标分配了一个额外的类以进行单独调整。您可以在 Font Awesome 类之后立即注意到这些类。它们被称为“facebook”、“instagram”和“信封”。

垂直的

路线

对于下一个菜单项，我们使用“方向”一词作为 CSS 类名。

垂直的

线

要在方向正下方添加一行，我们必须在标签导航中添加一个空白字符。那是因为 WordPress 不允许您在没有链接标签的情况下创建菜单项。要将空白字符添加到您的行菜单项，只需添加“ ” 到导航标签。此外，还将“line”作为 CSS 类名称添加到此菜单项。

垂直的

营业时间

继续，我们将添加开放时间并为其分配“小时”CSS 类名称。

垂直的

号召性用语 1

接下来，我们将添加第一个 CTA。我们将为其分配“cta-1”CSS 类名。

垂直的

号召性用语 2

对于第二个 CTA，我们将使用“cta-2”CSS 类名称。

垂直的

按钮号召性用语

将按钮 CTA 添加到垂直导航需要比普通的文本菜单项多一些步骤。首先打开您用作单页浏览器的页面，然后按照下面提到的后续步骤进行操作。

在着陆页上创建按钮

如果您想在垂直导航中使用按钮 CTA，那么您必须在单页机上的某处使用相同的按钮。创建一个后，您可以检查该元素并复制网站代码中显示的以下代码行（链接到您创建的按钮）：

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

垂直的

当然，此代码可能会根据您设置样式的方式而有所不同。它还取决于同一页面上是否还有其他按钮。知道该按钮只会以您为其指定的样式出现在该按钮所在的页面上。这就是为什么在垂直导航中添加按钮通常只在涉及单页导航时更可取。

注意：确保在按钮模块中调整按钮的字体大小和内边距，使其完全适合您的垂直导航。

添加为菜单项

现在您已经复制了链接到按钮的所需 HTML 代码，添加一个新的自定义链接并将代码添加到导航标签。我们用于此菜单项的 CSS 类是“cta-3”。

垂直的

添加 CSS 代码行

这篇文章的下一部分致力于分享 CSS 代码行，帮助您实现最终结果和布局。您会注意到我们使用了分配给不同菜单项的 CSS 类。但是，如果您决定使用不同的类名，请确保在 CSS 代码中更改它们以使其工作。

要添加 CSS 代码，请转到您的WordPress 仪表板 > Divi > 主题选项 > 向下滚动常规选项卡并将以下 CSS 代码行添加到自定义 CSS 框中：

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

垂直的

更改部分背景颜色

您需要做的最后一步是更改一页纸上各部分的背景颜色。确保此颜色与您用于页面容器的颜色相同。在这种情况下，即“#d6d4d1”。

垂直的

结果

添加所有菜单项和链接到这些菜单项中的每一项的 CSS 代码后，您应该能够获得以下结果：

垂直的

最后的想法

在这篇文章中，我们向您展示了如何为您的单页导航创建垂直导航。这篇文章的灵感来自于同样由 Divi 制作的 Eat Thai Restaurant 网站。如果您一步一步地阅读了整个帖子，您应该能够实现上面展示的结果。如果您有任何问题或建议，请务必在下方评论区留言！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

特色图片由 Vectomart/shutterstock.com 提供