Visual Portfolio, Posts & Image Gallery for WordPress

【網站架設】穩定快速又便宜,獨立空間Cloudways主機

這篇文章要向你介紹的是品質好,連線速度又快又穩定的獨立空間Cloudways,我會教你如何在Cloudways購買空間,並且將Godaddy的網域與Cloudways空間連接(也可以是不同家的網域),從零開始建立出一個架設在Cloudways上的WordPress系統網站。

1.Cloudways主機介紹

Cloudways

為什麼我會推薦Cloudways呢?市面上大多數網站所使用的空間主機是「分享型空間」,也就是你的網站,和別人的網站會「架在同一個主機空間上」,當別人的網站有狀況,或者是流量較大,把資源搶走了,那就會連帶影響到你的網站,拖慢網站速度,甚至是會經常出現Error。

Cloudways是一個只提供獨立型空間的主機商,許多提供同類型服務的其他主機商,價格比起Cloudways貴上不少,操作上也相對複雜,我起初人生第一個網站是建立在分享型主機上的,當時的網站經常收到朋友回饋說打不開,老是在error狀態,甚至在打文章時也會突然無法存檔,最後,我在合約大約八個月左右,就將網站打包搬到Cloudways,從此過上無憂無慮,再也不用擔心網站死掉的生活。

在Cloudways購買空間的話,該空間只會有你的網站,而且只要空間資源足夠,你也可以安裝無數個網站,當其中有網站出狀況,你可以馬上確認是哪一個網站把流量或空間用掉了,把問題解決,而不是只能癡癡地期盼不要再發生下一次。

Cloudways優點

  • 獨立型空間,不用跟別人搶資源
  • 速度快
  • 主機穩定
  • 客服24小時全年無休
  • 提供免費SSL認證
  • 網站每天自動備份
  • 提供Staging Site功能,可以在網站有大更新的時候做測試用
  • 每月付款,不必被綁一整年

Cloudways缺點

  • 英文服務為主,無中文介面

Cloudways優惠價


2.網站架設流程介紹

接下來,我會從購買網域開始,完整地教你架設好一個網站,如果你是精通WordPress的高手了,可以跳過這一部分直接去2.Godaddy購買網域步驟教學或3.Cloudways租用主機閱讀內容,那如果你是仍在新手村的初心者,就和我一起看下去吧!

網站的架設流程如同下方列表整理所示,這篇文章會教你到第五個步驟,把一個網站的基本構造架設完成,而網站頁面設計的部分,則可以參考我另一篇如何使用頁面編輯器Divi的教學(如下),再去一一為網站頁面作設計。

  1. 購買網域 - Godaddy
  2. 租用主機 - Cloudways
  3. 安裝WordPress
  4. 串連網域跟主機
  5. 網站基本設定
  6. 網站頁面設計
  7. 完成

【Divi新手必看】網站設計完整步驟教學,看這篇就夠!


網域選擇

Godaddy

Godaddy是一個全球性質的大型網域服務商,你可以跟Godaddy購買網域(也就是俗稱的網址),網域通常是以年為單位做計算,每次購買網域最短時限是一年起跳,而Godaddy因為經常推出很便宜的網域特惠,為許多剛開始架設網站的人,大幅度地降低了初期的成本,因此我蠻推薦新手可以從Godaddy購買網域。


WordPress是什麼

Wordpress

WordPress有分為WordPress.org跟WordPress.com,com結尾的事類似於痞客或Medium的部落格平台,而org結尾則是網站管理系統,也是我們主要用來管理網站的系統,大多數線上主機都會提供一鍵安裝WordPress.org的服務,只要購買好主機後,照著網站上提供的選項一步步操作,就可以無腦安裝完成。


3.Godaddy購買網域步驟教學

首先,打開Godaddy首頁後,輸入你想要購買的網域,查詢該網域是否可以購買。

domain search

若畫面顯示「您可以使用此網域」代表可以購買,點選「加入購物車」,如果出現的是「已被他人使用」,代表已經有人註冊這個網域了,可以參考下方推薦的其他類似網域。

choose domain name

接著右手邊會出現購物籃,可以以年為單位選擇購買的效期,若你是剛開始架網站的新手,我會建議先從一年開始,如果是有計畫性的要長期經營網站,或者是替公司購買的網域,那可以考慮買三年甚至五年,依個人狀況而定即可。接著點選「前往購物車」進行下一步。

add it to shopping cart

左手邊的額外附加選項,可以都先點選「不,謝謝」就好,這些之後有需要的話,都可以再做加購,接著再次點選「前往購物車」。

cancel other plan

接著確認你的網址、購買效期,都無誤後,點選「繼續結帳」。

confirm order details

如果你還不是Godaddy的會員,這裡系統會叫你註冊一個會員帳號,作為之後管理網域的帳戶。

sign up membership

然後輸入信用卡資料進行購買,未來網域如果有設定自動續約的話,Godaddy會直接使用這張信用卡的資料自動扣款續約,就不會發生網域過期的問題。

credit card details

最後,Godaddy會再一次跟你確定訂單的內容,點選「完成購買」。

confirm details again

網站的右上角會顯示「感謝您的訂購」,代表你已經買好自己的網域囉!Godaddy會寄送收據以及管理網域的連結到你的信箱,剛購買完成時,會員後台可能會需要稍等個幾分鐘才顯示你購買好的網域。

success purchased

接著,開始進行Cloudways的主機租用,並且設置網域與主機間的網站連結吧!


4.Cloudways租用主機

註冊免費試用帳號

開啟Cloudways網站,點選畫面中的「Get Started Free」註冊Cloudways的會員帳號,每個帳號會有三天的免費試用期。

Get started free from Cloudways

接著依照下圖所示,輸入你的會員資料,最後兩題「I would best describe my self as」以及「My monthly hosting spending is」都只是Cloudways的市場調查,不會影響到你的任何會員資格,照自身情況選擇即可。

將下方的「Got a Promo Code?」點開後,會出現填寫優惠碼的空格,可以獲得前幾個月的會員優惠價。

Sign up Cloudways membership

安裝主機及Wordpress

Godaddy目前一共提供五種主機系統,我個人推薦使用linode的主機,因爲linode公司專門提供主機租用,而公司的年資也十分久,品質上的穩定是大家公認的。

Server Size主機空間可以先從1GB開始,而Location主機地點,就選擇離你的主要客群最近的地點即可,例如:你的客戶通常在亞洲地區,那就可以選擇Tokyo東京或是Singapore新加坡。

choose linode hosting

在主機建立好後,點選右下角的「Add Application」開始安裝一個WordPress網站。

Add application

Cloudways會詢問你要安裝什麼版本的網站,在WordPress那欄選擇數字最高的版本,Name you App填寫這個網站的名稱,而Name you Project可以填寫一樣的名稱就好。整個安裝過程不到10分鐘,畫面上會顯示還需要多久,這時把電腦放著等等再回來繼續下一步。

Choose WordPress version

完成安裝後,可以從右手邊的www按鈕,或者是把左上角的Servers調整成Applications,找到你已經安裝好的網站系統。

installation finished

進入網站系統內容後,會顯示目前這個網站的網域URL、後台的登入位置、管理員的帳號Username及密碼Password。

Access details

點開網站的網址URL,可以看到目前的網站使用的是一個預設的主題。

Website current homepage

網站指向至網域

現在我們要將剛才在Godaddy購買好的網域,與這個剛架設好的網站互相連結。

回到Cloudways的後台,點選左邊工具欄的Domain Management,在Primary Domain輸入你剛才購買好的網域,點選Save Changes儲存設定,網站的指向就完成了。

Domain management

網域指向至網站

接著,點開Access Details,右手邊有一個Public IP,把這段數字複製起來。

Copy public IP

打開Godaddy的後台,找到你的網域後,點選DNS。

Manage DNS

找到在列表中最上面的A紀錄,點選右邊的編輯icon進行設定。

Edit A record

在指向的欄位中,輸入剛剛複製好的Public IP,右下角的秒數欄位可以填入600,讓他生效速度快一點,最後點選儲存,網域的連接就完成了。

Godaddy更改指向位置的速度蠻快的,如果等了十分鐘,你的網域打開都沒有出現剛剛的首頁,那可以嘗試用無痕模式開看看,或者是清除瀏覽器的快取。

Point to public IP

安裝SSL

完成指向設定後,你會發現打開網站時,網址列前方有個「不安全」的警示圖案,要如何將不安全圖示改為安全鎖頭圖示呢?Cloudways有提供免費的SSL驗證,不必另外付費。

回到Cloudways的管理頁面,點選左邊功能列的SSL Certificate,接著輸入你的Email電子信箱,以及網域名稱,再點擊Install Certificate安裝驗證,就ok囉。

SSL icon
Install SSL

設定付款資料

Cloudways提供三天的免費試用期,記得要到Cloudways會員後台頁面,點選Upgrade my account,輸入你的付款信用卡資料,才不會三天到期後網站資料就消失囉。


5.網站基本設定

完成以上步驟後,基本上整個網站安裝已經完成,可以開始進行網站管理及設計,而網站的後台,只要在網址後面輸入/wp-admin或者是/login,就會出現後台的登入畫面,可以用Cloudways內Access Details上列出的Username帳號跟Password密碼登入後台。

Go to Dashboard

進入到網站後台後,你可能會看到整個介面是英文的,不要緊張,打開左手邊的Settings設定→General,將下面兩張圖我有用紅字特別標示的部分輸入正確內容,並且將Site Language語言選擇中文,最後記得按下方的「儲存設定」,網站設定就會生效啦。

General Settings
General Settings - 2

網站設計的部分,就如同前面所說,可以參考下列這篇介紹如何使用DIVI頁面編輯器的文章:

【Divi新手必看】網站設計完整步驟教學,看這篇就夠!

【WordPress外掛】串連Google評價及Facebook粉絲頁留言步驟教學

如果你的公司或品牌有和Google資訊(Google My Business)連接,或者是自建Facebook粉絲頁,讓顧客可以在上面評分留言,我相信這些留言都能替你帶來更多潛在客戶,為了讓新客戶順利接收到老客戶的體驗心得,今天要教你如何將Google評價及Facebook留言串連到你的Wordpress網站

1.串連Google評價

首先,從網站的後台Dashboard點開外掛→安裝外掛,接著搜尋Widgets for Google Reviews,找到作者名稱是Trustindex.io的外掛後,點選安裝並啟用。

Widgets for Google Reviews

接著左邊的工具列會出現Trustindex.io,打開後發現要輸入Google Place ID。

Connect Google Platform

先到Google首頁,搜尋你的品牌名稱或店名,右手邊出現像下圖這樣的資訊欄後,往下滾動找到「撰寫評論」(Write a review)。

Google My Business

滑鼠在網頁空白處點選右鍵,選擇最下面的Inspect管理員,也可以使用 Ctrl+Shift+I 這三個快捷鍵來打開。

Open Inspect

接著你的瀏覽器會被一分為二,點選有一堆程式碼左上角的滑鼠小圖示,接著點擊剛剛找到的「撰寫留言」Write a review,下方有幾行程式碼的背景色變成灰色後,在中間找到data-pid,把=等號後方的一串英文數字反選複製起來。

再回到剛才網站外掛,把這一串代碼貼到空格中,點選Check→Connect,外掛就連結到你的Google資訊面了。

data-pid code

然後,你就可以快樂的選擇想要的樣式啦,第二步跟第三步都是讓你選擇評論要以什麼方式來呈現的。

Select Layout

接著,Google Reviews Widget外掛會讓你做最後的設定,自由依照個人喜好調整即可,左手邊的選項有:

  • 顯示評分有幾顆星
  • 留言介面的語言
  • 日期要顯示的格式

右手邊的選項則是:

  • Hide reviews without comments 隱藏無內文的評價
  • Hide rating text 隱藏總評分的文字
  • Show verifield review icon 顯示有通過審核的使用者圖示
  • Show navigation arrows 顯示左右箭頭
  • Show reviewers' photo 顯示留言者的頭像
  • Enable mouseover animation 啟用滑鼠移動動畫
  • Use site's font 使用網站的字體
  • Show platform logos 顯示平台的Logo
  • Show platform stars 顯示平台的星星數
Widget Settings

最後,外掛會產生出一組短代碼,將它複製貼上到你想要顯示Google評價的位置即可,例如:首頁、文章內頁、頁尾、側邊欄等等。

Insert Google reviews shortcode

2.串連Facebook評分

至於連結Facebook留言的方式,其實跟前面Google評價的部分非常像,因為都是同一個作者製作的外掛,而串連Facebook留言的外掛名稱是Widgets for Social Reviews & Recommendations,到網站後台→外掛→安裝外掛→啟用即可。

Widgets for Social Reviews & Recommendations

啟用外掛後,到後台左手邊選單找到Trustindex.io,點選Connect連結。

Connect Facebook platform

畫面會跳出一個小視窗,點選Connect,登入你的Facebook帳號。

New Platform

確認要登入的用戶名稱無誤後,點擊藍色按鈕Continue as xxx。

Login your FB account

緊接著會出現所有你擁有管理權的Facebook粉絲頁面列表,選擇一個你要連結到網站的粉絲頁面,再點選Next前往下一步。

Select FB fanpage

確認要連結的粉絲頁面無誤,選擇右下角Done完成。

Allow Trustindex.io to read your content on the FB fan page.

系統會告訴你剛剛選擇的Facebook粉絲頁面已經成功連結,點選OK繼續進行下一步。

Successful linked.

回到網站外掛頁面中,下方會顯示你的粉絲專頁名稱以及頭像,點選Choose進行下一步。

Choose FB fan page

接著就和前面Google評論的設定方式一模一樣了,選擇你要的評論顯示版型與款式。

Select Layout and Style

在這邊一樣是讓你調整一些評論顯示的內容、語言、日期格式等等,如下圖所示:

Widget settings

最後,會出現Facebook專用的短代碼,把他複製起來,貼上到你想要顯示的地方,就大功告成囉!

Copy and paste the shortcode to your website

自動化的客戶評價留言更新,能夠不定期地在網站上添加不一樣的內容,順便提升網站整體SEO,有經營Facebook跟Google My Business的品牌,務必要安裝看看唷!

【Divi教學】響應式手機平板頁面設計教學,讓你的網站怎麼看都好看!

響應式頁面指的是,當你的顧客不論用電腦、手機、平板瀏覽網站時,網站內容可以自動適應裝置大小的不同,而改變整個網站版面,將圖片、文字、元件大小都調整成適合觀看的模式。

在過去,響應式網站是一種優勢,但在現代這個人人手機不離身的環境下,響應式網站變成了一種必備要素,若你的網站無法自動提供適當的版面大小給用戶,那將會流失掉非常多的潛在客戶。

Divi編輯器提供了電腦、平板、手機的即時預覽畫面,讓你可以在設計網站當下,馬上確認該頁面在不同裝置上的效果,並且提供個別設定選項,讓你能夠自行調整每個裝置的數值大小,確保每一個用戶都能在你的網站有良好的使用體驗。這篇文章,我會教你如何查看各個裝置的預覽畫面,以及如何調整其個別數值設定,以及透過顯示設定,將任何你不想要顯示的元件隱藏。

1.查看電腦、平板、手機畫面

在你進入Divi Builder時,點開下方三個點點的紫色圓圈,會看到如下圖,可以調整整個頁面的設定。而左下角的灰色選項條,從左至右個別是列表、整體預覽、電腦預覽、平板預覽以及手機預覽。你可以在編輯網站時,隨時進行切換,確認你的內容可以完美地顯示在這三種裝置上。


2.調整個別數值設定

那麼學會如何預覽不同裝置的畫面後,當發現有些內容在其中一種裝置上,出現過大或過小的問題,該怎麼處理呢?

在Divi編輯器中,大多數可調整的選項,都可以針對裝置,進行個別設定,以下以文字大小作為舉例,將你的滑鼠游標,移到Text Size右邊時,Divi編輯器會自動滾出幾個圖示按鈕(如果沒有自動出現,點點滑鼠左鍵兩下就可以囉),點擊中間有個像是手機的圖示,會叫出下方三個裝置的選項。

假設你只有設定電腦裝置的文字大小,後面的平板與手機裝置,將會跟著電腦版本的設定,如果你只設定了電腦與平板的文字大小,那手機裝置將會依照平板的數值顯示文字大小。

如果在經過一番設定後,都不滿意的話,可以點選第四個圓圈箭頭的圖示,就會將所有設定歸回初始狀態囉。


3.顯示設定

有時候我們如果希望某些Section、Row、Module,只出現在電腦或手機畫面,可以跳到Advanced欄位,把不想要出現的裝置勾選,就能針對裝置作個別隱藏Disable


舉例示範

我通常會在Theme Builder裡面建立頁首的選單列,並且針對電腦用戶以及平板手機用戶,設計出不同的選單內容。

電腦用戶因為螢幕大,可以看到比較全面的網站設計,我會設計一個專門給電腦用戶的Section,並且在Advanced→Visibility中,將手機Phoen跟平板Tablet隱藏,以避免造成手機用戶瀏覽上的不適。

手機用戶的Section,內容會盡量單純,不加入過多複雜花俏的圖示,並將選單的高度限制在50px以內,以免手機用戶在瀏覽文章時,有一大部分的畫面被選單遮擋,最後在Advanced→Visibility中,將電腦Desktop隱藏,就不會讓電腦用戶看到兩個選單啦。

【Divi教學】在Divi主題中新增字體步驟教學

在使用Divi有文字內容的Module時(像是Text, Blurb...等等),在Text Font欄位中,除了現成的Google字體可以選擇以外,另外也可以上傳自己想要使用的特殊字體。今天這篇文章要教你如何在Divi編輯器中上傳字體,以及如果遇到上傳失敗的問題時,要如何解決

1.新增字體至Divi步驟教學

首先,Divi提供的預設字體,基本上都是來自Google的免費英文字體,如果要使用特殊的中文字體,通常需要自行上傳。上傳的方法很簡單,照著以下圖示及步驟即可:

  1. 點選Module中的Design設定欄
  2. 打開你要設定的文字設定區塊(Text/Title)
  3. 點擊Text Font文字字體
  4. 點選Upload上傳
  5. 點選Choose font files選擇要上傳的字體檔案(ttf/oft)
  6. 輸入要顯示的字體名稱Font Name
  7. 點擊下方藍色按鈕Upload上傳
  8. 完成!
Upload steps

字體上傳完成後,整個網站可以使用,使用其他Module時,都可以直接選用已經上傳好的字體。


2.字體上傳失敗問題

當你在上傳字體時,有可能會碰到上傳失敗的狀況,視窗中會顯示「很抱歉,基於安全性考量,系統不接受這個檔案類型。」,如果是使用英文版Wordpress,則會顯示 'Sorry, This File Type Is Not Permitted for Security Reasons',而這個問題通常是來自於Wordpress系統本身為了安全考量而設置的檔案限制,避免你上傳了不適用的檔案導致系統有問題。

upload font file issue

解決方法

解決方法有很多種,有些人會安裝可以更改檔案限制設定的外掛調整,使用起來雖然很方便,但變成你的網站要長時間使用這個外掛,有可能會拖慢網站速度,而且一但刪除外掛後,又再度不能上傳新的字體了。

我個人會建議使用另一種方法,透過網站管理員的外掛,直接修改網站的設定,修改完後,直接把外掛刪除,未來也還是可以上傳字體。

請先到網站後台Dashboard點選外掛→安裝外掛,並且搜尋File Manager,點選立即安裝,並在安裝完成後點選啟用。

Install File Manager plugin

開啟WP File Manager,找到一個名為「wp-config.php」的檔案後,滑鼠右鍵點選「Code Editor」

Edit wp-config.php

將下列程式碼複製貼上到編輯器最下方,點選Save & Close關閉編輯器,接著就可以再度開啟Divi編輯器,你會發現字體可以順利上傳囉!

define('ALLOW_UNFILTERED_UPLOADS', true);

Copy & paste code

注意事項

在完成上方的程式碼步驟後,記得回到外掛→已安裝的外掛中,找到WP File Manager,停用該外掛並且刪除。

之前曾經有過類似的外掛被駭客入侵的事件發生,許多有安裝該外掛的網站,都被駭到無法開啟網站,造成很多麻煩,所以我自己習慣在使用完類似的外掛後,都一律將其刪除,否則網站的後台一不小心就被完全掏空了。

Delete plugin once finish

Godaddy網域轉移至Google Domains教學

有許多人都是從Godaddy開啟自己網站的人生,我也不例外,起初Godaddy的網域第一年價格都會有很便宜的優惠,但從第二年開始,網域的價格會變貴不少,我的其他網域都是設定在Google Domains上,在經過幾天的掙扎後,決定將我在Godaddy上的網域移轉至Google Domains一同管理。

我會在這篇文章教你如何從Godaddy移轉網域至Google Domains,整個過程大約10-15分鐘,而且網站完全沒有受到任何影響,如果你也有移轉網域的需求,歡迎參考這篇教學。

1.Godaddy設定

1-1.登入Godaddy後台

開啟Godaddy網站,右上角登入後,點選我的產品,進入你的管理後台。

登入Godaddy後台

1-2.管理網域

找到你要進行移轉的網域,點選右邊按鈕「管理」。

管理網域

1-3.轉出網域

找到管理頁面中的「其他設定」,點選「將網域從Godaddy轉出」。

轉出網域

1-4.網域轉出流程確認

Godaddy在這一頁會提醒你網域轉移的流程,直接點選下方的「繼續轉移」進行下一步。

網域轉出流程確認

1-5.網域轉出授權碼

接著點選「按一下這裡即可檢視授權碼」,你的網域轉出授權碼就會出現了,同時間會收到一封來自Godaddy的信件,裡面會附上一模一樣的授權碼給你,請將這個授權碼複製起來,接著到下一步進行Google Domains方面的設定。

網域轉出授權碼

2.Google Domains設定

2-1.輸入轉移網域

開啟Google Domains頁面後,點選左邊的「轉移」按鈕,將你要進行轉移的網域輸入到下方紅框標示處。

輸入轉移網域

2-2.輸入授權碼

將剛剛在1-5步驟所複製的授權碼,貼上到下方紅框處,並點選「繼續」。

若在這裡顯示網域尚未解除鎖定,則回到1-3步驟,點選下方「網域鎖定」後方的「編輯」按鈕,再選擇關閉即可。

輸入授權碼

2-3.網路設定

如果你的網域沒有請其他網站進行代管(例如SSL),那就點選上方的「複製DNS設定並允許Google管理這項設定」。如果你的網域有請其他網站進行代管,那就點選「保留現有的網域名稱伺服器」,接著點擊「繼續」。

網路設定

2-4.費用確認

Google Domains會在此向你確認是否要啟用隱私保護服務,這項服務是免費的附加選項,不需要額外付費就能享有;而自動續約的服務會建議大家一律開啟,未來才不會有網域過期的問題存在。

確認完你的網域金額後,點選「結帳」進行付款。

費用確認

2-5.付款

Google Domains除了信用卡付款外,也提供Google Pay作為另一種付款方式,選擇你想使用的即可。

付款

2-6.開始進行轉移

付款完畢後,Google Domains會顯示該網域正在進行轉移作業,接著我們要進行最後一個步驟。

開始進行轉移

3.移轉

3-1.帳戶變更

再次回到Godaddy頁面,點選左上角的「網域」選項,開啟「待處理的帳戶變更」。

帳戶變更

3-2.核准轉移

接著你會看到你的網域正在處理中,將該網域前方的空格打勾,再點擊「核准轉移」後,我個人狀況是大約1-2分鐘內,就完成轉移了。

核准轉移

3-3.確認

最後,可以在Google Domains的「我的網域」中,看到剛剛原本來在處理中的網域,順利完成了轉移,已經可以在Google Domains中進行管理囉。

確認

3-4.完成

於此同時,Google Domains會寄一封信到你的信箱中,通知你網域已經成功轉移到Google Domains中了!大功告成!

完成

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則是使用拖拉的方式,把元素用滑鼠拖拉進適當的位置後,一樣能夠輕鬆地調整網站。


2.電腦、平板、手機視角

並且,Divi跟Elementor都可以切換到手機或平板視角,針對有不同瀏覽習慣的使用者,來為網站進行更細節的調整,盡可能讓不同的使用者,在瀏覽你的網站時,都能夠有更好的使用體驗。


3.列表顯示

除了上一段提到的電腦、手機、平板視角以外,Divi跟Elementor還有提供列表型的顯示方式,像這樣的瀏覽模式,適合用來確認網站中篇幅較長的網頁,而我個人經常會利用列表模式,來快速將已經設定好樣式,複製到尚未設定過的元素。


4.個別頁面設計

而Divi跟Elementor也同時有提供主題性的編輯器,讓你可以為整個網站製作統一的選單列、底部欄,但同時,也能為幾個指定的頁面,特別製作不同的頁首、頁尾


5.設計選項

在各個元素的設計選單,我個人認為Divi跟Elementor除了位置以外,基本上該有的設計選項都一應俱全,非常足夠應對各種常見類型的網頁設計。


二、Divi vs. Elementor 相異處

前面把Divi跟Elementor的相同處說得差不多了,接下來我們進入到這兩個網頁編輯器的相異處:

1.主題版本及外掛版本

Divi在網頁編輯器上提供兩種版本,一個是主題,另一個是外掛,如果你有習慣使用的主題,只需要為其中幾個頁面作編輯,那麼就可以選擇外掛版本的Divi使用。如果你想要全方面的為網站設計,包含頁首、頁尾、網站整體,那就使用主題式的Divi。

Elementor只提供外掛版本,只能針對個別頁面調整,並沒有提供太多全面的設計方式。


2.範本數量

Divi範本

Divi最有價值的其中一點,就是它提供非常大量的免費範本給會員使用,所有的範本都是一個組合包的概念,每一個主題都包含5到8頁以上的頁面範本,也就是說,你可以選定其中一個主題,將所有頁面都匯入到自己的網站後,調整玩文字跟圖片,就是一個完成度非常高的網站,對於新手而言是一大福音。

Elementor範本

Elementor範本

而Elementor的範本則是多數主題只有提供一頁或者兩頁,不能像Divi一樣快速建立出網站的各個頁面,使用者如果有製作首頁以外的需求,就必須再自行設計出網站的其他頁面。


3.語言

語言的部分,Elementor則是略勝一籌,因為他提供英文以及中文的版本,而Divi只提供了英文,儘管用字都不難,但仍會讓有英語焦慮的使用者望之卻步。


4.網站表現

我在一個網站上,同時安裝了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的優缺點作一個總整理,讓你快速簡單地複習一下:

DiviElementor
視覺化編輯器
電腦、平板、手機視角
列表顯示
個別頁面設計
設計選項豐富豐富
主題版本及外掛版本主題版本及外掛版本 僅外掛版本
範本數量較多 較少
語言英文英文及中文
網站表現整體表現較佳完整載入速度稍快
價格比較長期使用較便宜 長期使用較貴
外掛支援性較少較多

四、Divi vs. Elementor 該選誰?

這兩個頁面編輯器各有各的優缺點,而且每個人喜歡的介面都不相同,我個人在各別使用過後,更加偏好Divi,對於長時間都在建立網站的我來說,Elementor長期使用下來所需要累積的價格非常驚人,而且我更喜歡Divi的整體編輯器畫面。

【Divi主題必備】10個WordPress外掛推薦清單,讓Divi功能最大化!

本篇文章將會介紹我個人在使用Divi製作網站時,會搭配Divi主題一起使用的外掛,不管你是用Divi製作商業品牌網站、個人作品集、部落格,或者是使用Woocommerce的電商類型線上購物網站,都可以參考使用!

Divi是一個非常強大的外觀主題編輯器,同時也提供使用者很多彈性空間,讓一些專業的工程師們,可以為Divi製作專屬的外掛,來補充額外的功能。

如果你還不清楚Divi是什麼樣的主題,可以先去看Divi的介紹文【WordPress】人人都可以是網站設計師,DIVI最強大的頁面編輯器,以及基礎使用教學的【Divi新手必看】網站設計完整步驟教學,看這篇就夠!

那我們就正式進入Divi必備的外掛清單介紹囉!

外掛 #1. Supreme Modules Lite

Supreme Modules Lite

首先,第一個要介紹的外掛是Supreme Modules Lite,它是我平常用Divi主題製作網站時,必裝的外掛第一名,它提供了Divi使用者更多設計款式的Module選擇,例如說,可以加入文字到分隔線Divider中、文字色彩可以選擇漸層色、提供文字的打字特效等等,讓你的網站變得更加豐富。

Supreme Modules Lite還有提供專門為Contact Form 7設計的模組,也就是說,你可以在Divi編輯器中直接調整Contact Form 7的樣式(文字大小、輸入框的顏色、按鈕款式等等),不必再靠語法來修改Contact Form 7的外觀,非常方便!

費用:免費/付費

範本:連結


外掛 #2. Popups for Divi

Popups for Divi

Popups for Divi外掛可以將任何一個Section設定為會彈跳出來的視窗,但它並不是自動彈跳的類型,而是要在頁面上加入一個按鈕,將按鈕的連結對象設定為此Section的ID,使用者點擊按鈕時,這個Section就會跳出,很適合放在資料量多,但又只能在一個頁面上呈現的網站,例如:一頁式推銷頁面、服務說明頁面等等。

費用:免費

範本:連結


外掛 #3. Filter for Divi

Filter for Divi

Filter for Divi外掛的表現方式類似於Divi的Tab Module,但是在設計上更加自由,我會發現這個外掛,是因為我覺得Tab Module不好用而且樣式醜XD,要大幅調整款式的話,還要利用程式碼修改,實在太麻煩。

而Filter for Divi可以將需要分類呈現的資料,利用按鈕來篩選資料,不必使用多個頁面表現,適合用在作品集類型的網站。但是Filter for Divi的壞處在於,剛開始設定比較複雜,雖然作者有寫教學,卻不夠詳細,期待他未來可以出更清楚的影片教學分享。

費用:免費/付費

範本:連結


外掛 #4. Simple Divi Shortcode

Simple Divi Shortcode

Simple Divi Shortcode外掛可以將你存在Divi Library,或者是建立在Divi Library的內容,用短代碼的方式加入至網頁中,如果Divi提供的Section及Row的種類不夠多,就可以使用短代碼來提升Section的分隔數量與種類。

並且,若有需要大量重複使用的網頁內容,也可以用短代碼的方式放在網頁中,這樣之後只需要修改一個地方,全部有此短代碼的內容,都可以一次被修改成最新版。

費用:免費


外掛 #5. Sticky Menu (or Anything!) on Scroll

Sticky Menu (or Anything!) on Scroll

Sticky Menu外掛可以將任何的Section、Row、Module,跟著滾輪一起移動上下,不會因為使用者往下瀏覽頁面,就看不到你想讓使用者看到的內容,適用於部落格網站,文章旁側邊欄的廣告之類的。

費用:免費

教學&範本:連結


外掛 #6. Use Any Font

Use Anyfont

Divi編輯器雖然有內建安裝新字體的功能,但常常會因為伺服器或者Wordpress本身系統的設定,而無法順利安裝字體檔案進去,這種時候我就會使用Use Any Font外掛,它的免費版可以讓你自由安裝一種字體,付費版則是不限字體安裝數量,適合不熟悉Wordpress後台設定的用戶。

費用:免費/付費


外掛 #7.Safe SVG

Safe SVG

有時候我們網站上的圖檔,會因為解析度的不同,在不同的螢幕使用下,造成圖片有鋸齒狀的現象發生,一般的圖片還無所謂,但是像是Logo商標的圖片,則要盡量避免。

我會使用Save SVG外掛,幫助我的網站可以順利上傳SVG的檔案,因為Wordpress系統會預設幾種可以上傳到網站上的檔案類型,而SVG並不在其中,當然你也可以使用一些修改器,將系統設定更改,但之前有發生過幾種知名Wordpress後台修改器被駭客入侵,導致使用者的網站整個掛掉的情況發生,所以我會盡可能避免安裝能夠直接全面修改後台的外掛。

*SVG檔案:可以利用ai程式,將向量的檔案存成適合網頁觀看的SVG檔,可以有效解決圖形邊緣鋸齒的問題。

費用:免費


另外,如果你的網站是使用Woocommerce製作的網路商店,以下這幾個外掛,是我個人在製作線上購物網站時,常會使用的輔助外掛,使用上非常簡單,又能將你的購物功能變得更加完整。

外掛 #8. Themify - WooCommerce Product Filter

Themify - WooCommerce Product Filter

線上購物商店的商品數量若非常多,或者是品項複雜,會需要一個側邊分類欄,幫助你的客戶們更快地找到適合的商品,而Themify - WooCommerce Product Filter是我個人非常喜歡用的外掛之一,使用上比較單純,而且是完全免費的外掛,你可以自由地選擇要出現的分類內容、分類方式,Divi的官方網站甚至有提供一篇它的完整的使用教學

費用:免費

教學&範本:連結


外掛 #9. Advanced Shipment Tracking for WooCommerce

Advanced Shipment Tracking for WooCommerce

Advanced Shipment Tracking外掛雖然不算是替Divi網站有任何美化的功能,但它確實很好用,所以我把它列在必備的外掛之一當中。

Advanced Shipment Tracking外掛會在你的訂單中,新增一個出貨的選項,當你完成出貨,將出貨單號填入訂單中,Advanced Shipment Tracking外掛就會自動寄送訂單狀態更新的信件到你的客戶信箱中,通知對方貨品已完成出貨,貨品的貨運單號、訂單細節,都會一併寄給客戶,能替你或你的員工減輕不少工作的負擔。

費用:免費


外掛 #10. Ajax Search for WooCommerce

Ajax Search for WooCommerce

Ajax Search外掛可以為你的Woocommerce網站增加搜尋列的功能,它的搜尋列會在關鍵字輸入的當下,跳出有關聯的分類、商品、金額等,讓客戶在搜尋產品時,省去要不停重複按Enter的步驟,就能查找他要的商品,是個設計得非常完整,使用上又只需要放入短代碼,就能夠馬上使用的外掛。

費用:免費


以上這十個外掛,希望可以幫助到你,將你的Divi網站製作的更加完整!

【新手必看】Divi主題網站設計完整步驟教學,看這篇就夠!

繼之前的【WordPress】人人都可以是網站設計師,DIVI最強大的頁面編輯器文章發佈後,有許多人來信問我更多關於使用Divi的方法。

而在這篇文章中,我將向你介紹,如何使用Divi主題,幫你的Wordpress網站建立一個完整,且設計美觀的頁面,從安裝Divi主題編輯器,到介面操作、設計等,即使不會寫程式、沒有設計背景,Wordpress新手也能夠自行架出漂亮的網站,為你的客戶、個人品牌、自媒體設計一個獨一無二的專業網站吧。

你準備好了嗎?那我們開始認識,並學習使用Divi吧!

文章內所提到的Wordpress,指的都是內容管理系統Wordpress.org,而不是部落格網站Wordpress.com喔!


1.Divi介紹

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天無條件退費
$89 → $80$249 → $224

在購買的同時,Divi會要求你輸入帳號Username以及密碼Password註冊會員,請記下這組帳號密碼,之後查詢產品的使用權限、或者是需要使用客服服務,都會需要這組會員資料喔。


3.安裝Divi到Wordpress

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

Divi Theme or Divi Builder Plugin

Divi網站主題(上圖左邊)

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

Install Divi theme

Divi外掛 - 單一頁面編輯器(上圖右邊)

而Divi外掛的話,則是到外掛安裝外掛,接著點選中上方的「上傳外掛」,選擇你下載好的Divi外掛zip檔,然後系統一樣會幫你安裝完成。

Install Divi Plugin

驗證使用權限API KEY

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

Elegant Account

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

Divi API Key

使用Divi外掛的人,在完成API驗證後,可以直接跳到7.頁面編輯器的地方,繼續閱讀Divi編輯器的使用教學。


4.Wordpress基本設置

接下來,第四段這部分的教學,是提供給剛開始使用Wordpress,還沒有任何網站頁面的人,如果你的網站已經有基本的內容、頁面、選單等內容,可以直接跳到5.LOGO設定教學唷。

新增頁面

Add a page

首先,每個網站會依照主題的不同,而有不同的頁面,通常會先有「首頁、服務、聯絡我們」等。

選擇左邊選單的「頁面」,點選「新增頁面」,在標題的部分打上你的頁面名稱後,右手邊可以看到一欄「永久連結」的區塊,這個會是你的頁面連結,所以我會建議你填寫英文,例如「首頁」就使用「home」作為代稱,這樣在這個頁面的網址,就會變成「你的網址/home」,會對Google搜尋比較有幫助。

接著,點選右上方的發佈,就可以了,記得多新增幾個頁面,你的選單才不會太荒涼喔。


新增主要選單

Add a Primary Menu

點選左邊選單「外觀」中的「選單」,這裡我們要將剛剛新增好的頁面,製作成網站上能看到的選單,點選中上方的「建立選單」,填寫「選單名稱」,這個名稱可以隨意取,用你方便記得的名稱即可,然後勾選左側的頁面項目,點擊「新增至選單」,你會看到被勾選起來的頁面,都跑到名稱下方,這時候你可以滑鼠右鍵按著拖拉,更改順序,最後,勾選Primary Menu主要選單,點擊「建立選單」,就完成了。

你可以回到網站的主頁,確認剛剛製作的選單,是否有乖乖出現在上面選單列表中呢?如果沒有的話,再照上方的步驟,重新建立一次選單即可。


5.LOGO設定

Logo setting

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


6.外觀自訂

Customise

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

以下,我會一個個告訴你,這些選項個別代表的內容,以及你需要設定的部分有哪些。


網站顏色、字型設定

General Settings一般設定中,你會看到有Site identity網站名稱、Layout Settings網站框架設定、Typography文字設定以及Background背景設定,它們個別的內容如下:

  • Site identity網站名稱:設定網站名稱、網站小圖示、網站說明等資訊。
  • Layout Settings網站框架設定:網站主要顏色、頁面寬度等。
  • Typography文字設定:標題及內文的文字大小、顏色,製作部落格的網站的話,務必要在這裡調整成適合閱讀的形式。
  • Background背景設定:可以替網站修改背景顏色,或者加入背景圖片。

選單設定

第二個Header & Navigation選單列,又稱作導覽列,在「Header Format」裡,Divi會在此提供你五種不同的選單風格,個別是:

  1. Default:預設
  2. Centered:置中,LOGO在上,選單在下
  3. Centered Inline Logo:置中,LOGO在選單中間
  4. Slide In:選單從右滑入
  5. 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編輯器囉!

Edit Pages

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

Edit with Divi options

前端編輯器介面

Divi Builder Tool bar

進入空白頁面後,你會看到中間下方有一個紫色的三個點點圖示,點一下後,整個下方的工具列會展開,如上圖所示。

左下角主要是你檢視網頁的方式,Divi提供你五種不同的檢視方法,有「列表」、「放大檢視」、「電腦版」、「平板」以及「手機版」,讓你能夠在編輯頁面的過程中,反覆地確認用不同的設備瀏覽網站時,網站會呈現什麼樣子。

Divi編輯器中間的工具列總共有六個按鈕,個別詳細功能如下:

  • 匯入範本:可以叫出Divi提供的網頁範本匯入。
  • 新增至模板庫:如果你使用Divi做網站到後期,每個頁面可能會重複出現的東西,那就可以把它們加入到模板庫,而這邊的按鈕,是讓你將整個網頁都加入模板庫。
  • 清除全部:如果你不滿意自己做的東西,可以點選這個按鈕,一次全部刪除重來。
  • 頁面設定:這邊是這整個頁面的全局設定,例如說,你希望能用CSS程式碼,改變這個網頁某些東西的樣式,但是不要影響到其他頁面,那麼,程式碼就必須加在這裡。
  • 步驟記錄:Divi提供你從開啟這個頁面編輯器開始的步驟記錄,如果你在中途把網頁關閉重新點開,那麼步驟記錄都會消失。
  • 匯出匯入:這個功能是方便你輸出這一整個頁面,或者是輸入別人給你的檔案,但是如果版本不同的話,有時候會造成輸入失敗的問題。

最後,在你完成這個頁面的設計後,Save Draft儲存草稿按鈕出現的話,代表這個頁面還沒有公開,只是儲存草稿而已,而Publish發布按鈕,則是將網頁公開,來到你的網站的使用者都可以看到這個頁面。


Section、Row、Module說明

接下來要講解的是Divi的Section、Row以及Module,Section是上圖最外圍的藍色框線處,Row是中間藍綠色的框線,Module則是灰色的區域。

Different of Divi Section , Row and Module

Section

Divi Section

首先,你可以把Section想像成是「把網頁切成一個個橫式的長方形」,我們會透過Section將網頁的內容分成一個一個方格,而Section又分成三種類型,第一個是Regular,它就是一個單純的長方形,裡面可以放入無數個像是下方的Row。

第二個Specialty則是將這一區塊分隔成左右兩邊,一邊跟Regular一樣,能放進許多Row,而另一邊則是單一的區塊,不能再被分割,適用於需要側邊欄的部落格文章頁面。

第三個Fullwidth,是寬度佔畫面100%的區塊,裡面不能再做分割,但有提供各種形式的全寬幅元件,適合做網頁最上方的主視覺,例如說能放單一圖片、多張圖片輪播、包含Slogan標語的主視覺圖等等。


Row

Divi Row

Section是把網頁橫式的切割,那麼Row就是把每個橫式的區塊,再做直式的切割,Divi目前提供20種的Row讓你使用,根據網頁的內容不同,可以選用不同的Row。

當然你也可以在選定之後,更改Row的形式,所以不必擔心一次選擇就無法再次修改。


Module

Divi 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的商店及商品頁面:

【Divi教學】如何用Divi設計WooCommerce線上購物網站


模板內容

每一個Section、Row、Module,點開右上方的設定圖示,會看見像上圖這樣,有三大區塊,分別是Content、Design、Advanced。

Content代表這個模組的主要內容,Design則是模組的顏色、設計、樣式,Advanced則可以替該模組加入一些CSS程式碼,或者是設定它只出現在電腦使用者,而不出現在手機、平板使用者等等。


使用範本

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

Divi Free Layouts

手機版設定

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

Laptop/Tablet/Mobile Settings

8.Theme Builder主題編輯器

除了頁面可以使用Divi編輯器以外,在Wordpress控制台,點選「Divi」,進入「Theme Builder」後,你會發現這邊有不同於「外觀自訂」區域的網站主題設定。

在這裡,你能用Divi編輯器製作一個跟預設不同的Header選單列,以及Footer底部列,而且可以為每個頁面都製作不同的選單,也就是說,不必再侷限於外觀自訂中預設的選單,整個網站都能依照你的想法去製作。

但是,老話一句,如果你還是個Divi新手,建議先熟悉了Divi編輯器的使用方法後,再來嘗試使用這邊的編輯器製作選單喔!

Global Divi Builder

自訂頁首選單、底邊欄

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

Global Header/Footer
Custom Header/Footer

指定頁面樣式(例:部落格文章模板)

如果你的網站屬於部落格類型,有非常多的文章,那就可以透過Theme Builder為你的文章建立模板,只要發佈新的文章,文章內容就會按照這個模板展示。

實際操作方法如下圖所示,點選Add New Template的加號後,會彈出頁面列表,將你想要套用的頁面勾選起來。如果你要套用在文章,則勾選All Posts(All文章)。

Template Settings

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

Disable Global
Custom Header/Footer

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

Custom Post Body

9.總結

其實今天這篇文章,裡面所提到的內容,只能算是Divi的大略說明,Divi編輯器強大的程度,需要一個個功能慢慢摸索後,你會漸漸地對Divi深感佩服,目前Divi是我最愛用的主題,截至今日,我已經用它為客戶製作過上百個網站。

關於Divi編輯器的使用,我還有另一篇文章【Divi新手教學】如何用Divi設計Woocommerce線上購物網站,專門介紹如何用Divi設計WooCommerce購物網站,有需要的話也歡迎你去看看喔。

【建站教學#3】如何選擇網域商?2021前六大網域商比較

當你想出一個適合的品牌名稱後,是不是很迫不及待想要馬上註冊網域呢?這篇文章要告訴你的是,該如何選擇網域註冊商,以及在註冊前,你應該注意到網域商的五個細節,避免未來註冊後碰到需要更換網域商的狀況發生。

以及2020年六個全球知名的網域註冊商說明與比較,幫助你找到最適合自己的網域商,那我們就接著看下去囉!

還沒看前一篇系列文章嗎?請點擊→【建站教學#2】8個步驟為你的網路品牌命名


選擇網域商前要注意的五件事

1.網域註冊時間長短

首先,你要考慮的第一件事是網域應該要註冊多久的時間呢?

如果你的網域已經持有超過一年,不斷在產出內容、累積網站的SEO,並且確定你會繼續經營這個網站,那麼你可以直接在續約時選擇較久的年份,將單一年度的單價壓低,至少註冊3-5年以上的網域時間。

若你是個網站新手,還不確定網站的未來會如何發展,穩定性並不是非常高,我會建議你先選擇註冊一年就好,雖然有許多網域商會提供非常好的優惠給全新註冊的網域,但當你在一年後,確認這個網域是你百分百想要繼續經營的,這樣錢才會花的心甘情願、甘之如飴。


2.首購價格與續約價格

許多網域商的首次購買價格,與續約價格天差地遠,例如Godaddy經常推出首年度網域價格美金1元(台幣30元),但在續約時,每年的費用將會高達美金19元(台幣577元)。

這對於一個需要長時間經營網站的人來說,久而久之累積下來的金額不斐,更何況你可能在經營到第二年或第三年時,就比其他網域註冊商的總價來得更貴。


3.轉移網域

通常網域可以在註冊後的60天後轉移到其他註冊商,而大多數的網域註冊商使用網域轉移功能,不需要收取任何額外的費用,但是問題往往在網域商是否有提供使用者完善的轉移服務

在你決定網域註冊商前,記得上網Google一下該註冊商的轉移服務是否簡單好操作?


4.有年資的網域名稱

有些人可能會在挑選網域時,發現自己的網域已經被別人購買了,或者是在競標網站上才買得到,根據Google表示,如果該網域長時間都沒有新增內容或網站在上面,一個沒有活躍的網域,單純只是註冊的時間較長,對於SEO其實沒有任何幫助

所以,要是你想要的網域已經被別人買走了,也可以考慮使用不同的後綴,例如.com改成.xyz或者是.studio,只要你認真經營網站,特殊的後綴搞不好反而讓人印象深刻喔!


5.附加服務

另外,如果你的網域註冊商同時還有提供其他不同種類的服務,在未來也可以統一在網域註冊商上面管理你的整個網路事業,而你可能會同時需要使用的服務有:

  • 隱私權
  • SSL憑證
  • 電子郵件託管
  • 電子郵件營銷
  • 網站自動備份

2020年六大網域註冊商比較

1.Godaddy

Godaddy年資最久也最受大眾歡迎的網域註冊商之一,完整的管理介面及廣大的使用群眾,不論碰到任何類型的問題,都可以輕易在網路上找到教學分享,即使是網域初學者,也不用擔心會求助無門,以初期的入手簡易度來說,非常簡單易懂。

優點

  • 好上手
  • 介面簡單
  • 網域後綴選擇多
  • 提供多國語言客服(包含中文)
  • 初期價格便宜
  • 穩定老牌公司

缺點

  • 網域續約價格較貴
  • 客服專業度待加強

價格

(美金)第一年價格續約價格
網域$11.99$17.99
SSL$63.99$79.99
電子郵件託管$23.88$71.88
總價$99.86$169.86

2.Namecheap

Namecheap是目前市面上第二強大的網域註冊商,價格非常親民,且官方提供非常多詳細的教學文,方便用戶可以在轉移及設定時輕鬆搬家到Namecheap,而且他還提供完全免費的網域隱私權給所有的用戶,讓使用者可以減少一個開銷。

優點

  • 價格便宜
  • 提供免費隱私權保護
  • 全年無休客服
  • 官方教學文詳細

缺點

  • 後台較Godaddy複雜
  • 僅英文服務

價格

(美金)第一年價格續約價格
網域$8.88$12.98
SSL$3.88$8.88
電子郵件託管Free$11.88
總價$12.76$33.74

3.Domain.com

Domain.com可以註冊幾乎全球所有國家的域名(包括.tw),以及各式各樣千奇百怪的網域後綴你都可以在這邊找到,適合需要為海外公司架設網站的網站創作者使用,而且你同時可以在Domain.com購買隱私權保護、電子郵件託管(Gsuite)、SSL隱私等,一個網站幫你提供好所有需求!

優點

  • 域名種類多樣化
  • 可註冊各國域名
  • 提供多種額外服務
  • 線上即時客服

缺點

  • 各國域名價格較高
  • 僅英文服務

價格

(美金)第一年價格續約價格
網域$9.99$11.99
SSL$39.99同第一年
電子郵件託管$72同第一年
總價$121.95$123.95

4.Hostgator

Hostgator算是對於新手來說很友善的網域註冊商,尤其你如果同時購買了他們提供的網站主機服務,還可以得到免費的一組網域託管,另一個優點是,HostGator提供一個名為Gator的線上小助手,讓你可以輕鬆地先利用Gator建立出一個簡易的網站,讓你的網站不必在一開始就顯示出最赤裸的一面給潛在用戶。

優點

  • 適合與主機搭配購買
  • DNS管理介面簡單易懂
  • 全年無休客服
  • 轉移功能齊全

缺點

  • 較不適合網站已有一定規模者使用
  • 附加服務較少
  • 僅供英文服務

價格

(美金)第一年價格續約價格
網域$12.95$17.99
SSLFreeFree
電子郵件託管未提供未提供

5.Bluehost

Bluehost是Wordpress的官方託管合作伙伴之一,同時也是世界上最大的託管公司之一,非常適合Wordpress的新手來購買主機+網域,可以有一個簡單輕鬆的開始,而且Bluehost也提供免費的SSL憑證給使用者。

優點

  • 老牌穩定
  • Wordpress官方託管夥伴
  • 全年無休客服
  • 免費隱私權保護
  • 與主機一同購買可得一組免費網域託管

缺點

  • 僅供英文服務

價格

(美金)第一年價格續約價格
網域$11.99同第一年
SSLFreeFree
電子郵件託管$35.88$59.88
總價$47.87$71.87

6.Google domains

我會把Google Domains放在最後一個講,完全是因為Google這個品牌(喂),目前Google Domains逐漸開始開放各個國家使用者來購買網域,跟前面五間註冊商比較起來,Google Domains在網域方面算是超級菜鳥,而且服務超級單純,只賣網域託管,其他一概沒有。

Google Domains最大的優點(也是唯一的優點),就是價格超級穩定,很多網域商會自動分析一些較熱門的網域名稱,給予其特別高的定價,但你如果到Google Domains尋找一樣的網域,有可能價格會便宜非常多。

Google Domains的價格基本上以後綴作為標準,.com幾乎都是$12,.biz大多都是$15,給人一種公平理性的感覺(?)

優點

  • 公司大牌
  • 價格穩定、單純
  • 適合購買熱門網域

缺點

  • 介面較複雜
  • 無線上客服
  • 資源較少

價格

(美金)第一年價格續約價格
網域$12$12

總結

全世界眾多的網域商各自有優點與缺點,要怎麼選擇其實就看個人的喜好與需求,最重要的是不要在創作的初期,因為對於網域商的選擇猶豫不決造成你的網站遲遲無法有所進展,網站的內容,才是你真正應該花最多時間的部分!

【建站系列】下一篇文章→【建站教學#4】如何選擇WordPress主機商,我對主機的條件標準

【建站教學#2】8個步驟為你的網路品牌命名

為你的品牌想出一個好記又好念的名字,我想是很多人開啟新事業的第一大難關,到底該如何為你的品牌命名呢?這篇文章我將分享你我個人的8步驟品牌命名法,幫助你一起度過起頭最困難的時期。

還沒看前一篇系列文章嗎?請點擊→【建站教學#1】WordPress.com vs WordPress.org,哪一個才是最佳選擇?


name your business

命名時期的掙扎

為什麼為一個品牌命名是如此的困難呢?我其實也曾經為此迷惘過、煩惱過,在每一次建立新的網站時,我總是從英文想到中文,又從中文想到英文,為的是希望能夠想出一個好聽、記憶點高的品牌名稱,讓來到網站的訪客們,都可以輕易記得我的品牌,未來他們想要找相關資訊時,可以馬上記起我的網站,成為會回流的顧客。

當你們在思考品牌名稱時,場景是不是就像這樣子....:

  1. 坐在我的椅子上...
  2. 到底要用什麼名字好呢...
  3. 用google看一看別人的名字...
  4. 好多好特別的可是我想不出來我的...
  5. 腦袋再度一片空白....

沒有辦法想出一個適合自己品牌的名稱,是因為一個品牌名稱對我們來說似乎事關重大,這個品牌名稱必須要使用在任何我們推出的相關產品上,宣傳時也會不斷出現,這一點讓人倍感壓力。

但你知道嗎?其實有非常多全球知名的品牌,都曾經改變過他們的品牌名稱....


那些曾改名過的品牌

  • Instagram 原本的名字是 Burbn
  • LG 原本的名字是 Lucky and GoldStar
  • Pepsi 原本的名字是 Brad’s Drink
  • Yahoo 原本的名字是 Jerry and David’s Guide to the World Wide Web
  • Google 原本的名字是 BackRub
  • Amazon 原本的名字是 Relentless
  • Dell 原本的名字是 PC’s Limited
  • Nike 原本的名字是 Blue Ribbon Sports
  • Target 原本的名字是 Goodfellow’s Dry Goods
  • 7-Eleven 原本的名字是 Tote’m

不要讓命名這件事成為阻礙你建立新事業的絆腳石,當你在努力建立起事業的過程中,你就會逐漸找到自己適合的方向與內容,即便到那個時候,你突然靈光一閃,想到了你的完美品牌名稱,再做更改也沒有關係的!請不要命名的壓力將你壓垮,拖延你個人發展的寶貴時間

接著,讓我來跟你分享我自己個人命名的八個步驟,幫助你為你的網路事業想出一個喜歡的名稱。


八步驟命名法

8 steps

1.寫下任何你所喜愛的事物

首先,請你先待在一個可以放鬆發想的環境當中,並且拿出手機的計時器,設定時間為兩分鐘,在這兩分鐘之內,寫下任何你所喜歡的事物的名稱,可以是任何形式的詞彙,例如感受、情緒、動物、物品、活動、大自然等等,中英文皆可,並且在發想的過程中,不要花時間思考,單純把出現在腦袋中的東西寫下來,像是以下示範:

  • 設計
  • 設計師
  • 森林
  • 地球
  • 疑惑
  • 奔跑
  • 瑜珈
  • 陽光
  • 筆記本

2.寫下任何形容詞

接著,設定第二個兩分鐘倒數計時,請在這次發想的過程中,想著你希望發展的事業,試著用形容詞來形容這份新事業的本質,以及你期望它未來的面貌,可以天馬行空的去幻想,如以下範例:

  • 專業的
  • 多元的
  • 完整的
  • 全面的
  • 有趣的
  • 特別的
  • 快樂的

3.寫下你想得到的結尾詞

最後一個發想的兩分鐘,請寫下你能想到的場所名稱作為結尾詞,你可以自行發想,當然也歡迎參考以下範例文字作使用,這一步可以幫助你思考出一些文字來完整你的品牌名稱:

  • 工作室
  • 實驗室
  • 研究所
  • 平台
  • 公司
  • 學校
  • 公園
  • 診所

4.將步驟1-3合併

現在你可以嘗試將步驟1~3你所想到的名詞、形容詞、場所開始作各種結合,不限順序及使用的方式,看看其中有沒有任何你喜歡的組合可以作為你的品牌名稱。並且將其轉換成中/英文,看看你的名稱是否在英文或中文都可以簡單好念,一眼望過去不會過於複雜。

如果有任何一種組合讓你有任何猶豫,心中產生疑惑,請馬上把它刪掉,相信你的第一直覺,如果喜歡的組合有很多,也可以找身邊的朋友問問,他們看第一眼時,會把目光停留在哪一個名稱上比較久,那個名字也許就是你的最佳選擇。


5.睡一覺再重新檢視一次

經過以上步驟後,若你現在心中有幾個適合的名稱,請你現在放下手上的紙筆,換個環境走一走,轉換一下心情,或者是去睡一覺,用一個全新的心情及氣氛,重新檢視這個你認為很理想的名稱,是否依然覺得它如原先認為的一樣適合呢?

如果答案是YES,恭喜你,找到了一個理想的品牌名稱,如果答案是NO,一樣恭喜你,沒有因為一時衝動而迅速註冊了自己不喜歡的網域,你依然可以再花點時間重複以上發想步驟來思考你的品牌名稱。


6.確認網域能否使用

接著在確認網域的部分,我個人推薦你使用GodaddyNamecheap,他們所提供的網域後綴是最多種類的,例如.com、.co、.me、.studio...諸如此類,選擇非常多樣化,你可以在上面找到你看起來順眼、好記、且你可以拿來使用的網域組合名。

而且,這兩間網域商的使用客戶群遍布全球,客服也是全年無休24小時,也就是說,當你有任何疑惑、困難需要解決時,都可以透過客服,或者是在Google上搜索全世界的網友是否有類似的問題,解決方法為何等等。


7.確認是否獨一無二

最後,請將你的品牌名稱中文及英文都在Google上搜尋看看,確認是否有人用了跟你類似、相同的名稱,如果有人跟你的想法重複,請你重新思考一個與眾不同的名稱,否則未來會影響到你的網路事業建立、SEO運作,以及容易造成訪客們的困惑。


8.做出最後決定

進行到最後一步,我知道要作出最終決定時總是會特別掙扎,但只要你有確實執行以上幾個步驟,來為你的事業命名,我相信它一定可以做為很棒的開始,預祝你的新事業成功!加油!

【建站系列】下一篇文章→【建站教學#3】如何選擇網域商?2021前六大網域商比較

用CSS語法修改樣式,到底要加在哪裡?

這篇文章要教你的是,到底CSS語法可以加在哪裡,才不會讓網站爆炸呢?以及一些使用CSS語法的小工具們,讓你在學習CSS語法的過程中不孤單。

我想很多人都是程式語法的初學者,,因為擔心自己亂加CSS而導致網站整個壞掉,而不敢隨意接觸CSS語法這塊,總是靠外掛來替網站作微調。

我以前也跟你們一樣,在接觸到Wordpress建站後,才開始慢慢摸索CSS語法,後來就漸漸發覺到CSS的好處與方便性,不僅可省去使用無數個外掛,也減少網站被外掛速度拖累的問題


1.CSS語法修改位置

1-1.外觀自訂

首先,進入控制台後,滑鼠移動到左側的外觀→接著點選自訂,進入網站外觀的自訂區域。

Customise

1-2.附加的CSS

接著點選左側最下方的附加的CSS,你會看到下圖右邊的畫面,下方紅色線條框選處就是你貼上CSS語法的位置。

每當你貼上一個有效的CSS語法,右邊的網站預覽畫面都會照著你的CSS語法作改變。如果你滿意CSS語法的效果,點擊右上角「發佈」就完成了。

如果你不喜歡CSS語法的效果,只要直接把語法刪除,效果就會消失,又恢復到你原本的網站樣式,是一個可以很安全使用語法的位置,不會把網站整個毀滅!可以盡情地嘗試CSS語法。

additional css

2.顏色色表

另外,大家在利用CSS更改樣式時,顏色的表達方式會是6個英文數字組成的色碼,這個色碼可以到 HTML Color Picker 來查詢。

使用方法也非常簡單,從左側色盤挑選好顏色的大方向後,右側會讓你選擇明暗度,中間則是顏色與黑白色文字的預覽圖,當你選好顏色後,下方#開頭的文字,就是你要使用的色碼,請連同前面的#字號一起複製到你的CSS語法中,就OK囉。

html color picker

3.名稱定義

剛開始使用CSS語法時,要修改的樣式的名稱總是讓人很容易混淆,CSS Reference 整理表,你需要用到的CSS語法名稱都在這裡,雖然是英文,但是總好過什麼都沒有靠自己空想,以下提供我比較常用的項目:

  • background-color:背景顏色
  • font-family:使用字體
  • font-size:字體大小
  • font-weight:字體粗細
  • color:顏色
  • padding:外圍寬度
  • border:邊框樣式

4.修改示範

如果你對於CSS語法有一點興趣,在「6個重點整理,用Contact Form 7製作完美的聯絡我們頁面」文章內,我使用了CSS語法來示範一些使用的教學,歡迎閱讀。

【建站教學#1】WordPress.com vs WordPress.org,哪一個才是最佳選擇?

如果你是一個正打算要加入Wordpress行列的新手部落客,你可能會先被 Wordpress.com及Wordpress.org 搞混,我要在這篇文章跟你解釋這兩者之間的差異性,以及它們各自的優缺點比較,幫助你快速作出最適合自己的選擇。


Wordpress.com vs Wordpress.org

wordpress

如同我在開頭所說,我會在這篇文章讓你了解幾個 Wordpress.com 及 Wordpress.org 之間的分別,在開始這些細節的比較前,我要先替你建立兩者的一些基礎概念

Wordpress.com

Wordpress.com 會替你處理所有網站營運的相關工作,你不用下載任何外掛、或者額外的程式來管理你的網站,只需要依照你個人的需求,選用他們所提供的服務方案,讓 Wordpress.com 完全代管你的網站內容。性質類似於痞客幫、無名小站、Wix.comWeebly等。

在每一次你想要撰寫文章或調整設定時,你只需要到Wordpress.com登入你的會員帳號密碼,就可以進入網站的後台來作你想做的動作。

WordPress.org

WordPress.org 則是一個免費的網站架設系統,你必須自行購買網域Domains、主機Hosting,處理所有的網站架設過程、內容、設定等,而這同時也代表著「你掌握你的網站的一切」,不必擔心網站的營運商倒閉造成所有心血付諸一炬。

而Wordpress.org進入後台的方式,則是在你所購買的網域後方加上/wp-admin,再輸入你自行設定的使用者名稱與密碼,才能開始進行網站的操作。


1.價格

price

Wordpress.com

WordPress.com 提供免費以及付費的服務選擇,付費會員的每個月最低費用是一個月4美元(130元台幣),你就可以獲得Wordpress.com提供的最基礎功能,如以下:

  1. 自訂網域
  2. SSL憑證
  3. 數十個免費佈景主題
  4. 移除Wordpress.com的官方廣告

WordPress.org

而 Wordpress.org 則需要你自行找網域商購買網域(例如NamecheapGodaddy),以及主機商購買安裝及運行 Wordpress.org 系統的網路空間(例如Siteground、Bluehost等),如果以Namecheap的網域,加上Siteground的主機費用,一個月大約是4.69美元(約150元台幣)

其實兩者初期營運的花費差距並不大,但如果你使用的是Wordpress.org,上面列出Wordpress.com的4點服務內容,Wordpress.org都可以做到,甚至 Wordpress.org 的功能遠遠多過於Wordpress.com

另外要提醒你注意的是,兩者通常都需要用戶在一開始就付款購買至少一年以上服務,比較少有月付的主機機制,但如果你不滿意你所選擇的網路商,大多數都可以在第一個月內獲得退款。


2.設定過程

setup

Wordpress.com

Wordpress.com 的初始設定非常地簡單,你只需要到Wordpress.com點擊「著手打造網站」接著按照畫面上的提示,依序輸入帳號、密碼、個人資料,並且選擇主題、設定名稱等,就可以完成一個全新的個人網站,非常淺顯易懂。

WordPress.org

Wordpress.org 就相對難上許多,你需要到購買好的主機商那邊安裝Wordpress.org系統,有些主機商提供一鍵安裝的服務(例如例如SitegroundBluehostGodaddy等),但如果你的網域與主機是分開購買,那麼就還需要設定網域的DNS指向,並且在完成安裝後,處理網域的SSL憑證等。

對於新手來說,我相信你看到上面這一段文字可能感覺到天旋地轉,每句話就算把每個字都分來看也都不一定能夠看得懂,如果你有架設網站的需求,本站也有提供服務替你完成完整的網站初期架設,歡迎來信至[email protected]詢問,費用以你的網站需求作調整(US$50 - 300不等),或者是參考【WordPress】新手架站步驟流程設定總整理來架站。


3.主題數量

Themes

Wordpress.com

你的網站整體的長相樣貌會因為所選擇的主題而有很大的差異性,Wordpress.com 主題數量因你的付費方案而定,免費及個人方案有150多種主題可供選擇,會員的費用越高可以有越多不同的選擇

WordPress.org

而Wordpress.org 官方提供的免費主題高達7500種以上,至今仍在增加中,市面上也有很多公司會開發一次性付費的主題,適合在不同性質的網站作使用,價格不定,數量更是成千上萬。


4.外觀自訂

customize

Wordpress.com

在自訂選項這部分,Wordpress.com 一樣提供了你最基本的權限去調整一些網站中的細節,但如果要讓你的網站看起來更加與眾不同,你可能需要升級會員的方案,付費才能解除部分功能使用上的限制

WordPress.org

Wordpress.org 它會依照你所選擇的主題不同,而有不一樣的自訂功能提供你作調整,且不需要再額外付費給Wordpress.org來啟用一些功能(例如:自訂CSS)

而且,Wordpress.org還可以透過安裝頁面編輯器外掛(例如:ElementorDIVIStackable)來製作網站的頁面,你的網站可以充滿多樣化的頁面,而非單純的部落格網站。


5.外掛

plugins

外掛Plugin是可以為你的網站增加不同功能的Wordpress元件,藉由這些外掛的安裝,你可以將網站打造成一個電子商務平台,或者有效率地在網站上管理你的聯盟行銷連結。

Wordpress.com

Wordpress.com需要將會員升級到商務版(美金25元或台幣799元/月)以上,才可以自行安裝外掛使用,系統可提供的數量超過50000種

WordPress.org

至於Wordpress.org則可以免費使用跟Wordpress.com一樣的50000種外掛,不必額外付費。另外,網路上一些公司或個人獨立開發的外掛也都可以下載使用,沒有安裝上的限制。

但這個系統開放性的外處是,是沒有人替你把關這些外掛的安全性,也可能使用帶有駭客攻擊的外掛,導致網站遭竊等等,所以請不要輕易下載一些付費破解版的外掛來使用


6.客服

customer services

Wordpress.com

Wordpress.com的免費方案不提供任何客服支援,你至少需要將月費上升到個人方案(4美元/月),才會享有周一至周五的線上客服,若使用商務版以上的月費,則可以使用全年無休的線上客服。

WordPress.org

WordPress.org 是由一群來自世界各地的網路義工開發的系統,並沒有官方的客服可以諮詢,但通常你購買網域或者主機時,大多數主機商都會提供客服服務,你的網站有任何問題時,他們都將是你的最佳夥伴。

另外,全世界目前有超過30%的網站是利用 WordPress.org 製作的,所以你可以在網路上尋找到非常多的教學、回應、討論區等,都在解說關於 WordPress.org 的相關操作或者設定等,海量級的資訊。


7.備份及搬家

backup & move

Wordpress.com

使用 Wordpress.com ,你可以擁有它提供給你最基本的保障,目前還沒有聽說過該公司發生過任何重大的資安洩漏事件或資料毀損,但是你不能任意地搬家,Wordpress.com不會提供你任何免費的搬家方法,如果某天你想要更換平台,唯一的可行作法可能是土法煉鋼地將網站文章一篇一篇複製貼上,並且替它們各自設定好相同的網域,否則長期累積下來的Google SEO可能都會消失不見。

WordPress.org

在前面我提到過,WordPress.org 是一個完全免費的網站架設系統,你所購買的主機、網域都是屬於你自己的,今天你如果需要備份,可以使用免費的備份外掛(例如:Updraftplus、All-in-One WP Migration),將網站資料完整地備份在另外的網路空間(如:Google雲端空間),若需要更換主機時,將網站都備份好,就可以隨心所欲地移動搬家,不必屈就於任何平台上的限制。


8.營利方式

make money

Wordpress.com

WordPress.com 有提供幾種替網站增加營利的方法(讀者捐贈、廣告刊登等),但都必須要升級到至少進階版付費會員,才可以作使用,但這兩種方法我想一般人都很難在一開始賺到滿意的收入。

如果你使用的是免費版,你不僅不能使用營利功能,還要被 WordPress.com 強制放上對方的廣告內容。

WordPress.org

透過 WordPress.org 來創造各種不一樣的營利模式,可以完全依照創作者的思想與網站走向來決定,大多數獲利方法都能透過安裝外掛、搭配外部系統來達成,舉例來說:

  • 聯盟行銷:可安裝外掛Pretty Links系統化管理連結。
  • 電子郵件銷售:可搭配WPforms蒐集並管理Email名單。
  • 販賣商品:可安裝外掛Woocommerce製作你的電子商務系統。
  • Google Adsense:自行安排Google的廣告位置投放。

總結

如以上文章所述,WordPress.com 和 WordPress.org 各有其優缺點存在,選擇完全依照你個人理想的網站運作方式、費用是否符合預算以及願意投資多少時間在上面而定。

決定哪一個更適合我

如果你只是希望創作一個單純分享個人想法、心情等,比較隨心所欲的網站,那你可以從 WordPress.com 開始嘗試,它的好就在於不必花費太多心力去維護

如果你想要的是一個商業型的網站,創造出個人品牌、風格、形象化等具有特色,可以吸引到讀者注意力的網站,我建議你使用 WordPress.org,你可以透過它不受限制地打造出任何獲利的可能性

【建站系列】下一篇文章→【建站教學#2】8個步驟為你的網路品牌命名