在 Elementor 网站上显示 Instagram Feed [分步]
已发表: 2023-02-13想要为您的 WordPress 网站创建 Elementor Instagram 提要？
在此分步指南中，您将了解如何使用名为 Spotlight 的免费非技术性插件将Instagram 提要添加到 Elementor 。
不需要任何技术知识或资金——只需按照我们的教程进行操作，您就会立即上手并运行。
分步指南：在 Elementor 网站上显示 Instagram Feed
准备好开始了吗？ 这是有关如何显示 Elementor Instagram 提要的分步指南。
第 1 步：安装并激活 Instagram Feed 插件
首先，您需要安装并激活 Spotlight Instagram 提要插件。
同样，Spotlight 是免费使用的，并且与 Elementor 100% 兼容。
WordPress.org 上列出了免费的 Spotlight 插件，因此您可以按照以下说明进行安装：
- 打开您的 WordPress 仪表板。
- 转到插件 → 添加新插件。
- 搜索“聚光灯”。
- 单击立即安装按钮。
- 安装过程完成后，单击激活按钮以激活 Spotlight 插件。
第 2 步：创建 Instagram 访问令牌
接下来，您需要创建一个 Instagram 访问令牌，它允许您的 WordPress 网站连接到 Instagram。
别担心——虽然这听起来有点技术性，但您只需点击几个按钮，总共可能需要 30 秒！
如果您使用自己的个人帐户，Spotlight 还允许您直接连接您的帐户（在这种情况下您可以选择跳到下一步）。 但是，我们将使用 Instagram 访问令牌方法，因为它适用于任何设置，包括连接您客户的帐户（如果您正在构建客户网站）。
要创建您的 Instagram 访问令牌，请转到此页面。
或者，如果您正在构建客户网站，请让您的客户转到此页面并按照相同的说明进行操作。
然后，根据您是要连接个人 Instagram 帐户还是企业帐户，单击相关的“生成您的访问令牌”按钮。
这将从 Instagram 打开一个弹出屏幕，询问您是否要授予 Spotlight 访问您帐户的权限。
单击弹出窗口中的允许按钮：
单击允许后，您应该会看到您的 Instagram 访问令牌出现在原始页面上：
将此访问令牌复制到一个安全的地方，因为您很快就会需要它。
或者，如果您正在与正在构建您网站的开发人员合作，您将需要与您的开发人员共享此访问令牌，以便他们可以继续设置插件。
第 3 步：将您的 Instagram 帐户连接到您的 Elementor 网站
现在，您可以在 WordPress 仪表板中添加此 Instagram 访问令牌，以将您的 Elementor 网站连接到 Instagram：
- 返回您的 WordPress 仪表板。
- 导航到Instagram 源 → 设置。
- 将 Instagram 访问令牌粘贴到Instagram/Facebook 访问令牌框中。
- 单击“连接”按钮。
如果您只使用自己的 Instagram 帐户，您还可以通过单击连接您的个人帐户或连接您的企业帐户按钮直接连接。
单击Connect后，您应该会看到一条成功消息：
如果您连接的是个人帐户，您还会看到添加自定义照片和个人简介的选项。 您现在可以单击“是”来执行此操作。 或者，您可以在配置 Elementor Instagram 提要后随时添加它。
说起…
第 4 步：配置您的 Instagram 动态
现在您已经连接了您的 Instagram 帐户，您已准备好设置您的第一个 Elementor Instagram 源。
为此，请转到 WordPress 仪表板中的Instagram Feeds → Feeds 。
选择饲料类型
首先，您将选择要显示的内容类型。
使用免费版的 Spotlight，您可以显示您自己的 Instagram 帖子的提要。 但是，Spotlight Pro 添加了更多选项，例如基于主题标签或标记您帐户的帖子的提要。
如果您想试用 Spotlight Pro，您可以访问 Spotlight Pro 的 14 天免费试用版以查看其工作原理（无需信用卡）——只需单击右上角的“ 14天免费试用版”按钮即可。
对于我们的 Elementor Instagram Feed 教程，我们将使用“我的 Instagram 帖子”选项。
然后，单击下一步继续。
选择一个模板
接下来，您可以选择 Spotlight 的模板之一，它可以让您控制 Elementor Instagram 源的布局和设计。
免费版为您提供六种不同的模板，而 Spotlight Pro 添加了另外八种模板。
对于此示例，我们将选择免费的经典提要模板，但如果您愿意，您完全可以自由选择其他模板。
做出选择后，单击“下一步”按钮继续。
选择您的 Instagram 帐户
在下一步中，系统将提示您连接并自定义。 但是因为您已经连接了您的 Instagram 帐户，所以您无需在此处执行任何操作。
要前进，请单击连接和自定义按钮。
自定义您的 Elementor Instagram Feed
现在，您将进入 Spotlight 定制器工具，该工具可让您进一步定制所选模板。
首先，在显示来自这些帐户的帖子标题下选择您在上一步中连接的帐户。
这将更新您的提要的实时预览，以使用您 Instagram 帐户中的实际帖子。
接下来，您可以转到“设计”选项卡来自定义您的 Elementor Instagram 提要模板。
以下是您可以在此处使用免费版插件做出的一些选择：
- 选择要显示的帖子数以及显示在多少列中。
- 调整进料顺序。 默认情况下，它会首先显示最新的帖子，但您可以根据需要更改此设置。
- 选择当用户点击帖子时如何打开帖子。
- 调整 Feed 的大小和间距。
- 自定义显示在提要项目上方的提要标题。
- 配置Follow on Instagram按钮样式和文本。
- 配置加载更多帖子按钮样式和文本。
- 如果您想要更多控制，请添加您自己的自定义 CSS。
借助 Spotlight Pro，您可以更好地控制字幕、点赞和评论等细节。
Spotlight Pro 用户还可以访问其他选项卡以过滤和调整提要内容或设置提要促销。
一旦您对 Feed 的外观感到满意，请确保单击右上角的“保存”按钮。
然后，让我们继续讨论如何将 Instagram 提要嵌入 Elementor。
第 5 步：在 Elementor 中嵌入您的 Instagram 提要
Spotlight 为您提供了两种嵌入 Elementor Instagram 提要的方法：
- Spotlight（免费） ——您可以使用常规的 Spotlight WordPress 小部件将您的提要添加到 Elementor。 虽然您可以直接从 Elementor 界面添加此小部件，但您将无法从 Elementor 自定义您的提要设置。
- Spotlight Pro – 您将获得一个专用的 Spotlight Instagram Feed Elementor 小部件，它不仅可以让您嵌入您的提要，还可以直接从 Elementor 界面进一步配置其设计和样式。
我们将看看这两种选择……
无论哪种方式，您都可以通过为要添加 Elementor Instagram 提要的内容打开 Elementor 编辑器来开始。
聚光灯（免费）
如果您使用的是免费版 Spotlight，请向下滚动到 Elementor 侧边栏中的WordPress部分，然后展开选项列表。
然后，将Spotlight Instagram Feed Widget拖到要显示 Feed 的 Elementor 设计中。
添加小部件后，您应该会在侧边栏中看到两个选项：
- 添加标题（或留空）。
- 选择您刚刚在上一步中创建的 Instagram 源。
然后，点击应用。
您还可以使用“高级”选项卡来调整间距和边距等细节。
您可能无法在 Elementor 编辑器中看到提要的实时预览。
但是，如果您打开页面的实时预览或实时版本，您应该会看到您的 Elementor Instagram 提要。
聚光灯临
如果您使用的是 Spotlight Pro，您将获得专用的 Spotlight Instagram Feed Elementor 小部件。
这个小部件不仅可以让您在 Elementor 编辑器中看到实时预览，还可以让您直接从 Elementor 界面自定义（和创建）Instagram 源。
再次重申——如果您想对此进行测试，您可以获得 Spotlight Pro 的 14 天免费试用——无需信用卡。
您可以按名称搜索小部件，也可以在 Elementor 小部件的“常规”部分中找到它。
添加小部件时，您应该会立即看到 Elementor Instagram 提要的预览。
如果需要，您可以单击“编辑”按钮直接从 Elementor 编辑您的 Feed 设置。 或者，如果您想显示多个提要，您甚至可以创建一个新的提要。
第 6 步：在弹出窗口中显示您的 Instagram 动态
最后一步是可选的……
但是，如果您想在 Elementor 的弹出窗口中显示您的 Instagram 提要，您有几个选择。
首先，Spotlight 包含一个内置功能，可以在访问者单击它们时在弹出窗口中显示单个帖子。 免费版和付费版均提供此功能。
下面是它的外观示例：
要启用或调整此设置，请将Open posts in setting 设置为Feed Options下的Popup 框：
Spotlight Pro 用户可以使用Popup Lightbox设置进一步配置弹出窗口。
如果您想在弹出窗口中显示整个 Instagram 提要，您有以下几种选择：
- 如果您有 Elementor Pro，则可以将 Spotlight Instagram Feed 小部件添加到您使用 Elementor Popup Builder 创建的弹出窗口中。 将小部件添加到弹出设计时，只需按照上一步中的相同步骤操作即可。
- 您可以使用任何 WordPress 弹出窗口插件，例如 Popup Maker。 要在弹出窗口中显示您的提要，您可以使用 Spotlight 短代码。
结论
关于如何使用免费的 Spotlight 插件显示 Elementor Instagram 提要的指南到此结束。
您可以按照本指南中的所有内容创建您的 Elementor Instagram 提要，而无需花任何钱。
如果您想要更多功能，例如可以使用的专用 Elementor Instagram 提要小部件，而不是常规的 Spotlight WordPress 小部件，您可以升级到 Spotlight Pro。
Spotlight Pro 提供 14 天免费试用，无需信用卡，因此您始终可以在做出任何承诺之前测试高级功能。