Elementor教程：新手零基础使用Elementor建站详细教程

很多人选择使用非常流行的CMS开源程序WordPress来搭建自己的网站。然而，对于网站页面的设计、布局，在没有任何编程技能的小白来说，如何快速上手，轻松制作一个专业的网站还是有一定难度的。幸运的是，WordPress有许多页面构建器插件可以帮助我们实现这个目标。在本教程中，我们将介绍如何使用Elementor插件快速上手轻松制作网站，并结合WordPress的建站流程，让你在设计网站时能够更加灵活自如。

什么是Elementor编辑器？

Elementor 是一款功能强大的WordPress页面构建器插件，它允许用户通过拖放各种小部件（widgets）到网页上，轻松添加内容和自定义样式。这种操作方式类似于搭积木，使得用户即使没有编程知识，也能够迅速搭建起专业的网站。此外，Elementor 提供了多样的设计元素和插件集成选项，使用户能够实现高度个性化的网站设计，从而满足不同的需求。

Elementor基础版 VS Pro版

由于Elementor只是一个WordPress插件，因此我们要先安装WordPress。对于没有任何网站搭建经验的人来说，使用WordPress搭建网站确实可能会感到有些困难。其实有许多主机服务商提供了集成WordPress的服务，小编用过的有这三家ChemiCloud、Hostinger、Cloudways这些服务通常包括一键安装WordPress、优化的服务器环境，以帮助用户快速上手。

Elementor基础版

安装好WordPress后，在后台仪表盘中找到“  插件”>“安装插件”。在搜索框输入Elementor，第一个就是点击“ 立即安装”。随后激活它，即可在WordPress侧边栏看到多了一个Elementor选项。

第一次使用Elementor会有指引向导，让我们创建一个账号，这里可以先选择跳过使用免费版，如果后面使用付费PRO版，再创建账户。

接着，让你使用Elementor官方推荐Hello主题，这是一个空白主题，适合有设计经验的用户使用 Elementor 构建网站。对于新手使用 Astra 这样的主题更适合，因为它提供了易于使用的模板和直观的界面，可以帮助快速创建外观专业的网站。这步可选跳过

使用额外的 Pro功能提升您的网站，这里也选跳过。

接下来，了解如何使用Elementor，下面会有两个向导，一个是创建新页面，另一个是导入预设模板，大家可以自行点击查看，或者直接跳过，进入创建新页面。

到这，Elementor免费基础版就安装完了，WordPress后台会新增相关设置。

Elementor PRO版

Elementor Pro 是 Elementor 免费版的扩展，提供了更多高级功能，可以进一步定制你的网站。如模板和主题构建器、扩展模块库、专门的登陆页面设计工具以及增强的弹出窗口功能等，接下来我就教大家如安装Pro版。

首先去官网购买Elementor Pro并下载，然后在WordPress后台，点击插件>>安装新插件>>上传插件，点击“选择文件”按钮，找到并选择刚下载的 Elementor Pro .zip 文件，立即安装。

安装完成后，还需要激活 Elementor Pro，在左上角看到一个激活提示，请点击“Connect & Activate”按钮。

配置Elementor

安装 Elementor 后，接下来进行一些基本的配置，如设定默认字体、颜色和按钮样式。

文章类型建议只勾选页面，如果你什么内容都使用Elementor编辑，后期网站改版会面临着非常大的修改。默认颜色和默认字体建议禁用，这样就会跟随主题的设置。

 如何使用Elementor页面编辑器？

Elementor是一款强大的可视化页面编辑器，无需学习任何编程知识，就能搭建一个高大上的网站，接下来我会逐步讲解它怎么使用。

创建新页面

使用Elementor创建新页面非常简单，只需要在WordPress后台选择“新建页面”。

然后选择“使用Elementor编辑”即可。

创建好页面并且使用Elementor编辑之后，就出现了Elementor编辑器的界面，如下图：

可以看到Elementor编辑器界面，一共有三个部分，分别是元素工具栏，可视化编辑区和导航器。

• 元素工具栏：Elementor提供了丰富的元素库，包括标题、文本、图像、按钮、表格等，你需要使用什么，就按住直接拖动到右边的可视化编辑区域。
• 可视化编辑区：在编辑页面时，可以实时看到添加的元素和所做的更改，进行调整和定制。
• 导航器：显示了页面上所有元素的层级结构，可以快速选择、移动和编辑页面上的任何元素，以及调整它们之间的顺序和层次关系。

添加容器

容器是用来包裹和组织元素的，可以包含文本、图片、视频、按钮等多种元素。

在可视化编辑器，点击+图标添加容器，从弹出的菜单中选择合适的布局。Elementor 提供了多种预设布局，如单列、双列、三列等。

调整容器布局

点击紫色虚线框上方的六个点，内容宽度选方框，就可以调整整个容器在页面中的宽度、样式效果。

添加元素

将左边元素工具栏里的模块拖放到右边的容器中，比如标题、图片等。

在可视化编辑区域，可以看到添加到页面上的各个元素，鼠标悬停于元素时会出现紫色边框，点击元素旁的紫色边框即可选择并编辑该模块内容。

 调整元素样式

在 Elementor 可视化编辑器中，点击想要调整的元素，比如一个标题，Elementor的右侧面板会显示该元素的设置选项，切换到样式标签即可调整其文本颜色、字体、大小和行高等属性。

切换到高级设置面板，可以调整这个元素的布局和视觉效果，如通过设置外距来控制元素间的间距，调整内距来优化内部内容的间隔。

除此之外，还可以设置动作效果、背景和边框等，实现独特的设计和增强用户的交互体验。

 导入模板

在可视化编辑区，有三个图标点击中间文件夹图标，进入模板库。

在模板库中，您可以浏览各种类型的模板，或者使用搜索功能快速找到你需要的模板类型。

选择一个模板后，点击“插入”按钮。Elementor 会将模板的内容添加到页面中。

导入模板后，就可以根据需要对模板进行个性化调整，包括更改文本、图片、颜色、字体等。

预览和发布页面

在 Elementor 中，用户可以利用预览功能查看页面的实际效果，确认无误后点击发布按钮，将页面更新至WordPress网站，至此，页面就创建成功了。

Elementor Pro的高级功能

除了基本的功能和元素库外，Elementor Pro还提供了一些高级功能，包括主题构建器、表单构建器、Popup弹窗等。这些功能可以帮助用户创建更加复杂和高级的页面。

主题生成器

在Elementor的模板菜单下，点击主题生成器（Theme Builder）

Elementor 的主题生成器允许用户通过直观的界面自定义网站的关键部分，例如页眉Header、页脚Footer、单页文章Single Post、单页页面Single Page、归档页Archive等等。

如果安装了WooCommerce插件，它还提供了产品页的设计功能。

表单构建器

Elementor 表单构建器是 Elementor Pro 扩展包中的一个强大功能，它为用户提供了创建和嵌入多种类型表单的灵活性，如联系表单、注册表单、订阅表单等。

如何使用Elementor表单构建器，在Elementor编辑界面左侧的小部件中，搜索并选择Form小部件。

将左边Form小部件拖放到右边的容器中，可对Elementor表单进行编辑修改。

和其他第三方WPForms表单插件相比，Elementor自带的表单配合Elementor使用起来更加方便。

Popup弹窗

Popup 是 Elementor Pro 提供的一个高级功能，它允许为网站创建弹出窗口，这些弹出窗口可以在特定条件下显示，用于吸引用户的注意力、收集用户信息、推广促销活动或提供关键信息。

如何创建Popup弹窗，其实很简单，在Elementor的模板菜单下，选择Popup就可以添加Popup弹窗。

然后，选择默认的模板类型Popup，输入模板名称，点击【创建模板】

创建之后你可以在弹出模板库中挑选一个现成的模板并进行个性化修改，或者关闭模板库，自己手动创建。

在 Elementor 中设计 Popup 弹窗，你可以利用熟悉的 Elementor 编辑器进行个性化设置，如调整文本、更改背景和设计表单，操作流程与创建标准页面完全一样的。

在完成元素的调整后，接下来还需要对Popup 进行设置，在Elementor编辑器的上方点击齿轮图标，你会看到如下图所示界面。

在该界面中，是对弹窗的显示设置，你可以自定义弹窗的布局位置，如顶部、中间或底部，并调整动画效果和遮罩层样式，同时在高级设置里还能进行更多控制，例如设定弹窗自动关闭时间、禁止滚动页面以及屏蔽快捷键等，以优化用户的交互体验。

当所有没问题后，点击发布，会看到一个预览弹窗如下图所示。

这里主要涉及弹窗的表现设置，在发布弹窗前，需要对以下内容进行配置：

• Conditions（条件）：弹窗的展示范围，例如全站弹窗或针对特定页面的弹窗。
• Triggers（触发器）：页面弹窗的触发方式，可以设置为立即弹出、滚动时弹出、用户尝试关闭网页时弹出等。
• Advanced Rules（高级规则）：包括诸如特定来源的访客、特定设备访问、用户是否已登录等条件。

以上所有都设置好后，直接点击【SAVE & CLOSE】保存即可。

导入Elementor Pro预制模板

Elementor Pro 相比于免费版，提供了更多的模板选择，使用这些模板可以加快建站速度并简化整个过程，特别适合零基础的新手使用。

在 WordPress 后台左侧的菜单栏中，找到模板，点击套件库（Kit Library）进入模版套件界面。

然后就可以看到下图的模板套件界面，选择自己喜欢的模板。

然后，点击右上角的Apply Kit按钮，就可以自动导入整个网站的设计和设置。

Elementor的第三方扩展

Elementor 是一个非常受欢迎的 WordPress 页面构建器，它提供了丰富的设计和布局选项。尽管Elementor Pro 版本已经包含了许多高级功能，但有时可能还需要进一步扩展其功能以满足特定的需求。这时，可以安装第三方主题插件来增强它的易用性。

主题扩展

虽然Elementor官方推荐了轻量且快速的Hello主题，但对于WordPress新手来说，选择用户友好且易于操作的Astra或Avada主题可能会更加合适，因为它提供了丰富的定制模板和直观的界面，使得构建网站变得更加简单。

插件扩展

Elementor编辑器虽然自带了丰富的设计元素，但是很多复杂一点的效果还是很难实现的，这个时候我们可以使用Elementor扩展插件，为编辑器添加更多的可用元素和工具，实现更加丰富和个性化的网站设计。

Elementor编辑器常见问题

Elementor无法加载

当 Elementor 无法加载时，通常是由于插件冲突或与 WordPress 版本的不兼容性。首先尝试禁用所有其他插件，然后更新 WordPress 到最新版本。如果这些步骤无效，建议切换到一个与 Elementor 高度兼容的主题，如 Hello Elementor，进行再次测试。如果问题依旧，可能需要考虑重装 WordPress 来解决问题。在进行任何重大更改之前，确保备份网站数据，以防止数据丢失。

Elementor页面加载缓慢

Elementor 页面加载缓慢可能是由于服务器响应慢、页面元素过多或文件体积大造成的，解决这个问题可以通过优化页面设计、减少不必要的插件、压缩媒体文件、使用缓存和 CDN 服务等方法来提升加载速度。同时，确保服务器配置足够支持网站的运行，并且所有插件和主题与 Elementor 兼容，以避免因插件冲突导致的错误影响页面加载。

Elementor页面样式错乱

如果 Elementor 页面出现样式错乱，这通常是由于 CSS 冲突、JavaScript 错误或主题与 Elementor 插件不兼容所引起的。解决此类问题可以尝试禁用其他插件以排查冲突，检查并修正任何代码错误，确保主题与 Elementor 兼容，或者通过清除缓存和重新生成 CSS 来恢复正确的样式表现。

500 internal server(内部服务器错误)

Elementor 页面出现 500 内部服务器错误通常是由于服务器配置问题、插件冲突、主题不兼容或 PHP 内存限制不足等原因引起的。要解决这个问题，可以尝试检查服务器日志以确定具体错误原因，增加 PHP 内存限制，禁用或更新冲突的插件和主题，修复损坏的 `.htaccess` 文件。

总结

Elementor 是一个强大的 WordPress 页面构建插件，它通过直观的拖放界面和丰富的元素库，使得用户即使没有编程知识也能轻松创建和自定义网页，希望这篇Elementor教程文章可以把你引入Elementor的大门。