使用 Facebook 登入
使用 Google 登入
Joomla 的功能很強，很多人會誤以為它很難。但是，要做一個形象網站，實際上也很容易。只要搭配 頁面編輯器 ，完全不用網頁基礎，也不用寫程式。
(這一篇文章很長，提供完整的安裝說明)
Joomla 給我的印象是，
權限設定功能很強，就跟我以前寫管理系統的權限一樣的設計概念，所以很喜歡它。因為可以針對不同的使用者、群組設定不同的使用權限。依照給予的權限，每個使用者可以看到的功能和內容就都不一樣了，這是它很特別的地方。
另外，
乾淨、簡潔的管理介面和強大的擴充功能，也是它的優勢之一。
如果你只是要做一個簡單的網站，就不需要了解 joomla 大部份的功能。只要把它當基礎，搭配 SP Page Builder 頁面編輯器 的「頁面範本」，很快就可以完成，比編輯Word文件或做簡報檔還要簡單。
這篇文章，我們就來看看要怎麼做吧！
安裝 Joomla 網站，需要先有主機。你可以使用 XAMPP 伺服器套件，把網站安裝在自己的電腦。
這裡我選擇使用 Byethost 免費虛擬主機，模擬大部份使用者會租用的虛擬主機。因為它使用一般虛擬主機常用的 cPanel 控制面板。所以，如果在練習之後，想要把網站安裝在自己租用的虛擬主機，就會變得更簡單。
(免費主機因為速度比較慢、有時會掛掉連不上，所以只適合架站練習使用)
(如果你已經租用自己的虛擬主機，也可以直接在 cPanel 控制面板安裝 Joomla網站... 和我們接下來的安裝一樣，單純只要 Joomla 就可以，不用安裝其他模板)
目前大部份虛擬主機的 cPanel 控制面板，都有提供 Joomla 線上安裝。
線上安裝 Joomla ，就解決了 Byethost 單一檔案上傳10M的限制了。因為 Joomla 安裝檔大於10M
點選 Signup for Free hosting 按鈕，申請一個免費虛擬主機。
填寫申請資料
Sub Domain Name，填寫你要使用的名稱，建立子網域。
輸入管理者密碼，這個密碼用來登入 cPanel 控制面板。 FTP 和 MySQL 密碼。
輸入Email，這個email信箱用來接收啟用通知信，請正確填寫。申請後，收信並點一下啟動連結。
設定網站的分類，選擇一下網站的類型。你可以選擇個人、商業用途或其他分類。
網站語言，只提供英語和非英語，保留使用預設 English 即可。
輸入圖形驗證碼顯示的英數字，按一下註冊按鈕(Register)即可完成申請。
送出申請後，會寄出啟用信件到你填寫的email信箱，收Email，點一下啟用連結即可。
如果10分鐘後還沒有收到啟用信，可以點選一下頁面上的連結，系統會重寄email。
一般沒有收到信件，可以先檢查一下垃圾郵件，有可能被當成垃圾信了。
被Gmail丟到垃圾郵件了
(Gmail) 點選一下“回報為非垃圾郵件”，以後就可以正常收到Byethost的通知信。
點選Email裡的啟用連結，啟動帳號。
啟用及建立帳號需要一些時間，請稍候。
帳號建立後，會提供主機管理相關資料。可以將這一份資料保存下來。(這一份管理資料，也會寄到你的信箱)
左邊顯示訂單資料，主機是免費的
以上，網站空間部份就申請完成了。
如果你使用其他廠商的虛擬主機，也需要準備好這些主機的管理資料。
接下來就開始建立網站 (土地買好了，就開始蓋房子了)
這裡我們選擇做網站的方式是，買土地(租虛擬主機)、蓋房子(安裝Joomla)。所以，後續彈性空間會比較大，可以自由調配。雖然是自己來，但是使用 Joomla 和 SP Page Builder 蓋個基本的房子，其實很簡單。
現在就開始吧！
登入 cPanel 控制面板
輸入使用者名稱和密碼
預設語言使用English，你也可以更換成其他語言。這裡可以保持使用英文，需要使用其他語言，可以登入之後再設定。
重要通知
因為Byethost需要權限來寄送email通知給你，所以需要你核准。
點選 I Approve 按鈕即可繼續。
接下來看到的就是 cPanel控制面板
cPanel 非常有名，使用者很多。網站上大部份虛擬主機也都使用 cPanel
如果你只是想要架網站，就只要把 cPanel 當平台或工具就好，就像使用 Windows 一樣。
所以，進 cPanel，你可以只做一件事，就是 安裝Joomla
往下捲動到 SOFTACULOUS APPS INSTALLER
點選 Softaculous Apps Installer
這裡有很多系統可以安裝，我們選擇 Joomla
點選 Install 按鈕，可以直接安裝。
Demo 可以展示網站... 你會發現只有一頁。沒錯，我們只要這樣就好。
Overview 可以瀏覽相關的介紹
安裝Joomla，可以點選前面提到的 Install 按鈕，或是以下 Overview 頁面的 Install Now 按鈕，開始安裝。
安裝前，只要先設定管理者帳號、密碼即可。其他部份，在 Joomla 安裝好之後再調整就可以了。
Admin Account
管理者帳號，建議不要使用預設的admin(很容易被猜出來)，可以改用其他名稱。
管理者密碼，設定好之後，記得記下來，登入網站後台需要使用它。
管理者名稱，可以修改或保留預設值。
管理者Email，可以改為自己使用的Email信箱。Byethost 的預設信箱，通常不太會去使用它。
其他先不管它，直接點選最下方 Install 按鈕。
安裝過程很快，請稍候。
安裝完成後的提示訊息，可以看到網站位址和管理區登入位址。
新安裝好的網站，只有首頁，沒有資料。
http://hiyourweb.byethost31.com/
先進管理區
http://hiyourweb.byethost31.com/administrator
使用前面安裝設定的管理者帳號、密碼登入
輸入帳號、密碼之後，點選 Log in 按鈕登入管理區。
進入 Joomla 的管理後台之後，先安裝中文語言檔。
從管理區選單 > Extensions > Language(s)，進入語言管理
點選 Install Languages 按鈕，先安裝繁體中文語言檔。
在 Chinese Traditional 繁體中文前方，點選 Install 按鈕。
看到安裝完成的訊息之後，回到 Language(s)
將網站和管理區語言，設定為繁體中文。(點選星號圖示，設定為預設，會顯示橘黃色星號)
關閉不要的訊息
關掉啟用 Joomla 統計訊息
回到控制台
關掉安裝後訊息(隱藏所有訊息)
安裝 Helix Ultimate
下載及安裝 Helix Ultimate Template
下載需要先註冊帳號(可以免費註冊)
登入帳號之後，點選 Download 按鈕，下載 Template
下載的檔案：helixultimate_template_j3_v1.1.2.zip
從管理區選單：擴充套件 > 管理 > 安裝
點選“瀏覽檔案”按鈕或把剛下載的template檔案，拖拉到虛線區域上傳及安裝。
安裝完成
進入佈景樣式頁面，將剛才安裝的 Helix Ultimate Template 的樣式 shaper_helixultimate - 預設 ，設定為網站預設使用的樣式(點選星號按鈕，預設會顯示橘黃色星號)
看一下前台網站
嗯！看不到什麼東西，對吧！因為還沒有設定頁面和內容。
安裝 SP Page Builder Pro 及 匯入頁面範本
接下來要使用的 SP Page Builder Pro ，需要付費購買，因為付費的PRO版才可以使用頁面範本。
如果覺得 SP Page Builder Pro 不錯想要使用，可以上它的開發者JoomShaper網站付費購買後下載或是訂閱我們的架站課程方案成為學員。
SP Page Builder Pro US$49+，台幣約1,519元/年 (目前因疫情關係，折扣20%，約1,209元)
訂閱 JoomlaEC架站課程，台幣5,999元/年(目前暑假優惠折40%，約3,599元)，可以學習更多 SP Page Builder Pro 的使用技巧。
使用頁面範本產生頁面很快，不用花時間設計。對於需要馬上建立網站或想要學習的人，頁面範本都有很大的幫助。
不要從頭開始建立你的 Joomla網站，這樣一開始你會很挫折的。使用頁面範本，事先建立好完整頁面，這樣你就不需要那麼辛苦了。不管是自己或是幫客戶做網站，這都是很棒的事。
安裝 SP Page Builder Pro 頁面編輯器
檔案名稱：com_sppagebuilder_pro_v3.7.4.zip (2020-07-14)
一樣從擴充套件 > 管理 > 安裝，上傳 SP Page Builder Pro 安裝檔及安裝。
安裝完成後，
管理區選單會多一個 SP Page Builder 選單，從這裡可以快速使用頁面編輯及管理功能。
我們先幫它做中文化
從 JoomlaEC 網站選單 > 中文 > 中文語言檔系統 按鈕，下載中文語言檔(需學員或訂閱JOOMLA中文語言檔系統)
在中文語言檔系統 > 套件管理，這裡包含已中文化(或進行中)套件的繁體中文語言檔。
找到 SP Page Builder Pro
在 SP Page Builder Pro 語言檔頁面，(捲動到頁面最下方) 點選“匯出ZIP安裝檔“
匯出語言檔
匯出的語言檔，一樣從擴充套件管理安裝
安裝後， SP Page Builder 選單就可以看到繁體中文了
這是 SP Page Builder 的後端管理介面
因為是付費套件，所以要先輸入授權資料。完成後，就可以開始匯入頁面範本了。
點選“新增”按鈕，建立新頁面。
輸入標題名稱之後，按 儲存 按鈕，先儲存空白頁面。
匯入頁面範本，可以使用前端編輯或後端編輯。這裡跟大家示範前端編輯，很直覺、很好用哦！
包含設定選單，我們都在前端編輯完成。
點選 前端編輯器
使用前端編輯器，前台網站需要先登入管理者帳號
左側是 SP Page Builder 的工具列和附加元件(addons)
右邊直接點選 頁面範本
SP Page Builder Pro 頁面編輯器，提供37種漂亮的版型、224個頁面讓你使用(至2020-07-15，持續增加中)
每一組範本都包含首頁、關於、服務或是聯絡...等，依類型會提供不同的頁面範本。
(除了頁面範本之外，也有很多預先設計好的區塊可以使用)
把所有範本展開顯示
切換回 Layout Bundles ，找到一組喜歡的版型範本。
這一組版型，包含幾個網站需要使用的頁面。
先選取 Home (首頁)，點選 Import 按鈕，匯入頁面。匯入頁面之前，你也可以點選一下 Live Demo 按鈕，看一下Demo網站的樣子。
首頁版型已經匯入了
因為要截圖的關係，我把畫面寬度縮小了。
把左邊的工具列收起來，看一下
點選下方 Save 按鈕，先將頁面儲存。
將頁面加到選單 Add to Menu
簡單設定一下 選單標題、別名，選單保持使用 Main Menu (主選單)
點選 Add to Menu ，將頁面加入 Main Menu
回到管理後台(網站的管理區)，設定一下 Main Menu... 頁面應該還沒關掉吧！
將剛才建立的首頁頁面，設定為網站預設的首頁。
將預設安裝的兩個選單項目回收(不要了)
勾選後，點選 回收 按鈕
剩下我們剛才建立的首頁
看一下前台網站
再新增另一個頁面
輸入 頁面標題 之後，點選 Create Page 建立頁面。
點選 頁面範本
選擇 About 頁面，點選 Import 按鈕 匯入頁面。
一樣將 About 頁面加入選單
輸入選單標題和別名，點選 Add to Menu 按鈕，將頁面加入選單。
因為新頁面還沒有儲存，所以記得要按一下 Save 按鈕。
選單已經可以看到有兩個頁面了
接著把剩下需要的範本頁面新增完成，這樣就很像一個完整的網站了。
頁面新增之後，需要把內容和圖片(媒體)換成自己的。
看一下網站： http://hiyourweb.byethost31.com/
SP Page Builder 有很直覺的前端編輯功能，非常方便、簡單。它還有很多很精彩、很棒的功能，等你來發掘。
以上分享使用 SP Page Builder Pro 頁面範本建立網站的方式
如果想要學習更多 SP Page Builder Pro 的編輯技巧，歡迎訂閱我們的架站課程
需要編輯圖片和影片，也可以訂閱學姊的設計課程。
歡迎加入我們，製作網站或學習網頁編輯技巧。除了增強專業技能，也可以為自己節省支出、創造收入哦！
相關課程
頁面編輯 # 使用SP Page Builder，快速建立網站頁面
頁面編輯 # 做網站必備：SP Page Builder Addons 實作與應用技巧
