首頁 網站設計 YellowPencil:全站隨選隨改,輕鬆視覺化客製化網站!

YellowPencil:全站隨選隨改,輕鬆視覺化客製化網站!

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

發佈日期: 上次更新: 0 留言 3.3K 次瀏覽
YellowPencil 網站客製化與視覺化編輯 CSS的編輯器

你希望網站風格獨特,卻常常侷限於主題的設定嗎?YellowPencill 提供視覺化的介面,幫助你隨點隨改,輕鬆客製化每個細節,不論是字體、背景、顏色、邊線、圓角、位置、間隔距離、動畫、隱藏元素等等,全都不需要寫程式,全部任由你決定,絕對能做出極度客製化、絕無僅有的網站!

YellowPencil — 視覺化的 CSS 網站樣式編輯器

  • 外掛費用:26美元(不定期會特價,請訂閱帶路姬的電子報喔!)
  • 買一次外掛,只能給一個網站使用
  • 買一次外掛,可以終生使用與持續更新外掛
Yellow Pencil
到 Envato Market 購買這個外掛
  • 0:00 教學目標與簡介
  • 1:44 重點一:什麼是 CSS?YellowPencil的原理
  • 7:10 重點二:記得先啟用授權
  • 7:42 重點三:三種選取物件的方式
  • 12:07 重點四:YellowPencil 可調整哪些樣式?
  • 17:53 重點五:YellowPencil 的三種儲存目標
  • 21:53 重點六:客製化的樣式有優先層級之分
  • 24:04 重點七:其他工具與響應式設計
  • 28:25 重點八:可以取代頁面編輯器或主題嗎?
  • 30:11 WordPress 英文小教室

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. 點選左邊的 Responsive Mode (響應式模式)來切換螢幕大小
  3. 最上面點 640px and smaller screens,可以預覽與調整在手機上的樣式,也可以點選那排旁邊的其他尺寸,來調整各種寬度的螢幕,希望呈現的樣子。
  4. 記得儲存,並且離開。

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

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

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

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

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

留言給帶路姬吧!

* By using this form you agree with the storage and handling of your data by this website.

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

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

支持帶路姬

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

追蹤帶路姬
帶路姬人氣

網站成立:2018/05/01
總瀏覽量:2,614,479(2024/2/2)
總訪客量:626,454 (2024/2/2)

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

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

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

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