第四天:全站式的設計樣式調整

只要堅持約一小時,你就可以改好 LOGO、把網站客製化成自己喜歡的風格喔!
建立全新
WP 網站
套用版型
增加內容
編輯首頁
編輯選單
調整設計
修改樣式
安裝外掛
擴展功能
好學生推廣
加碼影片!

0.第四天的課程開始囉!

歡迎來到五天自學衝刺班的第四天!今天的課程的前兩個影片蠻重要的,我會帶著你改網站的 LOGO 和最下面的智慧財產權宣告的文字

其餘的影片呢,會幫助你對 Soledad 主題可以客製化外觀的項目有更深的了解,基本上除了文章與頁面的內容以外,首頁、頁首、側邊欄、頁尾等等的設計與排版調整,都將在今天的影片會提到喔!(幾乎都在 外觀>自訂 裡 )

大家可以參考今天的影片,依照自己的需求來做外觀上的調整,如果對示範網站的樣式與排版已經很滿意,也不一定需要改動太多☺️

看完今天的影片,你也會更加了解,原來可以客製化的選項這麼多!

  1. 所以才能用同一個佈景主題,做出幾百個看起來差別很大的示範網站!
  2. 而且,每個佈景主題的自訂項目與分類的方式都不一樣喔!所以如果能找到比較完整的教學(像帶路姬的五天自學衝刺班),真的會比較有頭緒一些!
  3. 很多免費的佈景主題,大概就是把 外觀 > 自訂裡 的選項 90%都鎖起來,讓你體驗看看他的用法、看看選項是如何分類的而已,不過大部分的細部設定是需要升級才能解鎖使用的,順帶提一下讓大家有點概念囉🥰! 

1.認識網站的四大區域

重要觀念! 5’04”

為什麼要分四大區域?
  1. 區域是帶路姬自己幫大家區分的,為了幫助新手比較好猜測,你想改的東西「可能」從哪裡改?
  2. 假如你想改 Logo,他在頁首的區域,就不會跑去頁面的內容編輯器改,因為他不在內容區域,所以,請到外觀自訂編輯器裡的 Header 去找。
  3. 假如你想改頁尾的小工具區域,你也不會跑去頁面的內容編輯器改,他不在內容區域,所以請到外觀自訂編輯器裡的 Footer 去找。

以此類推…

2. 如何修改頁首區域 ?

 跟著影片操作就可以了喔! 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) 相關的客製化設定,大概在這些地方可以找到:
  1. Header >Header Presets: 從預先設計好的頁首排版中直接選擇套用。
  2. Header > Logo & Site Identity:上傳與設定 Logo 圖片
  3. Header > Sticky Header:捲軸往下拉時,黏著於網頁頂端的頁首
  4. Header > Dropdown Style:下拉選單的樣式

如果你真的找不到修改樣式的地方,歡迎到帶路姬的社團找找看答案,或者購買 YellowPencil 外掛來輔助,會簡單很多喔!

3. 如何修改頁尾區域?

可以先參考,如果有需要才調整,非必做項目:7’23”

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

這三個頁尾區域的樣式:
  1. 請到「外觀 > 自訂 > Footer」來修改樣式。
  2. 包含他們的字體顏色、背景顏色、還有智慧財產權區的宣告文字等等。
Footer 1 與 Footer 2 兩個小工具區塊的內容:
    1. 可以點選 「外觀 > 自訂 > Footer」裡面的「Edit Footer Widgets」來分別編輯包含的小工具。
    2. 或者到「外觀 > 小工具」,展開「Footer 1」或「Footer 2」來分別編輯包含的小工具。

如果你真的找不到修改樣式的地方,歡迎到帶路姬的社團找找看答案,或者購買 YellowPencil 外掛來輔助,會簡單很多喔!

4. 如何客製化網站的整體樣式?

可以先參考,如果有需要才調整,非必做項目: 2’49”

Flatsome 有些設定是「全站性」的改變整體的樣式
    1. 外觀 > 自訂 > Style > Colors: 設定一個主要色系。
    2. 外觀 > 自訂 > Style > Typography: 各種字體相關的設定,像是標題大小、內文字體大小、選單字型等。
    3. 外觀 > 自訂 > Layout : 設定網站的寬度與整體的背景圖片與顏色。

如果你真的找不到修改樣式的地方,歡迎到帶路姬的社團找找看答案,或者購買 YellowPencil 外掛來輔助,會簡單很多喔!

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

可以先參考,如果有需要才調整,非必做項目:5’02”

只要在設定的地方指定一個空白的頁面,部落格會自動列出文章喔!這個部落格頁面,有自己獨特的設定樣式的地方。
    1. 「設定 > 閱讀」: 請選擇你要哪一個頁面當「文章頁面」,也就是部落格頁 (範例中是指定Blog頁)。
    2.  「外觀 > 自訂 > Blog > Blog Layout」: 可以設定部落格列表頁的排版,以及是否要隱藏側邊欄。
    3.  「外觀 > 自訂 > Blog > Blog Single Post」: 可以設定部落格單一文章頁面的排版,以及是否要隱藏側邊欄。

如果你真的找不到修改樣式的地方,歡迎到帶路姬的社團找找看答案,或者購買 YellowPencil 外掛來輔助,會簡單很多喔!

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

可以先參考,如果有需要才調整,非必做項目:5’45”

頁面有兩種,一種是站長自己新增的,另一種是WordPress 自動匯集相關性內容,自動整理產生的。
  1. 舉例來說:文章如果有一個分類叫「美食」,然後你在主選單裡,加入這個分類到選單裡,你覺得他會怎麼呈現呢?
  2. 因為你並沒有自己去「新增一個頁面」,而是讓 WordPress 替這個分類自動產生一個頁面,這種頁面叫做「分類的文章彙整頁面」。
  3. 另外一個例子是,一個網站裡可能有很多作者,我們並沒有幫每個作者新增一個頁面去列出他寫的文章,可是 WordPress自動幫你整理出來,產生一個「作者的文章彙整頁面」。
  4. 這些頁面都在你新增分類或新增作者時,就自動存在了,只是你要知道怎麼讓訪客連結到他們
  5. 像是某個分類的文章彙整頁面:從「選單」去新增「分類」到選單中,就會新增這個「分類的彙整頁面」的連結到選單中,讓訪客連結到它。
  6. 從主題選項,去設定要不要顯示 Blog Meta(文章摘要資料:作者、日期等等),如果有顯示,這個作者名稱就會直接連到作者彙整頁面。
  7. 不只文章分類和作者會有彙整頁面喔!像是 Portfolio 作品、商品,只要是有分類的,都會有喔!
  8. 如果要修改彙整頁面的排版,請到「外觀 > 自訂 > Blog > Blog Archive」做設定喔!

如果你真的找不到修改樣式的地方,歡迎到帶路姬的社團找找看答案,或者購買 YellowPencil 外掛來輔助,會簡單很多喔!

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

可以先參考,如果有需要才調整,非必做項目:5’06” 

小工具可以在側邊欄或頁尾的區域
  1. 這個影片教你怎麼新增與編輯小工具,並且把小工具指定到你想要的位置。

 

如果你真的找不到修改樣式的地方,歡迎到帶路姬的社團找找看答案,或者購買 YellowPencil 外掛來輔助,會簡單很多喔!

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

可以先參考,如果有需要才調整,非必做項目:7’23” 

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

如果你真的找不到修改樣式的地方,歡迎到帶路姬的社團找找看答案,或者購買 YellowPencil 外掛來輔助,會簡單很多喔!

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

可以先參考,如果有需要才調整,非必做項目:5’45”

如果你只是想展示商品,不需要實際線上銷售,可以用這個設定,快速隱藏購物車相關功能喔!非常方便!
  1. 請到「Flatsome > Advanced > Catalog Mode」。
  2. 勾選「Enable catalog mode… 」就可以了喔!
  3. 如果想要隱藏價格,可以勾選「Select to disable prices… 」
  4. 還可以跟著影片做,把「加入購物車」的按鈕換成任何你想寫的文字、連結、或者短代碼喔!
    • 範例:<a href=”https://wordpress-135792-1331098.cloudwaysapps.com” target=”_blank”>請詢價</a>,記得把粗體字換成你要連結過去的網址。

如果你真的找不到修改樣式的地方,歡迎到帶路姬的社團找找看答案,或者購買 YellowPencil 外掛來輔助,會簡單很多喔!

你真是太厲害了!又多完成了一天啦!
只剩下第五天了!成功是給堅持下去的人的喔!

建立全新
WP 網站
套用版型
增加內容
編輯首頁
編輯選單
調整設計
修改樣式
安裝外掛
擴展功能
好學生推廣
加碼影片!

歡迎分享課程

歡迎贊助帶路姬

留言給帶路姬吧!

1 留言

Ann 2020-08-31 - 12:51 上午

Hello, Erin, 請問如果有多樣商品詢價 是否可以一次加到與我們聯絡,在與我們聯絡收信中可以顯示多樣商品的詢價嗎? 該如何做呢??謝謝

回答
相關熱門文章
★ 完全免費的影音+圖文教學+ ★

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

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

2021 網站帶路姬
有獎徵站!

只有這次!跟著免費的教學做網站&全民投票都有獎!
70,000 元大獎等你拿!
了解詳情
2021/11/1 ~ 2021/12/29
close-link
2021 帶路姬有獎徵站!七萬等你拿!