全文字数：978 | 阅读时间：5分钟
Elementor编辑器的安装与设置
安装Elementor编辑器（免费）
安装 – 启用 – 关闭Elementor初始化设置页面 – 刷新主题设置页面
设置Elementor主题的全局颜色
设置主要颜色、次要颜色、文本颜色、摘要颜色，可以添加自定义颜色，方便后期调用。
设置Elementor主题的全局字体
设置主要字体格式、次要字体格式、文本字体格式、摘要字体格式，包括字体系列、字号、粗细、大小写转换、字体正斜、字体装饰、行高、字符间距、单词间距。
禁用Elementor部件的默认字体和颜色
WordPress后台 – 常规 – 勾选【禁用默认颜色】和【禁用默认字体】，禁用后，Elementor部件颜色和字体会继承主题颜色和字体。
为全局排版添加示例标题
添加一些标题和文本，以便查看演示效果。
为整个站点设置排版格式
Elementor – 站点设置 – 排版。这里可以设置内容的颜色、字体格式、段落间距、链接颜色、H1~H6标题颜色和排版。
全局设置的便利性
提前设置全局颜色 – 在网站内容编辑中调用全局颜色 – 后续修改全局颜色时，网站上所有相关内容的颜色都会随之改变。全局排版效果同理。
全局元素设计：顶部导航栏
设计顶部导航栏Header
- WordPress后台 – 左侧菜单 – 模板 – Theme Builder – Header – 添加
- 创建水平方向Container
- 放入LOGO，设置自定义宽度为20%
- 放入Menu，设置自定义宽度为60%
- 放入按钮，设置字体颜色、背景颜色
修改全局按钮样式
把全局按钮样式改为与顶部导航栏按钮一样。
导航栏所有元素垂直居中，菜单栏水平居中
垂直居中：高级设置 – 自对齐 – 居中。水平居中：内容 – Alignment – 居中
将顶部导航栏应用于整个网站
发布 – Condition设置为Entire Site – 效果预览
全局元素设计：底部导航栏
创建底部导航栏，添加版权声明
- WordPress后台 – 左侧菜单 – 模板 – Theme Builder – Footer – Add New – 关闭Elementor模板库
- 插入Container – 拖拽放入【文本编辑器】部件
- 添加版本声明，可以用公司名或者网址
- 设置样式：水平居中
添加联系方式模块
- 添加Container，放入三个子Container
- 设计Contact us模块，标题 + 图标列表
- 为图标列表中的每个列表项设置文本、图标、链接地址
| 联系方式 | 链接地址格式 |
|---|---|
| 邮箱 | mailto:Abby@waimaoAbby.com |
| https://wa.me/8612345678910 | |
| 电话 | tel:8612345678910 |
设置图标列表的样式
样式标签 – 设置列表项行距 – 设置图标的尺寸、颜色、对齐、位置 – 更新
添加产品类目模块
- 复制Contact us模块的标题元素，拖拽到产品类目模块，修改文本内容
- 添加【图标列表】部件，列表项内容设置为产品分类名称
- 统一图标icon与样式
询盘表单
添加【Form】元素 – 设置元素比例 – 隐藏Label – 添加标题与文本描述。
导航栏样式调整
在不修改内容的情况下，对导航栏样式进行调整。
顶部导航栏
- 修改按钮的文本、颜色、尺寸，添加链接地址。
- 修改菜单项的光标悬浮：Pointer效果改为Background。
- 设置吸顶效果：顶部导航栏的容器改为全宽度，在高级设置的动作效果中，选择Sticky – Top，设置背景色与阴影。
底部导航栏
- 设置为全宽度，修改内距。
- 修改背景色与内部元素的文本颜色。
- 版本声明设置为全宽度，改变其背景色、文本颜色、上边框、外部间距。
- 在Footer上方增加间隔，与正文内容拉开距离。
