预计学习时间：1 – 2小时
当我刚开始使用 Elementor 来搭建网站的时候，一打开编辑器就直接懵了：左边一堆东西、右边一块白板，到底要从哪里开始呢？
今天是 “Elementor 新手” 系列第一篇，带你搞清楚 Elementor 的编辑器界面和 4 个最基础的小部件。学会这些，你就能做出一个简单的网页了哟。
先认识 Elementor 是什么？
简单的来说 Elementor 是一个让不会写代码的人也能设计网站的 WordPress 页面编辑器插件。
它的操作逻辑就类似我们做 PPT：左边是素材库（小部件），右边是画布，想要什么模块直接拖过去就行。不需要懂 HTML、CSS 或 PHP，所有设计都是可视化操作。
之前我写过了两篇介绍与安装 Elementor 插件的文章，你们想了解更多的话，可以点进去看看。
Elementor 插件和很多付费版插件一样拥有两种版本，这两者的区别是：
- Elementor（免费版）：提供 40+ 基础小部件，足够做出漂亮的页面
- Elementor Pro（付费版）：解锁主题生成器、弹窗生成器、表单生成器等高级功能
新手建议可以先去使用免费版来熟悉一下操作，确认是有需要才再升级也不迟。
功能 1 ：熟悉编辑器界面
在我们开始设计网页之前，需要先搞懂编辑器长什么样。这是所有操作的基础哦。
操作步骤：
- 登录 WordPress 后台，点击「页面」→「添加页面」
- 输入页面标题（比如“首页”）
- 点击「使用 Elementor 编辑」按钮
进入编辑器后，你会看到三个核心区域：
左侧工具栏（小部件库）
- 这里放满了各种小部件：标题、图片、按钮、文本编辑器等
- 所有小部件都可以直接拖拽到右边画布上
- 点击小部件后，左侧会切换到该部件的编辑面板
中央预览区（画布）
- 实时显示你设计的样子
- 拖什么进来就看什么，所有修改即时可见
- 点击画布上的任何元素，左侧会自动显示该元素的编辑选项
顶部状态栏
- 显示当前编辑的页面名称
- 响应式模式切换按钮（电脑/平板/手机）
- 预览按钮和发布/更新按钮
💡 小贴士：你可以在「页面」列表中随时点击「用 Elementor 编辑」来修改已发布的页面。
功能 2 ：添加容器（布局基础）
容器是 Elementor 的布局基础。你可以把它想象成一个「盒子」，所有内容都要放在盒子里。
操作步骤：
- 在左侧工具栏找到「容器」小部件
- 按住鼠标左键，拖到右侧画布上
- 设置列数（比如 2 列，就可以左边放图片、右边放文字）
- 在容器内部继续拖入其他小部件（标题、图片、按钮等）
进阶技巧： 容器还可以无限嵌套——在一个容器里面再放另一个容器，实现更复杂的排版。
💡 小贴士：Elementor 有新旧两种布局方式（Section 和 Container），新网站建议直接用 Container，结构更灵活、代码更干净。
功能 3 ：文本编辑器（输入文字内容）
网页上的文字不是直接打字上去的，而是通过「文本编辑器」小部件来添加。
操作步骤：
- 从左侧拖一个「文本编辑器」小部件到容器里
- 直接在编辑器里输入文字
- 使用工具栏调整格式：粗体、斜体、列表、标题层级等
- 切换到「样式」选项卡：调整字体大小、颜色、行距
三种编辑模式：
- 视觉模式：所见即所得，适合一般编辑
- 文本模式：直接编辑 HTML 代码
💡 小贴士：段落之间的行距建议设为 1.5-1.8，阅读体验最好。
功能 4 ：插入图片（视觉元素）
一张好图片胜过千言万语。Elementor 的图片小部件让你轻松管理网站图片。
操作步骤：
- 拖一个「图片」小部件到容器
- 点击「选择图片」，从媒体库上传或选择现有图片
- 设置图片大小（如“完整尺寸”或自定义宽高）
- 调整对齐方式（居中、左对齐、右对齐）
- 可选：添加链接（点击图片跳转到指定页面）
进阶设置：
- 替代文本：写一句描述图片的话，对 SEO 和视障用户友好
- 圆角：在样式选项卡中调整图片边角变圆
- 悬停效果：鼠标移到图片时产生缩放或变亮效果
💡 小贴士：上传图片前先压缩一下，网站加载速度会快很多。推荐使用 TinyPNG 或 Imagify。
第一篇小结
恭喜你完成了 “Elementor 新手” 入门篇！你现在已经掌握了：
- Elementor 编辑器的界面布局
- 用容器搭建页面结构
- 添加和编辑文字
- 插入和设置图片
下一篇我们会学习按钮、背景设置和响应式设计，让你的网页看起来更完整、更美观。
第一篇速查表：
| 功能 | 核心作用 | 难度 |
|---|---|---|
| 1. 熟悉编辑器界面 | 认识左侧工具栏、预览区、顶部状态栏 | ⭐ |
| 2. 添加容器 | 布局基础，放内容的“盒子” | ⭐⭐ |
| 3. 文本编辑器 | 输入和格式化文字 | ⭐ |
| 4. 插入图片 | 上传和设置图片 | ⭐ |
