Elementor 是一款强大的 WordPress 页面构建插件,通过拖拽操作即可轻松设计网页。以下是其详细使用教程:
安装 Elementor 插件
- 安装免费版:登录 WordPress 管理后台,转到 “插件”>“安装插件”,在搜索框中输入 “Elementor”,点击 “安装”,然后激活插件。
- 安装 Pro 版(可选):访问 Elementor 官网,购买并下载 Elementor Pro 插件。返回 WordPress 后台,转到 “插件”>“添加插件”,点击 “上传插件”,上传 Pro 插件的 ZIP 文件,安装并激活后,使用许可证密钥激活 Pro 版本。
创建新页面
在 WordPress 后台,转到 “页面”>“新页面”,输入页面标题,如 “首页”,点击 “编辑 Elementor”,进入 Elementor 编辑器界面。


了解编辑器界面
Elementor 编辑器界面分为三部分:左侧工具栏、中间的实时预览区域和右侧的导航器。左侧工具栏可选择不同小部件和布局;中间预览区域可实时查看并编辑页面内容;右侧导航器可方便查看网站的容器结构。
添加和编辑页面元素
从左侧工具栏中拖拽小部件到页面的指定位置,如文本编辑器、图片、按钮等。例如,拖入 “文本编辑器” 小部件,双击即可输入文本内容;拖入 “图片” 小部件,双击可上传图片。
使用容器和结构
容器是 Elementor 中用于布局和组织内容的元素,支持 Flexbox 和 Grid 布局。点击可视化编辑器中的 “+” 图标添加容器,从弹出的菜单中选择合适的布局,如单列、双列等。
自定义样式
选中页面元素后,在左侧工具栏中的 “样式” 标签下可设置字体、大小、颜色、对齐方式等。选择段落或列,进入 “样式” 选项卡,可选择背景颜色、图片或视频背景等。
使用预建模板
在编辑器中点击左上角的 “模板” 图标,选择 “主题模板” 或 “页面模板”,浏览分类后,点击模板进行预览,点击 “插入” 即可套用。


响应式设计
点击编辑器底部的设备图标,如手机、平板、电脑,针对不同设备调整模块的显示方式,如隐藏某个图片、缩小字体等,以优化移动端或桌面端的显示效果。
发布页面
确认页面设计无误后,点击编辑器右上角的 “发布” 按钮,将页面发布到网站上。
