WordPress Elementor 教程 | 2024 年分步指南

您想要开始使用 Elementor 并正在寻找 WordPress Elementor 教程？ 您的搜索到此结束。 在本文中，我将向您介绍有关 Elementor 需要了解的所有内容。

从安装它到创建一个非常时尚的页面，如果您阅读本文，您所有的疑虑都将得到解决。 我向你们保证; 读书不会白费！

但是您需要一个网站构建器插件来为您的网站提供专业的风格。

你怎么得到它？ 嗯，我用 Elementor 为了那个原因。 Elementor 让我可以通过简单的拖放功能轻松创建专业网站。 

想了解更多有关 Elementor 的信息，请查看我的详细信息 初学者评论.

如何在 WordPress 上安装 Elementor

您可以通过两种方式在 WordPress 上安装 Elementor。 

• 通过 Elementor 官方网站

前往 Elementor 的官方网站，然后单击网站上显示的免费下载按钮。 

一旦您单击“免费下载”按钮，就会弹出一个订阅 Elementor 网站的窗口，一旦您执行了相同的操作，插件就会自动开始下载。

您将在笔记本电脑/个人电脑上找到下载的 zip 文件。 现在前往 WordPress 仪表板并单击插件部分 > 添加新插件 > 上传插件

选择 Elementor 文件并将其上传到 WordPress。

• 通过 WordPress 仪表板

您也可以直接从 WordPress 仪表板安装 Elementor 插件。 只需转到插件，然后添加新插件

在右上角，您将找到一个搜索栏，在搜索栏中输入 Elementor。 第一个结果是您需要在 WordPress 中安装的内容。 只需单击安装并等待插件安装即可。 激活插件，您就拥有了一个可供部署的出色网站构建器。

现在您已在 WordPress 仪表板中安装了 Elementor，让我们看看它提供的功能。

Elementor 功能及其在构建网页中的用途

Elementor 提供的功能列表是永无止境的，因此我将讨论 Elementor 的许多重要功能。 请务必阅读它们并稍后尝试这些内容。

Elementor 免费版和专业版有两个计划。 正如专业计划的名称所暗示的那样，你必须玩，但免费计划也附带一些功能。

我将首先讨论免费计划中的功能，然后讨论专业版。

Elementor 免费计划功能

重要功能：

• 拖放

Elementor 的拖放功能非常快，可以帮助您更快地设计网页。 从创建网页布局到微调，这一切都可以通过拖放来完成。

您不需要切换选项卡或更改页面来设计页眉和页脚。 使用 Elementor，您可以在主网页所在的同一页面上执行此操作。

您可以复制和粘贴，甚至可以复制您想要使用的样式或功能。 这可以节省您一次又一次重建相同功能的时间。

使用提供的搜索栏选项 Elementor，您可以轻松浏览网站并在几秒钟内到达所需的选项卡。 当您要构建很长的页面时，此功能非常有用。

有 3 个选项可用于保存您的设计：删除和备份。 您可以重做/撤消已完成的设计。 这使您能够根据您的观察结果对页面进行 A/B 测试。 

您可以在修订选项卡中访问所有修订版本，即您可以查看迄今为止在网页上尝试过的所有设计，如果您不喜欢当前的网页，也可以选择较早的版本。 

想要尝试许多不同的功能并看看哪些功能有效？ Elementor没问题； 您可以在草稿模式下设计页面，尝试一切，并在完全准备好发布页面后获取该页面。

如何使用 Elementor 拖放功能

创建页面后，所有拖放功能都可以在页面左侧使用。

在 WordPress 上创建页面并为其指定标题后，只需单击“使用 Elementor 进行编辑”，这将带您进入 Elementor 的实时编辑器，如下图所示。

在上面的第二张图片中，您可以查看页面左侧的拖放选项。 有很多小部件，您只需向下滚动即可，或者您也可以借助顶部搜索栏来搜索小部件。

• 设计模板

您可以使用 Elementor 获得内置设计模板。 不仅仅是 5 或 10 个，Elementor 还为您提供了 100 多个可免费使用的设计模板，升级到专业版后还会提供更多模板。

如何为 Elementor 模板库选择所需的模板

当您第一次打开 Elementor 构建器页面时，您将看到如下所示的内容：

该图像取自 Elementor 网站，非常不言自明。

单击“文件夹”选项后，您将看到如下所示的弹出窗口。

• 小工具

Elementor 附带的拖放小部件数不胜数。 他们之中有一些是：

• 内部部分：让我们将一个部分分为两部分。
• 标题：将此字段放入您的网页中以插入引人注目的标题
• 图像：借助此小部件将图像放置在您的网页上
• 文本编辑器：借助文本编辑器小部件在网页中输入文本
• 视频：您可以使用视频小部件在页面上放置优质视频。 它将增加用户体验
• 按钮：号召性用语对于几乎所有网站都非常重要，通过按钮，您可以将号召性用语放在页面上并将其链接到产品登陆页面。
• 星级评定：星级评定对于任何电子商务网站来说都是有益的，可以对其提供的多种不同产品进行评级。
• 分隔符：帮助您的网页缩进并生成空白以增加用户体验。
• 图标：使用图标小部件，您可以放置​​社交媒体以及不同服务的醒目的图标，使您的页面看起来更具吸引力。
• 计数器：为您的产品或有限的附加服务创建倒计时器以营造紧迫感。
• 推荐：添加有关您的产品和服务的推荐，以建立与网站访问者的信任。

除此之外，还有许多其他小部件，例如图像轮播、基本图库、选项卡、简码、HTML、菜单栏等。在 WordPress 上安装插件后，请确保查看所有功能。

查看下图中 Elementor 具有的一些小部件。

如何使用 Elementor 小部件

对于使用 Elementor 小部件：

前往 Elementor 的仪表板并查看页面左侧。 您可以将许多小部件拖放到网页上并开始工作。

• 响应式设计和编辑

随着移动优先索引规则成为众人瞩目的焦点，Google 确保适合移动设备的网站只会在 Google 上排名更高，现在其他 SERP 的情况也是如此。 

使用 Elementor，您无需担心移动设备的兼容性，因为所有模板（无论是免费还是付费）都可以响应移动设备以及平板电脑和桌面设备。 您还可以编辑用户从移动设备或桌面访问时将看到的功能。 

您可以在两种设备上为他们提供不同的体验，但不建议这样做，因为有时可能会导致用户对品牌产生混淆。

如何查看您的网页的移动响应能力

在网页生成器底部的左下角，您将看到三个图标，可以选择通过桌面、平板电脑和移动设备查看您的网页。 发布网站后，该网站对于其他用户来说看起来将完全相同。

工作流程特点：

• 无编码要求

使用时您不需要成为专家，甚至不需要了解一点编码知识 Elementor。 上面提到的所有小部件都是拖放式的，您可以使用它们轻松创建高端时尚的网页。 

Elementor 本身负责编码部分。 不仅如此，所使用的代码还经过优化和缩短，从而减少了网页的加载时间——这是排名靠前的一个非常重要的因素。

• 导航栏

借助导航，您可以看到您在网页上设计的结构，即页面的顺序和流程。 如果您愿意，也可以通过导航栏更改、删除和复制小部件。

如何使用导航栏

要使用导航器，只需右键单击使用 Elementor 打开的网页后端，然后单击导航器。 将出现一个弹出窗口，如下图所示。

• 热键

热键是 Elementor 仪表板中主要小部件的快捷键。 查看图像以了解一些预设的热键。

• 内联编辑功能

使用 Elementor，您无需在其他地方编写内容并复制粘贴和编辑其样式。 您可以直接在 WordPress 仪表板上输入所需的样式，节省您的宝贵时间。

设计特点

• 全局字体

借助 Elementor，您只需单击一下即可为整个网站设置特定的字体样式。 无论是标题、段落、引言，甚至号召性用语，都没关系。 

• 全局色

同样，当设置全局字体时，如果需要，您可以将整个网站文本的颜色设置为相同的颜色。

• 背景渐变

通过渐变颜色功能，您可以点亮为每个块甚至您的主页设置的背景。 这些渐变颜色适用于您网站上的每个页面。

• 背景影片

您可以使用 Elementor 的视频作为背景。 背景视频确实可以点亮您的网页。

如何使用 Elementor 中的设计功能

上述所有功能都可以在 Elementor 仪表板中轻松找到，您只需单击并测试网页上看起来不错的内容即可使用这些功能。

• 其他特点
• 应用背景叠加
• 将幻灯片置于背景中
• 创建画布使您的页面看起来生动
• 利用混合模式
• CSS 样式过滤器
• 形状分隔线
• 框影
• 图标
• 从其他网站导出 SVG 图标

布局特点

您可以更改网页布局并对其进行优化，以使其具有各种功能，看起来不错 Elementor 提供诸如截面宽度和高度、列宽、间隙及其位置之类的信息。

您还可以调整边距和填充，这是网页上非常重要的功能。 

Elementor Pro 计划功能

要点

除了免费功能外，Elementor Pro 还提供 2 个功能。

1.弹出窗口生成器

您可以创建用于注册、限时优惠的弹出窗口，也可以退出意向弹出窗口以增加销量并使您的页面更具吸引力。

与其他小部件一样，该功能也存在于 Elementor 的仪表板中。

使用弹出窗口生成器，您可以构建以下弹出窗口：

• 电子邮件订阅
• 登录表单弹出窗口
• 促销和销售横幅弹出窗口
• 铅捕获
• 内容锁定和显示弹出窗口
• 最新公告
• 退出意图
• 欢迎垫式弹出窗口
• 相关产品和追加销售

2. 主题生成器

借助 Elementor Pro，您可以完全控制您在网站上使用的所有功能。 您可以设计 404 页面并将用户引导至您选择的页面。 

您可以在设计的同一页面上管理页眉和页脚。 借助强大的 WooCommerce 集成，您还可以优化产品页面。

设计特点

1.自定义CSS

对于您添加的每个小部件，您都可以添加自定义 CSS 片段，以使内容更加个性化和有吸引力。 但要使用此功能，您应该对 CSS 有一定的了解。 

在没有任何先验知识的情况下使用它也可能会失败。 因此，如果您不具备相应的技能，最好远离自定义 CSS 功能。

2. 运动效果

您可以添加精彩的动画并为您的网站提供卡通类型。 这有助于吸引特定的目标受众，有时非常有益。 

如何使用 Elementor 中的设计功能

嗯，这不是火箭科学。 与其他小部件一样，您可以滚动仪表板面板并搜索它们，或者只需在搜索面板中键入小部件名称。

营销

这些功能是 Elementor 免费版本中所没有的。

• 表单小部件

使用 Elementor 表单生成器，您可以进行各种更改，使您的表单变得有趣且易于填写。

• 轻松选择您想要的布局和间距。
• 10 多个字段可供选择，您可以在表单中选择这些字段。
• 从适合和匹配网页设计和配色方案的众多颜色和版式中进行选择。
• 您还可以创建动态表单
• 如果您需要使用 Elementor 的表单构建器生成长表单，您可以构建它并将其分解为多个步骤，以便用户以简单的方式填写。

• 见证轮播小部件

• 您可以使用 Elementor 专业版附带的预先设计的模板，为您的企业制作令人惊叹的推荐轮播，以获得更多转化。
• 对齐轮播的内容和布局。 完全控制轮播的外观和对齐方式。
• Elementor Pro 中提供的自定义模板易于使用，并且为构建者和查看者提供了用户友好的体验。

如何在 Elementor Pro 中使用推荐轮播小部件

• 在仪表板搜索栏中搜索推荐滑块。 打开小部件，您可以立即开始创建滑块。 有默认和气泡两种皮肤可供选择。 根据款式选择您需要的一款。
• 对齐并最终确定推荐的布局，可以通过 5 个选项来完成：图像内联、图像堆叠、上图、左图和右图。
• 根据您的配色方案选择样式和设计，并将内容添加到滑块。
• 您可以自动播放滑块上的幻灯片，在用户单击滑块时暂停幻灯片，或者在幻灯片更改选项上设置特定时间。 我更喜欢在我的推荐滑块的交互选项上使用暂停。
• 动作链接

您可以使用 Elementor Pro 将您的网站与 WhatsApp、Google 日历以及更多应用程序连接。

如何在 Elementor Pro 中使用操作链接

• 去 Elementor 仪表板并搜索链接字段，这是 Elementor 拥有的 Pro 小部件之一。
• 选择小部件弹出窗口右上角提供的动态选项。
• 在操作选项下选择联系 URL。
• 添加小部件要求的所有详细信息，然后您就可以将您的联系平台与您的网站集成。

主题生成器功能

• 动态内容
• 利用无可挑剔的集成来制作出色的动态网页。
• 您可以向网页添加动态颜色、图像、甚至网站徽标等。
• 最好的事情是您可以保存您制作的动态内容的布局并在整个网站的任何地方使用它。

如何通过 Elementor Pro 使用动态内容

我将展示使用文本编辑器并使内容动态化的示例。 确保您看到所有其他小部件并尝试它们。

1. 打开文本编辑器并输入您想要在网页上显示的文本。 现在单击编辑器右上角的图标，如下图所示。
2. 单击该图标时，您将看到通过下拉列表显示的选项列表。 它们分为帖子、存档和站点。 选择您想要的选项并立即开始您的工作。
3. 现在要进一步编辑页面标题，您应该单击一个扳手图标，如下图所示。

在上图中显示的框中，即之前、之后和后备，您需要放置更改前的标题、更改后的标题以及将在动态内容的位置显示的一致内容当标题前后没有时。

Elementor Pro 中的其他主题生成器功能

• 显示条件：您可以决定显示什么以及显示在哪里
• 页眉和页脚：只需简单的拖放，您就可以自定义网页的页眉和页脚
• 粘性标题：向特定页面或全球整个网站添加粘性标题。
• 404 页面：设计自定义 404 页面并将您的用户和受众重定向到您想要的页面。

主题内容

• 导航菜单栏小部件

• 您可以为导航栏选择许多样式选项。
• 这些样式适用于所有设备，您可以在移动版本上看到它们，并根据需要进行必要的更改。
• 您可以使用动画和悬停效果为导航栏设置动画。 它确实点亮了您的页面。
• 您可以选择如何放置菜单，即水平、垂直、全屏查看，也许可以尝试汉堡包选项。

如何使用导航菜单栏小部件

1. 前往仪表板并搜索菜单栏
2. 您可以根据适合您网站的样式将菜单设置为水平、垂直或下拉菜单。
3. 您还可以在每个菜单内容下方添加单行和双行以突出显示，甚至通过仪表板更改文本的颜色。

• 搜索小部件

搜索小部件具有三种外观：默认、最小和全屏搜索小部件。

您可以调整搜索栏设计以及按钮以匹配您的网页样式。

如何在 Elementor Pro 中使用搜索栏

前往 Elementor 仪表板并查找搜索栏小部件，选择您想要的样式（默认、全屏或最小），然后更改搜索栏的版式和颜色以匹配您的颜色主题。

• 通过 Elementor Pro 获得的其他主题内容功能

• 帖子小部件：通过将您最近的帖子放在那里来修改侧边栏的外观。
• WordPress 评论小部件：使用此小部件，读者可以对您撰写的帖子发表评论。
• 投资组合小部件：如果您有许多投资组合要显示，请使用此投资组合小部件以创新且有吸引力的风格显示它们。

所有这些功能都可以在 Elementor 主仪表板中使用，与其他小部件类似。 确保您查看了所有这些功能。

Elementor Pro 定价

用户评论 

快速链接：

• Elementor 专业版教程
• 最佳元素附加组件
• Elementor 菜单锚
• 杜达 vs 元素

WordPress Elementor 教程常见问题解答

✅免费版本的 Elementor 是否提供集成？

免费版本的 Elementor 是否提供集成？

🤷‍♀️ Elementor的客服怎么样？

您可以选择 Elementor 客户服务的付费和免费计划。 Elementor 以相同的方式和相同的程序对待所有客户。 您可以通过电子邮件联系他们或拨打免费电话。 建议您先邮寄给他们，然后他们的技术人员会根据问题的严重程度给您打电话。

👍免费 Elementor 版本和专业版本哪个更好？

如果您从 Elementor 的免费版本开始，创建基本网页并使您的网站变得完整，这将会有所帮助。 当您看到您的网站获得大量流量后，您可以切换到 Elementor Pro，因为这将为您打开无限机会之门，并通过其强大的集成帮助您进行产品营销。

⁉️使用 Elementor 有多容易 / Elementor 适合初学者吗？

Elementor 是最简单易用的页面构建器，但它还免费提供最多的功能。 从本质上讲，对于任何想要在没有任何编码、HTML 或 CSS 专业知识的情况下生成令人惊叹的网站设计的人来说，它是理想的 DIY 选项。

☑️Divi 比 Elementor 更好吗？

Elementor 和 Divi 都提供复杂的页面创建功能。 Elementor 免费提供，PRO 版本售价 49 美元。Divi 每年 89 美元，允许您创建无限数量的网站。 虽然 Divi Builder 很直观，但 Elementor 的使用速度更快。 我们推荐 Elementor。

👍Beaver Builder 和 Elementor 哪个更好？

Beaver Builder 缺乏 Elementor Pro 和 Divi Builder 等其他解决方案中提供的某些更复杂的自定义功能，但在其他解决方案中表现出色。 用户界面加载速度快，风格简单易懂。 这加快了创建独特布局的过程。 我们推荐 Elementor。

📓 Elementor 最好的附加组件是什么？

有很多，但如果您是 Elementor 用户，希望通过创意组件和小部件增强核心页面构建器的功能，Essential Addons 值得一试。 此外，Essential Addons 还包括实时聊天和票证支持形式的强大客户帮助，可帮助您解决任何问题。

另外，请阅读：

• Beaver Builder vs 迪维
• 海狸生成器vs Elementor

结论：WordPress Elementor 教程 2024

领先的网页设计软件之一， Elementor，是一个可靠且生动的网站构建平台。 从创建基本的博客页面到创建时尚且令人惊叹的产品登陆页面，所有这些都可以使用 Elementor 完成。

Elementor 专业版拥有无穷无尽的功能，可将您的网站提升到一个新的水平。 它还使您可以自由地完全控制您的网站。

您无需成为编码员即可使用 Elementor。 使用 Elementor 就像学习如何单击和拖放功能一样简单。

是的，需要一些时间来查看所有功能并了解哪些功能对您的网站有用，但我可以向您保证，您在 Elementor 上投入的每一点时间都是值得的。

因此，请尝试一下 Elementor，并通过下面的评论让我了解您的体验！ 

Elementor 热门视频

社交媒体上的 Elementor

2021 年页面构建器峰会（@summit_camp）明天开始！ 获取免费门票并与超过 35 位行业专家交谈，包括 @bpines1 。 很高兴能够赞助这一盛事。 到时候那里见！ 💻🎉https://t.co/gDtFpUJLBH

— Elementor (@elemntor) 2021 年 5 月 9 日

退到一边，欢迎我们 2021 年 10 月的展示。 🏆🌷 这个月我们为来自全球各地的 XNUMX 家设计机构点赞。 这个多样化的集合涵盖了世界各地的 Elementor 网络创作人才。 🌎 https://t.co/bwwOUDQCuu

— Elementor (@elemntor) 2021 年 5 月 19 日