WordPress页面构建插件Elementor使用教程

Elementor是一款功能强大的WordPress页面构建器插件，它提供直观的可视化界面，让用户可以通过简单的拖放操作设计和生成网页，无需深入了解编程知识。本教程将结合Astra免费主题和Elementor插件，设计和制作一个简单的B2B外贸公司询盘型网站，来展示产品和服务，吸引潜在客户。

为什么推荐使用Elementor

我曾经尝试过多款可视化编辑器，如WPBakery和Visual Composer，但在众多方面，Elementor无疑是更加优秀的选择。

以下是Elementor的一些优点：

• 简洁的编辑方式：Elementor提供现代化且简洁的编辑界面，使用户可以轻松创建专业的网站页面。
• 免费版：即使是免费版本的Elementor，也提供了丰富的功能和模块，足以满足大部分用户的需求。
• 支持任何WordPress主题：Elementor对中文的支持良好，而且可以与任何WordPress主题兼容，使其更具灵活性和适用性。
• 轻量化：即使是Elementor Pro版本，安装包总大小仅为3MB，这意味着它不会给网站带来过多的负担，有助于保持网站速度和性能。
• 用户数量庞大：Elementor在WordPress插件中心拥有100万以上的活跃安装用户，超过90%的用户给予了五星好评，这反映了其受欢迎程度和用户满意度。
• 专业的开发和售后团队：Elementor拥有专业的开发团队和售后支持团队，确保用户在使用过程中能够得到及时的帮助和支持。

安装Elementor

第1步，在WordPress菜单栏中找到“  插件”>“安装插件”。搜索Elementor并单击“  安装”。安装Elementor后，单击“  激活”。

安装Astra主题

在WordPress菜单栏中找到”主题”选项，点击”安装主题”，然后搜索Astra并一键安装并启用。

Astra主题启用后，接下来我们安装 Astra 提供的模板主题。在菜单栏选择外观 → Astra →安装导入插件。

在引导页时，我们直接点击下方 Build Your Website Now 按钮，选择支持 Elementor 页面构造器。

选择免费主题模版

Starter Templates 提供了各种类型的网页模板，我们根据自己的需求选择非PREMIUM 模板，这里我们以下方箭头的模板为例。

点击箭头所指的模板，进入模板预览界面，这里提供了Logo 修改及预览，我们直接跳过，后续可以在我们网站里自己重新设置。

跳过后，选择模板预设额度颜色和主题，这些后续都可以修改，所以不必太过纠结。

设置完字体、颜色后我们点击 CONTINUE时，需要我们填写一些个人使用情况，如实填写后点击 Submit&Build My Website。

等待模板安装，安装完成后会有提示，接下来我们在点击 View Your Website时，就可以看到我们的网站就像和模板一模一样啦。

Elementor使用教程

主题模板导入完成后，我们可以进入到网站具体的页面来进行细节的调整。

编辑页面

进入到首页后，我们可以在顶部看到 使用 Elementor 编辑，点击按钮后，就可以进入首页的编辑界面。

整个编辑界面主要分为2块，1是元素的菜单模块，2预览模块，页面上的元素我们可以通过添加元素，新增文字、图片、按钮等。在1元素的菜单模块调整样式、文案等。也可以在2预览模块中右键点击某个元素进行删除。

当然你想要插入整块元素可以在某个块的上方点击+号按钮，新增一整个块进行页面元素的创建、编辑。

通过不断对页面进行编辑和改造，我们就可以将模板上的信息修改为自己企业的信息，包括公司介绍、联系方式、服务内容，展示产品信息等。基本页面设置完成，就能够得到一个基础的B2B外贸企业站啦

创建页面

1、在WordPress菜单栏中找到“页面”选项，然后单击“新建页面”。

第2步，在WordPress后台新建页面，然后点击最上方的使用 Elementor 编辑按钮。

第3步，熟悉Elementor编辑器的结构，它由三个部分组成：工具栏、可视化界面和导航器。

• 工具栏：包含可拖放的模块，如区块、图片、文字、按钮等。
• 可视化界面：实时反映页面的变化，方便编辑页面内容。
• 导航器：以垂直方式显示页面元素的排版，便于调整模块的顺序。

通过熟悉这三个部分，可以更好地使用Elementor编辑器，轻松创建和定制网站。

第4步，点击加号选择所需的结构，确定在同一行或同一列中放置多少个区块。

接下来，从左侧的工具栏中将所需的模块拖放到右侧的区块中，例如标题、图片和按钮。

第5步，点击右侧的蓝色虚线框，选择已添加的模块，并对其内容进行修改。

第6步，点击左下角的设置，将页面布局修改为全宽，以后可以单独调整每个区块的宽度。

然后，使用预览功能查看页面的实际样式，确认无误后点击发布。这样，页面就成功创建了。

Elementor Pro

在Elementor Pro中，除了免费版的基本功能外，还增加了许多高级功能，其中最有用的是模板和主题生成器。此外，Pro版还提供了更多的模块、着陆页面和弹出窗口等功能。接下来，我将介绍如何使用Elementor Pro。

第一步，首先在Elementor官网购买Elementor Pro，并在网站后台添加插件。你可以上传安装文件，然后点击立即安装并启用。

第二步，安装完成后，在右上角会显示一个激活提示，请点击"连接并激活"按钮。

第三步，检查激活状态。如果显示为"Active"，表示已成功激活，你可以随后进行在线更新，并导入大量付费模板。

Elementor常见问题

Elementor免费吗？

是的，Elementor有免费版本可供使用。免费版本提供了基本的功能和模块，适合一般用户的简单网站设计需求。另外，Elementor也提供付费的Pro版本，价格从每年59美元到399美元不等，Pro版本提供了更多高级功能和模块，适合需要更多定制和功能的用户。

Elementor速度快吗？

Elementor本身是一个轻量级的插件，因此加载速度相对较快。然而，为了确保最佳性能，建议搭配高效的WordPress主机使用如，以确保网站的整体速度和性能。

Elementor好用吗？

是的，Elementor的编辑界面设计直观友好，易于上手，适合初学者或中小型企业使用。它提供了丰富的模块和功能，使用户可以轻松创建各种类型的网站页面，而无需编写代码。

Elementor适合谷歌优化吗？

Elementor的代码结构清晰简洁，生成的页面也相对干净，这有助于搜索引擎对网站内容的索引。因此，Elementor是对搜索引擎优化（SEO）友好的工具。许多知名的网站都在使用Elementor来构建其网站，包括一些SEO要求严格的网站