WordPress 五天自學衝刺班: 型錄篇
第四天:用 Flatsome 客製化外觀

認識網頁的主要四大區域+Flatsome 主題選項全攻略+Flatsome 網站客製化

第一天
%
準備環境
第二天
%
建立與修改展示網站
第三天
%
建立更多內容
第四天
%
客製化外觀
第五天
%
展望未來

今日目標:用強大的 Flatsome 來客製化網站外觀!

  1. 認識網站的四大區域 ------------------------------------- (5:03 觀念)
  2. 如何修改頁首區域 ? ------------------------------------- (8:03 觀念+實作)
  3. 如何修改頁尾區域 ? ------------------------------------- (7:23 觀念+實作))
  4. 如何修改網站的整體樣式? --------------------------- (2:49 觀念+實作)
  5. 如何修改部落格的樣式與排版?---------------------- (5:02 觀念+實作)
  6. 什麼是彙整頁面?怎麼客製化他的樣子呢?------ (5:45 觀念+實作)
  7. 什麼是側邊欄?怎麼客製化他的樣子呢?--------- (5:06 觀念+實作)
  8. 如何修改 WooCommerce 商店相關的設計?---- (7:25 觀念+實作)
  9. 如何啟用型錄模式,完全隱藏購物相關功能?--- (5:19 觀念+實作)
flatsome-anatomy-all

第四天的課程要開始囉!

Flatsome 的客製化選單超多,沒辦法瞬間搞懂沒關係,請把這頁加入書籤,當作參考書隨時回來複習😊

認識網站的四大區域:頁首、內容、側邊欄、頁尾

5:04

為什麼要分四大區域?

區域是帶路姬自己幫大家區分的,為了幫助新手比較好猜測,你想改的東西「可能」從哪裡改?

假如你想改 Logo,他在頁首的區域,就不會跑去頁面的內容編輯器改,因為他不在內容區域,所以,請到外觀自訂編輯器裡的 Header 去找。

假如你想改頁尾的小工具區域,你也不會跑去頁面的內容編輯器改,他不在內容區域,所以請到外觀自訂編輯器裡的 Footer 去找。

以此類推...

如何修改頁首區域 ?

8:03

可透過 Flatsome 獨有的 Header Builder 來自訂頁首的排版!

  1. 先打開「外觀 > 自訂 > Header」
  2. 利用右下角黑色的 Header Builder 來編輯頁首
  3. Header Builder 有分成四個橫列:Top Bar (頁首上排)、Header Main (主要一排)、Header Bottom (頁首下排)、和最下面的 Not in use (未使用)
  4. 請把你想要的資訊拖拉到你想放置的位子,如果不需要時,請拖到 Not in use 這排就可以囉!

其他和頁首區域 (Header) 相關的客製化設定,大概在這些地方可以找到:

  • Header >Header Presets: 從預先設計好的頁首排版中直接選擇套用。
  • Header > Logo & Site Identity:上傳與設定 Logo 圖片
  • Header > Sticky Header:捲軸往下拉時,黏著於網頁頂端的頁首
  • Header > Dropdown Style:下拉選單的樣式

如何修改頁尾區域?

7:23

頁尾 = 頁尾小工具區塊 1 (Footer 1) +頁尾小工具區塊 2 (Footer 2) +最下面的智慧財產權區塊 (Absolute Footer)。

1. 這三個頁尾區域的樣式:

  • 請到「外觀 > 自訂 > Footer」來修改樣式。
  • 包含他們的字體顏色、背景顏色、還有智慧財產權區的宣告文字等等。

2. Footer 1 與 Footer 2 兩個小工具區塊的內容:

  • 可以點選 「外觀 > 自訂 > Footer」裡面的「Edit Footer Widgets」來分別編輯包含的小工具。
  • 或者到「外觀 > 小工具」,展開「Footer 1」或「Footer 2」來分別編輯包含的小工具。

如何修改網站的整體樣式?

2:49

Flatsome 有些設定是「全站性」的改變整體的樣式

  • 外觀 > 自訂 > Style > Colors: 設定一個主要色系。
  • 外觀 > 自訂 > Style > Typography: 各種字體相關的設定,像是標題大小、內文字體大小、選單字型等。
  • 外觀 > 自訂 > Layout : 設定網站的寬度與整體的背景圖片與顏色。

如何修改部落格的樣式與排版?

5:02

只要在設定的地方指定一個空白的頁面,部落格會自動列出文章喔!這個部落格頁面,有自己獨特的設定樣式的地方。

  1. 「設定 > 閱讀」: 請選擇你要哪一個頁面當「文章頁面」,也就是部落格頁 (範例中是指定Blog頁)。
  2. 「外觀 > 自訂 > Blog > Blog Layout」: 可以設定部落格列表頁的排版,以及是否要隱藏側邊欄。
  3. 「外觀 > 自訂 > Blog > Blog Single Post」: 可以設定部落格單一文章頁面的排版,以及是否要隱藏側邊欄。

什麼是彙整頁面?怎麼客製化他的樣子呢?-

5:45

頁面有兩種,一種是站長自己新增的,另一種是WordPress 自動匯集相關性內容,自動整理產生的。

舉例來說:文章如果有一個分類叫「美食」,然後你在主選單裡,加入這個分類到選單裡,你覺得他會怎麼呈現呢?

因為你並沒有自己去「新增一個頁面」,而是讓WordPress替這個分類自動產生一個頁面,這種頁面叫做「分類的文章彙整頁面」。

另外一個例子是,一個網站裡可能有很多作者,我們並沒有幫每個作者新增一個頁面去列出他寫的文章,可是WordPress自動幫你整理出來,產生一個「作者的文章彙整頁面」。

這些頁面都在你新增分類或新增作者時,就自動存在了,只是你要知道怎麼讓訪客連結到他們。

  • 像是某個分類的文章彙整頁面:從「選單」去新增「分類」到選單中,就會新增這個「分類的彙整頁面」的連結到選單中,讓訪客連結到它。
  • 從主題選項,去設定要不要顯示 Blog Meta(文章摘要資料:作者、日期等等),如果有顯示,這個作者名稱就會直接連到作者彙整頁面。

不只文章分類和作者會有彙整頁面喔!像是Portfolio 作品、商品,只要是有分類的,都會有喔!

如果要修改彙整頁面的排版,請到「外觀 > 自訂 > Blog > Blog Archive」做設定喔!

什麼是側邊欄?怎麼客製化他的樣子呢?

側邊欄,可顯示可隱藏!

這個影片教你怎麼隱藏側邊欄,可以全站式隱藏,也可以單獨每個頁面各自隱藏喔!(這也是只有Avada才能做到喔!)

5:06

WordPress Sidebar 側邊欄可以隱藏

如何修改 WooCommerce 商店相關的設計?

7:23

WooCommerce 是一個管理商品與訂單的電子商務外掛。

  1. 在「WooCommerce > 設定 > 商品」,可以指定要哪一個頁面當作「商店頁面」,會列出所有的商品。
  2. 在「外觀 > 自訂 > Shop (WooCommerce)」,可以設定許多與購物功能相關的細節,例如:
    • 產品目錄:商品目錄頁的排版與設計
    • Product Page:單一商品頁面的排版與設計
    • My Account:我的帳號的頁面的設定
    • Payment Icons:付款方式的圖示
    • 商品圖片:商品圖片的大小
    • 結帳:結帳頁面的設定
    • Cart:購物車的設定

姬密傳授: 如果想要跟老師學習更多的進階設定,建議你先上完這五天課程,到 LINE@ 回報進度獲得折扣碼,就能以超優惠的價格去上進階課程喔!

如何啟用型錄模式,完全隱藏購物相關功能?

5:45

如果你只是想展示商品,不需要實際線上銷售,可以用這個設定,快速隱藏購物車相關功能喔!非常方便!

  1. 請到「Flatsome > Advanced > Catalog Mode」。
  2. 勾選「Enable catalog mode... 」就可以了喔!
  3. 如果想要隱藏價格,可以勾選「Select to disable prices... 」
  4. 還可以跟著影片做,把「加入購物車」的按鈕換成任何你想寫的文字、連結、或者短代碼喔!
    • 範例:<a href="https://wpointer.com" target="_blank">請詢價</a>,記得把粗體字換成你要連結過去的網址。

第四天的課程結束囉!

今天真是辛苦大家了! (也辛苦我了... 😅) 今天的內容,比較像是參考書,大家可以一邊客製化、一邊來這邊找點方向。如果你喜歡帶路姬的教學服務,請大家多分享,讓我有機會可以賺到一點佣金,可以鼓勵我寫更多有價值的教學分享給你們,謝謝你們!。

第一天
%
準備環境
第二天
%
建立與修改展示網站
第三天
%
建立更多內容
第四天
%
客製化外觀
第五天
%
展望未來

你喜歡這樣的學習方式嗎?

這裡需要你的真實見證! 成功時,別忘了留言告訴我喔!- 網站帶路姬

"Lacinia neque platea ipsum amet est odio aenean id quisque."

— KELLY MURRY
ACME Inc.

"Aliquam congue lacinia turpis proin sit nulla mattis semper."

— JEREMY LARSON
ACME Inc.

"Fermentum habitasse tempor sit et rhoncus, a morbi ultrices!"

— ERIC HART
ACME Inc.
標籤

網站帶路姬 / Erin Lin

Hello~我是Erin Lin,美國網頁設計研究碩士,七年美國工作經驗,2012年成立「Erin Lin 網頁設計工作室」專門設計高質感的WordPress網站。2018年五月,開始「WordPress 網站帶路姬」,希望以輕鬆有趣的方式來分享 WordPress 架站教學與資源給不懂程式的新手與創業站長。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Back to top button
★ 完全免費的影音+圖文教學+ ★

帶路姬陪你用五天的下班時間
做好第一個 WordPress 網站

想完整的學好基礎嗎?快來看看吧!😊
close-link
close-link
close-link
Close