嗨囉,我是設計師 Riven 🙂
當我們今天已經成功架設好 WordPress 網站,並已經做好基礎的前置處理,下一步就是幫自己的網站選個喜歡的佈景主題 (Theme),選到適合的主題除了可以讓網站更有設計感,同時也能加速網頁製作的流程。
佈景主題是進入網站第一眼的視覺感受,也是決定網站品牌好感度的第一印象。
想知道如何以視覺化的方式製作出高質感的網站嗎?
我最近開設了線上課程 -【建立影響力最好的時代|運用設計思考打造 WordPress 網站】。
點擊右方連結,了解完整 WordPress 課程 ➢ http://go.sat.cool/3emm3u
為什麼要使用佈景主題
套用佈景主題的概念有點像是使用模板,在網站的技術世界中,使用模版(或稱套版)是相當常見的事情,不過比起其他設計領域的模板,WordPress 的佈景主題由於其 可拆解性 與 高客製程度,我們可以透過它來變化出不同外觀的網頁,而不是單純套套模板而已。
只要平常累積足夠的佈景主題使用經驗,熟知不同產業與客戶需求適合使用上哪個 Theme,在做網站案子的時候就會超級快!🥳 因此大多數網站接案者,應該都曾經買過不少 WordPress 佈景主題,經驗愈多、踩過愈多雷的設計師,在製作網站的技巧上就愈純熟。
使用佈景主題在網站上,有點像大學生選科系那樣,選到適合的主題就能夠有更舒適的開發環境、更好的設計體驗,在 WordPress 控制台中也能夠享有更完整的系統可以輔助你完成想要做的網站;而如果中途想要反悔,也不是不行(甚至切換操作相當簡單),但就是換主題的過程中會遇到很多困擾,同時也會有很多頁面、設定需要全部重來,曠日費時~
使用適合的佈景主題架設 WordPress 網站能夠事半功倍。
如何幫網站選擇適合的佈景主題
雖然說 WordPress 本身就有相當多的免費佈景主題,但那些就我看來都有點過於簡陋,僅具備簡單的介面與功能,當然如果是無慾無求的佛系站長應該可以接受⋯⋯但一般來說,不論你是要架設個人網站、商業形象網站,或是經營部落格等等,都建議需要安排一筆預算,來購買網站付費佈景主題。
那至於佈景主題怎麼選擇?有哪些要注意的地方呢?我們接著看下去:
設計風格
佈景主題的外觀視覺通常是首先會注意到的,所以我們可以預覽一下佈景主題的介紹頁面,通常會被吸引到的都是「這就是我想要的風格!」——不過,這邊建議可以找找看有沒有套用這個主題的相關官方 Demo 範例,看多了通常能夠抓到更精準的主題設計風格,而延續這樣的感覺去改造成自己想要的網站,就會比較輕鬆~
佈景主題廠商的範例網站有很大參考價值。
忽略圖庫
而在逛佈景主題的時候,有個要邊看邊注意的地方就是,這些範例網站都是使用精美的圖庫照片,比如說滿版的背景、好看的人物肖像、精緻的食物攝影等等,但到時候做網站是要幾乎全部換掉的!可以先腦補一下如果換成自家產品或自己的照片,是不是一樣能有相同的視覺效果。
如果已經有嘗試過在網站上換圖檔的話,會發現有許多 WordPress 的佈景主題都是用照片撐起來的!實際上的排版與設計並沒有成品照那樣好看;但另一方面往好處想,這些讓你心動的範例,也是個不錯的設計參考,也許只要照著去準備相關的網頁素材,比如說找專業攝影師幫商品進行整組商攝,或是找一天去拍個專業感的個人形象照,再來置換網頁模版的圖片,就能夠達成類似的效果了。
要做好一個好看的網站,這些「現實世界中的準備」都是需要且重要的噢!
佈景主題採用的照片都具備高質量。
字體鋪陳
而除了照片之外,很多新手同學在選擇 WordPress 主題上也容易有個盲點,就是被英文字體牽著走,有許多人架設網頁的時候,會發現套版的主題怎麼換了中文字就崩壞,就是這個原因。
不少佈景主題由於都是國外的公司販售,皆是以英文的文字做呈現,但英文其實有相當多網頁字型能夠選擇,要知道這些字體都是有情感在裡面的,有氣勢滂礡的、可愛嬌貴的、優雅氣質的等等很多!那這樣帶有情緒的字體在網頁上,不只是很加分而已,甚至能夠 主導網頁的視覺設計。
所以在看佈景主題的時候,也要稍微想一下如果這邊換成中文會怎樣、那邊換成自己公司的文案會長怎樣,因為到時候是真的全都要替換的;而如果還是喜歡該主題的風格,到時候也能夠認真找找有沒有合適的「網頁字型(Webfont)」可以購買使用,就能夠達成相似的感覺了。
網頁字型在網站排版中佔比非常高。
開發彈性
而除了看看套版主題的現成外觀設計之外,我們也得注意一下各主題的客製彈性,有些主題寫得很死,雖然樣式好看,但要改一些東西完全改不了,甚至找半天都不知道去哪裡設定;真要說的話可以用如 CSS3 這樣的前端語法去硬改,但那樣就會麻煩很多,而且對架站新手來說需要相當多的學習時間。
而現在很多主題都有提供好操作的介面可以用,能夠輕鬆將網頁改成自己要的樣子,可以的話盡量找到這些開發彈性高的佈景主題,從排版、字體、顏色到功能面都可以自訂的主題就很棒~
現在的 WordPress 功能非常完整,跟過去不同了。
運作效能
而綜合以上幾個選擇條件,也許能找到完全符合的完美主題,但其中還是有一些佈景主題在網站中的佔體非常龐大,也就是俗稱的很肥!這會拖垮網站的運作速度,讓瀏覽起來的速度變慢,進而造成使用者的閱覽體驗不佳,需要相當小心。
通常架站的時候,不論是佈景主題 (Theme) 或外掛 (Plugin),我們在選擇上都很注重會不會給網站帶來過大的負擔,如果過重的話就會再找找有沒有別的替代方案。
同樣都是佈景主題,有些很輕量,有些則重到難以負擔。
而經過以上的 WordPress 佈景主題的條件篩選,加上我自己多年的跳坑、踩雷經驗,我想在這邊跟大家分享與推薦我自己的 本命 網站佈景主題。
一生推薦的設計感佈景主題
過去幾年花在付費佈景主題的成本大概有十萬以上(包含幫客戶買的授權),其實我大可以在這邊寫好幾個各種佈景主題來擴充文章字數,但實在覺得其他也沒什麼好介紹的,因為在我心目中,是有唯一推薦的最好用 WordPress 佈景主題的,就是 Divi Theme。
riven.design 就是使用這套佈景主題進行設計與開發。
當然,這僅是我個人主觀的經驗跟想法,你也可以問問看別人、去 Themeforest 逛逛,或是嘗試看看最近滿流行的 Elementor,但基本上全球熱銷的排行榜前十名我都實際用過了,還是撼動不了 Divi 在我心中的地位。(*Divi 唸法是”滴V”)
接下來我想跟大家分享幾個 推坑 推薦的地方:
所見即所得的視覺化編輯
如果你是設計師,或習慣 Adobe Xd 或 Illustrator 等軟體的繪圖編輯,那 Divi 超級適合你的!
取代要在密密麻麻的程式碼中撰寫網頁,Divi 可以透過視覺編譯的方式直接在網頁上拖曳、調整,並附有內建的編輯器,可以直接編輯設定,而且是「所見即所得」也就是即時看到的網頁,就已經是完成的網站了。

幾乎是跟設計軟體相同的操作邏輯,但卻可以拿來做網頁。
便於開發的網頁巢狀結構
在網站開發的過程中,會使用像是 HTML 5 或 CSS 3 等程式語言去架構出基礎雛形,其中「巢狀」就是網頁程式碼中相當基本的形式,可以想像成每個網頁裡都是由一個一個的結構區塊從上而下組成,每個區塊裡面又包裹一層區塊,然後裡面有像是標題、文字等常見的元件。
而 Divi 就是將這樣的巢狀結構視覺化,我覺得這樣超棒的!如果你是熟網頁前端語言的工程師,這樣的設計更符合編譯習慣;如果是網站架設的新手,這樣的排版邏輯相當好理解,在學習上更容易了。
有了巢狀的網頁結構,在編輯與管理上很舒服。
通體舒暢的網頁設計體驗
我覺得 Divi 是最適合設計師的佈景主題了!主要原因就是:Divi 內建的編輯器,有很多適當且剛好的細節可以處理,能滿足設計師們對於視覺優先的需求。
Divi 有很多其他佈景主題較難處理的部分,像是漸層、陰影、圓角等等,都可以透過簡單的介面進行調整,在 UI 介面設計上來說,這些都很基本,也是現代網頁中常見的設計方法。
而就算不是設計底子的朋友,也能夠過這樣具備設計感的佈景主題編輯器,來輕鬆做出好看的網站,整體的視覺效果比起其他佈景主題具有更多的細節。
簡單來說,透過 Divi 我們可以更容易地把網站做成具備質感與符合現代標準的網頁,如果嘗試過其它佈景主題卻總是做不出好看網站的你,非常推薦試試看!😀
✅ 給個小訣竅
看完上面的介紹,是不是很想快點嘗試 Divi 這個超強設計感的佈景主題呢?我認為這樣的架構設計可以完成 90% 以上的 WordPress 網站需求,因此除了新手拿來練功之外,等熟悉之後使用作為商業網站設計案子使用也相當適合。
在剛開始學習 WordPress 網站的階段,透過佈景主題會覺得更有成就感,帶著這份喜悅會因此愛上架設網站。
而有時候設計師們會去雕一些細節嘛,有些可能 Theme 或 WordPress 本身已經滿足不了你,像是 Webfont、JavaScript 或是 SVG 動畫等等進階技巧,這個時候在網路上查找解法的時候,網站架設實力也慢慢地提升囉!
好啦,今天關於 WordPress 佈景主題挑選方法與推薦介紹的內容就先到這邊,如果想要看到更多相關教學,可以訂閱本站 設計攻略電子報,或是到 Facebook RAR 設計攻略 按讚追蹤噢👍
同時,也歡迎到我們新的 Facebook 社團 WordPress 網站設計攻略討論區 發文討論與交流,裡面也會不定期發佈相關設計教學噢~
我是 Riven,我們下次見啦~掰掰!
對 WordPress 課程有興趣的大家可以點擊右方連結,了解完整內容➢ http://go.sat.cool/3emm3u

留言