Visual CSS Style Editor 樣式編輯外掛程式，這是一款視覺化 CSS 樣式編輯器，可以直接點擊區塊進行樣式設計的外掛程式。
喜歡使用區塊編輯器來編輯 WordPress 網站內容的朋友，一定都都會遇到樣式無法隨心所欲修改的困擾，如果你也有這樣的困擾，那麼今天分享的外掛程式不要錯過了。視覺化的編輯模式，直接就可以對區塊作 CSS 樣式修改非常方便，有興趣的朋友一定要試試。
Visual CSS Style Editor 樣式編輯外掛程式
1. 外掛程式的安裝步驟一樣，先登入 WordPress 控制台，接著到外掛/安裝外掛，關鍵字請輸入：Visual CSS Style Editor，找到後請點擊立即安裝。
2. 外掛程式安裝完成啟用後，回來到外掛程式的歡迎頁面，提供了外掛程式說明還有文件的連結，方便大家使用。
3. 這個外掛程式的設定非常簡單，如果不曉得怎麼設定，採用預設的設定就可以開始使用了。
4. 回到文章編輯畫面，可以在上方的選單列看到外掛程式提供的編輯選單 Edit With YellowPencil，點擊就可以開始編輯樣式了。
5. 這個外掛程式提供的樣式編輯非常多，幾乎可以滿足多數網站的需求，第一個圖示 Element Inspector 元素偵測器，可以檢視元素樣式資訊。
6. Navigator 導覽器：這裡將區塊所有元件集合起來，方便我們點選切換區塊。
7. CSS Editor 編輯器，這裡我們可以直接輸入樣式語法 CSS 來修改區塊內容的樣式。
8. Responsive Mode 響應模式：可以讓我們切換不同尺寸裝置來修改內容樣式，非常方便。
9. Measuring Tool 測量工具：透過滑鼠移到，可以測量區塊大小尺寸，這是設計上經常使用的工具之一。
10. Wireframe 框線：喜歡切版的朋友應該對這個工具不陌生，區塊在框線下標示非常清楚，方便設計。
11. Design Information 設計相關資訊：這裡展示每個區塊設計相關資訊，大家可以檢視修正。
12. Animation Manager 動畫管理，可以設計動態效果的地方。
13. Undo Redo 復原與取消復原：這裡可以讓我們在做錯時回復上一動或是重來一次，是編輯上不可獲缺的工具之一。
- 外掛程式名稱：Visual CSS Style Editor
- 外掛程式網址：https://wordpress.org/plugins/yellow-pencil-visual-theme-customizer/
- 外掛程式推薦：★★★★★
結論
修改網站內容樣式，是很多剛 WordPress 網站架設新手朋友最常遇到的困擾，今天分享的外掛程式，透過很直覺的設計，讓我們可以直接對區塊內容進行樣式修改與編輯，建置自己網站需要的樣式效果，操作上可以說是相對簡單許多，而且還是免費的外掛程式，有興趣的朋友一定要試試。