在 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 天免費試用，無需信用卡，因此您始終可以在做出任何承諾之前測試高級功能。