How to make a back to top button in WordPress

[目的]
現今有許多一頁式的頁面,會透過頁面連結到某一區塊,若想要快速返回頁面頂部,該如何設定。分享以下無需用到程式設定的方式:

1. 在Elementor新增無須分割欄位的「段」 空間。


2.接著要對「段」進行設定,在段的佈局中,設定內容寬度為全寬模式,欄間距為沒有間距,拉伸段一定要開啟,讓整個段不受佈局寬度控制,直接拉伸到流覽器視窗的100%寬度。

3.在段中直接插入圖片或是圖示,作為go to top的標示。

4. 至進階設定Custom Positioning,設定圖示的位置。 寬度:自訂,將圖示尺寸調整至適切大小,位置則為Fixed 。

4. 點選段至 進階屬性,設定 CSS ID:top 。

5. 點選圖片至內容屬性 , 連結:客製URL,輸入「#top」

6.最後針對不同裝置的設定圖示大小,若想讓圖示加一點動態呈現,可回至點選圖示,進階:Motion Effects ,將Scrolling Effects:開啟 ,設定旋轉Rotate定義方向 / Speed:2 / Viewport:0% ~ 100% ,接著將視窗往下滾動看看,就會看到圖示隨著視窗往下而有旋轉的效果。

參考資料:
https://www.youtube.com/watch?v=vNQidLjXnkk

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *