Elementor教程 2025年新手使用Elementor建站完整指南

世界领先的WordPress可视化页面构建器插件Elementor使用指南。从零开始学会使用Elementor设计专业网站，无需编程知识。

10万+ 用户选择

零基础轻松上手

专业级设计效果

什么是Elementor？

了解这个强大的WordPress页面构建器

Elementor是WordPress平台上最受欢迎的可视化页面构建器插件，全球超过1000万网站在使用。你可以不需要具有专业的编程能力，就可以通过Elementor拖拽式设计和生成网页。这篇Elementor教程将帮助你从零开始掌握这个强大的工具。

WordPress上面有很多优秀的可视化网页设计工具（Website Builder），而Elementor更是这些页面构建器中的佼佼者。它提供了直观的拖拽界面、丰富的设计元素和专业的模板库，让任何人都能创建出专业级的网站。

Elementor版本区别

免费版

基础拖拽编辑器
30+基础小部件
基础模板库
响应式设计
基础样式控制

免费

Pro版本

90+高级小部件
300+专业模板
主题构建器
WooCommerce支持
弹窗构建器
表单构建器
动画效果
全局样式系统

$59/年起

你是否需要用到Elementor？

如果你符合以下任一情况，Elementor都是理想的选择：

想要创建专业网站但不会编程
需要快速搭建网站原型
希望完全控制网站设计
需要创建复杂的页面布局
想要与客户实时协作设计

通过Elementor，你可以创建各种类型的网站：企业官网、个人博客、电商网站、作品集网站、登录页面等。

关于Elementor Pro破解版

网上虽然有Elementor破解版下载，但存在以下问题：安全风险、功能受限、无法获得更新、缺乏技术支持。建议购买正版以获得完整功能、安全保障和技术支持。

获取Elementor Pro

正版授权，功能完整，安全可靠

官方购买奶爸小店

奶爸小店仅售69元/年，正版保证

Elementor安装教程

详细的安装步骤指导

🌐

准备WordPress网站

使用Elementor的前提是你已经有了一个WordPress网站。如果还没有，请参见WordPress安装教程，先搭建一个WordPress网站。

系统要求：WordPress 5.0+，PHP 7.4+，MySQL 5.6+，建议使用兼容性好的主题。

⬇️

安装Elementor插件

进入WordPress后台，选择插件 → 安装插件，搜索"elementor"，找到官方插件（作者：Elementor.com）并安装激活。

或者你可以从WordPress官方插件库下载安装包后上传安装。

⚙️

完成初始设置

激活后会出现设置向导，你可以选择跳过账户创建步骤。建议使用兼容性好的主题如Astra主题或GeneratePress。

主题建议：不建议新手使用Hello主题，因为它是完全空白的主题，需要从零开始设计所有元素，对新手来说难度较大。

设置完成后，在WordPress后台左侧菜单就能看到Elementor相关选项，表示安装成功。

Elementor使用教程

从创建第一个页面开始

创建第一个Elementor页面

步骤1：新建页面

在WordPress后台，选择页面 → 新建页面，输入页面标题后，点击页面顶部的"使用Elementor编辑"按钮。

点击查看大图

步骤2：了解工作界面

左侧元素面板

包含所有可用的小部件和元素，分为基础、专业、通用等类别。带锁图标的是Pro版功能。

中央编辑区

实时预览和编辑你的页面内容，所见即所得的编辑体验。

设置面板

选中元素后显示详细设置选项，包括内容、样式、高级设置三个标签。

顶部工具栏

包含响应式预览、历史记录、设置等功能按钮。

点击查看大图

步骤3：开始设计

方法1：从模板开始

Elementor本身自带的模板不多，建议使用Astra等主题自带的模板导入后修改。这是最快速的建站方法。

方法2：从零开始

拖拽左侧的元素到编辑区，逐步构建你的页面布局。适合有特定设计需求的用户。（截图1 截图2 截图3）

推荐使用容器（Container）来组织页面结构，它比旧版的段（Section）更灵活、更现代。

下方的免费功能增强章节，有更多实用的功能小部件，也包含一些不错的免费模板可供选择。

💡 专业提示

建议新手先使用模板进行学习和修改，这样可以更快地理解Elementor的设计思路和最佳实践。在熟悉了基本操作后，再尝试从零开始设计。

高级功能详解

掌握这些技巧让你的设计更专业

PERFORMANCE

⚡

性能优化

优化DOM输出、CSS合并等功能，确保网站加载速度快，用户体验佳。

DESIGN

🎨

全局样式设置

统一设置网站的颜色、字体、间距等样式，确保设计一致性。一次设置，全站应用。

RESPONSIVE

📱

响应式编辑

针对桌面、平板、手机分别优化显示效果，确保所有设备上的完美呈现。可独立设置每个断点的样式。

NAVIGATION

🔗

锚点链接

创建页面内跳转效果，提升用户体验和页面导航。在高级设置中添加CSS ID即可。

ANIMATION

🎬

动画效果

添加入场动画、悬停效果等，让页面更加生动有趣。支持延迟、持续时间等精细控制。

ADVANCED

🎯

自定义CSS

为有经验的用户提供自定义CSS功能，实现更精确的样式控制。

HEADER

🏗️

页眉页脚编辑

使用Elementor Pro主题构建器完全自定义网站的页眉和页脚设计，摆脱主题限制，实现独特的品牌形象。

TEMPLATE

📄

页面模板制作

创建可重复使用的页面模板和区块，提高设计效率。支持动态内容显示，适用于文章页、产品页等各种页面类型。

免费Elementor功能增强

通过第三方插件扩展Elementor功能

Essential Addons for Elementor

最受欢迎的Elementor扩展插件之一，提供90+额外小部件，包括数据表格、价格表、团队成员展示等实用功能。（免费版优惠购买高级版）

数据表格价格表团队展示倒计时进度条

Premium Addons for Elementor

高质量的扩展小部件集合，包括轮播图、图表、地图等高级功能，设计精美，性能优秀。（免费版优惠购买高级版）

轮播图图表展示地图集成视频播放画廊

ElementsKit Elementor Addons and Templates

功能最全面的Elementor扩展插件之一，提供90+小部件和900+预制模板，包括页眉页脚构建器、超级菜单等高级功能。安装量超过100万+。（免费版优惠购买高级版）

页眉页脚构建器超级菜单小部件构建器 900+模板 WooCommerce支持

Happy Addons for Elementor

专注用户体验的Elementor扩展插件，提供50+精美小部件和丰富的设计选项，界面友好，性能优秀，深受用户喜爱。（免费版优惠购买高级版）

卡片设计图标列表图像对比时间线动画效果

Unlimited Elements For Elementor

独特的Elementor扩展插件，提供无限制的小部件和模板库，支持自定义小部件创建，让你的设计创意无限延伸。（免费版优惠购买高级版）

无限小部件自定义创建模板库高级动画第三方集成

⚠️ 使用建议：不建议安装过多扩展插件，可能会影响网站加载速度和稳定性。建议根据实际需要选择1-2个高质量的扩展，避免功能冗余。

Elementor Pro高级功能

解锁专业级网站设计能力

主题构建器

完全自定义网站的头部、底部、文章页面、产品页面等所有模板，实现真正的全站设计自由。

自定义Header设计
个性化Footer布局
文章页面模板
产品页面设计
404错误页面
搜索结果页面

弹窗构建器

创建各种类型的弹窗，提升用户参与度和转化率。支持多种触发条件和精美的动画效果。

邮件订阅弹窗
促销活动弹窗
退出意图弹窗
年龄验证弹窗
Cookie通知弹窗
视频播放弹窗

表单构建器

无需额外插件即可创建各种表单，集成邮件营销服务，支持条件逻辑和文件上传。

联系我们表单
邮件订阅表单
调查问卷表单
文件上传表单
多步骤表单
支付表单

WooCommerce构建器

专为电商网站设计，可以自定义产品页面、购物车、结账页面等，打造独特的购物体验。

产品页面设计
产品列表布局
购物车页面
结账流程
我的账户页面
感谢页面

准备升级到Pro版本？

获得完整的网站设计自由度，解锁所有专业功能

立即购买 Elementor Pro - 仅需69元/年

正版授权 | 包安装激活 | 终身更新

Elementor常见问题解答

解决使用过程中的常见疑问

🎬

Elementor怎么添加幻灯片滑块？

有两种方法添加幻灯片：

使用短代码：如果安装了Slider Revolution、Smart Slider 3等专业幻灯片插件，在Elementor中添加"短代码"小部件，粘贴幻灯片短代码即可。
使用Pro版滑块：Elementor Pro提供内置的Media Carousel和Slides小部件，可直接拖拽使用，支持多种过渡效果。

🎨

Elementor怎么修改文字大小和颜色？

修改文字样式的步骤：

选中需要修改的文字元素（如标题、文本编辑器）
在左侧设置面板点击"样式"标签
在"排版"部分设置字体大小、颜色、字重等属性
可以分别为桌面、平板、手机设置不同的样式
使用全局颜色和字体可以确保网站风格一致

📝

Elementor怎么添加联系表单？

添加联系表单有几种方法：

使用Pro版表单：Elementor Pro内置表单构建器，可直接创建各种表单，支持邮件通知和第三方集成。
第三方插件：安装Contact Form 7、WPForms、Ninja Forms等插件，创建表单后使用短代码添加到页面。
推荐插件：Fluent Forms （免费简单）、WPForms（功能强大）、Gravity Forms（专业级）

🔗

怎么在Elementor页面添加跳转效果？

创建页面内跳转（锚点链接）：

选中要跳转到的目标元素或容器
在"高级"设置中的"CSS ID"字段输入唯一ID（如：section1）
在按钮或链接的URL中输入：#section1
保存页面后，点击链接即可平滑跳转到对应位置
可以在WordPress自定义器中调整滚动偏移量

📱

Elementor怎么编辑手机端显示效果？

响应式编辑步骤：

在Elementor编辑器顶部工具栏找到响应式模式图标
点击切换到平板（768px）或手机（360px）视图
在对应视图下调整元素的显示效果
可以设置不同设备下的字体大小、间距、显示/隐藏等
使用"仅在设备上显示"功能可以为不同设备显示不同内容

🎯

Elementor怎么修改网站头部和底部？

修改头部底部的方法：

使用Pro版：Elementor Pro的主题构建器可直接编辑Header和Footer，提供完整的设计自由度。
免费方案：安装"Header Footer Elementor"或"Elementor Header & Footer Builder"插件。
主题支持：选择支持Elementor的主题，如Astra、GeneratePress、OceanWP等。
自定义方案：使用主题的自定义功能结合Elementor设计特定区域。

⚡

Elementor网站加载速度慢怎么办？

优化Elementor网站速度的方法：

启用缓存：使用WP Rocket、W3 Total Cache等缓存插件
图片优化：使用WebP格式，启用懒加载功能
减少插件：只保留必要的Elementor扩展插件
选择好主机：使用SSD硬盘和CDN加速服务
Elementor设置：在Elementor > 设置中启用优化选项

更多Elementor教程资源

继续深入学习Elementor

📚

进阶教程

🛠️

设计资源

Elementor官方模板库
Envato Elements
Template Monster
Freepik设计素材
Unsplash免费图片

🎓

学习平台

Elementor Academy
YouTube官方频道
奶爸建站笔记博客
Elementor社区论坛
Facebook用户群组

需要专业的Elementor网站建设服务？

如果你需要专业的WordPress网站建设服务，或者在使用Elementor过程中遇到问题，欢迎联系我们。我们提供从网站规划到上线运营的一站式服务。

联系我们访问奶爸小店

如果本教程对你有帮助，欢迎分享给更多需要的朋友。有任何问题也可以在下方留言讨论。

💬 讨论与交流

有任何关于Elementor的问题或经验分享，欢迎在下方留言讨论

《 “Elementor教程，一文学会用Elementor建网站” 》有 76 条评论

云飘舞说道：
2020年12月28日下午11:42
设计归档模板时，条件为作者归档。但发布后，归档页还是原主题自带的样式，自己设计的归档模版，并没有生效。不知是什么原因。条件切换为日期，模板就会生效。真是很奇怪。希望奶爸讲解一下。
回复
- Lee说道：
  2020年12月29日上午2:41
  我测试了下，设置之后没有问题。可能是你哪里设置的不对。Query设置根据作者筛选，日期所有，排序按照日期，倒序。设置之后多用户只显示自己设置的那个用户的文章归档。
  回复
  - 云飘舞说道：
    2021年1月8日下午8:56
    问题已解决, 是静态的问题
    回复
davin说道：
2021年1月20日下午4:49
安装Essential Addons插件后，左侧的elementor面板就变灰了，无法拖拽了。然后关闭Essential Addons插件就正常了，这是什么原因呢？
回复
- Lee说道：
  2021年1月20日下午9:26
  这种问题通常是插件兼容导致的，要具体分析才能得出结果。
  回复
立刻说道：
2021年3月13日上午11:05
汉化版能发一下吗？
回复
- Lee说道：
  2021年3月13日下午7:35
  官方自带汉化版，购买Pro的版本即可。
  回复
BritishRoses说道：
2021年3月15日下午7:50
Elementor是一个页面的编辑器，我对于Elementor与Theme的关系没搞明白：
我想自建一个to B的外贸站，主要是接询盘，
1）单用Elementor免费版行么？既然可以拖拽编辑，为什么还要用theme？
2）用Elementor Pro可以替代theme么？
3）如果用flatsome，那还要装Elementor么？
4）to B的网站，需要用woocommerce么？
5）to B的网站，用什么样的组合好？Elementor + Astra?
我真的是没有搞清楚概念，麻烦奶爸答疑解惑，多谢。
回复
- Lee说道：
  2021年3月15日下午7:58
  1、可以
  2、可以，不推荐新手这么做
  3、不需要，flatsome自带构建器
  4、看情况，可用可不用
  5、合适自己的最合适。
  elementor类似于装修队，主题类似于不同户型的房子，如果你想自己布置房间布局，那就装elementor官方的hello主题，自己设计每个房间的布局和风格等等。
  回复
  - BRITISHROSES说道：
    2021年3月15日下午8:41
    多谢您，您回复得太迅速了，感谢感谢。
    1）如果是to C的网站，用flatsome+woocommer，有问题么？这两者有重叠么？
    2）我刚刚浏览到别的网站，它提到用Elementor Pro + Astra免费版（说是最轻），这样的组合，比只用Elementor Pro，针对to B的网站，在建站难度、美观、功能，这3方面有多少差别呢？
    回复
    - Lee说道：
      2021年3月15日下午8:43
      2c不管你用什么主题，woocommerce都必须安装的。
      建站难度，美观，功能不能统一。
      回复
      - BRITISHROSES说道：
        2021年3月15日下午8:47
        “建站难度，美观，功能不能统一” ？？
        不好意思，没懂呀。。。
      - Lee说道：
        2021年3月16日上午9:48
        就是你想要难度低，美观，功能强大的没有。功能强大难度肯定高。美观也需要有设计功底，所以也不简单。
BRITISHROSES说道：
2021年3月16日下午4:07
多谢多谢。还有最后一个问题，to B 网站，如果要做多产品打包询盘，做成quote cart那种，elementor Pro + Woocommerce + yith woocommerce request a quote , 这样组合可以么？Woocommerce是必须的是么？只是to B，不需要实际交易，Elementor Pro可以add to cart的话，是不是就可以不用Woocommerce了？原谅我问的可能很无语，但确实疑惑，还请指教，谢谢。
回复
- Lee说道：
  2021年3月16日下午4:25
  你试一试就知道了。别人解释的再清楚不如自己尝试一次明白。
  回复
  - BRITISHROSES说道：
    2021年3月16日下午6:27
    您说的对，多谢了。
    回复
Barbosa说道：
2021年4月22日上午9:52
请教一个问题，安装了elementor之后出现无法加载的现象，用安全模式也不行，这是什么原因呢
回复
- Lee说道：
  2021年4月22日上午10:17
  这种情况一般是网络和兼容问题，你网站服务器是哪里的，然后可以试试只激活elementor看看能不能用。
  回复
  - BARBOSA说道：
    2021年4月22日下午9:10
    我换个网络试试，如果我想在图片上输入文字，应该怎么操作呢，或者说我想把问题放在图片上，该怎么设置？
    回复
    - Lee说道：
      2021年4月22日下午9:27
      设置某个区域的背景图片，然后前面加上文字，不影响。
      回复
      - BARBOSA说道：
        2021年4月23日上午8:47
        好的，我试试，非常感谢你的帮助
程彩虹说道：
2021年4月27日下午6:08
奶爸你好，我建站的时候不管首页还是关于我们还是联系我们之类的页面点开都是首页的页面，不知道是哪里出了问题，然后我跟着网上的教程把阅读设置更改了之后首页变得不可编辑了，而且很容易卡死没办法进入网站，显示504错误，现在我懵了
回复
- Lee说道：
  2021年4月27日下午6:10
  这种问题单从你描述看不出来问题所在的，估计是服务器或者网站设置哪里不对引起的。
  回复
  - 程彩虹说道：
    2021年4月27日下午6:14
    它显示的504错误过几个小时就会自动变好，又会能进入首页
    回复
    - Lee说道：
      2021年4月27日下午6:15
      504错误代表网关超时（Gateway timeout），是指服务器作为网关或代理，但是没有及时从上游服务器收到请求。
      504通常是服务器配置不当或者是网站资源占用不正常引起的服务器崩溃，原因很多。
      回复
遂原风说道：
2021年5月27日上午11:12
使用elementor设计网站，首页调用文章列表，文章标题和文章日期如何做到横排，在elementor找不到设置的地方，请指教
回复
- Lee说道：
  2021年5月28日上午2:19
  这个取决于你安装的elementor附加组件或者主题自带的元素是否支持横排，如果不支持的话你就没办法那么设置。elementor本身是把一些代码的内容可视化了，但是如果没有那么代码，你想可视化出来的效果就没有。
  回复
sg说道：
2021年11月2日上午9:41
请问一下页面的 download app 应该怎么去掉
回复
- Lee说道：
  2021年11月2日上午10:50
  你说的这个应该是你网站主题demo自带的，不看到实际页面，不知道怎么处理的。
  回复
Hao说道：
2021年11月6日下午8:19
奶爸你好，我在下载Elementor插件的时候出现HTTP 500内部服务器错误的情况，在Elementor官网注册账号时也会出错，请问如何解决。我是在本地建站的，phpstudy集成环境
回复
- Lee说道：
  2021年11月6日下午8:23
  本地环境的话网络可能不畅通，建议使用在线环境测试。
  回复
小王说道：
2021年11月15日下午9:00
你好，我准备去家公司做网页内容撰写，现在公司已有自己网站B2B，Elementor插件能用上吗？
回复
- Lee说道：
  2021年11月16日上午11:41
  这个要看你们公司现在网站是什么程序
  回复
dhs说道：
2021年11月16日下午3:44
请问elementor账号注册总是失败？
回复
- Lee说道：
  2021年11月16日下午4:52
  一般注册不了就是你网络不好。可以试试用代理注册。
  回复
dhs说道：
2021年11月16日下午7:00
您好，总是提示出问题了，请再试一次。我这里再多试几次看看，也可能跟访问Google的一些相关服务产生障碍。
回复
李强说道：
2021年11月23日下午8:08
你好，我导入了主题模板后，用Elementor编辑网页。原本的网页的右上方有模板的logo，而我点开用Elementor编辑时，Elementor的菜单栏遮盖了logo部分，无法编辑提货logo图片。请问这种情况需要如何解决？谢谢
回复
- Lee说道：
  2021年11月23日下午8:43
  logo通常是在主题设置，或者单独的页头编辑里面，不是编辑某个页面的时候修改logo
  回复
sharely说道：
2021年12月29日下午2:54
奶爸，你好，初用ELEMENTOR，不知道怎么回事。
选中标题或图象需要编辑的地方，左边再选样式的时候，就不显示样式的菜单了，试过删除再安装，还是一样到选样式就卡了。
但可以增加信息，每次增加信息，都提示更新，是每次都要更新么？
回复
- Lee说道：
  2021年12月29日下午5:48
  你这个问题比较复杂了，没碰到过，估计单凭语言描述解决不了。
  回复
Emily说道：
2022年1月10日下午1:48
您好，想请教一下“简码”的问题：
在wp后台下载并安装了插件YITH插件，通过elementor编辑插入简码：[yith_ywraq_button_quote]
但是页面并没有生成按钮，只显示了我输入的简码本身：[yith_ywraq_button_quote]
请问这个问题要如何排查修复呢？谢谢！
回复
- Lee说道：
  2022年1月12日下午5:36
  你elementor是选择的code模块儿添加的吗？
  回复
菠菜说道：
2022年4月3日下午5:31
是否有关于generateblock 和generate press 的介绍
回复
- Lee说道：
  2022年4月4日上午9:50
  没有，毕竟都要花钱买。目前的情况Elementor免费版就够很多网站用了。generateblock的那些效果实际上用ele基本上也都可以弄出来。
  回复
杨说道：
2022年5月18日上午9:04
你好网站上的破解版和那种正版的可以一个elementor账户可以支持多个网站哪个有啥区别
回复
- Lee说道：
  2022年5月18日上午11:41
  破解版，传上去随便哪个网站都可以用，但是只能用他的pro功能，不能用他在线的模板素材。正版的是一个网站绑定一个授权，可以用功能和在线模板库。模板库就是给你做了一些现成的模板，你可以直接点击导入到你网站上使用。
  回复
杨说道：
2022年5月20日下午12:00
现在购买了正版，到期后不续费了，那之前建站时用的那些Pro版本的元素和模板，是不是就用不了了？
回复
- Lee说道：
  2022年5月20日下午3:27
  不续费就没办法编辑和升级，做好了的不影响使用。
  回复
王说道：
2022年5月20日下午1:24
奶爸，你好，用elementor做完前端页面后，如何调取数据库数据呢，比如要实现新闻列表和详情页动态数据，怎么实现呢？
回复
- Lee说道：
  2022年5月20日下午3:28
  pro好像可以调用动态数据
  回复

🎨 建站教程

⚙️ 建站资源

☁️ 常见问题

🔥 火热推荐

Elementor Pro正版授权

建站视频教程