Divi vs. Elementor 兩大WordPress編輯器優缺點比較
你是否正在猶豫要使用Divi還是Elementor,將你的網站外觀不再只是文章列表呢?
相信大多數人在使用Wordpress製作網站時,不論是部落格網站,或者是商業型品牌網站,都會遇到該如何製作、設計首頁的問題,而Divi跟Elementor這兩個頁面編輯器,正是目前世界上最熱門的兩個Wordpress編輯器。
這篇文章將會幫你比較出Divi及Elementor兩者的不同,協助你找到最適合你使用的頁面編輯器,如果你目前也有一樣的煩惱,那就跟我一起看下去吧!
一、Divi vs. Elementor 相同處
首先呢,Divi跟Elementor兩者其實有非常多的共通點,而這幾個共通點也是讓多數Wordpress使用者們,對Divi及Elementor趨之若鶩的特色:
1.視覺化編輯器
Divi編輯器畫面 Elementor編輯器畫面
首先,Divi跟Elementor都是使用視覺化的編輯器,你可以在編輯時,直接對網站實際地樣式作調整,不像過去必須在後台用一句句的語法、程式碼製作網站。
需要增加網站的內容時,Divi只需要點選+號,就可以從元件列表,選擇想要加入的項目,直接進行編輯即可。而Elementor則是使用拖拉的方式,把元素用滑鼠拖拉進適當的位置後,一樣能夠輕鬆地調整網站。
2.電腦、平板、手機視角
Divi手機視角 Elementor手機視角
並且,Divi跟Elementor都可以切換到手機或平板視角,針對有不同瀏覽習慣的使用者,來為網站進行更細節的調整,盡可能讓不同的使用者,在瀏覽你的網站時,都能夠有更好的使用體驗。
3.列表顯示
Divi列表顯示 Elementor列表顯示
除了上一段提到的電腦、手機、平板視角以外,Divi跟Elementor還有提供列表型的顯示方式,像這樣的瀏覽模式,適合用來確認網站中篇幅較長的網頁,而我個人經常會利用列表模式,來快速將已經設定好樣式,複製到尚未設定過的元素。
4.個別頁面設計
Divi Theme Builder Elementor Theme Builder
而Divi跟Elementor也同時有提供主題性的編輯器,讓你可以為整個網站製作統一的選單列、底部欄,但同時,也能為幾個指定的頁面,特別製作不同的頁首、頁尾。
5.設計選項
Divi 樣式設計 Elementor 樣式設計
在各個元素的設計選單,我個人認為Divi跟Elementor除了位置以外,基本上該有的設計選項都一應俱全,非常足夠應對各種常見類型的網頁設計。
二、Divi vs. Elementor 相異處
前面把Divi跟Elementor的相同處說得差不多了,接下來我們進入到這兩個網頁編輯器的相異處:
1.主題版本及外掛版本
Divi在網頁編輯器上提供兩種版本,一個是主題,另一個是外掛,如果你有習慣使用的主題,只需要為其中幾個頁面作編輯,那麼就可以選擇外掛版本的Divi使用。如果你想要全方面的為網站設計,包含頁首、頁尾、網站整體,那就使用主題式的Divi。
而Elementor只提供外掛版本,只能針對個別頁面調整,並沒有提供太多全面的設計方式。
2.範本數量
Divi範本
Divi最有價值的其中一點,就是它提供非常大量的免費範本給會員使用,所有的範本都是一個組合包的概念,每一個主題都包含5到8頁以上的頁面範本,也就是說,你可以選定其中一個主題,將所有頁面都匯入到自己的網站後,調整玩文字跟圖片,就是一個完成度非常高的網站,對於新手而言是一大福音。
Elementor範本

而Elementor的範本則是多數主題只有提供一頁或者兩頁,不能像Divi一樣快速建立出網站的各個頁面,使用者如果有製作首頁以外的需求,就必須再自行設計出網站的其他頁面。
3.語言
語言的部分,Elementor則是略勝一籌,因為他提供英文以及中文的版本,而Divi只提供了英文,儘管用字都不難,但仍會讓有英語焦慮的使用者望之卻步。
4.網站表現
Divi速度測試 Elementor速度測試
我在一個網站上,同時安裝了Divi跟Elementor,並且用它們製作了內容幾乎一樣的兩個頁面,而以上的測試結果看下來,似乎差異並不大,整體表現上由Divi略勝一籌,但頁面完整顯示出來的速度,則由Elementor勝出。
5.價格比較
Elementor價格

Elementor提供了免費以及一年僅需美金49元的方案,吸引更多剛入門的使用者踏入,但是當使用者有超過一個以上的網站時,價格便不再享有優勢,而且,Elementor不提供終生版的價格,必須要每年不斷地付款,Elementor的使用者在長時間比較之下,花費會遠超過Divi。
Divi價格

而Divi的會員方案,則是都不限使用的網站數量,提供一年型$89(需每年續訂)跟終生型$249(買一次即可終生使用)這兩個方案。而透過以下連結購買,則可以有10%OFF的優惠價哦。

6.支援性
基於價格方面,Elementor有提供免費的版本,讓更多新手會優先嘗試,而這點也讓Wordpress中Elementor相關的支援外掛,比起Divi更多一些,創作者更願意將時間投入在開發市場似乎更大一些的Elementor之中。
三、總整理
現在,我再為這篇文章所提到的Divi跟Elementor的優缺點作一個總整理,讓你快速簡單地複習一下:
Divi | Elementor | |
---|---|---|
視覺化編輯器 | 有 | 有 |
電腦、平板、手機視角 | 有 | 有 |
列表顯示 | 有 | 有 |
個別頁面設計 | 有 | 有 |
設計選項 | 豐富 | 豐富 |
主題版本及外掛版本 | 主題版本及外掛版本 勝 | 僅外掛版本 |
範本數量 | 較多 勝 | 較少 |
語言 | 英文 | 英文及中文 勝 |
網站表現 | 整體表現較佳 | 完整載入速度稍快 |
價格比較 | 長期使用較便宜 勝 | 長期使用較貴 |
外掛支援性 | 較少 | 較多 勝 |
四、Divi vs. Elementor 該選誰?
這兩個頁面編輯器各有各的優缺點,而且每個人喜歡的介面都不相同,我個人在各別使用過後,更加偏好Divi,對於長時間都在建立網站的我來說,Elementor長期使用下來所需要累積的價格非常驚人,而且我更喜歡Divi的整體編輯器畫面。
【新手必看】Divi主題網站設計完整步驟教學,看這篇就夠!
繼之前的【WordPress】人人都可以是網站設計師,DIVI最強大的頁面編輯器文章發佈後,有許多人來信問我更多關於使用Divi的方法。
而在這篇文章中,我將向你介紹,如何使用Divi主題,幫你的Wordpress網站建立一個完整,且設計美觀的頁面,從安裝Divi主題編輯器,到介面操作、設計等,即使不會寫程式、沒有設計背景,Wordpress新手也能夠自行架出漂亮的網站,為你的客戶、個人品牌、自媒體設計一個獨一無二的專業網站吧。
你準備好了嗎?那我們開始認識,並學習使用Divi吧!
文章內所提到的Wordpress,指的都是內容管理系統Wordpress.org,而不是部落格網站Wordpress.com喔!
1.Divi介紹

Divi是Wordpress的外觀編輯器,它可以作為外掛,替單一頁面編輯版面,並搭配其他主題同時使用,也可以作為網站主題,將整個網站全方面地進行設計,不論是在經營部落格、自媒體、網路電商、線上商店、商業型公司形象網站、個人作品集等,各種形式的網站需求都能滿足。
Divi的設計方式很直觀,你在編輯器所看到的畫面,就等同於使用者瀏覽網站時的畫面,不必擔心產生神奇的誤差,要增加文字、圖片、按鈕、聯絡表單等,直接從Divi提供的選單中選擇,不必寫任何程式碼,是一般人也能輕鬆上手的編輯器。
最初,我在剛開始接觸Divi時,是利用Divi提供的大量免費網頁範本,直接進行套用、修改、更換圖片、文字及網站內容等,進而慢慢熟悉Divi的每一個功能設定,這也是我覺得Divi對新手而言最貼心的部分。
Divi官方在每週都會增加免費且全新的網頁範本,每一個範本中,至少提供你4-8頁,各種形式的內頁(例如:首頁、關於我們、服務內容、聯絡我們...等),也就是說,你可以直接選擇使用任何一個你喜歡的頁面範本,將內容修改成你的文字、內容,網站就能夠直接上架,快的話,一小時內就能產生一個看起來專業,且經過設計的網站。
Divi唯一的缺點,是目前仍不提供中文版,它是一個全英文的編輯器,也許很多人聽到全英文就感到害怕跟焦慮,但其實,如同我前面所說,它直觀化的設計介面,以圖像代替文字,即使不夠熟悉英文的用語,也能夠用視覺直接認識每個功能。
DIVI優點
- 可作為主題或外掛使用
- 頁面視覺編輯器
- 大量免費範本套用,每個範本至少4到8種頁面
- 支援Woocommerce,可設計商店頁面及商品頁面
- 24小時線上客服支援
- 提供電子郵件支援外掛
- 提供終生制價格
- 不限網站數量
DIVI缺點
- 僅提供英文版
另外,由於Divi的用戶在世界各地都有,網路上所提供的支援、外掛、教學,數量非常非常龐大,有任何問題,幾乎都能在Google上找到相關的解答,甚至還有許多不同功能的外掛,是專門為了Divi所設計出來的。
而下列文章,我將透過一步步的教學,指導你如何使用Divi,從安裝、到編輯器的使用、元件及模組的說明介紹等等,讓你不必在安裝Divi後獨自摸索,那我們就開始囉!
2.Divi費用
首先,Divi的會員價格分為兩種,個別是一年制及終生制的會員,兩者所能使用的服務與權限完全相同,並不會因為購買的是一年制,而有任何服務上的差異,不論是主題型或者外掛型的Divi、全年無休客服、免費網頁範本等,都將提供你在購買的時限內使用。
我購買的Divi是終生制的,也就是說,我不需要每年付一次年費,就可以無限享有Divi更新、客服,而且也不限制網站的數量,代表我為客戶製作網站的成本不會無限增加。
Divi會員的原價是美金$89/年,或者是美金$249/一次性付費,若你透過我下方提供的按鈕,連結至Divi的話,將可以享有購買Divi會員九折優惠價,也就是說,一年會員制的價格變成美金$80,而終生會員制的價格變成美金$224,而我也能從Divi獲得一點佣金作為獎勵:)。
一年制 | 終生制 |
---|---|
可使用Divi & Extra主題以及Bloom & Monarch外掛 | 可使用Divi & Extra主題以及Bloom & Monarch外掛 |
提供免費且數量眾多的網頁範本套用 | 提供免費且數量眾多的網頁範本套用 |
一年期更新維護 | 終生更新維護 |
一年期24小時客服 | 終生24小時客服 |
網站數量不限 | 網站數量不限 |
30天無條件退費 | 30天無條件退費 |
在購買的同時,Divi會要求你輸入帳號Username以及密碼Password註冊會員,請記下這組帳號密碼,之後查詢產品的使用權限、或者是需要使用客服服務,都會需要這組會員資料喔。
3.安裝Divi到Wordpress

購買完成後,點選Elegant頁面的右上方的Account,輸入帳號密碼登入會員,你會看到下方圖示,左邊的是Divi主題,右邊的是Divi外掛,如果你要用Divi設計一整個網站,那就下載左邊的DIVI主題使用,如果你想要使用別的主題,而Divi只是拿來設計單一頁面,那就下載右邊的Divi外掛使用,而兩者的詳細安裝方法請看以下說明。

Divi網站主題(上圖左邊)
進到你的Wordpress後台,選擇外觀內的「佈景主題」,接著點選中上方的「安裝佈景主題」後,再點選「上傳佈景主題」,選擇剛才下載好的Divi zip檔上傳,Wordpress就會幫你安裝完成了。

Divi外掛 - 單一頁面編輯器(上圖右邊)
而Divi外掛的話,則是到外掛→安裝外掛,接著點選中上方的「上傳外掛」,選擇你下載好的Divi外掛zip檔,然後系統一樣會幫你安裝完成。

驗證使用權限API KEY
安裝完過後,進入到Elegant頁面,點選Account,你會看到下方有「Username & API Key」,這就是你驗證Divi產品的密鑰。

回到你的Wordpress後台,安裝好Divi後,左邊選單會出現「Divi」選項,選擇「Theme Options」,進入到Divi選項設定頁面中,點選「Updates」,在下方輸入剛剛在Elegant會員資料中的Username以及API Key,點選「Save Changes」,就完成驗證了,可以盡情使用你的Divi囉!

使用Divi外掛的人,在完成API驗證後,可以直接跳到7.頁面編輯器的地方,繼續閱讀Divi編輯器的使用教學。
4.Wordpress基本設置
接下來,第四段這部分的教學,是提供給剛開始使用Wordpress,還沒有任何網站頁面的人,如果你的網站已經有基本的內容、頁面、選單等內容,可以直接跳到5.LOGO設定教學唷。
新增頁面

首先,每個網站會依照主題的不同,而有不同的頁面,通常會先有「首頁、服務、聯絡我們」等。
選擇左邊選單的「頁面」,點選「新增頁面」,在標題的部分打上你的頁面名稱後,右手邊可以看到一欄「永久連結」的區塊,這個會是你的頁面連結,所以我會建議你填寫英文,例如「首頁」就使用「home」作為代稱,這樣在這個頁面的網址,就會變成「你的網址/home」,會對Google搜尋比較有幫助。
接著,點選右上方的發佈,就可以了,記得多新增幾個頁面,你的選單才不會太荒涼喔。
新增主要選單

點選左邊選單「外觀」中的「選單」,這裡我們要將剛剛新增好的頁面,製作成網站上能看到的選單,點選中上方的「建立選單」,填寫「選單名稱」,這個名稱可以隨意取,用你方便記得的名稱即可,然後勾選左側的頁面項目,點擊「新增至選單」,你會看到被勾選起來的頁面,都跑到名稱下方,這時候你可以滑鼠右鍵按著拖拉,更改順序,最後,勾選Primary Menu主要選單,點擊「建立選單」,就完成了。
你可以回到網站的主頁,確認剛剛製作的選單,是否有乖乖出現在上面選單列表中呢?如果沒有的話,再照上方的步驟,重新建立一次選單即可。
5.LOGO設定

通常,網站的LOGO會出現在網頁上方的選單列表,可能在左邊或者是中間,如果想要更改LOGO的圖示,請到網站的Wordpress控制台→Divi,點選Theme Options主題選項,在最上方就會看到LOGO的欄位,點選UPLOAD上傳,選擇你的LOGO圖檔後,再按上方的「Save Changes」儲存變更,LOGO就更換完成囉。
6.外觀自訂

現在,我們終於要開始使用Divi的設計功能了,請先從Wordpress控制台,進入「外觀」中的「自訂」頁面,在這裡,Divi會提供你可以設定網站整體,比較大範圍的項目,例如說網站的字型、顏色、選單樣式、網站名稱...等等。
以下,我會一個個告訴你,這些選項個別代表的內容,以及你需要設定的部分有哪些。
網站顏色、字型設定



General Settings一般設定中,你會看到有Site identity網站名稱、Layout Settings網站框架設定、Typography文字設定以及Background背景設定,它們個別的內容如下:
- Site identity網站名稱:設定網站名稱、網站小圖示、網站說明等資訊。
- Layout Settings網站框架設定:網站主要顏色、頁面寬度等。
- Typography文字設定:標題及內文的文字大小、顏色,製作部落格的網站的話,務必要在這裡調整成適合閱讀的形式。
- Background背景設定:可以替網站修改背景顏色,或者加入背景圖片。
選單設定


第二個Header & Navigation選單列,又稱作導覽列,在「Header Format」裡,Divi會在此提供你五種不同的選單風格,個別是:
- Default:預設
- Centered:置中,LOGO在上,選單在下
- Centered Inline Logo:置中,LOGO在選單中間
- Slide In:選單從右滑入
- Fullscreen:選單從右滑入,且選單為全螢幕
另外還有提供直式版本的選單,以及往下滑動後,會消失的選單,這兩種類型,每個都選看看,使用你最喜歡的風格即可。
而Primary Menu Bar,則是讓你設定選單中的文字顏色、大小、選單高度、背景顏色等內容,算是你的網站很重要的風格之一,如果你的網站最上方,打算使用很大的底圖,作為主視覺的話,也可以嘗試在這裡把背景顏色調整成透明度為0,這樣會讓整體視覺更加遼闊,
Secondary Menu Bar頂部欄,是會出現在Primary Menu主要選單的上方,如果你回到前面教學的「新增主要選單」,把最後一步勾選Primary Menu的地方,改為勾選Secondary Menu,你的Secondary Menu出現後,那麼才會需要調整這部分的設定唷。
Fixed Navigation settings,這個是當你的網站使用者,將網頁下拉時,選單通常會變為更窄的樣式,方便使用者閱讀網頁內容,而你可以在此處調整網頁下拉後的選單樣式。
Header Elements選單元件,你可以在這裡幫你的選單加入搜尋、購物車這兩個功能,電話及Email則會出現在Secondary Menu頂部欄中。
首頁設定
接著進入到首頁設定,Wordpress的預設設定會將「最新文章列表」設定成首頁,如果你今天有特別新增一個首頁,要以其作為網站的主要頁面,就必須在這裡點選「靜態頁面」並在下方的靜態首頁,選擇你要設定為首頁的頁面。
以上是外觀自訂中,幾個使用Divi一定要調整的部分,其他的選項可以每個個別點進去試試看,都是不複雜且單純的內容設定。


7.Divi編輯器
以下是本篇文章中最重要的章節,我將開始說明Divi編輯器的使用方法,剛開始可能會覺得有點難以理解,選項好多、好複雜!不過沒關係,我最初學習使用Divi時,也是覺得一個頭兩個大,但只要慢慢熟悉後,你會發現,其實一切都不難。
進入Wordpress控制台的「頁面」,在你已經新增好的頁面下方,點選「Edit With Divi」,正式開始進入Divi編輯器囉!

一開始,你會看到三個選項,如上圖所示,第一個是「從空白頁面開始建立網頁」,第二個是「使用範本」,第三個是「複製現有頁面」,這些選項等等都可以再重新點選,不用擔心一開始就要做出選擇,先點選第一個「空白頁面」開始。

前端編輯器介面

進入空白頁面後,你會看到中間下方有一個紫色的三個點點圖示,點一下後,整個下方的工具列會展開,如上圖所示。
左下角主要是你檢視網頁的方式,Divi提供你五種不同的檢視方法,有「列表」、「放大檢視」、「電腦版」、「平板」以及「手機版」,讓你能夠在編輯頁面的過程中,反覆地確認用不同的設備瀏覽網站時,網站會呈現什麼樣子。
Divi編輯器中間的工具列總共有六個按鈕,個別詳細功能如下:
- 匯入範本:可以叫出Divi提供的網頁範本匯入。
- 新增至模板庫:如果你使用Divi做網站到後期,每個頁面可能會重複出現的東西,那就可以把它們加入到模板庫,而這邊的按鈕,是讓你將整個網頁都加入模板庫。
- 清除全部:如果你不滿意自己做的東西,可以點選這個按鈕,一次全部刪除重來。
- 頁面設定:這邊是這整個頁面的全局設定,例如說,你希望能用CSS程式碼,改變這個網頁某些東西的樣式,但是不要影響到其他頁面,那麼,程式碼就必須加在這裡。
- 步驟記錄:Divi提供你從開啟這個頁面編輯器開始的步驟記錄,如果你在中途把網頁關閉重新點開,那麼步驟記錄都會消失。
- 匯出匯入:這個功能是方便你輸出這一整個頁面,或者是輸入別人給你的檔案,但是如果版本不同的話,有時候會造成輸入失敗的問題。
最後,在你完成這個頁面的設計後,Save Draft儲存草稿按鈕出現的話,代表這個頁面還沒有公開,只是儲存草稿而已,而Publish發布按鈕,則是將網頁公開,來到你的網站的使用者都可以看到這個頁面。
Section、Row、Module說明
接下來要講解的是Divi的Section、Row以及Module,Section是上圖最外圍的藍色框線處,Row是中間藍綠色的框線,Module則是灰色的區域。

Section

首先,你可以把Section想像成是「把網頁切成一個個橫式的長方形」,我們會透過Section將網頁的內容分成一個一個方格,而Section又分成三種類型,第一個是Regular,它就是一個單純的長方形,裡面可以放入無數個像是下方的Row。
第二個Specialty則是將這一區塊分隔成左右兩邊,一邊跟Regular一樣,能放進許多Row,而另一邊則是單一的區塊,不能再被分割,適用於需要側邊欄的部落格文章頁面。
第三個Fullwidth,是寬度佔畫面100%的區塊,裡面不能再做分割,但有提供各種形式的全寬幅元件,適合做網頁最上方的主視覺,例如說能放單一圖片、多張圖片輪播、包含Slogan標語的主視覺圖等等。
Row

Section是把網頁橫式的切割,那麼Row就是把每個橫式的區塊,再做直式的切割,Divi目前提供20種的Row讓你使用,根據網頁的內容不同,可以選用不同的Row。
當然你也可以在選定之後,更改Row的形式,所以不必擔心一次選擇就無法再次修改。
Module

Divi的Module則是真正的網頁內容,在我們用Section跟Row把網頁切割成好幾個區塊後,就可以加入不同的Module,組合出你的網頁。Divi提供了37種Module,加上Fullwidth全寬幅的Section,總共有46種選擇:
- Accordion 可展開的條列式模組,適用於Q&A。
- Audio 音訊
- Bar Counters 長條式計數
- Blog 部落格文章列表
- Blurb 圖文按鈕,適用於人物、單一產品介紹
- Button 按鈕
- Call To Action 按鈕
- Circle Counter 圓形倒數計時
- Code 程式碼
- Comments 留言區
- Contact Form 連絡表單
- Countdown Timer 倒數計時器
- Divider 分隔線
- Email Option 訂閱電子報表單
- Filterable Portfolio 作品分類器
- Gallery 相簿
- Image 圖片
- Login 登入
- Map 地圖
- Number Counter 數字計數器
- Person 人物
- Portfolio 作品
- Post Navigation 文章的導覽器
- Post Slider 可滑動的多個文章
- Post Title 文章標題
- Pricing Tables 價目表
- Search 搜尋按鈕
- Shop 商品列表
- Sidebar 側邊欄
- Slider 可滑動的內容
- Social Media Follow 社群媒體
- Tabs 分頁
- Testimonial 評價
- Text 文字
- Toggle 可多個展開或關閉的條列式模組
- Video 影片
- Video Slider 可滑動的影片
如果你有安裝Woocomerce,想製作購物網站的話,在安裝完Woocommerce後,Module會多出以下幾種讓你設計你的商品頁面跟商店頁面:
- Woo Add To Cart 加入購物車
- Woo Additional Info 額外資訊
- Woo Breadcrumb 產品連結鍊
- Woo Cart Notice 購物車通知
- Woo Description 商品敘述
- Woo Gallery 相簿
- Woo Images 圖片
- Woo Meta 商品編號
- Woo Price 價格
- Woo Rating 客戶評分
- Woo Related Product 相關產品
- Woo Reviews 評價
- Woo Stock 庫存數量
- Woo Tabs 資訊區塊
- Woo Title 商品標題
- Woo Upsell 商品推薦
我有另外一篇文章專門分享如何使用Divi設計WooCommerce的商店及商品頁面:
模板內容
每一個Section、Row、Module,點開右上方的設定圖示,會看見像上圖這樣,有三大區塊,分別是Content、Design、Advanced。
Content代表這個模組的主要內容,Design則是模組的顏色、設計、樣式,Advanced則可以替該模組加入一些CSS程式碼,或者是設定它只出現在電腦使用者,而不出現在手機、平板使用者等等。



使用範本
如果,你是剛開始使用Divi的用戶,可以嘗試使用Divi提供的網頁範本,目前Divi總共有201種不同主題的免費範本,幾乎每週都會新增,你可以在裡面挑選喜歡的樣式,加入到網頁中,接著再一個個各別進行調整與修改,每個範本都可以重複使用、刪減,這個可以為你省去非常多網頁製作時間!

手機版設定
將滑鼠移到各個設定的右手邊,會滑出好幾個圖示,其中第二個會出現「手機」符號的icon,點開之後,下方會展開三個選項,個別是電腦、平板、手機,在這裡可以獨立為三種不同的螢幕大小設定數值,例如以文字的大小來說,電腦用戶可以接受較大的文字字體,而手機用戶則可以將字體適當地縮小一點,以避免造成文字過度擁擠。

8.Theme Builder主題編輯器
除了頁面可以使用Divi編輯器以外,在Wordpress控制台,點選「Divi」,進入「Theme Builder」後,你會發現這邊有不同於「外觀自訂」區域的網站主題設定。
在這裡,你能用Divi編輯器製作一個跟預設不同的Header選單列,以及Footer底部列,而且可以為每個頁面都製作不同的選單,也就是說,不必再侷限於外觀自訂中預設的選單,整個網站都能依照你的想法去製作。
但是,老話一句,如果你還是個Divi新手,建議先熟悉了Divi編輯器的使用方法後,再來嘗試使用這邊的編輯器製作選單喔!

自訂頁首選單、底邊欄
在第一個Default Website Template中,通常我們會將整個網站主要使用的選單以及底邊欄的樣式設定在這裡,他們名稱會顯示為Global Header/Footer,顏色是亮綠色,非常好分辨;如果是只顯示於某幾個頁面的話,則會是Custom Header/Footer,顏色為灰色。


指定頁面樣式(例:部落格文章模板)
如果你的網站屬於部落格類型,有非常多的文章,那就可以透過Theme Builder為你的文章建立模板,只要發佈新的文章,文章內容就會按照這個模板展示。
實際操作方法如下圖所示,點選Add New Template的加號後,會彈出頁面列表,將你想要套用的頁面勾選起來。如果你要套用在文章,則勾選All Posts(All文章)。

接著,如果你有設定好的Global Header,系統會直接幫你加進來,如果希望自己設計不同的選單,點選右邊的設定圖示(三個點點),選擇Disable Global,就會轉變成Custom的版本,那你就可以點擊左邊的畫筆圖示進行編輯啦。


而部落格文章主體的部分,請點選Add Custom Body,進入編輯器後,加入Post Title跟Post Content作為文章的標題跟內文,像下圖示範,我使用了Row將頁面分成兩個區塊,在左邊較寬的部分加入Post Title跟Post Content,右手邊則加入的Comment,讓我的讀者可以留言。

9.總結
其實今天這篇文章,裡面所提到的內容,只能算是Divi的大略說明,Divi編輯器強大的程度,需要一個個功能慢慢摸索後,你會漸漸地對Divi深感佩服,目前Divi是我最愛用的主題,截至今日,我已經用它為客戶製作過上百個網站。
關於Divi編輯器的使用,我還有另一篇文章【Divi新手教學】如何用Divi設計Woocommerce線上購物網站,專門介紹如何用Divi設計WooCommerce購物網站,有需要的話也歡迎你去看看喔。
【WordPress】免費外掛Stackable教學,製作專業的靜態首頁
你是不是也跟我一樣,使用Wordpress製作網站,從充實內容開始,一步步漸漸累積起網站的權重、排名、點閱率,但是當別人第一眼看到自己的網站,多數人卻只會說「喔!你寫個人部落格呀?」,明明你寫了好多專業的攻略文、知識分享文、比較文!別人卻只當作你在寫抒發心情的小品文?
這篇文章要教你如何一步步設計出網站的靜態首頁,即使你不是一個專業的網站程式設計師,不會寫任何專業程式語法,也可以透過外掛Stackable編輯出理想的網站首頁,讓訪客一進入網站,就可以馬上理解你所要表達的主題重點!
1.什麼是靜態首頁
一般的Wordpress網站首頁,預設設定會是你的「最新文章列表」,訪客可以一眼看到你的最新文章,但也許沒辦法馬上理解你的網站主題。而靜態首頁,讓你可以將網站的主題整齊地放在首頁,讓用戶馬上抓到你要表達的重點,以下以旅遊網站來作舉例:
最新文章列表 | 靜態首頁 | |
訪客接收 | 文章1.泰國CP值最高的住宿 文章2.泰國必玩景點報你知 文章3.泰國簽證怎麼辦理 | 泰國旅遊 區塊1.住宿 - 如何訂住宿、注意事項 區塊2.簽證 - 如何辦簽證、簽證費用 區塊3.機票 - 廉航機票購買教學 區塊4.景點 - 曼谷、清邁、清萊 |
訪客認知 | 去過泰國旅遊的人分享的文章 | 專門寫泰國旅遊的專業網站 |
2.累積潛在客戶

透過以上表格,我想你們應該可以知道靜態首頁的重要性,試著想像一下,當訪客某天被網站的其中一篇文章吸引而來,他看完了文章,想要知道更多內容,有很高的機率會先點到網站的首頁,去看看這個網站還有提供什麼資訊,如果該網站的首頁很完整,有許多訪客想要了解的內容,訪客的下一個動作可能會是「將網站加入我的最愛」。這個時候,你就成功累積了一位會回流的潛在客戶。
3.如何設計靜態首頁
3-1.製作靜態首頁的時間點

依照你的網站內容豐富度,如果今天你是一位剛開始寫部落格的新手部落客,我會建議你先繼續努力的產出文章,並且依照我後面兩個步驟的說明,先規劃你應該優先要寫哪一些文章?在有目標的持續寫作後,過一段時間你的文章數量越來越完整了,同時你會發現靜態首頁的要素漸漸都達到了,這時再來設計你的靜態首頁。
3-2.構想你的目標客戶

設計靜態首頁時,你必須先構想你的目標客戶形象,以剛才的泰國網站來舉例,你的目標客戶族群可能是「想要去泰國自助旅遊,但不知道該如何規劃的旅客」,現在,請你將自己代入這個角色中:
「今天,我要去泰國自助旅遊,我最想知道的資訊有…」
後面的…就是你要呈現在靜態首頁的內容,請你拿出紙筆,列出一張清單,接著我們進行下一個步驟。
3-3.靜態首頁的六大要素

知道靜態首頁內容要放什麼後,以下我替你整理出一個靜態首頁至少應該要擁有最基本的六大要素,分別是網站名稱、主視覺/Logo、網站副標題、網站內容分類、CTA按鈕、如何聯絡作者。
請將以上項目確認好要放置的內容後,再來製作你的靜態首頁,當然你也可以依網站的特性不同來作更改,例如電商網站可能就需要列出熱賣商品區塊、或者是財商網站可以列出你最愛用的券商教學文等等。
一、網站名稱
靜態首頁的最上方,請放置你的網站名稱,加深訪客對網站的印象,讓他們能夠在未來透過搜尋網站名稱,就馬上回想起,並且透過Google搜尋找到你的網站。
所以網站名稱盡量簡潔,或者是好記、好念、順口、有意義等,甚至有些人到後期不滿意自己剛開始為網站取的名稱,都有可能會再更改,但如果能越早確定下來,會對Google搜尋引擎更有幫助。
二、主視覺/Logo
如果你能夠製作一個讓人印象深刻的網站主視覺圖像或者Logo,在一進入網站時讀者就能獲得非常持久的記憶點,它可以是一張照片、一個意象,能夠配合網站的主題製作,我相信都能為你的網站訪客帶來很不錯的圖像記憶。
三、網站副標題
副標題應該要是一句話,簡單明瞭的說明你的網站主題,讓讀者很快速的知道這個網站的重點,其實,我認為以上三點最好在每個頁面都可以看到,不論讀者用的是手機還是電腦,都可以在文章內看到,效果會是最好的。
綜合以上三點,我以本站來作舉例,給大家作為參考,不一定要和我一樣,最重要的是找到個人特色,呈現出你跟別人不一樣的地方。

四、網站內容分類
這部分你要將你的文章內容作整理,有點類似分類的概念,把他們分成好幾個大方向,用簡單扼要的方式呈現出你想要分享的訊息,這裡我以我的另一個網站-紐西蘭的小事記錄來作舉例:
因為是紐西蘭旅行為主的網站,所以我設想讀者最想要知道的內容分成幾個大項目,簽證、上網通話、交通、活動、機票、住宿等,讓想要來旅行的旅客,可以馬上知道他們在事前準備需要做好哪些作業跟動作。
五、CTA按鈕
CTA按鈕(Call to Action),是你用來引導讀者應該作的下一步動作,內容一樣是越直接明瞭越好,像是「開始來規畫你的行程吧!」或者是「讓我告訴你如何賺錢」等等,寫下一個連你自己看了都會想要點下去的文字內容,吸引讀者踏上閱讀網站的旅程。
六、如何聯絡作者
你如果能在網站上放上一點個人的自我介紹,以及該如何聯絡到你的方式,例如聯絡表單、電子信箱等,可以在讀者心中建立起對你的好感與信任感,是與讀者之間情感連結的方式之一,當然這個方法也能運用在文章底端,製作方法可以參考下列文章。
Stackable
外掛介紹

經過以上的前置作業,我想你對於自己的靜態首頁要放置什麼內容已經有一定的概念與想像了,這時候要來付諸行動,製作你的靜態頁面囉!
製作靜態頁面的方法很多,外掛Stackable是我個人在經過許多外掛跟主題的嘗試後,非常喜歡的一款古騰堡(Gutenberg)區塊製作外掛,它提供多樣化的區塊版面讓你使用,且版面是接近前端編輯器,你可以在編輯的同時直接看見網站之後會顯示的樣貌。
Stackable有分為付費版跟免費版,它在每一種區塊都提供了可免費使用的樣式直接套用,非常佛心,如果付費的話可以有更多種類型的樣式作使用,這部分就由大家自行斟酌。
Stackable vs DIVI vs Elementor

我在另一篇文章曾介紹過DIVI編輯器,DIVI編輯器的彈性更大,屬於更全面型的編輯器,適合用來設計整個網站。而大家比較熟悉的Elementor,我自己覺得優點只有中文這一點而已,大多數的區塊都需要付費才能使用。
這裡我提供給你一個比較表格,這三個編輯器都各有他們的優缺點,現階段我最愛用的是DIVI跟Stackable,如果你試用了他們過後有任何心得,都歡迎分享給我知道。
Stackable | DIVI | Elementor | |
適合網站 | 部落格、個人品牌設計 | 部落格、商業網站、個人品牌設計、電商網站、一頁式網站 | 部落格、商業網站、個人品牌設計、電商網站、一頁式網站 |
對象 | 部落客 | 部落客、網站設計師 | 部落客、網站設計師 |
設計頁面 | 適合設計單一頁面 | 適合設計整個網站 | 適合設計單一頁面 |
語言 | 英文 | 英文 | 中文、英文 |
預覽方式 | 僅電腦版 | 電腦版、平板版、手機版 | 電腦版、平板版、手機版 |
免費版 | 有 | 無 | 有 |
付費版 | 美金$35/年 | 美金$89/年 | 美金$49/年 |
如何安裝與使用

首先,到網站控制台後,選擇左側的外掛→安裝外掛,搜尋Stackable後,點擊右上角的立即安裝→啟用,安裝部分就完成了,接著看你要在文章內使用Stackable的區塊,或者是在頁面→新增頁面,開始製作你的靜態首頁。
點選文章或頁面編輯器的段落左側+號,就可以找到有個區域的標題是Stackable,在這裡你可以找到所有Stackable所提供的區塊。

區塊說明

Stackable提供的區塊並不複雜,如果不清楚它的意思,那就每一個都點開來試試看,你就會知道它的樣貌,以下我提供給你在製造區塊後,右手邊你會看到的功能列英文代表意義。
免費樣式
首先,你可以在右手邊Layout裡面找到Free免費選項,裡面會提供給你不用付費也可以使用的區塊樣式。

Style 樣式設定
在Style樣式中,你可以設定該區塊的內容,每個區塊這裡可以設定的東西都有點不太一樣,但大致上會有以下圖片這幾項,前面有藍色按鈕的項目,都是可以自由開啟或關閉的,一樣依照你個人喜好去嘗試著使用。
剛開始可能很陌生,但漸漸的你就會發現它們並不難也不複雜,使用起來很直覺。另外,要注意的是有些區塊的呈現並不適合在手機版上顯示,可以在此個別設定調整在手機上的顯示畫面。

Advanced 進階設定
在每一次確認網站時,最好要同時確認電腦版與手機版,以免讀者在使用手機閱讀時有障礙,或者有些不必要的內容,在這裡可以直接選擇不顯示於手機用戶。

製作網站範例
前面有提到過的紐西蘭的小事記錄,是我的另外一個網站,它的靜態首頁就是利用Stackable製作的,我自己個人目前很滿意它的效果,有一種紐西蘭的小事紀錄網站,終於完整的感覺。
結論
如果今天你想要一個不會太複雜的靜態首頁,需要跟訪客及使用者表達你的網站主題性,Stackable絕對是很棒的選擇之一,如果你要製作的是一整個網站的設計,那我會推薦你使用DIVI。
【WordPress】WPtouch手機版免費佈景主題,提升手機用戶體驗
相信使用Wordpress建站後,大家一定都有過助提選來選去就是沒找到適合的時期,Wordpress 有許多免費佈景主題雖然樣式好看,但當你套用到網站後,用手機一看卻慘不忍睹,偏偏現在是個人人都使用手機上網查資料的時代,有在使用Google analytics分析網站後台數據的人,更是能深深體會到手機版面的重要性。以我過去架設網站的經驗來看,通常手機版用戶會佔訪客的60%,另外30%則是電腦版用戶,剩下10%則是平版用戶。
這篇文章要教你如何使用免費的手機版主題外掛 WPtouch,從安裝到樣式設定,WPtouch 不僅可以讓你另外設定你的網站手機版畫面,且不必被原先的主題影響,在我個人用網站實驗過後,確實能有一定程度地提升手機版畫面載入速度,如果你也有手機版界面的困擾,請繼續看下去。
手機版主題外掛 - WPtouch
1.WPtouch介紹

WPtouch 專門以製作Wordpress的手機版主題聞名,它在Wordpress外掛介面上下載次數已超過10,000次, WPtouch 會將你的網站資料轉換成適合用手機閱讀的狀態,這麼做的優點除了介面美觀以外,最重要的是能夠提升使用者的體驗,進而優化網站的SEO,我想這是大多數Wordpress建站者最重視的部分,即使你不會撰寫程式語言,也沒有預算雇用一個網站工程師,也可以替你的網站打造出一個很不錯的手機介面。
2.安裝教學

WPtouch的安裝如同其他外掛一樣,進入網站的控制台後,點選左邊的功能列,選擇外掛→安裝外掛,接著在右邊的搜尋框搜尋WPtouch。找到後點擊立即安裝→啟用,就可以進入下一步囉。

3.一般設定

完成外掛安裝後,你會看到左邊功能列表出現了WPtouch,點進去畫面會出現外掛的基本設定頁面,這邊使用預設的設定即可,確認一下網站的名稱是否正確,或者有需要更改,可以按右上角的Preview Theme預覽畫面,可以看到目前你的手機版網站畫面。
4.樣式設定

然後我們點開左邊功能列的外觀→自訂,進到網站的樣式設定區,左上角的按鈕「Switch to Desktop/Mobile Version」讓你自由切換當下要調整的是手機版介面,或者是電腦版介面。
這裡的設定不難,唯一困擾就是還沒有中文化,但大家不用害怕!每一個選項都點開來玩一玩就對了,在你調整的同時,右手邊預覽畫面會即時出現更改後的樣式,以及右上角還可以將手機預覽畫面轉成橫向。全部選項都確認過一遍後,記得點選左上角的藍色按鈕「發佈」,將你辛苦完成的手機版主題設定儲存,接著就可以拿出手機欣賞你美麗的成果啦~
5.載入速度比較
前面介紹時提到過Wptouch可以提升整個網站的載入速度以及SEO優化,我自己拿了我個人的網站來做測試,雖然整體評分些微下降,但是在研究資料段落中,可以發現大多數的秒數都有縮短,且預覽的手機畫面出現內容的速度也加快了。
雖然並沒有到百分百完美,但我想這樣的效果以一個免費的外掛來說,已經是相當不錯的成績,如果你的網站手機用戶占比例相當高,那麼可以嘗試看看WPtouch外掛。
以下提供你Google Page Speed Insights這個網路工具,不過我要事先提醒,這個網站的分析僅供參考,大家不必因為它顯示出很低的分數或者數字就覺得焦慮或驚慌,我用它測試過Apple.com,行動版分數也是只有49分,但Apple的網站訪客數絕對是數一數二的。
延伸連結:Google Page Speed Insights 測試你的網頁速度
6.付費版本
如果你對於WPtouch有興趣的話,不妨可以參考看看它提供的付費版本,主題價格大約落在美金$15-50上下,對於Wordpress網站的深度使用者來說,它能夠提供更多樣化的手機版樣式以外,還有更多不同的額外功能,以下列出付費版本的優點:
- AMP for WPtouch:額外WPtouch加速器
- Basic Ads:自訂手機版的Google Ads廣告
- Advanced Type:自行安裝要使用的字體
- jQuery Enhanced:讓jQuery運行更加順暢快速
- Make Child Theme:額外打造孩童使用介面
- Mobile Content:設定僅顯示於手機版用戶的內容
- Multi-Ads:將廣告內容測試並且強化
- Power Pack:透過網站緩存調整、圖片壓縮、以及CDN支援改善頁面速度
- Related Posts:在文章下方顯示相關文章列表
- Web-App Mode:可讓Android用戶及Iphone用戶將你的網站加入到手機主畫面

如果這篇文章有幫助到你,或者是你有任何相關問題,都歡迎你在下方的留言區告訴我,每一個留言都是我寫文章的動力來源,謝謝你的閱讀。:)