【DIVI教學】如何用DIVI編輯器製作一頁式網站

by

【DIVI教學】如何用DIVI編輯器製作一頁式網站

by

今天這篇文章將會教你,如何使用Divi編輯器製作一頁式的網站,上方選單將會帶你快速地跳轉到相關的內容,省去替每一個選項都製作頁面的時間,在短時間內完成一個簡潔有力的網站。

一頁式網站範本

下圖就是一頁式網站的示範,只要點選右上方的選單,網頁就會跳躍至你所選定的區塊,在使用者的體驗上,提升許多與網頁的互動感,一頁式網站最大的好處是,你的顧客無需開啟新的分頁,就能將品牌想傳遞的訊息一次閱讀完畢。

Sample

在這個教學中,你將會需要…

  1. 網域及WordPress網站
  2. Divi主題

如果你還沒有網域跟WordPress網站,可以參考這篇文章架設:【網站架設】穩定快速又便宜,獨立型主機Cloudways

如果你還不熟悉Divi主題,或者是尚未安裝Divi主題的話,可以參考這篇:【Divi新手必看】網站設計完整步驟教學,看這篇就夠!


步驟教學

1.製作網頁

開啟你的WordPress後台,點選新增頁面。

Add. a new page

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

畫面上會跳出三個選項,左邊的是「Build From Scratch從零開始製作」,中間的是「Choose a premade layout選擇現有版型」,右邊是「Clone existing page複製現有頁面」。

在這裡我會先跳過網頁設計的部分,直接選擇中間的現有模板來作示範。

Choose option

選擇你喜歡的模板即可。

Layout library

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

Use this layout

2.加入錨點(為區塊ID命名)

當你在設計好整個頁面後,請預想你所需要的選單內容,舉例來說,這個網頁我打算要製作五個主要內容:

  1. Home 首頁
  2. Menu 菜單
  3. Story 故事
  4. News 最新消息
  5. Contact 聯絡我們

接下來,我們要幫這五個區塊命名,也就是給他們一個ID,讓選單知道被點選時要跳轉過去的位置。

跳轉的位置可以是Section, Row或者Module,點選齒輪icon進入設定。

Section/Row/module Settings

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

Add CSS ID

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

Publish the page

3.製作選單(連結錨點)

接著回到WordPress後台,點選「外觀」裡面的「選單」,輸入選單名稱後,勾選「Primary Menu主要選單」,再點擊右下角的「建立選單」。

Add menu

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

Add homepage

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

Add links

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

Save menu

4.設定首頁

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

Customize
Homepage Settings

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

Publish

最後,開啟一個新的分頁,並輸入網址打開你的網站看看,確認選單每個按鈕都有正確跳轉,你的一頁式網站就完成啦~。


如果你對於這篇文章有任何疑問或者建議,都歡迎你在底下留言給我喔:)

本文作者 – LiLing

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

相關文章

👋

Hi, I’m LiLing

在紐西蘭任職多媒體設計師,擅於利用Wordpress建立網站,搭配Divi主題,分享各種不必使用程式語法,也可以設計網站的101種方法。

🙌

社團交流

歡迎你加入Divi使用者討論平台,有任何問題都歡迎在上面向我提問:)

👩🏻‍💻

免費領取Divi入門手冊

領取Divi新手設計入門手冊

0 Comments

Submit a Comment

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