虽然一直是做程序开发的，但一直都是从事后端开发，前端的程序也大多是Winform、小程序，对网站设计真的是一窍不通。虽然有一段时间学习过Html+Css，但苦于兴趣不高，没难坚持下来。公司是做跨境电商的，最近在别人的帮助下使用WordPress搭建个独立站，才重新拾起网站设计这块开发工作。
注：部分图片和文字来自soho外贸网站搭建
独立站是用Elementor插件开发的，这里使用了它的Pro付费版。用完以后才发现，网站开发也很简单，即使你是小白级别，也能开发出比较漂亮的网站。如果你之前有开发Winform的经验，那么上手非常快。因为开发流程和Winform非常相似。简单说就是拖拽控件，再设置下样式就行了。
今天先讲解网站Header如何制作的？其实一般主题都是设计好Header的，直接修改即可（这里推荐Astra主题）。为了突出Elementor的强大，我们用它制作一个网站Header。
制作网站Header之前，建议先准备好这些元素：网站Logo、网站Favicon图标、主导航菜单、文章分类、文章列表、产品类目、产品列表。如果这些元素都有，那么在设计页面时，就能实时预览了，起到事半功倍的效果。
1、添加新模板
如下图所示，添加一个新模板，同时模板类型选择：Header，名字可随意取。
 |
 |
完成上面2步后，会看到下面这个图。其实Elementor已经内置一些Header模板了，我们只需在上面修改即可。带Pro标记的就表示要付费才能使用。选一个我们喜欢的模板，点击“插入”。
进入到下面的这个设计页面。
上图中区域1就是我们需要编辑的页头内容区域，区域2是可以让我们使用的编辑页头内容的元素，箭头所指的椭圆部分“Content Area”可以视作为一个分隔线，上面部分是页头，下面部分是页面的主体内容。那么我们今天就是要重点对区域1进行编辑操作。左侧的这些图标是我们可以拖拽使用
2、设计网页的Logo和标题
点击+号会让你选择结构，就是布局，比如选择1行3列的。左侧加SiteLogo和SiteTitle。注意这2个元素是可以加到同一个区域里的（拖拽元素时，出现一个小蓝横条就表示可以松手了）。然后就是设置它们的样式了。稍微懂点CSS知识的就可以，即使不懂，调整时可以实时预览，有问题直接撤回即可。
3.元素样式细化
3.1、设置SiteLogo样式
3.2、设置SiteTitle样式
3.3、设置导航菜单样式
3.3.1、指针选项
指的是当鼠标移动到菜单选项上的时候出现的效果，一共有4种显示效果，如下图所示
3.3.2、主菜单的距离
如下图所示
3.4、设置搜索栏样式
它提供了3种格式，分别是classic、minimal和Full Screen。常见的是前2种，效果都不错。如下图所示
3.5、设置Header背景色
按照下图中点击箭头所指的1位置，然后在右边的样式中进行设置，如下图所示
 |
 |
页头背景可以有4种不同的效果进行呈现，分别是单一色彩背景或者图片背景、渐变色背景、视频背景和幻灯片背景。
3.5.1、纯色页头背景
这种是最简单也是最常见的页头背景效果
3.5.2、图片做页头背景
3.5.3、渐变色做页头背景
以上就是制作网站Header部分的大体流程，步骤很清晰，有些样式还需要小伙伴们自行设置，自己看着顺眼就行。
最后有个小建议，就是我们在设计过程中，要及时发布。因为各种情况都有可能发生，最后再发布可能会失败。这样很悲催了，因此，完成一点就发布，及时发现问题。
相关阅读
文章评论