方形色塊

方形色塊是免費、簡單操作又非常實用的元件. 編輯網頁或部落格文章都少不了它.
它可以區隔文章內容, 彰顯需要強調的部分, 也可以做為加強網頁內容的視覺美觀.
Weebly 第三方應用程式中心裡面, 有兩個好用的方形色塊, 都是免費的:

• Content Color Box
• Color Block

​​
這兩個色塊元件都可以再置入其他元件 (例如圖片、文字等等), 不過, 提供的設定功能略有不同. 
​站主們可以依照需求選擇較適用的元件.

---

Content color box

[步驟]
至 Content Color Box 頁面 > 點擊 "新增" > 連結至 Weebly 網站

[設定與應用]
新增完成後, Content Color Box 元件就會出現在左方的元件區, 用滑鼠左建, 將元件拖拉到頁面的任何地方.

接著, 你可以在這個色塊上置入Weebly 編輯器的各種元件, 就像是排列積木一樣......

點擊該色塊, 就會出現設定視窗. 
可以調整色塊背景顏色​、框線顏色、框線粗細等等.

不同的背景/框線顏色所產生的視覺觀感也不同.
如果對配色的敏感度不高, 可以參考 選色/配色工具, 或許能給你更多的配色靈感.

---

Color Block

Color Block 也是一個色塊元件, 不同的是,  它沒有邊框設計, 但它可以調整四個角的圓弧度.
不同的圓弧度邊角視覺效果及應用各有不同.
​

[步驟]
至 Color Block 頁面 > 點擊 "新增" > 連結至 Weebly 網站.

[設定與應用]
新增完成後, Color Block 元件就會出現在左方的元件區, 將元件拖拉到頁面的任何地方.

同樣的, 你可以在這個色塊上發揮創意, 加入各種元件, 豐富色塊的內容.

Color Block 沒有邊框設定, 不過, 它提供方塊四個圓角設定.
讓方塊的四個端角看起來較柔和. 同時, 也可以設定斜對角為圓角, 

另外, 特有的圓弧度設計也可以作為注意事項的標註. 將訊息放在色塊中, 更可以增加讀者的視覺記憶.

Note: 
Regular exercise has a profoundly positive impact on your physical and mental health.

---

[結論]

色塊可應用的範圍非常廣泛, 你可以將兩個色塊重疊在一起, 或將色塊連結在一起, 搭配其他的元件, 可以做出各種不同的創意設計. 例如:

best Foods
​in the word

japan

U.S.A.

Korea

色塊的使用關乎於顏色的搭配以及平面設計. 靈感缺缺時, 不妨參考這些資源:

• 線上平面設計工具
• 配色工具
• 平面設計課程
• 色彩學

總之, 多涉獵一些關於色彩及平面設計的範本有助於如何能更廣泛地應用色塊元件. ​

---

更多推薦 Weebly 第三方應用程式:

Loading...

Loading...