003 – Elementor 可视化网页编辑器基础概念和设置

目前最好用的wordpress可视化编辑器,搭配OceanWP轻量化免费theme主题,绝对是快速建站的最佳选择。

一、Elementor插件安装

安装方法一:Elementor官网,下载后wordpress后台add new, upload plugins方法安装,当前最新版本为2.4.8

安装方法二:直接在wordpress后台搜索elementor,安装Elementor Page Builder,wordpress中达到2+million安装量和5星好评的插件屈指可数了。

二、Elementor版本

1、免费版   直接通过上述方法安装的即为免费版
2、Pro高级付费版   只能通过方式一下载安装

区别:多了50多个插件,最主要的是支持模板的导入,快速创建网站,费用最低49刀/站点

三、开始使用Elementor

新建任意一个page页面或者blog页面,然后点击 Edit with Elementor 即可开始用elementor编辑器对页面进行托拖拽式网页设计。

界面分为两个区域, 编辑工具区,和页面显示区域,将编辑工具去对应的element元素直接拖入页面显示区域即可快速对页面进行拖拽式设计。

四、网页页面的构成

大部分的网页页面可以分为4个区域,

  • Header页头,主要包括网站logo和menu菜单导航
  • Title页面标题和breadcumbs面包屑(告诉访客当前是网站的哪个页面),首页一般不会有这部分
  •  Body网页主体,也就是我们构建网页的主要区域
  • Footer页脚,网页的其他信息,如网站申明,ICP备案等。

以dell美国官网为例,可以看到,大部分企业门户网站的架构都是按照这个结构进行布局的。

五、网站的前台后台

      前台就是我们上面看到的页面(头部,主体,页脚),后台是网站用于控制前台怎么显示的程序。前台页面中不同的的部位,分别由后台不同的程序进行控制。

  • Header头部, 由wordpress中安装的theme主题控制
  • Title网页名字和breadcumbs面包屑,由wordpress中安装的theme主题控制
    Body主体部分, 由对应的编辑器控制,如elementor,默认则由wordpress自带的编辑器控制显示
  • Body主体部分, 由对应的编辑器控制,如elementor,默认则由wordpress自带的编辑器控制显示
  • Footer页脚,由wordpress中安装的theme主题控制
  当使用elementor编辑器进行网页编辑设计时,elementor只能对页面的body主体部分进行编辑和设计。 请务必记住这一点。

如需要对页面的Header和Footer部分进行设置,请参考 OceanWP主题基础设置。

 

 

六、网页Body主体部分的布局

了解清楚了网页页面的整体构成后,接下来就可以使用Elementor对网页主体部分进行创作设计了。

Body主体部分可以容纳很多内容, 为了便于对不同的内容进行控制和调试,最好的办法是对Body主体进行分区Section,将不同的内容放入不同的段中,这就是elementor中section的由来。点击+号即可快速添加一个section段。

一个section段可以由多个column列组成,如两列,三列,默认就是一列。

七、Element元素

段只是页面的布局手段,相当于编辑word时的分页符,不会实际显示到网页上。如果只有段,网页是不会显示任何内容的。这就需要Element元素,Element元素是可以显示到网页上的最小单位。

点击元素控制编辑区右上角的九宫格可以显示所有的元素列表。

找到对应的元素拖入Section中的Column中,即可快速设计网页。

单击某个元素,即可对其进行个性化设置和添加内容。

编辑完成后,别忘了点击左下角的 update更新发布,否则所做的设计不会自动保存。永远记住随时update。

发表评论

关闭菜单