WordPress 最有設計感又強大的主題 Divi 中文教學

WordPress 最有設計感又強大的主題 Divi 中文教學

建立 WordPress 網站之後,你需要一套好用的主題再搭配頁面編輯器來設計你的 WordPress 頁面。推薦這一款整合了主題 Theme 和編輯器 Builder 功能,我用它來架設我的部落格,不論是設計、功能、介面我都覺得滿意的 Elegant Divi 主題!
Divi 官網

要使用 Divi 需先架設 WordPress 網站,如還未有網站請參考 WordPress 教學網,從主機推薦中選擇一個架設:WordPress 中文教學網

從這個連結可以得到 Divi 9 折優惠!!

Divi 折扣優惠傳送門 ?

(優惠從點入開始倒數 24 小時內有效,超過後將回復一般無特惠價格。)

(如超過 24 小時,請在連結上右鍵 -> 在無痕式視窗中開啟連結,應該會重新看到優惠!)

Divi 購買版本 終生版 選擇
如果想購買一年授權 (可用再無限網站) 試試,請購買左邊的,右邊的是多一些雲端 AI 等服務,價格高之外目前也不太實用,我自己也是左邊的版本,不過是終生版。
Divi 購買版本 終生版 選擇
我購買的就是左邊的頁面編輯器終生版版本,已經購入五年了持續使用中,換算下來非常划算。

內容索引

關於 Divi

Divi 是什麼?

Divi 是 WordPress 的主題 + 頁面編輯器,主題是 WordPress 網站快速套用的樣式外觀、頁面編輯器則是用來讓你快速設計頁面的工具!透過頁面編輯器,就算不會寫程式,也能透過圖形化介面輕易的設計 WordPress 網頁。

Divi Theme 有什麼優勢?

我認為 Divi 最大優勢是整合了編輯器和 Theme 本身,像 Elementor 等其他編輯器,需額外搭配 Astra、OceanWP 等主題。Divi 則直接提供了主題和頁面編輯器兩大功能!且由同一間公司所開發製作,整合性、互補性,更是能完美搭配。

Divi 比 Elementor 便宜?

如果只用在「一個網站」Elementor 的 $49/年 似乎比 Divi 的 $79/年便宜,但 Elementor 還需額外搭配 Astra ($59/年) 等主題,算起來還更貴!Divi 我是直接買終生授權,不論用在幾個網站上,年復一年都不需要再額外付費!

用 Divi 就可以輕易設計網站嗎?

Divi 讓架站變得更加容易,但你還是需要花時間學習,例如看完本篇文章、練習其中的步驟、教學影片,不斷摸索後必定能越加得心應手,很多不會程式的人在熟練 Divi 或是 Elementor 這類頁面編輯器後,就開始接洽網站案件呢!

Divi 是最好的 WordPress 頁面編輯器嗎?

不是。但沒有任何一套稱得上是!要看用途而定,近年火紅而我自己也實際用過的編輯器心得:

其中唯有 Divi 自行整合了 Theme 加編輯器,使用起來更加一致!不過 Elementor 的強大也令我印象深刻,而 Brizy 的開發速度則更快、更適合 One Page 的一頁式網站使用。

 

兩分鐘影片先快速了解,Divi 的強大威力!

90秒影片,快速瞭解 Divi 強大的威力。

Divi 官網

完整 Divi 套版編輯 & 修改教學

如有不懂之處,建議可以看完下方第六章的圖文解說後,會更加清楚 Divi 的邏輯應用喔!

 

2022最新從頭教起的教學,更適合新手第一次的 Divi 學習!

前往 2022 Divi 文章

購買並下載 Divi

首先我們到 Divi 的官網 elegant 來,點擊右上角的 PRICING 按鈕,查看 Divi 的價格。

Divi 官網

繁體中文 Divi Theme 使用教學 註冊 elegant

 

Divi 價格

可以看到現在 Divi 的售價為:

  • $89 / 年(約為 2,700元新台幣)
  • $249 / 終生 (約為7,500元新台幣)

兩個 Divi 方案都可以用在無限個 WordPress 網站上,差異只在於一個是終生,一個時間只有一年。可以考慮自己的用途之後決定購買哪個方案,我自己因為常常架設網站,偶爾也會幫別人架設網站,因此是直接購買終生的。

從這個連結可以得到 Divi 9 折優惠!!

Divi 9折優惠傳送門 ?

(不確定優惠是否有期限,如果失效表示此期間無特惠,只能用一般價格購買)

Divi 只買一年,主題過期會怎樣嗎?

網站依舊可以使用,但 Divi 主題以及頁面編輯器將無法再繼續更新、也不能再使用 Divi 的快速套用範例頁面功能。但如果你的網站是做好了就不再變動的,影響就不大,主題一年半載不更新也不會怎樣。

不過我覺得 Divi 團隊真的很用心在維護和更新 Divi,這陣子又收到他們重構了整個 Divi 架構,即將推出 Divi 5,使用方式跟介面完全跟 4 相同,所以不用重新學習,但是整個主題會變更輕量、程式更快!速度直接往上提升!
加上 Divi 不會因為換代就須重新購買序號(很多軟體商雖然可以買斷、但只限該版本),我從 Divi 3 就購買到現在 4 代了,依然可以免費持續使用和更新,相信未來更新到 5 代也是免費升級!有點像是一次性免費加入終生會員的概念!

繁體中文 Divi Theme 購買方案選擇

註冊與結帳

選好 Divi 方案後就會進入 註冊/結帳 的頁面,在右邊輸入相關資訊即可完成 Divi 的主題購買。

如果不知道英文名或是英文地址可以參考下方兩個網站:
外文姓名中翻英系統

郵局地址中翻英系統

繁體中文 Divi Theme 購買方案選擇

下載 DIVI THEME

Divi 官網
註冊好後就可以下載 Divi 了,你會發現有兩個選項可以下載,左邊是主題 Theme + 頁面編輯器 Page Builder 綁在一起的 Divi Theme,右邊則是單獨頁面編輯器,我們下載左邊的 Divi Theme。(下載好後不需要解壓縮)

從這個連結可以得到 Divi 9 折優惠!!

Divi 9折優惠傳送門 ?

(不確定優惠是否有期限,如果失效表示此期間無特惠,只能用一般價格購買)

繁體中文 Divi Theme 下載

安裝與中文化 Divi 佈景主題

安裝 Divi Theme

到 WordPress 的後台,左邊選單「外觀」 -> 「佈景主題」

你會看到以下畫面,點選「安裝佈景主題」,然後再下個畫面再點選「上傳佈景主題」。

繁體中文 Divi Theme 安裝教學 繁體中文 Divi Theme 主題安裝教學

接著將剛剛我們從 Elegant 下載來的 Divi 檔案(不要解壓縮)拖曳,拉到如下畫面指示的框框中,或是用選擇檔案的自行選擇也可以,接著按下立即安裝。

繁體中文 Divi Theme 主題安裝教學

Divi 佈景主題安裝好後按下「啟用」選項!

繁體中文 Divi Theme 主題安裝教學

安裝好 Divi 後,WordPress 後台的左邊選單,會多出一個 Divi 的選項,我們點進 Theme Options 會發現都是英文的介面,因此接下來我們要進行中文化!

繁體中文 Divi Theme 中文子主題安裝教學

中文化 Divi

首先到此篇文章去下載 Divi 中文化的子主題檔案。下載後一樣不需要解壓縮。

繁體中文 Divi Theme 中文子主題下載
下載 Divi 的繁體中文佈景子主題

接著跟上面一樣步驟,我們到佈景主題中去點選「上傳佈景主題」,接著把剛剛下載下來的子主題拖曳丟入框框之中按下立即安裝。

繁體中文 Divi Theme 中文子主題安裝教學
拖曳丟入安裝 Divi 中文主題

這邊一樣按下立即啟用 Divi 的繁體中文子主題。

繁體中文 Divi Theme 中文子主題安裝教學

 

繁體中文 Divi Theme 中文子主題安裝教學
可以看到 Divi 繁體中文子主題已經啟用。
繁體中文子主題需附掛在原始主題上才能運作,因此請不要移除掉原始版本的 Divi!

啟用完整主題功能

再回到 Divi 選項,會發現介面已經中文化,這時候選上面最右邊的頁籤「更新」,我們要做 License 購買的認證,才能使用 Divi 主題的完整功能。

繁體中文 Divi Theme 中文子主題安裝教學
中文化 Divi 後,操作介面變為繁體中文
WordPress 繁體中文 Divi Theme 啟用 Divi
切換到「更新」會發現用戶名和金鑰都未輸入,未啟用的狀況下 Divi 功能將被限制

 

回到 Elegant Divi 的網頁,登入的狀態下,右上角綠色按鈕的左邊有一個 ACCOUNT,選擇 USERNAME & API KEY。

WordPress 繁體中文 Divi Theme 啟用 Divi

在此頁可以找到你的用戶名、API KEY,將它們複製貼回 WordPress 後台的 Divi 設定頁面之中。

WordPress 繁體中文 Divi Theme 啟用 Divi

貼上官網取得的 Divi 用戶名、API金鑰之後,按下保存改動,如果沒跳出錯誤,就代表已經成功啟用了!

WordPress 繁體中文 Divi Theme 啟用 Divi

這時我們回到 WordPress 前台,就可以看到我們網站已經套用了 Divi 的主題,目前呈現的是最基礎的預設樣式。接著我們來將預設的 DIVI Logo 置換成我們自己的 Logo。

如果沒有圖檔,可以先下載練習用的圖檔:
點擊下載素材

WordPress 繁體中文 Divi Theme 使用教學

回到後台 Divi 的主題選項,最上面的「標誌」就是網站 LOGO 的意思,我們可以按下上傳按鈕來上傳我們自己的品牌標誌。

WordPress 繁體中文 Divi Theme 使用教學

按下保存後,再回到前台觀看,就可以看到 Logo 已經換成我們自己的了!

WordPress 繁體中文 Divi Theme 使用教學

 

Divi Builder 佈局操作方式

接著來到重頭戲,Divi 強大的頁面建構器,第一次看可能會覺得複雜,但沒關係,我會將步驟拆的較細,只要理解佈局方式,其餘的多摸索自然就會了!

跟著步驟做,加上自己實際操作去習慣 Divi 編輯器,如果可以的話⋯再花一點時間看文尾的套版示範教學影片,影片濃縮精華拍的簡短扼要!很快大致就會明白 Divi 這套編輯器嘍!

如果是新手這邊的教學建議可以跟著做,如果網站已經在營運中,怕影響網站的,只要不將做好的頁面發佈即可,過程都可以跟著實作,然後用預覽的方式觀看成果。

用 Divi 建立新的頁面

一樣到 WordPress 後台,「頁面」 -> 「新增頁面」。就會看到如下畫面,我們選擇「使用 Divi Builder」

 

WordPress 繁體中文 Divi Theme 使用教學

 

WordPress 繁體中文 Divi Theme 使用教學
第一次使用 Divi 會彈出此畫面,選左邊開始建構即可。

 

這邊會彈出三個選項,問你這次新增頁面想用什麼方式,中間「選擇佈局」是讓你選擇現有的頁面設計範本,可以直接套版再做修改,但在你明白 Divi 基本規則之前,直接套用可能也不知道怎麼修改。因此我們先選擇左邊的「從頭開始建構」。

WordPress 繁體中文 Divi 編輯器 使用教學

觀察頁面的佈局分配

為了更充分的理解 Divi 的排版,我們以我的部落格當範本,來做實際的練習!觀察一下如何用 Divi 打造下面這個頁面?

觀察頁面的排版分配、切版左右比例

首先我們要打造上面有 Banner 那排,因此我們看一下它的比例分配,大約是左 3 右 7。因此我們找一個相近的佈局選擇。

WordPress 繁體中文 Divi 編輯器 使用教學

再選擇了這個左3右7 的佈局後,就出現了一個綠色框框,綠色框中間有一條灰色的線,正是切割了這個框框的意思。而框框一分為二就變成兩個空間,可以用來放網頁的資料、Divi 元件。

WordPress 繁體中文 Divi 編輯器 使用教學

Divi 排版的單位認識

再注意一下,畫面上的框框有分為:藍色、綠色、黑色。這些框框各代表什麼意思?

區塊 Section
藍色框框,用來區分頁面中一段一段不同定位的段落,像是表頭 Banner 是一個區塊、內容文章區是一個區塊,表尾聯絡資訊又是一個區塊。實際使用上可隨意依照需求區分。
一行 Row
綠色框框,大區塊由藍色區塊區分後,接著由綠色的 Row 來劃分網頁中的一行一行,如步驟所見,會將一行以等份切分,分別用來裝置其他網頁元件 Module,一個區塊 Section 之中可以有多個行 Row。
元件 Module
黑色圓圈,單個網頁元件,有可能是圖片、文字、圖標、表格或是功能更複雜的商品、表單、文章列表等。

如果有點矇懂,沒關係,接著我們繼續看案例,邊看你會更了解這些框框的用法。

 

持續排版、佈局版面區塊

繼續將我的部落格頁面往下拉,接著我要佈局中間這個區塊,一樣先看好幾欄?2欄!左右分邊是多少比例?大概7:3。

WordPress 繁體中文 Divi 編輯器 使用教學

我們再回到頁面的編輯畫面,因為上方我認為「上方 Banner 區塊」自成一個「段落 Section」,「中間內容區塊」該是另一個「段落 Section」,因此我先新增一個藍色大框框。

找到畫面中的藍色框框下的「加號圓圈」,點擊後會彈出這個面板,我們先選擇最左邊的「標準」。

 

Divi 編輯器 排版佈局教學 插入新的段落 Section

選擇標準後,就會自動內建一個綠色框框 (行 Row),並問我們要怎麼區分這個「行 Row」,我們依照上面得來的結果「兩欄、7:3等分」,選了如畫面中的切分方式。

Divi 編輯器 中文教學 如何佈局?

於是就跑出如下畫面,畫面上被我們區分好了好幾個區塊,正待我們將「黑色的元件」擺放進去呢!基本上這就是網頁的設計方式,不論是不是 Divi 都是以這個方式來做佈局規劃。

Divi 編輯器 中文教學 如何佈局?

佈局排版 3

為了讓大家更明白,我們再將部落格往下再拉,看到下方的這個區塊,我們要把它再規劃進去,一樣兩欄、這次 6:4 分邊。
Divi 編輯器 中文教學 如何佈局?

這次我們不再新增一個新的段落 Section,因為我認為這兩個都算是內容文章區域,不需分成兩個段落。所以就在本來「段落 Section」中的綠色框框下面、再放一個綠色的「行 Row」,找到綠色框框下方的加號圓圈,點擊添加新行。

Divi 編輯器 中文教學 如何佈局?

Divi 編輯器 中文教學 如何佈局? 編排版面

開始設計頁面!在版面放入 Divi 元件

Divi 佈局的方式你已經大致懂了,接著我們要在這些我們規劃好的位置,開始放入 Divi 的「元件 Module」,我們從左上的位置開始新增,在黑色的加號圓圈上點擊下去「添加新模組」。

Divi 編輯器 中文教學 如何佈局? 編排版面

點擊下去後,會跑出下圖這個 Divi 的元件選單,從這個選單中找到「文字」,並且點按選取。

Divi 編輯器 中文教學 如何佈局? 編排版面

 

選取「文字元件」後,就在那個位置自動插入了文字,並會彈出一個視窗,我們可以透過這個彈窗來修改調整此文字元件。

Divi 編輯器 中文教學
元件的彈窗和內容是相呼應的,上方可以拖曳視窗到想放的位置

Divi 編輯視窗:內容與設計

每個元件的彈窗都是如此規劃,分為內容、設計、進階(高級)。

Divi 編輯器 中文教學 如何佈局? 編排版面
上方很多選項,就像一般文字編輯器一樣,可以粗體、對齊、項目符號等

 

Divi 編輯器 中文教學 如何佈局? 編排版面
因為造九頑五算是大標,這裡我們將此文字設定為 Heading 2,也就是 H2 的意思

 

 

接著我們將文字設置的視窗切換到「設計」這個頁籤,依字面意思,內容是管元件所呈現的實際內容,設計指的就是該元件的外觀、樣貌、設計等事項。

切換到設計後,它會將「文字元件」所能調整的外觀選項都列出來。這邊要注意的是,我們剛剛將文字指定為「標題 H2」所以我們要修改該文字,就要選擇下圖的副標題文字。

Divi 編輯器 中文教學

打開副標題文字後,我們還需指定修改 H2 的樣式,這樣才會對我們的文字生效!

Divi 編輯器 中文教學

 

接著我們就可以調整我們文字的顏色、大小、文字間距、行高等屬性。最後按下右下角的確認,表示儲存本次修改。

Divi 編輯器 中文教學 編輯網頁元件內容

Divi 編輯視窗:儲存與關閉

修改好後我們可以按下右下角的打勾符號來儲存變更,並將視窗關閉。其他功能說明如下:

Divi 編輯器 修改元件視窗說明

如果要重新打開 Divi 的元件編輯視窗,只需在想修改的元件上(記得元件的框框顏色為黑色),點擊齒輪就會重新打開編輯視窗。

Divi 編輯器 修改元件方法 設置

一個區塊多個元件:元件下方再新增元件

接著我們在大標題下方,要在新增一個「文字元件」,要在元件下方新增元件,就是在它的黑色框框上點擊加號圓圈。

編輯 Divi 時,會遇如下圖被遮住的狀況,只要照上面觀念搞懂各顏色框框代表的意義,正確點選即可。(真的點不到時,下面有教方法)

Divi 編輯器 中文教學 編輯網頁元件內容

加入第二行文字元件,一樣先編輯呈現內容。

Divi 編輯器 中文教學 編輯網頁元件內容

接著切換到「設計」來編輯樣式,這次因為不是標題文字,選擇修改「文字」而非「副標題文字」。

Divi 編輯器 中文教學 編輯網頁元件內容

新增 Divi 按鈕元件

接著在網站專家文字 Module 下方,再添加一個新的 Module。

Divi 中文化編輯器 教學 設計網頁元件樣式

這次我們找到「按鈕」這個元件,點擊新增。

Divi 中文化編輯器 教學 設計網頁元件樣式

一樣先修改呈現的內容文字,可以見到「按鈕元件」和「文字元件」編輯的選項稍微不同,但只要了解呈現內容在內容頁籤、樣式設計在設計即可。

Divi 中文化編輯器 教學 設計網頁元件樣式

在佈局框框加入背景色:行 Row 的設定

現在頁面跟我的部落格首頁已經有 87% 像(回去看一下部落格首頁),接著我們來為它加入背景色彩。

這時你要思考的是,背景色要加在哪裡?首先我們觀察一下 Divi 的佈局,如果是整塊的大背景色,那就找藍色框框:段落 Section,而我們要加的是綠色框框:行 Row 的右邊切割部分。

那我們就在綠色框框上的選項,選擇齒輪(行設定)。

Divi 中文化編輯器 教學 設計網頁元件樣式

 

按下齒輪(行設定)按鈕後,會看到左圖視窗,上面列結構是我們選擇的行切割比例,這邊也可再做修改。下面有兩個列,我們要修改左邊那列,算來是第一列,因此在第一個列的齒輪上,再次按下設定。

接著視窗就會變為右圖畫面,上面寫著是「列 Col」設置,在 Divi 中「背景色也算是內容的呈現」,因此並不歸在設計中,而是內容中,我們點擊加號圓圈,即可修改背景色彩。

Divi 中文化編輯器 教學 設計網頁元件樣式
Divi 中文化編輯器教學 修改版面設計

指定色彩後,左邊的框框就有了背景色彩,但也會發現問題,就是我們三個元件都緊靠在邊緣。

Divi 中文化編輯器教學 修改版面設計

不要讓元件擠在一塊!設定元素與元素間的距離

繼續「列 Col」的編輯,我們將頁籤切換到「設計」,找到「間距」點擊打開折疊面板,這邊會看到區分為四格,分別是「上、下、左、右」的「內邊距」。

在上邊距、下邊距都輸入 50px,就會發現上下被我們撐開了!

Divi 中文化編輯器教學 修改版面設計

將各個元件設定置中對齊

接著我們要將所有元素置中對齊,剛剛步驟的「列 Col」修改記得按下打勾儲存。然後重新回去「文字元件」,一樣在黑色框框上按下齒輪,重新打開設定視窗,文字的置中在編輯器中就能找到。下方的「網站的專家」元件也請同樣置中對齊。

Divi 中文化編輯器教學 修改版面設計

按鈕的部分則是在外觀樣式的「設計」之中,有一個對齊選項:選擇中間的置中對齊符號。

Divi 中文化編輯器教學 修改版面設計

新增右邊的 Banner 圖片

接著在右邊的 Module 加號圓圈上點擊:新增 Divi 模組元件。
Divi 中文化編輯器教學 修改版面設計

這次我們找到「圖像」元件,如果有時眼花撩亂找不到,可以直接在上面搜尋恇輸入文字篩選較快。

Divi 中文化編輯器教學 修改版面設計

圖片當然是「呈現」的內容,因此在「內容區塊」就能找到設定,點擊預設的圖片,就會進入圖片的選擇,上傳並指定圖檔。

這邊提供一些圖檔讓大家練習時使用:

點擊下載素材

Divi 中文化編輯器教學 修改版面設計

調整 Divi 佈局間的空隙:行 Rows

新增完圖檔後,會發現跟我們想要的樣貌不太一樣,主要是 Divi 的「行 Row 排版」中,預設會在列與列之間留空隙,既然是「行」的問題,我們找到綠色框框,並按下「齒輪:設定」。

WordPress Divi編輯器 使用教學

我們在「行設定」中,頁籤切換到「設計」,找到「調整大小」,將排水溝寬度?(翻譯問題)、平衡列高度的開關都切換為「是」,列間距則將數值調整到最小的 1。

WordPress Divi編輯器 使用教學

讓版面更好看:微調各元素的間距

接著調整左邊元件,讓他們看起來不會偏上方,觀察一下如果要調整讓他們垂直置中要調整哪邊?

首先我們可以調整「造九頑五」的上方邊距,其他的自然會一起被擠下去。因此我們打開造九的文字設定,將外邊距的「上邊距」設定為 70px。

WordPress Divi編輯器 使用教學

接著三個元素太過壅擠,這時候要調整哪一個可以調整最少次?

我們只需為中間的元素增加上、下邊距,就可以達到此目的!一樣打開該文字設定,來設置邊距。

WordPress Divi編輯器 使用教學

這時我們的頭部畫面是不是就大致成形了。再來調整一些細節部分,我們觀察 Banner 區域和頂部的 LOGO 選單區域分隔太遠!

WordPress Divi編輯器 使用教學

調整 Divi 佈局間的空隙:段落 Section

大區域與大區域之間,通常是由「段落 Section」來負責,我們移動到藍色框框上面,發現上面有藍色的淺影。這也是 Divi 預設會有的邊距。

怎麼調整?一樣我們可以點進去藍色的齒輪設定中,去調整上邊距。又或者 Divi 支援拖曳調整。

在我畫面中用紅色畫圈的藍色淺影部位,按著滑鼠左鍵往上、往下滑動,就可以即時的調整這個邊距。

WordPress Divi編輯器 使用教學

WordPress Divi編輯器 使用教學
將 Divi 段落Section 的上邊距往上拉至 0px

新增 Blog 文章列表

再回去觀察一下我的部落格首頁,在中間的部分我們要新增部落格文章。我們一樣在挖好的 Divi 排版中,按下加號「插入元件 Module」,這次找到「博客 Blog」。

WordPress Divi編輯器 使用教學

如下畫面已經插入 Divi 的「Blog 元件」,但奇怪怎麼長這樣?Blog 元件會呈現文章列表,且能勾選設定呈現圖片加文字,就如同我的部落格首頁那樣。

但因為此網站是新的,裡面除了「網站第一篇文章」沒任何其他文章。且這篇文章也沒設定圖片。因此才會只有一篇文章。

假如你的網站已經有很多文章,或是你開始寫一些文章,這邊的呈現就會較豐富。

因此四年前我開始寫部落格時,先寫了五篇文章後,才把部落格正式開放上線,就是為了不要讓首頁看起來很空虛。

WordPress Divi編輯器 使用教學

新增個人介紹元件

接著我們在右手邊,新增一個「人員元件」。

WordPress Divi編輯器 使用教學

修改一下人員的呈現內容,並且上傳一張照片。

WordPress Divi編輯器 使用教學 WordPress Divi編輯器 使用教學

切換為恇線排版檢視模式

左下方的此「排版呈現」選項,可以切換成 Divi 的排版檢視模式,這邊我們就能清楚看到藍色框框(段落)包覆綠色框框(行)、而綠色框框又裝著黑色的 Divi 網頁元件。

有時在 Visual Page Builder 視覺化編輯器上,會發生區域被擋住,不好點擊修改的狀況。我們只需要切換到此 Divi 排版佈局總覽,就能輕易點擊到各區域的「齒輪設定」、「加號新增元件」等。

WordPress Divi編輯器 使用教學

保存並發表頁面

下方按鈕通常會隱藏起來,需要點擊中間的紫色 […] 符號才會展開,按下右下角的「保存/發表」來完成編輯。

如果只是練習,不想要這頁被外界看到,那就按下儲存草稿即可。

WordPress Divi編輯器 使用教學

 

 

將 Divi 製作好的頁面設定為首頁

使用 Divi 設定首頁

如果你現在去看首頁,還是一開始預設的那個簡約的頁面,我們到後台 Divi 選項中,找到並點擊主題定制。

Elegant Divi Theme 編輯器使用教學

接著會跳到如下的 WordPress 主題設定頁面,在選項中找到「首頁設定」。

Elegant Divi Theme 編輯器使用教學

進入 WordPress「首頁設定」後,先勾選「靜態頁面」接著在靜態首頁的下拉選項,選擇我們剛剛設計的頁面,再按下「發佈」,這樣首頁就會變成我們新設計的頁面了。

Elegant Divi Theme 編輯器使用教學

 

如果在此位置找不到首頁選項,請參考此篇文章:

如何更改 WordPress 首頁?簡單三步驟

Divi:使用版型範本快速設計網站

Divi 等頁面編輯器還有一個很大的優勢就是,內建了非常多的設計範本,可以馬上套用,並用上述所學的基礎去對範本進行修改。

不要從頭開始建構網頁,從設計好的頁面來做修改

我會建議新手採用這個方式,除非你有明確的規劃、設計的底子。否則從現有版型中挑選出適合的,再進行修改會比較適合初學者!上述的基礎也沒白學,因為那都是接下來要修改網頁範本很重要的觀念!

 

這次我們快一點:使用 Divi 頁面範本

一樣新增頁面,選擇使用 Divi Builder。

Elegant Divi Theme 編輯器使用教學

這次我們選擇中間的選項「選擇佈局」。

 

Elegant Divi Theme 編輯器使用教學

這邊你就會看到 Divi 所有的佈局範本,總共有 211 套不同風格範本、每種範本中又有數種不同頁面排版、算起來總共有 1554 個頁面排版可以選擇套版。

Elegant Divi Theme 快速套用版型 套用範本 做網站教學

我們點進畫面中黃色的這個範本,可以看到右方又分很多不同頁面的排版,有部落格 Blog、關於我們 About、Contact 聯絡我們甚至 Landing Page 的版型可以套用。

藍色按鈕可以線上瀏覽該版型的實際的頁面,可以觀察它的呈現和動態效果。綠色按鈕則是確定套用此頁面。

我們選擇 Landing Page 並按下綠色按鈕套用。

Elegant Divi Theme 快速套用版型 套用範本 做網站教學

編輯 Divi 範本頁面

套用後你的編輯器就會載入該 Divi 頁面範本,滑動到各個元素上點按,就可以看到你上面所學熟悉的框框元件們,只需運用上面所學的知識,就能輕易地將這些英文、元素、編輯成我們的官方網站。

Elegant Divi Theme 快速套用版型 套用範本 做網站教學

這邊我編輯它的大標文字,這邊要注意的是,它是一個文字元件塞了兩行字,並且分別設定了不同的顏色。

Elegant Divi Theme 快速套用版型 套用範本 做網站教學

接著我們來修改中間的區塊,一樣在該元件上的黑色框框點擊齒輪,來進行內容以及樣式的修改。

Elegant Divi Theme 快速套用版型 套用範本 做網站教學

它這整套是 Divi 做好的元件,icon 搭配標題再搭配文字說明,因此在該元件的設定中就可以修改到這三個內容,我將標題和文字修改好後,並選擇我想要呈現的圖標。

Elegant Divi Theme 快速套用版型 套用範本 做網站教學

 

更多 Divi 套版教學示範影片

影片都不長,如果你看到這邊請務必看影片加強整體記憶,並且影片多了「複製模組樣式」的應用、以及修改範本背景顏色。

快速打造「高質感公司形象首頁」

套用!修改!完成高質感公司形象首頁就是這麼容易!

打造好頁面後,記得將頁面設定為首頁,如果不會請參考:如何更改 WordPress 首頁?簡單三步驟

八分鐘建立「網站部落格」

從建立過程中,學習 Divi 建構、與改動頁面的技巧!

Divi 網站字型設定

最後網站要有質感,別忘了設定字型。因此我們最後要來做字型的設定。

Divi 可以很容易的導入 Google 的字體,快速提升網站的質感!

 

到 Divi 的主題選項,第一個頁面拉到最下方會看到自訂 CSS,在框框中輸入下面程式碼:

Divi 編輯器 如何修改網頁字型 Google 字體

 

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
body, p, span{
font-family: 'Lato','Noto Sans TC','PingFang TC',"SF Pro TC",'Helvetica Neue', 'Helvetica','arial','Microsoft JhengHei',sans-serif; 
}
h1,h2,h3,h4,h5,h6{
font-family: 'Lato','Noto Sans TC','PingFang TC',"SF Pro TC",'Helvetica Neue', 'Helvetica','arial','Microsoft JhengHei',sans-serif;
font-weight: bold; font-weight: 700; 
}

 

這也是本部落格網站所用的字型設定參數!請複製起來貼到 CSS 中,記得最後按下保存改動,再回到前台就可以看到漂亮字型。(有裝快取外掛的話,修改完可能要清一下快取)。

 

在這裡,你不會被廣告打擾,所有的學習內容都是免費的。
如果這讓你感到滿意,一杯咖啡能讓我們走得更遠。

請 Perry 喝杯咖啡
上一篇Bluehost 架設 WordPress 完整手把手教學(含影片) 下一篇效能CP值兼具!Cloudways主機架設WordPress網站教學