对你的网站最重要的信息应该存在倍以上（大致相当于屏幕顶部600px）。分利用这一概念与次级菜单栏。菜单栏位于网站的最重要的元素展示分享按钮，一次菜单，电话号码和电子邮件地址。用户应该能够找到这些重要的信息，无论哪一页他们的土地，而无需滚动到它。

 

如果你正在寻找你的网站带来更多的注册，提供折扣，或有一个页面，你想指挥交通，这是给你的。我们将努力创建一个行动电话（CTA）是嵌入在分的次级菜单栏。有一些流行的插件一样hellobar和Sumome的聪明吧这是专门捕捉线索。我建议你成为一个强大的插件，这样如果你对以铅代水平严重。但今天我保持简单。

 

我将向你展示如何添加一个简单的CTA div的顶部栏，没有一个插件的使用。我甚至会告诉你如何改变分顶级酒吧元素的位置。谁知道呢？你甚至可以使用一些完全独特的空间。

那我们就开始吧

 

实施设计与分栏

添加一个标题元素次级菜单栏

在WordPress的管理员去这→主题Customizer。选择标题和导航→标题元素

在标题元素，确保选择显示的图标是社会限制和输入电话号码和电子邮件地址的文本框。

 

造型的次级菜单栏

现在回到标题及导航并选择自定义次级菜单栏。更改以下设置：

充分宽度：是的

文字大小：14px

的TT字体风格：（uppercase）

背景颜色：# eb593c

下拉菜单背景颜色：# eb593c

 

加入CTA在您的孩子的主题的header.php文件

为了给顶栏添加CTA的部分，你将需要添加一行HTML代码的分主题文件夹的header.php文件。

如果你还没有创建一个子主题，然而，这是一个好主意，这样做在开始之前你需要更改主题模板文件。点击这里了解如何添加子主题

一旦你有了一个孩子的主题创建活动在您的网站，访问你的孩子的主题文件使用FTP客户端如FileZilla。从你的分主题的header.php文件和文件夹复制粘贴到你的孩子的主题文件夹。确保你保持文件名完全相同（头。PHP）和复制所有的代码都是在原始文件。

 

一旦header.php文件放在你的子主题文件夹，使用文本编辑器打开和编辑文件（确保你正在编辑的子主题版）。

定位DIV的ID”等次级菜单”。这是包含二级菜单项的div。

将下面的代码添加在二级菜单div：

<DIV类=“CTA”> Want to Learn More ... <一href=“#”>Click Here</一></DIV&#62;

通知类“CTA”连接到分这是我们将使用风格的CTA后。

 

你将需要更换标签（#）与您希望用户访问的页面的URL的href属性当他们点击链接的CTA。例如，如果你想推动更多的用户使用您的联系页面，你会把URL的网页。

而且，一旦你知道你的CTA将，你可以改变文本的“想了解更多…”和链接文本“单击此处”到任何你想要的。记得要短，因为没有太多的工作空间。

现在让我们来看你的网站看看顶栏看起来这么远

 

现在你的顶栏内容的地方和需要的造型。你可以添加一些自定义的CSS来解决这个。

最后的润色

在WordPress的管理员，去桌面主题选项→。向下滚动到“自定义CSS框并输入下面的CSS：

#顶级头.container {

垫上：1.3em；

字体加粗：六百；

底部间隙：0.75em；

}

#等信息{

宽度：33.3%；

浮动：正确的；

水平对齐：正确的；

}

.cta {

宽度：33.3%；

水平对齐：机构；

浮动：正确的；

顶缘：- 3px；

}

.cta {

背景：# FFF；

颜色：#eb593c！重要的；

衬垫：5px10px；

显示直列：块；

WebKit的边界半径：3px；

-moz边界半径：3px；

边界半径：3px；

字体加粗：七百！重要的；

过渡：全部零点五S；

}

.cta {：悬停

背景：# 555；

颜色：# FFF！重要的；

}

# ET（secondary -菜单

宽度：33.3%；

浮动：左边；

水平对齐：左边；

}

“媒体（最大宽度：980px）{

#等信息{

宽度：50%；

浮动：正确的；

水平对齐：正确的；

}

.cta {

宽度：50%；

水平对齐：机构；

浮动：左边；

顶缘：- 3px；

}

#等信息{

垫上：0px；

底部间隙：0.75em；

}

}

“媒体（最大宽度：740px）{

.cta {显示：无；}

#等信息{宽度：100%；}

}

 

这是你最棒的CSS代码，四个关键的事情。1）将你的头信息，CTA，和次级菜单为三栏布局（每一个33.3%的宽度）。2）将头信息的顶部栏的右边栏，CTA的中间，和次级菜单左边（这个菜单是目前活跃但如果你决定要用它的存在）。3）它的风格你的CTA。4）为移动设备优化的顶杆。

是这么回事！

现在你的顶杆完成动作优雅的电话。

 

最后的想法

 

在决定这顶杆的结构时，我以为它嵌合在没有它的离开是为了站出来为用户看到的内容自然阅读时从左至右第一件事中心CTA。

另外，你可能需要调整每个顶端部分的宽度在自定义CSS使您的CTA更多空间。我试图保持它的情况下，你想保持的头信息的全部功能和二级菜单的小例子。

当然，有不同的方式来使用这个空间以外的CTA。你可以用它来显示一个标语、标识/图形，或一个简短的言词。