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

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

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

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

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

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

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

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

1. 如何換掉 Logo與調整選單樣式?

只要與全站式樣式相關的設定,都可以到 外觀>自訂去找找看喔!

 跟著影片操作就可以了喔! 12’58”

如何換 Logo:
  1. 到網站後台的 外觀>自訂
  2. 點選 Logo & Header
  3. 點選 Logo,並且點選變更圖片,就可以換成你的 Logo 圖片
如何改變頁首區域的排版:
  1. 到網站後台的 外觀>自訂
  2. 點選 Logo & Header
  3. 點選 General
  4. Header Layout 處,可以選擇不同的排版樣式(有的 Logo 置中,有的 Logo 在左邊等等,可以參考 Soledad 示範網站
如何調整選單樣式:
  1. 到網站後台的 外觀>自訂
  2. 點選 Main Bar & Primary Menu

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

2. 如何調整頁尾與智慧財產權區域的樣式?

頁尾區域和頁首區域一樣,都是全站共用的喔!

 跟著影片操作就可以了喔! 6’50”

如何調整頁尾樣式:
  1. 到網站後台的 外觀>自訂
  2. 點選 Footer 頁尾
  3. 點選 General,有很多和頁尾相關的設定
  4. 最下面 Footer Copyright Text 處,可以填入智慧財產權宣告

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

3. 如何調整彙整頁面的排版與樣式?

只要不是自己建立的頁面,都是 WordPress 自動幫我們彙整出來的頁面喔!

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

  1. 到網站後台的 外觀>自訂
  2. 點選 General
  3. 點選 Category, Tags, Search Archive Pages (分類彙整頁面、標籤彙整頁面、搜尋結果彙整頁面等)
  4. Category, Tag, Search, Archive Layout處,可以指定你喜歡的排版方式(可以參考 Soledad 示範網站

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

4. 如何修改單篇文章的排版與樣式?

可以指定文章的排版方式、顯示或隱藏文章中的內容以外的資訊、調整文字大小等等...

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

  1. 到網站後台的 外觀>自訂
  2. 點選 Single Posts 單篇文章
  3. 點選 General 一般設定
  4. Single Posts Template 處,可以指定你喜歡的排版方式(可以參考 Soledad 示範網站
  5. 還有很多選項來顯示或隱藏下方的一些元素喔!

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

5. 如何編輯社群連結與設定社群分享?

可以指定他們是否要顯示?要顯示在哪裡等等...

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

  1. 設定社群連結:到網站後台的 外觀>自訂 > Social Media,填入社群連結
  2. 設定社群分享的圖示:要看這些圖示出現在什麼地方,想要設定他們為顯示或是隱藏,設定的地方都是不同的喔!(請參考影片)

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

6. 如何全站式的調整頁面的樣式?

設定頁面是否要側邊欄?是否要帶有背景的頁面標題等等...

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

頁面是否要顯示側邊欄:
  1. 到網站後台的 外觀>自訂 > Pages 
  2. General > Page Default Template Layout (可以決定頁面要不要側顯示邊欄)
  3. 有時候,以要到編輯頁面的地方,檢查頁面「範本」設定,是否有顯示側邊欄(請參考影片)
關於 Page Header (頁面標題區):
  1. 到網站後台的 外觀 > 自訂 > Pages > Page Header
  2. 勾選 Enable Page Header for Pages,則會在靜態頁面都顯示頁面標題區塊(可以指定背景圖片)

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

7. 如何調整側邊欄的樣式?

側邊欄的標題有些預設的樣式可以選擇、側邊欄的標題樣式設定等等

可以先參考,如果有需要才調整,非必做項目:3’18” (影片中口誤,是第四天最後一個影片啦😅!)

關於小工具的標題的樣式:
  1. 到網站後台的 外觀 > 自訂 > Sidebar > General > Sidebar Widget Heading Style ,選擇你喜歡的樣式
  2. 也可以到網站後台的 外觀 > 自訂 > Sidebar > Colors,調整看看相關的顏色

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

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

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

歡迎分享課程

歡迎贊助帶路姬

留言給帶路姬吧!

15 留言

Andy 2020-08-06 - 3:57 pm

謝謝Erin!

回答
yiling 2020-08-10 - 2:26 pm

請問帶路姬,課程跟到這邊,我用的是diy版型,但是在後台更換了header的底圖,卻沒有跟著該換,字體我也換了 ,但是好像也沒有變,不曉得我漏掉了甚麼? 謝謝抽空回答

◆ 我是在colors for header 換的

◆ 也有清除快取

回答
Andy 2020-08-18 - 8:45 am

Erin妳好:
我是在網站外搜尋到妳的教學的Andy,
我做到現在,有一個問題想要請教Erin,
我也是跟著採用Simple的範例,
可是我想把食譜那一個頁面的格式copy到我的網站,
請問我可以怎麼做?

回答
網站帶路姬 / Erin Lin 2020-08-26 - 5:08 pm

歡迎到社團裡來發問喔:
https://www.facebook.com/groups/wpointer

回答
羅昌輝 2020-09-08 - 2:25 pm

請問廠商廣告素材,跟踪鏈接如何置入側邊攔

回答
網站帶路姬 / Erin Lin 2020-09-14 - 2:08 pm

可以到外觀>小工具,利用圖片或文字的小工具,插入到側邊欄裡。

回答
Kira 2020-10-02 - 9:04 pm

Dear 帶路姬:
我想請問您~在進行編輯社群圖示的連結時,我確實都有按照步驟執行
但是點進去ig或yt時,跑出來的頁面都是自己的wordpress頁面呢?><

回答
網站帶路姬 / Erin Lin 2020-10-07 - 7:37 pm

你可能編輯錯地方了。請到社團裡來發問,並且附上截圖,讓大家幫你看看喔。
https://www.facebook.com/groups/wpointer

回答
Farah 2020-11-27 - 4:37 pm

請問可以修改header的高度嗎?上傳logo照片後 高度變高了!

回答
露西 2021-01-14 - 6:43 pm

請問sidebar在手機或平板的顯示可以改嗎?隱藏或是改大小,不然版面跑掉好醜……

回答
網站帶路姬 / Erin Lin 2021-01-27 - 11:11 am

歡迎到社團裡來發問喔。
https://www.facebook.com/groups/wpointer

回答
VIVI 2021-02-01 - 1:45 am

老師好,使用soledad 跟著老師學習第三天的外觀自訂器發現很多選項都跟畫面不一樣,我的外觀自訂器完全沒有Options 這個詞
位置有時也不一樣,原本想說我自己找的到就沒問題,但在今天的教學裡實在找不到任何 Mobile相關設定,在第一層也沒有任何color的選項,
想問自訂器內容差異會是因為版本差異或是我沒有打開甚麼設定呢? 感謝

回答
網站帶路姬 / Erin Lin 2021-02-01 - 11:35 am

因為版本的差異,他們的位置有些改變,我這幾天來找時間更新一下畫面,感謝通知喔。

回答
gary 2021-02-10 - 7:38 pm

你好,我買了你介紹的soledad主題,但發覺很多東西都很硬生生放在固定位置,所以看你的youtube影片介紹elementor編輯器,但我不太明白,是要重新裝作主頁嗎? 那為何又要買主題呢?

回答
網站帶路姬 / Erin Lin 2021-02-19 - 4:37 pm

Soledad 主題與 Elementor 編輯器外掛是相容的。主題和編輯器外掛,各自有各自的功能,說來話長,有些功能類似,有些功能不同,需要玩玩看才比較清楚。
首頁,有很多方式製作,可以參考這些影片:
http://soledad.pencidesign.com/soledad-document/#homepage

回答
訂閱電子報 (週四寄)
帶路姬的文章重質不重量,所以請訂閱我的電子報,以確保會收到更多優質教學好文喔!
聯盟分潤聲明

此站內容為Erin的真實架站經驗分享,部分推薦的商品有參加 聯盟計畫,您若點選文中的連結而購買商品,Erin可以從中獲取一點分潤。不過Erin 100%保證,只誠懇推薦自己親身試用過的好東西。(什麼是聯盟計畫?)

支持帶路姬

假如你很喜歡帶路姬的文章,希望鼓勵帶路姬繼續寫作,幫助WordPress新手,與推廣WordPress,不如贊助一下帶路姬吧!

追蹤帶路姬
帶路姬人氣

網站成立:2018/05/01
總瀏覽量:2,150,487 (2022/2/9)
總訪客量:502,824 (2022/2/9)

© WordPress 網站帶路姬 2018~2022 版權所有 |  本站使用 Soledad主題 + Elementor Pro 編輯器   | 推薦使用 Cloudways主機

★ 完全免費的影音+圖文教學+ ★

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

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