(網站帶路姬) WordPress用 Flatsome 客製化外觀

如何修改頁首區域 ?

 

可透過 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：下拉選單的樣式

 

如何修改頁尾區域？

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

什麼是側邊欄？如何編輯裡面的小工具呢？

 

小工具可以在側邊欄或頁尾的區域

 

這個影片教你怎麼新增與編輯小工具，並且把小工具指定到你想要的位置。

 

 

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

 

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

 

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

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

    

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

    

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