WordPress中Elementor教程开篇+制作网站Header示例

2023年3月29日 1518点热度 0人点赞 0条评论

虽然一直是做程序开发的，但一直都是从事后端开发，前端的程序也大多是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进行编辑操作。左侧的这些图标是我们可以拖拽使用

点击+号会让你选择结构，就是布局，比如选择1行3列的。左侧加SiteLogo和SiteTitle。注意这2个元素是可以加到同一个区域里的（拖拽元素时，出现一个小蓝横条就表示可以松手了）。然后就是设置它们的样式了。稍微懂点CSS知识的就可以，即使不懂，调整时可以实时预览，有问题直接撤回即可。

指的是当鼠标移动到菜单选项上的时候出现的效果，一共有4种显示效果，如下图所示

如下图所示

它提供了3种格式，分别是classic、minimal和Full Screen。常见的是前2种，效果都不错。如下图所示

按照下图中点击箭头所指的1位置，然后在右边的样式中进行设置，如下图所示

页头背景可以有4种不同的效果进行呈现，分别是单一色彩背景或者图片背景、渐变色背景、视频背景和幻灯片背景。

这种是最简单也是最常见的页头背景效果

以上就是制作网站Header部分的大体流程，步骤很清晰，有些样式还需要小伙伴们自行设置，自己看着顺眼就行。

最后有个小建议，就是我们在设计过程中，要及时发布。因为各种情况都有可能发生，最后再发布可能会失败。这样很悲催了，因此，完成一点就发布，及时发现问题。