什麼是Anchor Link?
這篇文章會教導如何用簡單方法在Elementor中設定Anchor Link,讓你的網站按鈕跳到同一頁的指定位置。
(如果你不知道什麼是Elementor,它是一個協助網站設計的WordPress外掛。)
Anchor Link,又可稱為Anchor Tag,中文是錨連結。
意思是將同一頁面的某兩個部分連結在一起,一般適合在長頁面中使用。
例如:一般網站設計師在製造登陸頁(Landing Page),一般會將查詢或登記表格放到最底;
好讓瀏覽者在頁面的上部分先了解清楚服務內容,然後再進行登記。
如果你想找人協助設計Landing Page,歡迎與我聯絡。
但考慮到並不是每一位網站使用者都有耐性從頭到尾將所有資訊看完,
設計師通常會在頁面的不同位置擺放一些按鈕,讓他們直接跳到頁面下方進行登記。
由於登記表格是在同一頁面的最底部,不能直接放進另一個超連結,便需要使用到Anchor Link。
在這個情況下,Anchor Link的目的便是將登記表格和按鈕進行連繫,令用家一按按鈕便跳到網頁下方。
如何在Elementor中設定?
這邊我使用一下自家網站的內容來進行示範。
- 首先打開Elementor 中的設計頁面
- 尋找你需要跳到的位置,可以是段、內部段或其中一個元素
- 點擊此位置,然後在左邊的位置點進階(Advanced)那一個Tab
- 在版面配置中尋找CSS ID,然後輸入任何文字(建議盡量簡潔清晰)。這邊我的CSS ID是「form」
- 在按鈕(或其他任何連結)中,輸入「#form」
- 完成
總結
- Anchor Link,又可稱為Anchor Tag,中文是錨連結
- 意思是將同一頁面的某兩個部分連結在一起
- Anchor Link一般適合在長頁面中使用,讓使用者快速跳到指定位置
- 在Elementor中按以上方式設置Anchor Link,即可將兩者連結