wordpress网站页眉导航设置两种颜色背景（导航分区）

继续分享wordprss建站教程。收个一个粉丝咨询，他想在wordpress网站中实现一个效果，即显示两种背景色，用来区分LOGO和菜单区域，这也是一种比较常见的导航设计效果。接下来就给大家分析一 下如何制作吧。

分析

我们先来分析一下，这个导航的背景划分成了白色和蓝色。要实现这种效果最简单的方法就是制作一张图片，然后上传作为页眉背景，但这个方法不怎么好。

还可以通过容器划分，把这个导航部分成两部分，一部分设置白色背景，一部分设置黑色背景。但是，这两个颜色之类的划分是有个倾斜角度的，这种方法也不是太好。

还有一种方法是使用页面编辑器的渐变背景功能，通过设置两种渐变后来实现这样的效果，悦然wordpress建站个人比较常用的就是这样。

制作

接下来我就以渐变背景的方法给大家讲一下如何实现吧，以Elementor页面编辑器为例。

操作步骤如下：

1.用Elementor pro添加一个header页眉模板。

2.然后根据页眉上要添加的内容，可以把页眉做一个划分。以参考图为例，我们先添加一个容器，然后里面再添加两个子容器 ，可以按需设置两部分的比例。

3.选中整个容器，设置背景，选第2个渐变背景。然后分别设置白色和蓝色，再设置两个颜色的位置，当它们重合时就可以实现两种颜色划分的效果，（如果位置没重合，两种颜色会有一个柔和过渡）。最后再设置一下角度就OK了。效果如上图所示。

总结

任何一个wordpress页面编辑器，不管它多强大，如果我们只是生硬的使用它的常规功能，你可能会发现无法实现的网站效果实在太多。但我们只要换个思路，你可能会有一种豁然开朗的感觉哦。