了解 Elementor 页面编辑器的基本操作,是自学建站的基础教程。
区分主题、免费插件、付费插件(专业版)
Elementor Widget介绍
通过Wordpress后台打开任意页面,使用Elementor编辑,点击左侧面板中的九宫格,可以看到所有Elementor部件。
Elementor免费插件提供的部件:布局、基本、常规、Wordpress
Elementor付费插件提供的部件 :高级、站点、单页、Woocommerce
Elementor Widget使用方法
往Container内部添加Widget
可以往Elementor容器内添加任意元素。
设置容器背景
每个容器的背景可以是单色、渐变色、图片、幻灯片、视频
Container的样式设置
- 设置容器内元素的排列方向:布局 – 方向 – 可选水平或垂直。
- 设置容器内元素的对齐方式:分为水平方向和垂直方向的对齐。
- 设置容器内元素的间距。
Container的内距外距
选中容器 – 高级设置 – 可设置内距(padding)、外距(margin)
Container与其内部的Widget
Container嵌套
容器可以层层嵌套,每个容器都可以单独设置背景等样式。
Container内Widget的换行
水平方向的容器,无论添加多少个元素,所有元素都在一行内显示。垂直方向的元素,第一行放满时,剩下的元素会自动移入下一行。
Container内Widget的对齐
- 把容器的最低高度调大,以便查看效果。
- 选中容器 – 布局标签 – 有主轴对齐和副轴对齐,可设置水平和垂直方向的对齐方式。其中,主轴对齐可设置分布方式。
- 每个元素都可以在高级设置中设置自对齐(Align Self)
Elementor元素高级设置
为Elementor元素添加动作
- 选中元素 – 高级设置 – 动作效果 – Sticky – Top/Bottom。
- 选中元素 – 高级设置 – 动作效果 – 进入动画。
所有Elementor元素都有高级设置
Elementor元素的设置大都分为布局、样式、高级设置。其中高级设置是所有Elementor元素共有的,布局和样式下的选项各元素各不相同。
菜单功能对比:Elementor VS WordPress
Elementor提供的菜单部件提供更多设置选项,让我们可以在不写代码的情况下,做出自己理想的菜单效果。
Elementor菜单可快速修改菜单方向、光标悬浮效果、字体颜色等。