网站制作

Website development

二级菜单栏的定制与开发的想法

发布时间：2017-02-09 09:22:29

Customizing Divi’s Secondary Menu Bar with A Call to Action

对你的网站重要的信息应该存在倍以上（大致相当于屏幕顶部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>

通知类“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。你可以用它来显示一个标语、标识/图形，或一个简短的言词。

原创不易，未经授权，严禁转载

原文地址：https://www.yzlink.cn/i,72,7086,0.html

上一篇：考虑建立你的投资组合网站的时候

下一篇：纹理网页设计的状态

您还有可能感兴趣的内容

建站流程

Website development

网站需
求分析
网站策
划方案
页面风
格设计
程序设
计研发
资料录
入优化
确认交
付使用
后续跟
踪服务
+86 10 64758810
18510861135

热门标签

Website development

客户评价

更多+

感谢云智互联，系统提前完成，在整个项目周期内，云智互联对待我们并不像是对待客户，更像是朋友一样，每一次，都能以专业的角度向我们提出更合理、更有效的解决方案，并快速、细致地完成我们的每一个需求，再次感谢以至诚之心做事的云智互联团队。

潘涛
我是东方龙马集团，在云智家做了2个企业官网，服务态度超级好。如果想做网站，选择他家一定不后悔。性价比高，服务态度好。值得你的信赖！

谭娇
技术好，设计精良，操作便利，很专业！配套的服务和后续的服务都很好,网站封面堪称精品，运行方便，后台操作的简单。技术还会耐心教我,很好的云智互联（北京）科技有限公司，建站很不错的。

陈曦
不错，价格比较合适，重点是响应速度蛮快，有什么问题都会马上给你解决，公司很满意，因为他们都是针对每个项目建了相应的讨论组，有问题可以再里面提出，人员分工到位，解决问题很及时。

张经理