嗨囉，我是設計師 Riven 🙂
今天這篇教學會延續上一篇文章所推薦的 Divi Theme WordPress 佈景主題，並在網站上來試著用 UI 介面的設計方式來進行實作，我們可以藉此來理解基本的網頁設計邏輯。
Divi Theme 的功能非常強大，不過在製作時，仍需要操作者本身對於設計有一定美感或對於架站有經驗，才能創造很實用又美觀的網站。
最近我開設了一堂線上課程 -【建立影響力最好的時代｜運用設計思考打造 WordPress 網站】，會從使用者的角度發想，帶著你打造出成功的網站。
點擊右方連結，了解完整 WordPress 課程 ➢ http://go.sat.cool/3emm3u
安裝佈景主題
購買完 Divi Theme 後，我們可以在 MY DOWNLOADS 頁面看到可以使用的佈景主題與相關資源，但剛開始只要選擇左上角的紫色 DIVI THEME 的部分來用就可以了。
點擊紫色的按鈕 (DOWNLOAD THE DIVI THEME) 來下載佈景主題
接著回到 WordPress 主控台，在 外觀 > 安裝佈景主題 > 上傳佈景主題 處選擇剛下載的 Divi.zip 檔案，並按下立即安裝。
上傳檔案後稍等片刻即可。
啟用！
完成佈景主題安裝！
認識基本元件模組
而緊接著，我們就可以來搭建網頁囉！先來在 WordPress 主控台的 頁面 選擇 新增頁面，所謂的頁面在這裡指的就是網頁的意思。
而因為我們有購買付費的佈景主題的關係，可以直接跳過內建的 WordPress 頁面編輯器，選擇尊絕不凡的紫色按鈕 Use Divi Builder。
此處有三種建立頁面（網頁的方式）由左而右分別是：從頭開始製作、使用現成版型、複製現有頁面。
我們這邊先選擇左邊藍色的 Start Building，從空白頁面開始製作，來熟悉一下 Divi 的網頁設計模組有哪些可以用。
然後要選擇的是 Row 的佈局，簡單來說就是將網頁（橫向）做幾等分的切割，可以先暫選第一個就好，之後都還可以隨時進行調整。
接著會看到的就是 Divi Theme 裡面的模組化元件，我們可以用這些來搭建想做的網頁，可以視為組成頁面的最小單位，可以好好探索玩玩看～
可以直接搜尋關鍵字來找比較快～
而其實綜觀網頁的發展歷史，不難發現其實即便到了現在，網頁的都還是主要由 文字 + 圖片 來構成，並用各種巧妙搭配與創意安排來做出排版與視覺效果。
文字 Text
文字應該是網頁上最基礎也最重要的元件了，透過 Text 模組可以放上文字並進行編輯，不得不稱讚一下 Divi 在模組編輯做的真的是非常好，幾乎是所有 WordPress 佈景主題當中最好用的了！
在 Content 面板可以更換文字內容
在 Design 面板可以調整文字大小、顏色跟字距、行距等等。
圖片 Image
除了文字以外，網頁的組成另一個重要元素就是圖片了，透過上傳到 WordPress 媒體庫的圖片，可以來豐富我們的網頁～
可以點選畫面上灰色的 + 按鈕，來新增模組。
可以直接上傳圖片來置換。
套用預設網頁版型
而大概理解了 Divi Theme 元件模組的使用後，我們可以直接來套個已經做好的網頁模板，除了比較能夠清楚完整網頁的架構，也能比較快有製作網頁的成就感～
我們從畫面底端的紫色（⋯）按鈕展開 Divi 控制列。
然後選擇 + 號，就可以看到 Divi 做好的預設版型。
在這邊任意點選一個預設版型網頁，就可以進去看到許多頁面可以選擇，而每一個都是可以直接套用進來我們網頁的。
這邊以 Web Agency Landing Page 為例。
這邊要先輸入購買 Divi 購買得到的帳號名稱與序號
序號在這邊：https://www.elegantthemes.com/members-area/api （要登入）
接著就會開始安裝了～
所見即所得編輯器
這樣看起來就是完整的網頁了，接下來就是將文字、圖片等等換成自己要的，就可以快速完成一份網頁了。
套用預設版型網頁完成！
不過這邊要跟大家講一下上圖中的巢狀結構，先理解這個概念之後會好做很多！
Divi 的頁面結構基本分成最外面的藍色 Section，裡面包裹著綠色 Row，在裡面會包裹著灰色的 Module，一層包著一層。
而裡面所有的模組(Module)都可以進行修改文字、調整樣式等設定，同還也還能夠直接拖曳排版，還有進行複製與刪除等操作。
而且我們也可以直接用滑鼠去變更介面上的間距，來讓網頁的留白空間達到和諧的狀態。
而一開始操作 WordPress 佈景主題，建議可以直接從這樣具備高度彈性的的預設模板去修改，並在調整的過程中，就會對這套主題愈來愈熟悉。
剛開始用肯定都會卡卡的，但我覺得 Divi 這套已經是很好上手的了～
響應式的設計調整
而在電腦上編輯頁面，雖然使用 Divi 新增元件與調整外觀很方便，但是仍要注意在製作網站的時候，除了以現在正在使用的電腦當作基準外，也要注意其他尺寸裝置的瀏覽體驗，不然會容易造成用較大的電腦螢幕、用較小尺寸的手機或平板的時候，偶爾會出現跑版或顯示異常等等的狀況，這在 UI 設計裡的術語叫 RWD 響應式網頁設計（Responsive Web Design）。
那在 Divi Theme 主題裡面該怎麼處理不同尺寸的網頁編輯呢？相當簡單！只要在左下角的裝置 icon 按一下就可以切換用不同裝置的視角來直接進行調整。
平板大小的觀看尺寸
而上面分別有電腦、平板與手機三個主要裝置為設定基準，我們在分別設定排版與樣式後，這個網站會自動在中間過度的尺寸安排響應變化，以應變現在日趨多樣的螢幕裝置瀏覽。
手機大小的觀看尺寸
比較建議的做法是，先以電腦版進行內容與排版的編輯，然後來回檢查平板與手機的狀況，如此一來可以盡可能地確保在任何裝置顯示下都安全無虞。
✅ 給個小訣竅
好啦，這樣就是在 WordPress 上進行網頁設計的基本技巧，其實還有很多更深入的方法，但這樣會讓文章變得過長，而且太過複雜會嚇跑很多人～～
所以就先以基礎的核心內容介紹為主，比較建議的學習方式是以此展開並靠實作練習，過程中遇到不會的地方就是著找找看、實驗看看，然後 Google 逛逛、官方論壇爬一下，就我所認識的大部分 WordPress 站長都是靠這樣磨鍊出來網站製作的技巧的，畢竟不會所有鉅細彌遺的技巧都會白白寫在那邊，網站架設跟設計是很深很深的專業啊！
噢對了，今年我有規劃製作一堂完整的 WordPress 網站設計線上課程 - 【建立影響力最好的時代｜運用設計思考打造 WordPress 網站】，可以提供給大家更友善的架站學習體驗，同時理解設計的基礎方法，如果有興趣的同學可以訂閱本站 設計攻略電子報，或是到 Facebook RAR 設計攻略 按讚追蹤噢！之後也會有更多內容釋出 🙂
同時，也歡迎到我們新的 Facebook 社團 WordPress 網站設計攻略討論區 發文討論與交流，裡面也會不定期發佈相關設計教學噢～
我是 Riven，我們下次見啦～掰掰！
留言