Weebly 架站教學網站
  • 架構網站 - Weebly
    • 網站的用途
    • 認識 Weebly >
      • 選擇 Weebly 七大原因
      • Weebly 的帳號種類
      • 網站管理
      • 網頁管理
    • Weebly 架站四步驟 >
      • Weebly 註冊 + 網域申請
      • 選擇/更換範本
      • 元件使用 - 網頁設計
      • 發佈/隱藏網站
    • Weebly 使用教學 >
      • Weebly 元件
      • 網站/網域設定
      • Weebly 部落格
      • 網頁標題
      • 網站安全 & SEO 優化
      • 第三方應用程式
    • Weebly 客服中心
  • 常見問題
  • 建立線上商城
  • 推薦工具
    • 多媒體工具
    • 多媒體素材
    • 網站/網頁工具
  • 關於我們
  • 公益/環保

Weebly 第三方應用程式 (App Center)

方形色塊

8/4/2021

0 評論

 
方形色塊是免費、簡單操作又非常實用的元件. 編輯網頁或部落格文章都少不了它.
它可以區隔文章內容, 彰顯需要強調的部分, 也可以做為加強網頁內容的視覺美觀.
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...
0 評論



發表回覆。


    圖片

    認識 Weebly

    ​選擇 Weebly -七大原因
    Weebly 的帳號種類及比較
    我該選擇哪種付費帳號?
    Weebly 拖拉放元件 - 新手上路

    網頁管理 (新增、複製、刪除、排列)
    ​
    網站管理 (新增、複製、刪除)

    Weebly 架站四步驟

    ​註冊 Weebly 帳號 + 網域申請
    選擇/更換範本
    編輯網頁 - Weebly 元件
    發佈/ 隱藏網站

    Weebly 使用教學

    ​提升網站安全性 - SSL 憑證
    ​
    Google Search Console - 驗證 Weebly 網站
    ​Weebly - SEO 搜尋引擎關鍵字設定
    ​如何更改網域?
    -------------------
    ​如何與他人共同編輯網站? ​
    如何備份 Weebly 網站? 
    ​建立會員制度網站​
    -------------------
    ​​更改字體大小、行距、間距
    ​
    圖片元件 - 完整的圖片功能
    ​表單元件 - 聯絡、留言、回覆、調查
    影片元件
    音訊元件​
    ​-------------------

    ​Weebly 提供哪些網頁標題類型?
    ​​網頁標題_背景樣式
    ​網頁標題_設計+編輯
    -------------------
    ​如何建立 Weebly 部落格?

    ​部落格文章 (撰寫/儲存/發佈/刪除)
    ​備份 Weebly 網站+部落格
    ​Weebly 部落格側邊欄位設定

    第三方應用程式

    結合第三方應用程式 - 功能更強大
    ​OctoMono - 第三方應用程式組合包
    ​Ecwid 購物車
    ​
    垂直分隔線
    ​方形色塊
    ​Scroll To Top - 回到頁面頂端
    ​最新/ 輪播部落格貼文工具​

    Weebly 購物車

    Weebly 內建購物車 - 簡介 
    ​Weebly 購物車 功能 & 設定 (一)
    ​
    Weebly 購物車 功能 & 設定 (二)


    類別

    全部
    Ecwid 購物車
    方形色塊
    第三方應用程式介紹

    RSS 訂閱

Weebly 架站教學


認識 Weebly
Weebly 架站四步驟
​Weebly 使用教學
第三方應用程式中心
Vertical Divider

Weebly 常見問題

Weebly 帳號
Weebly 付費/ 收據
Vertical Divider

推薦工具

線上平面設計工具
​多媒體工具
​多媒體素材
Vertical Divider

Weebly 客服中心

如何聯絡 Weebly 客服

Vertical Divider

關於我們

關於我們


版權聲明: 
本站發表的文章、圖片及電子書的版權均屬於本站所有, 如果有轉載需求, 請來信取得授權. 非經授權, 請勿轉載或轉貼. ​
Copyright © 2022
  • 架構網站 - Weebly
    • 網站的用途
    • 認識 Weebly >
      • 選擇 Weebly 七大原因
      • Weebly 的帳號種類
      • 網站管理
      • 網頁管理
    • Weebly 架站四步驟 >
      • Weebly 註冊 + 網域申請
      • 選擇/更換範本
      • 元件使用 - 網頁設計
      • 發佈/隱藏網站
    • Weebly 使用教學 >
      • Weebly 元件
      • 網站/網域設定
      • Weebly 部落格
      • 網頁標題
      • 網站安全 & SEO 優化
      • 第三方應用程式
    • Weebly 客服中心
  • 常見問題
  • 建立線上商城
  • 推薦工具
    • 多媒體工具
    • 多媒體素材
    • 網站/網頁工具
  • 關於我們
  • 公益/環保