Guides
Start typing to search…

複製貼上元件樣式的油漆筆

😔 過去的痛點

為了減少重複編輯的工夫，我們多半會盡量複製已經調好樣式的元件來做活動頁，但在複製完元件之後，如果突然想修改字體大小、顏色、粗細等樣式時，還是得從頭複製一遍或手動調整所有元件的樣式（而且需要分別處理 desktop view 和 mobile view 的樣式設定），這讓人感到繁瑣。

  • 例一：想要把所有文字的字型從「Noto Sans」換成「IBM Zen」
  • 例二：想要統一編輯所有按鈕在 normal、clicked、hover 狀態下的底色
  • 例三：設定好一個○○元件之後，除非用複製方式新增這類元件，否則從元件庫拖入到畫布的○○元件會是系統預設樣式，又得從頭設定樣式

🪄 解決方案

藉由「複製樣式」的油漆筆，你可以快速複製某個元件的樣式設定，再連續貼上到其他同類型的元件身上。


👣 使用教學

  1. 從下列位置叫出「油漆筆」功能：

    • 在畫布元件框的操作 label，點擊更多操作 menu 裡的「複製元件樣式」

    • 在左側圖層樹，點擊更多操作 menu 裡的「複製元件樣式」

  2. 進入複製貼上模式：

    • 在畫布區和左側圖層樹，滑鼠游標會變成油漆筆 icon，如果懸停在不支援貼上樣式的元件上，油漆筆 icon 會變成禁用版本以提醒用戶
    • 在右側設定面板，會顯示「來源元件」的控制項，如有需要仍然可以隨時編輯



  3. 用油漆筆點擊希望貼上樣式的元件：

    • 在畫布區或左側圖層樹，都可以點擊「目標元件」貼上樣式（支援連續貼上）
    • 此時會以「來源元件」在點擊當下的樣式設定值覆蓋更新「目標元件」的樣式設定值


  4. 結束複製貼上模式：

    • 按下鍵盤的 esc 鍵
    • 點擊畫面上方懸浮泡泡裡的「結束複製」按鈕

ℹ️ 複製貼上樣式的規則

  1. 只支援同類型的元件之間的複製貼上樣式
    • 例如：不支援複製 Image 的樣式再貼上到 Button
  2. 只支援所有 device view 的樣式一起複製貼上
    • 例如：不支援只複製貼上 mobile view 樣式，但維持 desktop view 樣式不變
  3. 當元件類型是包含 rich text editor 的文字型元件時，只會複製設定在 [樣式 tab] 的樣式，不會複製到在 [設定 tab] 底下 rich text editor 的樣式
  4. 當元件類型是複合式元件時，連同底下子元件的樣式也會一起被複製貼上
    • 例如：複製 Product list 時，會一起複製到底下 Product title price 的字級 14 px

📜 詳細的複製樣式範圍

表中同一格的元件可互相複製貼上。


  1. 結構元件：
元件類型複製範圍 in [設定] tab複製範圍 in [樣式] tab
Section● [排版]：列與列的間距、寬度全部
Row● [排版]：欄寬分布、每排欄位數量、欄與欄的間距、寬度全部
Column● [排版]：欄位高度全部

  1. 基本元件：

元件類型

複製範圍 in [設定] tab

複製範圍 in [樣式] tab

  • Heading
  • Text
  • Category text
  • Product brand
  • Product title
  • Price / Sale price / Discount

🚫 無

全部

  • Button
  • Category button
  • Product button
  • Product list button
  • IG gallery load more button

🚫 無

全部

Divider

● [內容]：除 rich text editor 外的全部項目（含文字對齊、樣式、顏色、粗細、寬度）

全部


  1. 圖片 & 影片元件

元件類型

複製範圍 in [設定] tab

複製範圍 in [樣式] tab

  • Image
  • Product image

● [內容]：除「圖片來源」與「Alt text」外的全部項目（寬度、比例、填滿、定位）

全部

  • Image box
  • Category image box

● [內容]：除「圖片來源」與「Alt text」外的全部項目（寬度、比例、填滿、定位）
● [排版]：子元件在容器內的定位

全部

Video

● [內容]：影片比例、自訂比例（長:寬）、寬度、高度

全部


  1. 分類相關元件

元件類型

複製範圍 in [設定] tab

複製範圍 in [樣式] tab

Category list

💡 複製時會連同子元件的樣式一起複製：

  • Category column
  • Category image box
  • Category text
  • Category button

● [排版]：展示方式、每排顯示數量、輪播單次滑動數、欄與欄的間距、寬度、輪播自動播放

——— 展開更多後 ———
自動輪播秒數、顯示分類按鈕、顯示滑動按鈕、顯示分頁

全部

Category column

● [排版]：欄位高度

全部


  1. 商品相關元件

元件類型

複製範圍 in [設定] tab

複製範圍 in [樣式] tab

Product list

💡 複製時會連同子元件的樣式一起複製：

  • Product column
  • Product content row
  • Product content column
  • Product image
  • Product title / Brand
  • Product price
  • Price / Sale price / Discount
  • Product button
  • Product list button

● [排版]：商品資訊呈現、展示方式、每排顯示數量、輪播單次滑動數、欄與欄的間距、寬度、輪播自動播放

——— 展開更多後 ———
自動輪播秒數、顯示商品價格、顯示品牌、顯示按鈕、顯示滑動按鈕、顯示分頁、顯示查看更多按鈕

全部

Product column

● [排版]：欄位高度

全部

Product content row

● [排版]：欄寬分布、每排欄位數量、欄與欄的間距、寬度

● [顯示順序]：是否倒序

全部

Product content column

🚫 無

全部

Product price

● [內容]：價格項目、原價位置、折扣格式、折扣位置

——— 展開更多後 ———
價格顯示設定：前置貨幣代碼、前置貨幣符號、後置貨幣單位、千分號

全部


  1. Instagram 相關元件

元件類型

複製範圍 in [設定] tab

複製範圍 in [樣式] tab

IG gallery

💡 複製時會連同子元件的樣式一起複製：

  • IG Post

● [排版]：展示方式、每排顯示數量、輪播單次滑動數、網格初始排數、拼貼初始組數、欄與欄的間距、寬度、輪播自動播放

——— 展開更多後 ———
拼貼：顯示載入更多按鈕、單次載入組數
網格：顯示載入更多按鈕、單次載入排數
輪播：自動輪播秒數、顯示滑動按鈕、顯示分頁

全部

IG Post

● [操作]：點擊效果、連結開啟方式

全部


  1. 進階元件
元件類型複製範圍 in [設定] tab複製範圍 in [樣式] tab
Custom code● [排版]：寬度、高度全部

Updated about 2 months ago