1、关于Elementor
我们先来简单了解一下Elementor吧。
1.1、Elementor是什么
Elementor是当今最成熟、功能强大且易用的可视化页面编辑器之一。它的最大优势在于操作简单，即使你没有编程经验或是完全的建站新手，也能轻松上手。通过拖放式布局和直观的选项设置，Elementor大大降低了入门门槛，让你能够快速调整页面外观，轻松打造出专业水准的网站。
1.2、Elementor的优点
Elementor的操作非常简单，易于上手。它提供了许多预设的区块功能，如标题、文本、图片、图标、列表和表格等。你只需将这些区块通过鼠标拖放到合适的位置，就能轻松制作出精美的网页。
- 易于上手：Elementor拥有直观易懂的操作界面，用户可以通过所见即所得的方式轻松创建网站。即使没有编码能力或设计基础，也能通过简单的拖放操作，构建出理想中的网站。
- 快速高效：使用Elementor时，用户可以在设计网页的同时添加各种强大功能，这样不仅节省了聘请设计师和开发者的费用，还避免了频繁的沟通成本，因为沟通往往是时间成本的主要来源。
- 高度适用性：Elementor适合制作各种类型的网站，无论是企业官网、在线商店，还是网络课程平台，都能轻松实现。
- 响应式设计支持：用户可以使用Elementor调整网站在不同设备上的展示效果，并进行实时预览，确保在电脑、手机和平板上都能提供良好的用户体验。
- 广泛使用：截至2024年，Elementor在WordPress后台插件中显示的启用安装数量已超过1000万，并获得了超过6000个接近满分的评价。这使其成为市面上最受欢迎的WordPress页面编辑器插件，用户在使用过程中几乎总能在网上找到解决方案。
- 完整生态系统：由于Elementor的用户群体庞大，市面上涌现出许多独立开发者和公司针对Elementor研发的扩展插件，形成了一个完整的生态系统。这意味着几乎所有类型的网站功能，Elementor都有相关的解决方案可供选择。
Elementor的最大的优势在于其易于使用，特别适合没有编程背景或建站经验的用户。其拖放式的布局和选项设置方式，使得外观调整变得简单，从而降低了入门的难度。
1.3、Elementor版本介绍
Elementor提供两个版本：免费版和Pro版。免费版包含基本功能和元素库，而Pro版则提供更多高级功能和丰富的元素选择。在使用Pro版之前，用户必须先安装基础版，否则无法正常运行。
相较于免费版，Elementor Pro提供了更全面的功能，包括文章列表、价格表、幻灯片和表单等。特别是Pro版引入的动态网页元素，使得网站更具吸引力，动态效果也更加丰富。
1.4、Elementor Pro的高级功能
除了基础功能和元素库，Elementor Pro还提供了一些高级功能，包括主题构建器、动态内容、表单构建器等，帮助用户创建更复杂和高级的页面。
- 主题构建器：通过0代码的可视化编辑，Elementor的主题构建器无需依赖任何主题即可编辑网站内容，并支持创建动态模板、设置显示条件。推荐搭配响应速度极快的Astra主题使用，这一点对SEO很重要。
- 全局样式设计：利用【设计系统】和【主题风格】，可统一管理全站字体、颜色、按钮等样式，确保风格一致，修改方便。
- 响应式布局：支持多终端响应式设计，提供PC、平板、手机等端点，并可自定义设备显示效果、隐藏元素或调整顺序。
- Woocommerce集成：通过自定义模板集成Woocommerce功能，便于设计产品页、购物车等电商页面。建议结合Woocommerce扩展或成熟电商主题。
- 元素与小部件：拖拽元素或小部件至页面，使用全局小部件或模板简化设计流程，快速完成页面构建。
- 表单功能：支持创建表单并配置SMTP邮件提醒，集成Google reCAPTCHA防止垃圾提交，还可与MailChimp实现订阅管理。
1.4.1、主题构建器
在Elementor的模板菜单下，点击“主题构建器”（Theme Builder）进入。
你可以自定义设计网站的各个部分，如页眉（Header）、页脚（Footer）、文章页（Single Post）、页面（Single Page）、归档页（Archive）等。如果安装了WooCommerce插件，还可以设计产品页。
1.4.2、动态内容
动态内容在创建通用页面时非常实用，例如页面顶部的通栏标题。通过动态内容，你可以将标题自动设置为页面标题（page title），链接设置为文章链接（post URL），这样可以在多个页面上批量应用该模块，免去每次手动修改标题和网址的麻烦。
1.4.3、表单构建器
企业官网通常需要在线联系表单，Elementor Pro的表单功能可以轻松实现。与其他第三方表单插件相比，Elementor的自带表单与其配合更加便利。
1.4.4、弹窗功能（Popup）
Elementor Pro还提供了弹窗功能（Popup），用于创建提示用户注册或联系的弹出窗口。
在WordPress后台的Elementor模板菜单中选择“Popups”，即可创建弹窗，并设置弹出条件和限制。
1.4.5、导入Elementor Pro预制模板
对于新手来说，从零设计网页可能较为困难，导入预制模板后修改是不错的选择。Elementor Pro允许导入所有官方预制模板，修改内容即可实现自定义设计。
在WordPress后台的“模板”菜单中，选择“Kit Library”即可查看模板，选择喜欢的模板后，点击右上角的“Apply Kit”按钮，即可自动导入整个网站的设计和设置。
要启用所有高级功能，用户需前往Elementor Pro官网购买授权，最便宜的套餐为1个站点一年仅需59美元。尽管价格相对较高，但如果你想要创建一个出色的WordPress网站，这笔投资是非常值得的。
此外，Elementor Pro还提供30天无条件全额退款政策。如果购买后觉得不合适或性价比不高，用户可以随时联系客户服务申请退款。
2、安装Elementor
首先，你需要有一个WordPress网站。我推荐使用SiteGround主机来搭建WordPress，因为它能帮助你节省运维学习的时间，并简化管理操作流程。在主机内轻松安装好WordPress后，登录你的网站后台，接下来就可以安装Elementor插件了。
2.2、Elementor常规设置
安装并激活Elementor后，需要进行一些基本的配置，包括选择默认字体、颜色和帖子类型等，进入 设置（Settings）–> 常规（General） 进行以下配置：
- 帖子类型：选择Elementor编辑器可以应用于哪些内容类型，只需勾选你希望使用Elementor编辑的内容类型（如果发现某些内容无法用Elementor编辑，检查是否未在此处勾选）。
- 禁用默认颜色：勾选后，Elementor的全局颜色将继承你在主题中设置的配色方案。
- 禁用默认字体：勾选后，Elementor的全局字体将继承你在主题中设置的字体样式。
- 使用数据共享：勾选后，你的网站数据将与Elementor共享（通常建议不勾选此选项）。
2.3、Elementor的第三方扩展
Elementor是当前WordPress平台上最受欢迎的页面构建器插件之一，其生态系统也相当完善。除了官方的Elementor Pro版本，还有许多第三方插件可以扩展Elementor Free的功能。
这些第三方扩展通常能提供更多样化的元素设计，有时功能甚至优于Elementor Free本身。部分第三方插件还提供高级付费版本，因此用户可以根据自己的需求决定是否安装这些扩展插件或选择付费升级。
3、如何使用Elementor页面编辑器？
3.1、Elementor页面编辑器的使用逻辑
接下来我们介绍网页前端设计的三大基础语言，如果将网页比喻成一个人，那么：
- HTML是人的骨架和结构，它构成了网页的基本框架。一个网页如果没有HTML，就像没有骨架的人，什么都看不到。网页的所有内容，包括文字、图片、视频、按钮、表单等，都是由HTML来定义和构建的。
- CSS是网页的外观和装饰，它负责网页的视觉效果。CSS决定了内容的大小、颜色、间距、字体样式以及阴影等视觉细节。通过CSS，一个页面的设计风格和布局才得以体现。
- JavaScript是网页的行为和互动，就像人的动作和表达。它赋予网页动态效果，使页面能够响应用户的操作。像网页上的动画、弹窗、交互式效果等，都是JavaScript的应用。
理解了这些概念后，再使用Elementor的每个模块时，你会发现这些元素的设置逻辑非常清晰。
每个Elementor模块都提供了以下三个设置选项：
- 内容（HTML）
- 样式（CSS）
- 高级设置（JavaScript）
这样，你可以轻松控制网页的基础内容、视觉效果和交互行为。
3.1.1、内容（HTML）
如果你想更改标题中的文字内容，按照我们之前讨论的逻辑，这属于HTML层面的内容调整，因此需要在设置中的‘内容’部分进行修改。
你可以很方便地找到标题文字的修改区域，尽管这对你来说可能已经很简单了，但在理解了这个概念之后，你会更明确地知道自己正在进行的操作是什么。
3.1.2、样式（CSS）
如果我们想要更改标题文字的颜色，根据之前的逻辑，这属于CSS的调整，因此需要进入设置中的‘样式’部分进行修改。
你可以轻松地在‘样式’选项中找到文本颜色的设置并进行更改。
3.1.3、高级设置（JavaScript）
如果想为标题添加一些炫酷的特效，根据之前的逻辑，这属于JavaScript的部分，因此需要进入‘高级设置’进行修改。
例如在动画选项中，你可以选择标题从哪个方向滑入，为网页添加动态效果，提升用户体验。
不过‘高级设置’中的内容一般用得不多，像动画效果虽然能增加视觉冲击，但可能会影响网页加载速度，所以在使用时要谨慎。
3.2、使用Elementor创建页面
3.2.1、创建新页面
使用Elementor创建新页面非常简单，只需在WordPress后台选择“新建页面”，然后选择“使用Elementor编辑器”即可。
3.2.2、添加元素
创建好页面并选择Elementor进行编辑后，页面设计界面将出现，如下图所示：
Elementor提供了丰富的元素库，包括标题、文本、图像、按钮、表格、进度条等。用户可以通过拖放方式将这些元素添加到页面中。比如，你可以从左侧元素区拖动一个元素（例如标题）到右侧编辑区域。
3.2.3、调整元素样式
Elementor提供了多样化的样式设置选项，包括字体、颜色、边框和阴影等，用户可以根据需求自定义元素样式。比如，拖动一个标题元素后，切换到样式标签，可以调整文本颜色、字体、字号和行高等。
此外，Elementor还有高级设置面板，可以进一步调整元素布局（如外距和内距）。也可以设置动作效果、背景和边框等。建议试试每个设置，感受它们带来的变化。
3.2.4、预览与发布页面
使用Elementor创建页面时，可以随时预览效果。支持PC、Pad、手机三个平台的切换预览。完成页面设计后，用户可以将其发布到WordPress网站上。
提示：如果你在创建页面时直接点击了“使用Elementor编辑”，建议先点击“保存为草稿”。然后在左上角点击三条横杠图标，退出到WordPress后台页面。
回到WordPress后台页面后，别忘了修改页面标题和URL，最后再发布页面。
4、Elementor常见问题
4.1、Elementor是免费的吗？
Elementor分为免费版和付费版（Elementor Pro）。如果你使用免费版，只需在WordPress后台的插件页面搜索Elementor并安装启用即可。
Elementor Pro提供了更丰富的功能，包括文章列表、价格表、幻灯片和表单等。尤其是Pro版引入的动态网页元素，使网站更加吸引人，并带来更丰富的动态效果。
4.2、Elementor Pro值得购买吗？
相比于免费版，Elementor Pro提供了更多高级模块，如文章列表、价格表、幻灯片、表单等，增加了许多动态网页元素，使页面效果更加丰富、炫酷，动态功能也更加多样化。
Elementor Pro需要在其官网购买授权，最基础的方案支持一个网站，每年费用为59美元，价格不算太高但也不算便宜。如果你希望打造一个具有高视觉冲击力的WordPress网站，这笔投入还是非常值得的。
此外，Elementor Pro提供30天无条件退款保障，购买后若发现使用体验不佳，或认为性价比不高，可以联系客户服务申请全额退款，不会有任何损失。
如果你是一名网页设计师，或打算用Elementor为他人创建多个网站，可以考虑每年999美元的计划，最多支持1000个网站。这样一来，多个项目分摊费用，整体成本会显得更划算。
4.3、Elementor可以与任何主题兼容使用吗？
Elementor可以兼容任何WordPress主题。通过启用Elementor的“画布”模式，你可以移除主题自带的设置、页眉和页脚，从而完全使用Elementor进行网页设计，打造更加个性化的页面布局。
4.4、哪些主题适合与Elementor搭配使用？
选择一个速度快且适合SEO的WordPress主题至关重要，因为网站加载速度和SEO优化直接影响用户体验和搜索引擎排名。以下这些WordPress主题不仅与Elementor完美兼容，而且具备出色的加载速度，能够有效提升SEO表现。
- Astra – 这是最受欢迎且易于使用的WordPress主题之一，也是我个人强烈推荐的选择。
- GeneratePress – 另一个速度出色的主题，专注于性能和SEO优化，非常适合网站性能要求高的用户。
- OceanWP – 多功能主题，与Elementor、WooCommerce 和 Gutenberg 完美兼容，适用于各种类型的网站。
4.5、Elementor无法正常加载
如果遇到Elementor无法加载的问题，可能是插件冲突或WordPress版本不兼容引起的。建议先尝试禁用其他插件，或者升级WordPress版本来排除问题。
若禁用插件和更新WordPress后依然无效，可以尝试切换至“Hello Elementor”主题进行测试。如果问题依旧，建议重装WordPress来解决此问题。
4.6、Elementor页面加载过慢
Elementor页面加载速度较慢，可能与服务器响应过长或页面文件过大有关。可以通过简化页面设计和优化服务器配置来提升加载速度。插件数量过多或插件之间的冲突也可能导致页面加载延迟，建议检查并精简插件。
4.7、Elementor页面样式异常
当Elementor页面出现样式错乱时，可能是由于CSS冲突或JavaScript错误引发的。可以尝试禁用其他插件来检测是否存在冲突，或检查自定义代码是否存在问题。
4.8、Elementor与其他插件的兼容性问题
Elementor与其他插件的兼容性问题可能导致页面显示异常或某些功能失效。此时，建议逐一停用其他插件测试，或者联系相关插件开发者获取支持以解决兼容性问题。
写在最后
Elementor是一款非常优秀的WordPress页面构建插件，它具有直观的拖放界面和丰富的元素库，可以帮助你轻松地创建自定义页面，希望这篇Elementor教程文章可以把你引入Elementor的大门。在使用Elementor时，你需要注意一些常见问题和解决方法，以确保页面能够正常显示和使用。
当你搭建完WordPress网站后，你可能还会想了解：
暂无评论内容