今天這篇文章將會教你,如何使用Divi編輯器製作一頁式的網站,上方選單將會帶你快速地跳轉到相關的內容,省去替每一個選項都製作頁面的時間,在短時間內完成一個簡潔有力的網站。
本文重點目錄
一頁式網站範本
下圖就是一頁式網站的示範,只要點選右上方的選單,網頁就會跳躍至你所選定的區塊,在使用者的體驗上,提升許多與網頁的互動感,一頁式網站最大的好處是,你的顧客無需開啟新的分頁,就能將品牌想傳遞的訊息一次閱讀完畢。

在這個教學中,你將會需要…
- 網域及WordPress網站
- Divi主題
如果你還沒有網域跟WordPress網站,可以參考這篇文章架設:【網站架設】穩定快速又便宜,獨立型主機Cloudways
如果你還不熟悉Divi主題,或者是尚未安裝Divi主題的話,可以參考這篇:【Divi新手必看】網站設計完整步驟教學,看這篇就夠!
步驟教學
1.製作網頁
開啟你的WordPress後台,點選新增頁面。

輸入網頁名稱,並點選Use Divi Builder使用編輯器。

畫面上會跳出三個選項,左邊的是「Build From Scratch從零開始製作」,中間的是「Choose a premade layout選擇現有版型」,右邊是「Clone existing page複製現有頁面」。
在這裡我會先跳過網頁設計的部分,直接選擇中間的現有模板來作示範。

選擇你喜歡的模板即可。

挑選好後,點擊綠色按鈕「Use this layout 使用這個版型」,Divi就會幫你匯入模板的檔案囉。

2.加入錨點(為區塊ID命名)
當你在設計好整個頁面後,請預想你所需要的選單內容,舉例來說,這個網頁我打算要製作五個主要內容:
- Home 首頁
- Menu 菜單
- Story 故事
- News 最新消息
- Contact 聯絡我們
接下來,我們要幫這五個區塊命名,也就是給他們一個ID,讓選單知道被點選時要跳轉過去的位置。
跳轉的位置可以是Section, Row或者Module,點選齒輪icon進入設定。

點選Advanced,打開CSS ID & Classes區塊,並在CSS ID的欄位,填寫你想使用的ID名稱,像是選單中的「菜單」,我希望他能跳轉至ID名稱為menu的位置,那我就在ID欄位填入menu。

將你想要跳轉的幾個位置都命名完成,且網頁也設計好之後,點選右下角的Publish,如果之前已經點選過Publish了,那就點選Save。

3.製作選單(連結錨點)
接著回到WordPress後台,點選「外觀」裡面的「選單」,輸入選單名稱後,勾選「Primary Menu主要選單」,再點擊右下角的「建立選單」。

選單建立好後,左邊選單項目中,可以看到我們剛剛設計好的網頁,將它勾起來,並點選「新增至選單」,你就會看到Home首頁出現在「選單結構」當中。

接著點選「自訂連結」,在網址欄位輸入「#+ID」,而連結文字欄位則是輸入你要顯示的名稱,像剛才的Menu區塊,所使用的ID是menu,那麼就如下圖所示,在網址輸入「#menu」,兩個欄位都輸入好後,一樣點選「新增至選單」。

你有多少區塊需要連結,就重複幾次以上的動作,直到將選單完成後,點選「儲存選單」,就完成選單製作啦。

4.設定首頁
最後,我們到「外觀」的「自訂」中,點選「首頁設定」。


將網站首頁顯示內容選擇「靜態首頁」,接著選取剛剛我們製作好的Home首頁後,點選「發佈」。

最後,開啟一個新的分頁,並輸入網址打開你的網站看看,確認選單每個按鈕都有正確跳轉,你的一頁式網站就完成啦~。
如果你對於這篇文章有任何疑問或者建議,都歡迎你在底下留言給我喔:)

本文作者 – LiLing
90後的台灣女生,目前正於紐西蘭擔任多媒體設計師,擅於利用Wordpress建立網站,分享各種不必使用程式語法,也可以架設網站的101種方法。
0 Comments