如何在 Elementor 中添加錨鏈接(分步指南)

已發表: 2022-02-18

您是否正在尋找向著陸頁添加錨鏈接的最簡單方法? 好吧,您已經非常接近可行的解決方案了。

使用 Elementor 等拖放頁面構建器,構建網頁變得更智能、更靈活。 因此,在創建錨標籤時,Elementor 比任何類似的 WordPress 插件都要方便得多。

因此,在本分步教程中,我們將向您展示如何在 Elementor 中設置錨鏈接,以便您可以在單擊按鈕/鏈接後向下滾動到頁面上的特定部分。 它將使您的網頁更加用戶友好和轉換。 繼續閱讀。

錨鏈接如何在您的網頁中工作

How Anchor Link Works in Your Web Pages

錨對船有什麼作用? 它幫助船漂浮在特定的水面上。 保持安全,以免被丟棄。 因此,它可以在錨卸扣範圍內的任何方向繞錨。

錨鏈接也會發生同樣的事情。 當訪問者單擊您的錨標記時,它會將他們定向到您的目標網頁上的特定部分。 不是到另一個頁面,不是到不同的部分。

錨鏈接是必要的。 通過單擊錨標記,您的訪問者可以立即跳轉到您網頁的某個部分。 該過程可以節省時間,並可以激發訪問者執行所需的操作。 此外,它使它們保持在同一頁面上。

但是,讓我們繼續使用 Elementor 創建錨點的過程。

如何在 Elementor Page Builder 中添加錨點(3 個簡單步驟)

如果您已經在您的網站上安裝了 Elementor,那麼您就可以開始創建錨標籤了。 但是,如果您不知道安裝方法,請從我們的指南中獲取有關如何安裝 Elementor 的幫助。

好吧,讓我們按照如何在 Elementor 中添加錨點的步驟進行操作。

第 1 步在 Elementor Editor 中選擇頁面

Select the Page in Elementor Editor

登錄到您的 WordPress 網站。 轉到要添加錨鏈接的頁面。 在頂部菜單欄上,單擊“使用 Elementor 編輯”。 您的網頁將在 Elementor 編輯器中打開以進行自定義。

第 2 步:搜索菜單錨點以添加錨點標記

Search Elementor Menu Anchor Widget

選擇使用 Elementor 編輯頁面後,您將被重定向到上述頁面。 它是 Elementor 編輯器。 在左側邊欄中,僅鍵入“錨點”。 因此,您會找到 Menu Anchor 小部件。 它將幫助您創建所需的錨鏈接。

第 3 步:開始使用菜單錨小部件添加錨鏈接

您需要做的是將菜單錨拖放到頁面中要添加錨標記的部分。

例如,您想在定價部分添加一個錨點。 這是你應該做的。

Add Menu Anchor Widget

在編輯器中向下滾動到頁面的定價部分。 拖動 Menu Anchor 小部件並將其放在定價上方。

現在您已將小部件拖到所選部分上方,您需要在小部件的內容區域中寫入該部分的名稱。

Content of Menu Anchor Widget

因此。 在 ID 字段中將名稱寫為“價格”,因為您希望您的訪問者跳入定價。

現在,您應該選擇鏈接哪個元素或文本? 這是你的願望。 選擇錨文本或選項卡,甚至從 WordPress 菜單中選擇一個元素來重定向訪問者。

但是,這裡我們選擇了開始按鈕,以便您可以輕鬆理解它。

Choose the anchor text

因此,向上滾動到您的頁面。 單擊“開始”按鈕。 您將在已填充的鏈接中看到按鈕鏈接。 在這裡,刪除按鈕鏈接,並將您的錨鏈接與主題標籤放在一起,就像“#prices”一樣(因為您的錨是定價部分)。 現在,點擊“保存”。

因此,請再次訪問您的目標網頁。 點擊你的錨按鈕。 您將立即跳至定價。

如何使用 WordPress 菜單在 Elmntor 中添加錨點

它甚至比早期的過程更容易。 要在 WordPress 菜單中添加錨點,您需要先創建錨點。

例如,您想為您的常見問題部分創建一個錨點。 所以,讓我們轉到您的常見問題解答部分。 將“菜單錨”小部件拖到其上方。

Add anchor in WordPress menu

在 ID 字段中輸入“faq”一詞。 並保存它。

然後轉到您的 WordPress 菜單。 單擊自定義鏈接。

Add custom like to menu

在 URL 字段中,輸入“#faq”並將鏈接文本名稱輸入為“FAQ”。 然後點擊“添加到菜單”。 最後,點擊“保存菜單”。

Click the new menu link

現在回到你的登陸頁面。 從您的菜單中點擊常見問題解答。 您將立即被帶到您的常見問題解答部分。

在 Elementor 中添加錨鏈接的常見問題解答

在這裡,我們已經回答了一些關於如何在 Elementor 站點中添加錨鏈接的常見問題。

1. 什麼是錨鏈接?

錨鏈接是一種頁面鏈接,可將您帶到同一頁面上的特定位置。

2. 如何鏈接到 Elementor 中頁面的特定部分?

第 1 步:單擊編輯部分
第 2 步:轉到高級區域。
第 3 步:將CSS ID (如( First ))添加到該部分。
第 4 步:選擇您用作錨點的按鈕或文本。
第 4 步:轉到按鈕或文本的內容區域。
第 5 步:將CSS ID插入到鏈接部分,如 ( #First )。

3. 如何在WordPress中手動添加錨鏈接?

為此,您需要向錨文本添加兩件事。
1. 選擇一個塊並在錨文本之前創建一個帶有(#)符號的錨鏈接。
2. 選擇一個塊,然後轉到塊設置的高級選項卡。
3. 並粘貼您添加為錨鏈接的文本,而不添加(#)

4、如何在HTML中手動添加錨鏈接?

第 1 步:您需要使用HTML Anchor Tag添加帶有(#)前綴的錨鏈接。
第 2 步:您需要將ID 屬性添加到要添加錨鏈接的 HTML 標記中。 使 ID 屬性以不帶 (#)前綴開頭。

5. 如何在 Elementor 中添加指向圖像的鏈接?

首先:選擇要插入鏈接的圖像。
第二:轉到該圖像的內容區域。
第三:找到Link選項並選擇他Link->Custom
第四:插入您的自定義鏈接。

最後的想法

因此,如果您有 Elementor,這就是創建錨鏈接所需的全部內容。 因此,請記住一些關鍵提示。 您只是不能隨機添加錨鏈接。 這是增加用戶對您的網頁的響應的好工具。 因此,您應該找出哪些部分對您最重要。 然後還選擇與您的錨匹配的完美錨文本。

因此,Elementor 對第三方工具開放。 您可以集成 Happy Addons 小部件,使用 Elementor 為您的網頁設計帶來更多功能。 您可以完全免費開始。

好吧,現在告訴我們。 您發現在 Elementor 中添加錨鏈接更容易嗎?

立即帶我去快樂的 Elementor 插件!