首頁 網站設計 YellowPencil:WordPress主題的自訂不會用,幫你寫CSS改樣式!

YellowPencil:WordPress主題的自訂不會用,幫你寫CSS改樣式!

YellowPencil 讓你全面掌控網站的設計細節

發佈日期: 上次更新: 0 留言 950 瀏覽
Custom CSS Locations

許多不懂程式的新手們,常常發現即使付費版的佈景主題的設定真的很多,但是總是有些地方,怎麼找都找不到設定,覺得非常困擾!

不用寫 CSS 也能全面掌控樣式

今天帶路姬就來分享一個非常好用的外掛,YellowPencil (黃色鉛筆) ,只要花少少的錢,就可以把所有的設計細節輕鬆掌握在手裡,頁面裡所有的元素的樣式都可以改!

  • 外掛費用:26美元(不定期會特價,請訂閱帶路姬的電子報喔!)
  • 買一次外掛,只能給一個網站使用
  • 買一次外掛,可以終生使用與持續更新外掛
Yellow Pencil
到 Envato Market 購買這個外掛

YellowPencil 外掛示範教學

一、授權啟用外掛

購買完外掛後,首先先來綁定網站,以獲得授權使用,請參考下面三張圖,來完成這個授權的步驟。

  1. 點選左邊的 YellowPencil > Product License
  2. 點選右邊的 Activate YellowPencil Pro (啟用 YellowPencil Pro)
  3. 在跳出的畫面中,點選 Use this license (使用這個授權)
  4. 然後就會在畫面上方,看到 YellowPencil Pro successfully activated. (已成功授權囉!)

二、在網站前台打開你想修改的頁面

Avada 的 Creative Demo 示範網站中,Article 文章的頁面,下面有列出許多文章,標題好大啊….

Yellow Pencil

三、進入 YellowPencil 編輯模式

點選最上面的 Edit with YellowPencil 連結開始使用 YellowPencil 來客製化你的網頁。

Yellow Pencil

四、點選你想修改樣式的元素開始客製化

點選你想編輯樣式的元素,在這個範例裡,我點選文章列表裡的標題,並且在右手邊,可以編輯所有細節。

3. 點選 Text 來編輯該元素的字體
4. 選擇字型
5. 選擇顏色
6. 選擇粗細
7. 選擇字體大小
8. 選擇行高
9. 設定好之後,點選右上角的 Save 來儲存就可以囉!

Yellow Pencil

五、除了字體外,還有非常多的樣式類別

除了字體以外,還有非常多的設定可以用,帶路姬把類別寫出來給大家參考。

記得儲存完,可以點選「X」來離開 YellowPencil喔!

Yellow Pencil

六、學習如何隱藏元素

還有一個超級超級厲害的設定,總是有非常多非常多的新手們問我,可不可以隱藏某個東西?可以的!只要改掉元素的「顯示設定」就可以了,看我下面的截圖說明吧!

  1. 假如你想隱藏 Read More > 閱讀更多的連結,只要點選它
  2. 在右手邊選擇 Extra 分類
  3. Display 的地方,把他從 block 改為 none
  4. 這樣就可以了喔!!!!!

七、調整手機、平板、行動裝置上的樣式

如果你想針對手機、平板等設定元素的樣式,也是可以做到的喔!

  1. 先點選你想調整的元素
  2. 點選左邊的圖示來切換螢幕大小
  3. 最上面點 640px and smaller screens,可以預覽與調整在手機上的樣式,也可以點選那排旁邊的其他尺寸,來調整各種寬度的螢幕,希望呈現的樣子。
  4. 記得儲存,並且離開。

八、重新編輯或刪除已存的客製化樣式資料

最後,如果未來你還想回來編輯這頁的設計,可以跟著這些步驟,回去編輯喔!

  1. 點選左邊的 YellowPencil
  2. 點選 Customizations(客製化)
  3. 右手邊,在你的頁面旁邊點選鉛筆圖示去進入編輯
  4. 點選垃圾桶圖示,可以把這個頁面的所有客製化設定刪除

好啦!這個外掛是不是真的很方便啊!不用再寫什麼 CSS 了啦!也不用擔心佈景主題的設定不夠或找不到了!網頁裡的所有元素,都是在頁面上點一下就可以設定了!祝你設計愉快囉!啊!對了!別玩過頭了!會把網頁改得四不像喔!^_^

記得留言告訴我你喜不喜歡喔!


如果你覺得教學好零散,不知從何開始…

網路上的教學,因為篇幅有限、每個作者的寫作風格與邏輯都不同,常常讓大家到處找來找去,搞得一頭霧水… 而且很多都標榜20分鐘就能做好一個網站… 那種教學其實很不完整… 頭洗一半,還找不到地方繼續…

其實,最好的方法,應該是找一系列為新手統整過的教學影片,才能幫助你用最短的時間學習完整的基礎,做出第一個 WordPress 網站。


➡️ WordPress 網站帶路姬 — 臉書粉絲頁:跟著網站帶路姬,每天學習一滴滴
➡️ WordPress 網站帶路姬學園 — 臉書社團: 提供 WordPress 網路創業者,輕鬆學習 WordPress 的 社群學習環境。
➡️ 一人公司好家在 — 品牌帶路姬學園: 提供 WordPress 網路創業者,輕鬆交流一人創業與品牌經營的秘辛。
➡️ 贊助帶路姬:歡迎贊助帶路姬,讓我可以提供更多優質的教學內容與環境給大家喔!

留言給帶路姬吧!

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

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

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

2021 網站帶路姬
有獎徵站!

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