WordPress外贸独立站建站教程：页面结构分析拆解 09

继续分享wordpress外贸独立站建站教程 —— 页面结构分析拆解 。 今天我们开始这个系列的第9篇教程。

今天我们以上面这个网站截图为例。这是一个网站的BANNER部分，一般可以用到首页或其它专题页面，它的整体设计网格偏博客风格，大家可能在一些新闻或旅游博客上见的比较多。

接下来我们看看它的这个页面设计如何实现。

分析

它的整体设计就是一个大的容器，里面再添加两个子容器，分别放到左右，添加对应的内容。

另外我们可以注意到，它的导航栏是全透明的，叠加在整个页面上方，这种情况下我们在制作时一定要注意容器的整体颜色和导航上LOGO、字体的颜色不能太接近，否则会看不清。如果下面容器背景偏亮，那导航栏的LOGO和字体一般就可以使用深色，比如黑色；如果下面容器背景偏暗，那导航栏上的LOGO和字体一般就可以使用浅色，比如白色。

拆解

接下来我们开始对页面进行拆解，之前的相关教程们都没有单独说导航栏的制作，本集我们就简单讲一下。

先把这个页面分为两个部分来看，一个是导航，一个是下面的内容。

如果用Elementor制作，导航栏需要用到pro版本的header模板功能来制作，如果用其它主题，astra、blocksy或其它热门主题很多都支持透明页眉导航的功能，可以在主题自定义设置中去调整。

下面的内容部分就比较简单了，一个容器里面添加了两个子容器，再添加对应的内容即可。后面的背景可以为一张固定的图片，也可以放视频或轮播图。

制作

通过上面的拆解分析，这个页面设计的制作就相对清晰了，接下来简单分享步骤。

页眉导航制作

先讲下用Elementor制作的方法，需要安装pro版本，或其它能代替elementor pro的扩展插件。

如果是其它高级主题制作，比如Astra或blocksy等，操作如下（blocksy为列）：

注意事项：透明页眉虽然看起来比较好看、高级，但需要特别注意它下面的banner模块颜色，如果其它页面的BANNER颜色和菜单文字接近时，就看不清了，如果其它页面没有BANNER模块，那导航栏就会和下面的正文重叠，影响阅读。所以，一般可以按如下方式处理：

页面制作

页眉导航模板做好之后，接下来就可以开始页面的制作了。大家可以使用Elementor来做，也可以使用古腾堡编辑器制作（需要古腾堡扩展插件才行，比如greenshift或kadence block），能实现效果就行。

总结

今天的分享就到这里了，上面只是基本的操作步骤，实际操作时还需要根据你的实际内容进一步调整和完善。另外还需要注意调整移动端的显示效果。