如何使用 ELEMENTOR

原文  如何使用 Elementor – 入门 - elementor中文

Elementor 是一个用于 WordPress 的可视化网站构建器插件，能够以实时、可视的方式创建网页。 

本分步指南将引导您了解如何使用  Elementor创建网站。https://www.youtube.com/embed/Em8oIBGy6bs?feature=oembed&enablejsapi=1&origin=https%3A%2F%2Felementor.com

---

安装清单（核心）

此清单将引导您完成在 WordPress 网站上安装和激活 Elementor 的整个过程。如需更多信息，请单击此处。

1. 在 WordPress 仪表板中，单击插件 > 添加新的。
2. 在搜索字段中，输入 Elementor 并选择要安装的 Elementor 网站构建器。
3. 如果您已将 Elementor 下载为 zip 文件，请单击上传插件按钮并使用文件选择器安装为 WP 插件
4. 安装后，点击激活。

如果此时未安装 Elementor Pro，请跳至连接到库

安装清单（专业版）

此清单将引导您完成在 WordPress 网站上安装和激活 Elementor Pro 的整个过程。如需更多信息，请单击此处。

1. 购买 Elementor Pro 后，请访问my.elementor.com
2. 购买后使用您在电子邮件中收到的详细信息登录
3. 登录后，您将进入“我的帐户”页面。单击“我的帐户”部分右上角的“下载插件”按钮，然后将 .zip 文件下载到您的桌面
4. 返回您网站的 WordPress 仪表板，然后单击插件 > 添加新的。选择您刚刚下载的 zip 文件。点击安装并激活
5. 在您网站的仪表板顶部，您应该会收到一条消息，告诉您激活您的许可证密钥。

激活清单（专业版）

为了激活所有 Pro 功能，您需要有一个有效的订阅并能够登录到您的帐户。不再需要使用许可证密钥，并且输入字段已从 UI 中删除。如果您需要通过密钥手动激活，请联系支持人员。在这里了解更多。

1. 转到 Elementor > 许可证。单击连接并激活
2. 您将被重定向以登录您的帐户。单击连接。登录后，您的许可证将通过屏幕窗口自动激活
3. 如果许可证密钥安装正确，仪表板顶部的消息应该会消失。 

连接到模板库

第一次插入模板时，系统会提示您连接免费的 Elementor 帐户以访问模板库。如果您还没有帐户，您可以在此过程中注册一个免费帐户。有关此功能的更多信息以及为什么需要它，请单击此处。

1. 单击连接到库按钮
2. 您可能会被重定向以登录您的帐户。登录后，单击连接。您的连接将通过屏幕窗口自动授予，您将返回上一个图书馆
3. 建立连接后，您将能够使用 Elementor 模板、工具包和登录页面。

使用元素

如果您是 Elementor 的新用户，这些步骤将帮助您了解成功构建页面的要点。 

在 WordPress 中创建一个新页面

1. 在 WordPress 仪表板中，单击页面 > 添加新的
2. 为您的页面命名
3. 单击发布按钮（如果页面要保持私密，则可以设置可见性选项）
4. 点击 Edit with Elementor 进入 Elementor Website Builder

编辑您的第一页

Elementor 使用三个主要构建块：部分、列和小部件。部分是最大的构建块，其中包含一组列。列位于部分内部，用于容纳小部件。小部件放置在 Columns 内。您可以使用它们的句柄控制部分、列和小部件。单击“首选项”选项卡并将开关滑动到“是”以在将鼠标悬停在元素的编辑按钮上时显示“编辑手柄”或将“否”滑动到“悬停时隐藏手柄”。

编辑

要编辑部分、列或小部件，请右键单击它们的句柄。了解有关右键单击的更多信息

部分

1. 单击 + 图标以创建一个部分，或单击文件夹图标以使用我们库中预先设计的页面或块
2. 设置你的列结构 
3. 右键单击以编辑、复制、复制、删除等。 
4. 使用截面手柄可以：添加截面、拖动截面或删除。

列

1. 设置列宽。您可以在布局下执行此操作，或拖动列之间的虚线。
2. 添加更多列右键单击>添加新列

在此处了解有关使用列的更多信息。

小部件

1. 在列中插入小部件
2. Widget 的宽度由列宽自动设置。对于额外的宽度控制，您可以通过导航到高级选项卡 > 定位来使用自定义宽度选项

复制或删除所有内容

您可以通过右键单击添加部分和模板图标附近的空白部分来复制或删除页面上的所有内容。您还可以将项目粘贴到同一网站的另一个页面中。

添加模板

模板是预先设计的页面和块，只需单击一下即可插入任何页面。

1. 在编辑屏幕中，单击文件夹图标
2. 当模板库弹出时，单击放大镜图标以预览模板。
3. 单击插入以选择您选择的模板。
4. 您也可以给您最喜欢的模板一个心，并将它们保存到我的收藏夹。
5. 有您在其他地方下载的要使用的模板吗？只需单击右上角的向上箭头图标即可上传其 .json 或 .zip 文件。

移动响应编辑

许多可编辑功能具有移动、平板电脑和桌面设置。最常见的用途包括：文本大小、元素的边距和填充等。

1. 在您希望控制的单个元素旁边查找视口图标。 
2. 单击要编辑其设置的特定设备图标。

控制响应式背景图像和边框

Elementor 中的背景图像会自动响应设备，但您还可以控制每个设备的更多选项。

1. 背景图像：如果需要，您可以为每个设备选择不同的背景图像，无论是同一图像的大小合适的版本，还是完全不同的图像。
2. 背景图像显示选项：您可以为每个设备选择不同的图像位置、附件、重复和大小。通过这种方式，您可以更好地控制图像的哪个区域显示在不同的设备尺寸上。

能见度 

您可以根据设备选择显示/隐藏部分。

1. 转到部分设置>高级>响应
2. 设置您的可见性首选项，从在桌面上隐藏、在平板电脑上隐藏或在移动设备上隐藏中进行选择。

当隐藏一个元素并切换到隐藏它的视图时，你会看到这个元素是“静音”的。这为您提供了一个明确的指示，即该元素将隐藏在实时站点上，但仍使您能够根据需要对其进行编辑。 

您可以在不隐藏的响应模式下编辑该特定区域。例如，如果元素在移动设备上可见但在台式机和平板电脑上隐藏，您将能够在移动视图中编辑元素。

更改手机和平板电脑断点

您可以设置手机和平板电脑的断点值。

1. 在任何 Elementor 页面或帖子编辑器中，单击小部件面板左上角的汉堡菜单，然后导航到站点设置 > 布局 > 断点，并为手机和平板电脑设置断点值
2. 保存您的更改
3. 转到 Elementor > 工具 > 常规选项卡 > 重新生成 CSS，单击重新生成文件

列排序

此功能颠倒了列的顺序。

要使用列排序，请转到部分设置 > 高级 > 响应 > 反向列并将其设置为是。

设备预览

通过单击面板底部的响应式编辑图标在设备视图之间切换。设备预览将位于编辑器的顶部。

预览和发布您的页面

完成页面设计后，您可以预览并发布它。

转到底部面板：

1. 要预览，请单击预览图标。 
2. 如果您对结果感到满意，请继续并单击发布按钮。 
3. 单击“查看”以查看已发布的页面

注意：预览链接与实际页面链接不同

保存为草稿

在 Elementor 中，您可以编辑已发布的页面并将您的工作保存为草稿。这意味着您在将作品另存为草稿时不会破坏已发布的页面。

1. 单击更新/发布旁边的箭头
2. 选择保存草稿