小Q的博客

  • 首页
  • net编程
    • 产品和框架
    • 开发实例
    • 经验技巧
    • 开源组件
  • wp独立站
  • 自媒体
  • 日记本
  • 工具箱
每个程序员,都应该有一个自己的博客站
  1. 首页
  2. wp独立站
  3. 正文

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

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

虽然一直是做程序开发的,但一直都是从事后端开发,前端的程序也大多是Winform、小程序,对网站设计真的是一窍不通。虽然有一段时间学习过Html+Css,但苦于兴趣不高,没难坚持下来。公司是做跨境电商的,最近在别人的帮助下使用WordPress搭建个独立站,才重新拾起网站设计这块开发工作。

注:部分图片和文字来自soho外贸网站搭建

 

独立站是用Elementor插件开发的,这里使用了它的Pro付费版。用完以后才发现,网站开发也很简单,即使你是小白级别,也能开发出比较漂亮的网站。如果你之前有开发Winform的经验,那么上手非常快。因为开发流程和Winform非常相似。简单说就是拖拽控件,再设置下样式就行了。

 

今天先讲解网站Header如何制作的?其实一般主题都是设计好Header的,直接修改即可(这里推荐Astra主题)。为了突出Elementor的强大,我们用它制作一个网站Header。

制作网站Header之前,建议先准备好这些元素:网站Logo、网站Favicon图标、主导航菜单、文章分类、文章列表、产品类目、产品列表。如果这些元素都有,那么在设计页面时,就能实时预览了,起到事半功倍的效果。

 

目录

  • 1、添加新模板
  • 2、设计网页的Logo和标题
  • 3.元素样式细化
    • 3.1、设置SiteLogo样式
    • 3.2、设置SiteTitle样式
    • 3.3、设置导航菜单样式
      • 3.3.1、指针选项
      • 3.3.2、主菜单的距离
    • 3.4、设置搜索栏样式
    • 3.5、设置Header背景色
      • 3.5.1、纯色页头背景
      • 3.5.2、图片做页头背景
      • 3.5.3、渐变色做页头背景

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部分的大体流程,步骤很清晰,有些样式还需要小伙伴们自行设置,自己看着顺眼就行。

 

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

 

相关阅读

WordPress的固定链接,如何去掉index.php和category

windows中基于iis+php+mysql,搭建、部署和配置wordpress网站教程

标签: Elementor教程 WordPress教程 网站Header设计 网站页眉设计
最后更新:2023年4月1日

小Q

80后中年不油腻大叔,喜欢编写代码、打羽毛球、做木制玩具。目前定居浙江杭州

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

COPYRIGHT © 2022 小Q的博客. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

浙ICP备2022019157号-2