內容目錄
歡迎回到鵠學苑 — WordPress網頁設計超詳細攻略 – Flatsome ｜ WordPress主題教學，這一次要介紹的佈景主題，相信會引起許多電商站長的興趣，Flatsome這個付費主題在 envatomarket 這競爭激烈的主題販售的大型網站中，對於 WooCommerce 這套金流購物外掛系統的相容性及客製化程度是相當高的，看到這裡的同學一定會想，在 envatomarket 中很多付費的主題都標榜具有建構電子商務網站的能力，為什麼要選擇使用Flatsome呢？
如果是有使用過 WooCommerce 架設網站的站長都知道，有許多的付費主題對於商品頁面的編輯以及版面設計的自定義功能中相當有限，而商品頁面的佈局以及功能操作對於客戶的使用者體驗卻又是電商網站的重點，照套 WooCommerce 的商品頁版型是無法在競爭的網路購物網站中建立自己的特色脫穎而出進而帶給使用者更好的購物經驗。而Flatsome這款佈景主中很好的解決這個問題，無論是直接可以在預覽模式中編輯網頁的功能，或者是對 WooCommerce 與其周邊工具外掛的進階功能，比起其他付費主題都擁有更好的操作性，那麼，接下來在鵠學苑用心製作的介紹文章中，開始了解Flatsome吧！
(小提醒：鵠學苑的所有教學均是以Apple Mac OS X系統 做步驟示範！)
Flatsome佈景主題下載點
https://themeforest.net/item/flatsome-multipurpose-responsive-woocommerce-theme/5484319?s_rank=1″ target=”_blank
第一步：進入到 envatomar 的首頁，在右邊的下拉清單中選擇Theme&Template，右邊搜尋框中輸入 Flatsome，可以在結果頁面找到Flatsome介紹頁面的連結，點擊圖片進入。
第二步：在Flatsome的介紹頁面點擊如下圖中的 Live Preview 按鈕，可以連接到Flatsome範例網站，或點擊圖片也可以。
第三步：可以在Flatsome的預覽範例網站的頁面中點擊Demo(圖一)，查看不同版型樣式的電子商務網站，或者點擊SHOP(圖二)可以檢視更多的網頁元素細節，比如說全寬佈局、列表檢視商品、商品圖片放大檢視等，都可以在這裡獲得完整的演示。
第四步：Flatsome這個佈景主題能完美的創造電子商務網站，具有專為網路商店網站多樣性的編輯工具，並能加快響應式(RWD)網頁效能給予使用者最佳的購物體驗。
第五步：在建構網站的過程中，無論是公司介紹、聯絡我們、限時特賣、商品展示等都有很多為這些功能量身打造好的範例網頁，可以透過導入資料的方式直接建立版型，而不需要花費大量的時間做網頁內容排版及工具選用，還必須去憑空想像出網頁內容。
第六步：使用Flatsome開發的 UX Builder 來設計網頁，在頁面預覽的同時可以加入網頁元素及自定義網頁樣式，所做的編輯結果將與預覽畫面同步，而無需透過傳統編輯的方式，加快建構網站的過程時間。
第七步：Flatsome與WooCommerce的契合度遠超你的想像，可用於任何類型的電子商務網站專案，支援任何版本的WooCommerce，並且能實施主題與外掛同步更新。
第八步：對於響應式網站能透過 lazy loading 的技術延遲圖片載入順序讓網站讀取速度更快，並且能針對任何的螢幕顯示器大小，讓圖片有自適應解析度的效果，不會讓圖片有無法顯示或顯示不完整的狀況。
第九步：在網頁精選圖片中可以設定當螢幕切換為較小解析度時，可自定義圖片中重點的顯示位置讓使用者觀看，而不會出現商品圖片顯示位置錯誤的情況。
RWD 響應式設計相關知識
https://www.design-hu.com/news/rwd-web-design.html
什麼是 RWD 響應式設計？為何網站需要 RWD 功能？
https://www.design-hu.com/web-news/rwd.html
第一步：在這一個小節將簡單介紹Flatsome上傳到 WordPress 後的設定流程，之所以會特別提到這個步驟，是因為Flatsome有別於其他佈景主題的安裝設定方式，因此特別將步驟與各位說明。可以看到下圖中是在 WordPress外觀 中安裝(上傳)完Flatsome後出現的歡迎字樣，直接點選 Let`s go 的按鈕開始後面的設定步驟。如果對於安裝佈景主題的流程不了解，可以參考鵠學苑之前的教學文章 WordPress 教學 基礎介紹五（外觀） 。
第二步：要啟動Flatsome的正式版本以及後續的主題自動更新功能，必須輸入購買序號，可以點擊下圖中紅色方框標示的連結前往 envatomar 帳戶頁面中下載。
第三步：如圖所示，輸入序號後會有主題已經啟動自動更新功能的提示，點擊 Continue 以繼續設定。
第四步：這裡是說明為新網站啟用子主題，簡單來說就是所有更改網站的內容將可以在子主題中做編輯，例如修改 PHP 、新增 CSS 樣式等，而當主題有重大更新時，將不會變動到我們所做的修改，這個步驟筆者強烈建議一定要安裝，這樣在後續的網站管理及維護上會省去相當多的麻煩，也能維持網站的穩定性。除了安裝子主題避免因為 WordPress 版本更新造成網站問題，鵠學苑也提供另外的客製化做法。
WordPress 停止自動更新
https://www.design-hu.com.tw/wordpress/wordpress-custom/wordpress-stop-auto-updates.html
第五步：在這個步驟中列出了Flatsome所必須安裝的外掛，點擊藍色的文字連結即可安裝，建議全部安裝，以避免主題啟用後編輯範例網站版型時出現問題。
第六步：在這裡的操作是將所有範例網站的內容全部安裝，可以自由選擇想要匯入的網站頁面種類，當然也是全部匯入較好，畢竟能多一個版型做修改，就能花少一點的時間在排版及校正網頁內容上。
第七步：在上一步點擊 Continue 後所有範例網站內容就會開始匯入，請靜待完成，如果說網站內本來就有安裝過其它佈景主版型，或是要預防安裝新的外掛版型會導致網站前台顯示問題，可以先為網站做備份，至於如何備份可以參考之前的教學文章：All in one WP Migration 教學 WordPress搬家 及 網站備份外掛。
第八步：在這裡可以預先設定 Logo(品牌標誌)，並選擇想套用的案例網站版型，當然之後依然可以選擇其它的樣式，Flatsome的 Demo 是一次安裝完全部內容，因此不存在對於當前範例網站版型不滿意時要重設 WordPress 再重新匯入其他版型的問題，而是可以在前台的Main Menu(主要選單)中直接挑選及修改。
第九步：這裡說明 了Flatsome支援以及不支援的項目，與其他的佈景主題幾乎相同，直接點選Agree and Continue即可。
第十步：最後一個步驟，這時Flatsome所有基本的設定都已經完成，接下來點選下圖中紅色方框標記的按鈕，可以直接開始設定 WooCommerce，如果不想設定，也可以點選最下方的View your new website 直接進入網站前台。
第十一步：如果在上一步選擇 開始設定 WooCommerce，將會進入到下圖畫面，可以依照紅色方框中的步驟一一做設定，詳細的 WooCommerce 教學鵠學苑後續會有完整的系列課程。
第十二步：在WordPress後台中可以找到Flatsome的項目，點擊後在選項中點選 Theme options，會進入到自訂的頁面，如同Flatsome範例網站頁面一樣，可以挑選不同類型的範例網站直接做編輯以查看樣式，特別要說明的是，Flatsome的網站版型是”不會”顯示媒體檔案(圖片、影片、音訊等)，因此可以直接編輯文字及圖片，而不用再將範例網站中的圖片做刪除，相當方便。
第十三步：同樣在自訂的畫面中，可以在選單上找到Shop(WooCommerce ) 的選項，點擊進去後可以看到 WooCommerce的各種詳細設定，這也是其他付費佈景主題所不具備的功能，因此如果遇到WooCommerce商品編輯的相關問題，可以到這裡來嘗試設定解決。
在最後不得不提的是Flatsome的另外一個特點，在使用其他佈景主題時的標準順序，就是在編輯完頁面按下更新的按鈕，然後再切換到前台查看編輯後狀況，如果對於修改的結果不滿意，就要不斷重複以上的步驟，而如果使用Flatsome編輯網頁的話，只要修改完成的當下就能立即看到編輯後結果，例如像網頁元素之間欄列的間距、圖片覆蓋區域大小、文字顏色的變更等等，這樣的編輯方式可以提高許多建構網站的效率。
而另外一個我想要特別強調的是，有許多購物網站都不具有像 “願望清單“、”購物車商品列表”、”商品快速瀏覽“這樣的功能，而我們在看一些知名的大型購物網站，這樣的功能都相當完善，雖然說這些功能都不是必須的，但學習別人(大型購物網站)成功的經驗，也能夠提高使用者在網站中的購物體驗。在Flatsome就具有在安裝時會直接將以上功能內建到範例網站中，省去還要找尋外掛以及確保相容性的時間。綜合以上兩點，相信足以成為選擇使用Flatsome建立第一個電商網站強而有力的誘因。今天的教學到這裡告一段落了，不要忘記持續關注鵠學苑的最新文章，想學習超詳細的WordPress攻略嗎？？來 鵠學院 就對了！我們下次的教學見～
一頁式網站介紹 – 單頁式活動網站製作要點與應用說明
Site Kit for WordPress – Goolge 官方服務整合外掛正式上線
Google 優先索引行動版內容 將於一年內對所有網站實施