Kadence主题设置4：如何设置WordPress网站页眉页头

前面我介绍了如何在kadence主题下设置网站标题logo和菜单，其实在设置wordpress网站页眉/页头的时候，这些都是重要的组成部分，除了这些，网站页头还可以有搜索按钮，联系方式，社交等等元素。

自开发的网站这些可都是前端人员html css一行行敲出来的，另外一些建站工具包括wordpress的很多主题都是给你固定的页眉布局，不过Kadence不一样，他们的是拖曳式页眉，你可以自由摆放页头上的元素，不仅使用起来简单而且定制性强。

Kadence主题页眉

首先我们来看看以下这个Shein的页头，说真的我在知道他们之前，一直知道一家叫zaful的和他们很像，也是这种模式的独立站，叫什么来着，轻什么还是快什么吧，因为行业跨境电商巨头，所以拿来让大家参考了，单并非一定要和他们做得一样。

这个页头/页眉总共是三层，顶层是活动和优惠，中层是logo，各种按钮，也有menu，不过他家的menu做得是交互式的，下层也是menu和搜索框，其实Kadence Pro都能实现，不过Kadence的免费版就有限制了，对页头要求不高的，Kadence免费就行了。

首先从后台的外观子菜单自定义进入到kadence主题的页眉设计，我想大家在系列前两篇文章早就熟悉了，

你可以从右边可用项目中拖动任意项目到右边上中下三行中，这里三行就是页眉的三行，效果会即时显示在上方的预览中。这里的可用项目比较有限，也就是列出的这些，不过安装woocommerce之后会多一个购物车。

对于一个新站点这些元素应该是够了的，不然可以订阅Kadence Pro付费版。也可以参考一下本站页头，没有那么复杂。

选择元素

之前的文章中告诉过大家怎样设置页头logo和菜单，其实其他的差不多，拖进右边想要放置的位置，然后单独对这个元素进行设计修改就行了。

如上图，比如我在页头最顶层添加了促销内容，这个用HTML元素，中间添加一个按钮和社交图标，还有购物车，最下层添加了菜单和搜索图标，你看看现在是不是也像模像样了，当然这些元素都能够随意拖动位置，按照你自己的需求放置。

设置元素

设置元素，我就以按钮为例说一下吧，这个按钮做什么按钮都行，这里把它设置成Whatsapp即时聊天。首先点击按钮旁边那个螺帽，你就可以对这个元素进行设置了，其他元素都是同样，点击螺帽就能设置，如下图标了红色数字1的地方。

数字2.的地方就是设置按钮内容的地方：

• 标签 – 也就是会显示在你网站页头的文字，如图中箭头所示
• 网址，假如你的按钮是一个连接，你可以输入链接，比如whatsapp其实是可以通过他们的专用链接打开的(http://wa.me/+86…)，+86…是代表whatsapp账号的手机号码，下面可以按照图片选择新标签打开，设置为nofoollow
• 按钮样式，填充和轮廓两个选项，填充如图中这样也就是整个按钮都是有颜色的，轮廓就如本站的留言区按钮一样，只有一个边框
• 按钮可见性，这里的意思是按钮可以随你的要求而显示，每个人表示任何人可以看见，之后的就是按照条件显示了。

设置完按钮内容你还可以设计一些按钮。

设计元素

你想按钮做成什么颜色，字体，按钮大小等等都是可以的，这样也是美化按钮的一步。

如图所示点击设计，这里没什么好说的，你可以一边设计一边看右边按钮的外观，按照你自己的喜好设计就行，这里就设计完成了。

接下来你可以对页头所添加的元素一项一项进行设置和设计。

修改页头的一些外观

除了每一个元素能单独设置设计之外，整个页头的每一行也是可以修改编辑的，比如你看到上图顶层是橙色，这就是自定义设计的。

如下图点击箭头指示的蓝色区域小螺帽就能对每一层单独设置，常规中可以设置每一层的宽度和高度，设计中可以设计这一层四边的边框边距和颜色，可以按照你的要求自行修改编辑。

完成后记得发布保存。

总结

kadence主题的页眉设置是它的重要特色之一，可以说直接使得wordpress网站使用灵活性提高一个层次，也让更多新手更容易上手，而且在CMS系统中独立性和自主性得以真正实现，非常出名的wordpress主题Astra也是后来才仿照kadence增加了这种模式页头设计，总之这个功能直接让wordpress设计更平民化。