快速瞭解使用Elementor設定WordPress選單錨點的連結設定

甚麼是錨點文字連結

你是否曾經瀏覽過某些頁面,特別是一頁式網站,在點選選單或者特定文字、連結的時候,可以做到從某一段落自動滾動到另一段落(Smooth Scrolling),如此一來可以做到略過上方的開頭,輕易閱讀後面的內容。這樣的功能稱作錨點(Anchor),想信大家對這樣的功能並不陌生,這次要來分享如何建立頁面錨點選單功能,並用WordPress的Elementor解說。

選單錨點概念說明

錨點的概念就如同按鈕,通常我們會給按鈕一串連結,點擊後能導向那串網址的路徑,選單毛點也是同樣意思,只是它不做頁面間的跳轉,而是在於單一頁面中內容的定位,有點像是在Google Map找尋咖啡廳,它就自動滑動到店家位置。所以首要步驟就是讓每一個區塊都有自己的辨識方法,像是超商、餐廳、書局、車站等等,轉換到頁面之中,最簡單的判別區分就是賦予各區塊專屬ID,然後再把按鈕的導向位置貼上對應ID。像是頁尾加入購物車設定ID為2,然後在頁首新增”購買商品”按鈕,連結導向至ID為2,如此一來點選後就會滑動到購買區塊囉!

WordPress選單錨點建立教學

進入Elementor編輯畫面後,先確定要設定錨點文字連結的按鈕,在編輯狀態時只要點擊該按鈕就可以開始編輯了,只要將連結文字改成#加上區塊的ID即可,這邊的ID每一頁獨立,因此在設定時通常就會重#1開始設定(如上圖)。接下來選擇按紐所對應的區塊,可以是Elementor的欄或者列,點擊開區塊後開啟編輯畫面,選擇”進階”後可以在編輯欄位看到CSS ID欄位,這邊就是對應到上述按鈕#符號後面的數字,對照剛剛的按鈕如果這邊輸入1,點選後畫面就會自動滑動到此區塊,需注意此欄位只需要輸入ID即可(數字),不用再加上特殊符號(如下圖)。

錨點連結區塊CSS ID

WordPress選單錨點建立教學

到「外觀>選單」新增「自訂連結」,輸入網址#1,以及選單文字,並「新增至選單」內後按「儲存選單」即可完成。

熊編

熊編

參與討論

>