义乌公司网站建设：使用自定义Divi的二级菜单栏

义乌网站建设 | 2019-04-30

义乌公司网站建设在你的网站上最重要的信息应该存在于折叠部分(大概是你屏幕的前600页)。divi利用这个概念与他们的次级菜单栏。菜单栏位于站点的最顶端，以展示重要元素，如共享按钮、辅助菜单、电话号码和电子邮件地址。用户应该始终能够找到这一重要的信息，无论他们在哪个页面上，而不必滚动找到它。

如果您正在寻找您的网站产生更多的注册，提供一个折扣，或有一个网页，您希望直接流量，这个帖子是为您。我们将致力于创建一个Call to action(CTA)，它嵌入到Divi的辅助菜单栏中。有一些流行的插件，比如黑洛伐和苏姆的智能棒专门捕捉线索。如果你真的想把领先一代提升到下一个水平的话，我建议你看看这样一个强大的插件。但今天我要保持简单。

我将向您展示如何添加一个简单的CTA到Div的顶部栏，而不用插件。我甚至会告诉你如何改变Divi的顶级酒吧元素的位置。谁知道呢？你甚至可以决定用这个空间来做一些完全独特的事情。

用Divi实现设计

添加带有标头元素的辅助菜单栏

在WordPress中，请访问→主题定制器。选择标头&导航→标头元素

义乌公司网站建设在Header元素下，确保未选中显示社交图标的选项，并在两个文本框中输入电话号码和电子邮件地址。

义乌公司网站建设

二次菜单栏的样式设计

现在返回到标题和导航，并选择自定义辅助菜单栏。对下列设置进行更改：

全宽度：是
文本大小：14 px
字体样式：TT(大写)
背景色：#eb593c
下拉菜单背景颜色：#eb593c

在子主题中将CTA添加到head er.php文件

为了将CTA部分添加到顶部栏中，您需要在Divi主题文件夹中的Header.php文件中添加一行html代码。

如果您还没有创建子主题，那么在开始更改主题模板文件之前这样做是个好主意。单击此处学习如何添加子主题.

在站点上创建和激活子主题后，访问您的子主题文件。使用FTP客户端比如FileZilla。从Divi主题文件夹复制Header.php文件，并将其粘贴到您的子主题文件夹中。确保文件名完全相同(head er.php)，并复制原始文件中的所有代码。

将Header.php文件放入子主题文件夹后，使用文本编辑器打开/编辑该文件(确保正在编辑子主题版本)。

用“ET-辅助菜单”的id定位div。这是包含辅助菜单项的div。

在辅助菜单div上方添加以下代码：

<div class="cta"> Want to Learn More ... <a href="#">Click Here</a></div>

请注意附属于div的类“cta”。这就是我们稍后将使用的样式CTA。

义乌公司网站建设

义乌公司网站建设需要将href属性中的hashtag(#)替换为您希望用户单击CTA链接时访问的页面的url。例如，如果您想要将更多的用户驱动到您的联系人页面，您可以将url放到该页面。

此外，一旦您知道您的cta将是什么，您可以更改课文“想要学习更多的…”。链接文字“点击这里”到任何你想要的。记住要保持简短，因为没有太多的工作空间。

现在，让我们查看您的网站，看看最上面的栏是什么样子到目前为止。

现在，您的顶部酒吧内容是不合适的，需要造型。您可以添加一些自定义CSS来修复这个问题。

最后接触

在WordPress管理中，转到divi→主题选项。向下滚动到自定义CSS框，并输入以下CSS：

#top-header .container {
    padding-top: 1.3em;
    font-weight: 600;
    padding-bottom: 0.75em;
}

#et-info {
    width: 33.3%;
    float: right;
    text-align: right;
}

.cta {
width: 33.3%; 
text-align:center;
float: right;
margin-top: -3px;
}

.cta a {
background: #fff;
    color: #eb593c !important;
    padding: 5px 10px;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-weight: 700 !important;
    transition: all 0.5s;
}

.cta a:hover {
background: #555;
color: #fff !important;
}

#et-secondary-menu {
width: 33.3%;
float: left; 
text-align: left;
}

@media (max-width: 980px){
#et-info {
    width: 50%;
    float: right;
    text-align: right;
}

.cta {
width: 50%; 
text-align:center;
float: left;
margin-top: -3px;
}

#et-info {
padding-top:0px;
padding-bottom: 0.75em;
}
}

@media (max-width: 740px){
.cta {display:none;}
#et-info {width: 100%;}
}

这个CSS代码对你的顶部条做了四件关键的事情。1)它将标题信息、CTA和辅助菜单划分为一个三分之一的列布局(每个列的宽度为33.3%)。2)它将标题信息放置在顶部栏的右侧，cta位于中间，次要菜单位于左侧(此菜单目前处于不活动状态，但如果您决定使用它，则在此位置)。3)你的CTA风格。4)优化了移动设备的顶部条。

就这样!

现在，你的顶部酒吧已经完成了一个优雅的行动号召。