甚麼是選單錨點?快速瞭解錨點文字連結設定

甚麼是錨點文字連結

你是否曾經瀏覽過某些頁面,特別是一頁式網站,在點選選單或者特定文字、連結的時候,可以做到從某一段落自動滾動到另一段落(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
錨點連結區塊CSS ID

甚麼是價格錨點?

另外一個很常聽到的錨點用詞就是價格錨點了,可以把它想像成一種影響你對商品價格認知的方式。其實我們對於市面上販售的商品是沒有絕對價值認知的,通常都是透過比較換來的感受,也就是價格便宜或者昂貴。舉一個簡單的例子就可以理解了,不知道你有沒有注意過,每每進入星巴克店面的時候總會看到幾罐Evian礦泉水,其實真正的用意並不是賣水,而是”價格錨點”手法,它會讓顧客的潛意識產生:這樣一小瓶礦泉水都能有這樣的價格了,買一杯一百多塊的咖啡其實也還好嘛!所以你就會發現,很多服裝店其實也都用了類似方法,在門口展示最貴的衣服,裡面陳列的相較下就便宜了,或者手機推出超大容量的選擇,知道用途了吧?別再傻傻煩惱哪一隻比較好了!

甚麼是選單錨點?快速瞭解錨點文字連結設定” 有 2 則迴響.

發表迴響