Elementor 教程：0 编程基础也能学会的网站建设

Elementor 是WordPress 必备的可视化页面构建器插件，他是拖放式的功能降低了建站难度，即便你不会代码，也能制作出精美的网站，使用 Elementor 就像搭积木一样搭建属于你的网站。

Elementor 和 Elementor PRO 的区别

功能	Elementor（免费版）	Elementor Pro（付费版）
页面构建器	拖放式页面编辑器	拖放式页面编辑器，功能更强大
模板	提供基础模板	提供更多高级模板和全站模板
主题构建器	无	支持自定义网站头部、脚部、单页面、存档页面等
弹出窗口构建器	无	支持创建和设计弹出窗口（Pop-up Builder）
WooCommerce 集成	基本支持（需要额外插件）	完全支持，允许设计和自定义 WooCommerce 商店页面
自定义字体和排版	基本排版和字体样式	更多字体选项、动态字体样式和排版控制
高级设计功能	基本背景样式、色彩和间距	更多背景选项（渐变、视频背景）、动效、交互式元素（如悬停效果）
Global Widget（全局小工具）	无	允许创建和复用全局小工具
表单功能	基本表单功能（仅限字段和样式）	高级表单（多个字段、提交操作、与第三方工具集成等）
动态内容	无	支持动态内容（例如来自数据库、博客文章、用户数据等）
自定义CSS	无	支持自定义CSS编辑
支持与更新	基本支持	优先支持、定期更新、访问最新功能

Elementor 安装

在 WordPress 后台搜索 Elementor 安装并启用后，左侧栏目上就会出现 Elementor 相关的内容介绍、功能组件及设置。

正版的 Elementor PRO 购买后会提供压缩文件包，可以通过 WordPress 后台插件 – 上传插件进行安装。

Elementor 基础设置

禁用 Google 字体，加快网站访问速度。

全部激活开启 Elementor 特性的功能。

当要套用第三方提供的主题时，需要同步一下 CSS 样式文件。

当更新了 Elementor 新版本遇到问题时，可以点击版本控制回到上一个版本。

Elementor 教程

创建页面并用 Elementor 打开页面的步骤省略了。Elementor 教程从构建页面、基础设置开始讲起。

首次打开 Elementor 时看到界面。从左侧拖拽 “ 容器 ” 到中间 “ + ” 号中。

Elementor 页面结构

如图所示，假设当前你要编辑的页面是一篇博客的内容文章，可以遵循这样的结构。

点击左上角的 “ 结构导航 ”。你接下去在页面中添加的内容都会在结构中显示。简介和为什么要学结构是两个板块，分别用2个容器来分割。在段落2中嵌套容器用来补充说明，需要注意 H 标签的使用。

Elementor 网格布局

点击选中某个 “ 容器 ”，可以把布局设置成网格，并且还可以控制行数和列数。

如果你现在每个图片下面加上标题和时间，就需要每个网格内再套一层容器。如果先要查看效果先点右上角的 “发布” 按钮，再点一下右侧向下箭头中的 “查看页面”。

Elementor 预设了许多网格的样式，基本上可以满足大部分的需求。

你也可以通过 Elementor 提供的模版库中去挑选你喜欢的样式。Elementor 页面编辑有三种：根据自己喜好随意摆放。第二种：使用模版库的预设模块。第三种：由设计师设计好页面，程序猿按设计要求做页面。你会选择哪种呢？

Elementor 基本组件

基本组件主要由 9 个模块组成：标题、图片、描述、视频、按钮、分割线是我最常用的几个小部件。间距、谷歌地图、图标很少用。

标题组件

一个页面中只会出现 H1 标题，其他的型号的 H 标题则根据页面的层次有规则的设置。

图1：可以设置点击标题跳转的外链，标题的类型。
图2：可以设置对齐的方式、字体的样式大小颜色等。
图3：可以设置标题的动态的效果、位置、或更高级的自定义方式。
前2种方式使用的比较多，第3种需要你花更多的时间去研究了。

图片组件

WordPress 图片上传很方便，可以直接把图片文件拖拉到网站内容编辑中。我一般都是在本地优化好图片尺寸和大小后再上传的。图片大小对网页打开速度还是影响很大的，做运维服务的人一定要注意优化图片。《关于本地图片优化方式》本站有教程可以点击查看。

另外图片的 Alt 设置也很重要，也能够影响 SEO 的表现。对于复杂的图片机器也会很难识别，需要你提供 Alt 描述来告诉他们。

文本编辑器组件

Elementor 内置的文本编辑器把最主要的一些功能都都包含在了里面。想要把段落内容编辑的更好看办法肯定是有的，但是不推荐这样做哦。例如：字体加粗、斜体、列表、外链、对齐这些基本的功能用好就可以了。

视频组件

视频组件其实用的也很多，尤其是对于外贸企业客户展示自己产品时，经常会用视频来进行展示。视频组件使用方法也非常简单，只需要把里面的链接进行替换就可以了。强烈推荐不要把视频放在你的服务器上，不仅会占用服务器大量的空间，而且打开的速度会超级慢（因为视频打开是需要加载和流量的），最好的方式就是开通 Youtube 账号把视频放在第三方平台，网站内容只要改下链接就可以了。