元件概覽 - Webflow 幫助

使用元件更有效地管理網站中的重複佈局和內容。

元件讓您能夠從元素和子元素創建可自定義的區塊，以維持一致、高效且可擴展的設計工作流程。您可以在網站中重複使用這些區塊，並在單一位置修改它們，以避免逐一修訂每個重複的佈局。

如何創建元件

您可以在 Webflow 中以視覺方式創建元件，或使用 DevLink 從外部代碼庫導入現有元件。本節專注於視覺開發。

您可以從元素或元素組創建元件，並選擇每個實例在網站中是否相同，或允許更改其內容、佈局或樣式：

• 每個實例的內容和設計相同 — 為重複佈局（例如導航欄和頁腳）創建元件，以便在網站中重複使用。對內容或設計的任何更改會自動更新元件的每個實例。
• 每個實例的內容獨特 — 創建具有一致佈局和設計的元件，但允許每個實例具有不同的內容（例如，英雄區塊佈局可以在每個實例中擁有獨特的文本、圖片或影片），使用元件屬性和插槽。
• 每個實例的樣式變體不同 — 創建具有預定義樣式和佈局選項的元件（例如，實心和輪廓按鈕，或水平和垂直卡片佈局）。元件樣式變體讓您可以自定義每個實例的設計，而無需創建單獨的元件。

創建元件的步驟：

1. 選擇您想轉換為元件的元素
2. 打開 元件面板、樣式面板 或 元素設置面板
3. 點擊面板頂部的“創建元件”圖標
4. 為您的元件命名並添加可選描述，然後點擊 創建

您還可以通過選擇元件，點擊“更多選項”點，然後選擇複製來複製現有的元件。

創建元件後，您將進入主元件——這意味著對主元件的任何更改都會更新該元件的所有實例。您可以隨時通過以下方式進入任何元件實例的主元件：

• 雙擊元件實例
• 右擊實例並點擊編輯元件
• 選擇實例並點擊標籤中的“鉛筆”圖標
• 選擇實例並點擊右側面板右上角的“扳手”圖標

了解更多關於編輯主元件。

如何使用和重用元件

一旦創建了元件，您可以在網站的任何地方重用它：

1. 打開元件面板
2. 將滑鼠懸停在元件上以查看預覽
3. 點擊並拖動所需的元件到網站的任何頁面
4. 將元件實例直接放在畫布上或導航器中

當您選擇一個元件實例時，您會看到它被綠色高亮和勾勒。打開元件面板以查看您的元件在網站中使用了多少次。

要在導航器面板中查看元件的元素層次結構，請按住 Option + 雙擊（在 Mac 上）或按住 Alt + 雙擊（在 Windows 上）元件，或點擊“編輯主元件”圖標。您只能從主元件（而不是元件實例中）查看元件的元素層次結構。

如何編輯元件

讓我們來看看您可以如何互動和編輯元件的各種方式：

• 編輯主要元件
• 元件屬性、插槽和樣式變體
• 創建元件樣式變體
• 管理變體屬性
• 更改元件實例的變體
• 重新排序、重命名、複製或刪除元件樣式變體
• 退出主要元件
• 在編輯器中編輯元件
• 更改元件名稱或描述
• 組合元件
• 刪除元件

編輯主要元件

要在元件的所有實例中進行相同的更改，您需要編輯主要元件。您可以通過以下方式在任何元件實例上編輯主要元件：

• 在畫布上雙擊元件實例
• 按住 Option + 雙擊（Mac）或 Alt + 雙擊（Windows）導航器中的實例
• 右鍵點擊實例並點擊編輯元件
• 選擇實例並點擊標籤中的“編輯元件”圖標
• 選擇實例並點擊右側面板頂部的“編輯元件”圖標

對主要元件的編輯將影響每個元件實例（除非該元件實例已對元件內的特定元素應用了元件屬性）。編輯主要元件時，您可以更改結構和元素順序，以同時影響網站上的所有元件實例。

元件屬性、插槽和樣式變體

元件屬性（props）、插槽和樣式變體讓您可以在元件的每個實例上創建獨特的配置：

• 屬性（Props） — 將主要元件中的個別元素設置（例如，文本、鏈接、圖像或視頻）連接到屬性。這允許您在每個實例上自定義這些設置，而不改變元件的整體結構或設計。屬性還可以連接到 CMS 字段，以動態地從您的 CMS 集合中提取內容。
• 插槽（Slots） — 插槽是您可以放置在現有元件中的元素，作為其他元件的佔位符。這讓您可以模塊化地構建元件，每個實例可以在插槽中包含不同的元件。
• 樣式變體（Style variants） — 定義單個元件的多個設計選項，允許您根據不同的使用情況調整其外觀。例如，您可以提供樣式變體，如實心或輪廓按鈕，或水平和垂直卡片佈局。

創建元件樣式變體

您可以為元件創建不同的變體，具有不同的佈局、顏色、字體樣式等（例如，實心或輪廓按鈕，或水平和垂直卡片佈局），並選擇在網站上的每個元件實例中使用哪個變體。

創建元件樣式變體的方法：

1. 編輯主元件
2. 前往 樣式面板
3. 點擊 樣式選擇器 中的“元件變體”圖標
4. 點擊“加號”圖標
5. 為變體命名一個獨特的名稱
6. 按 Enter/Return 確認

管理變體屬性

當您創建元件樣式變體時，會自動為該元件創建一個變體屬性。您可以更改變體屬性的名稱，將其添加到屬性組，並在 屬性面板 中為元件設置默認變體。

更改變體屬性名稱的方法：

1. 編輯主元件
2. 前往 屬性面板
3. 點擊變體屬性
4. 輸入一個獨特的屬性名稱
5. 按 Enter/Return 確認

將變體屬性添加到屬性組的方法：

1. 編輯主元件
2. 前往 屬性面板
3. 點擊變體屬性
4. 選擇一個組或輸入一個獨特的名稱以創建新組
5. 點擊創建或按 Enter/Return 確認

設置元件的默認變體：

1. 編輯主元件
2. 前往 屬性面板
3. 點擊變體屬性
4. 從默認下拉選單中選擇一個變體

更改元件實例的變體

與其他元件屬性一樣，您可以為每個元件實例選擇樣式變體。更改元件實例的變體的方法：

1. 單擊元件以打開 屬性面板
2. 從變體下拉選單中選擇此實例的變體

重新排序、重新命名、複製或刪除元件樣式變體

在設計模式中，您可以管理元件樣式變體（重新排序、重新命名、複製或刪除變體）。

重新排序元件的變體：

1. 編輯主要元件
2. 前往 樣式面板
3. 點擊 樣式選擇器 中的「元件變體」圖標
4. 點擊並拖動變體以移動到新位置

重新命名變體：

1. 編輯主要元件
2. 前往 樣式面板
3. 點擊 樣式選擇器 中的「元件變體」圖標
4. 將滑鼠懸停在變體上，然後點擊「更多選項」圖標
5. 點擊重新命名
6. 輸入新的、唯一的變體名稱
7. 按 Enter/Return 確認

複製變體：

1. 編輯主要元件
2. 前往 樣式面板
3. 點擊 樣式選擇器 中的「元件變體」圖標
4. 將滑鼠懸停在變體上，然後點擊「更多選項」圖標
5. 點擊複製
6. 輸入新的、唯一的變體名稱
7. 按 Enter/Return 確認

刪除變體：

1. 編輯主要元件
2. 前往 樣式面板
3. 點擊 樣式選擇器 中的「元件變體」圖標
4. 將滑鼠懸停在變體上，然後點擊「更多選項」圖標
5. 點擊刪除
6. 在彈出窗口中點擊刪除以確認

退出主要元件

完成主要元件的編輯後，您可以通過以下方式退出主要元件：

• 點擊設計器左上角的「返回」箭頭
• 點擊畫布上的元件外部
• 按鍵盤上的 Escape 鍵

在編輯器中編輯元件

如果您邀請內容編輯者在編輯器中更新網站內容，任何對未通過元件屬性修改且在所有實例中一致的元件元素所做的更改，將適用於所有其他實例。

或者，如果內容編輯者對通過元件屬性修改的元件元素進行更改，這些更改將僅適用於他們正在編輯的元件實例。

更改元件名稱或描述

要更改元件名稱或描述：

1. 打開 元件面板
2. 將鼠標懸停在元件名稱上，然後點擊出現的“更多選項”點
3. 點擊編輯設置
4. 進行更改並保存

重命名元件實例

您可以重命名個別元件實例以便於識別——這在頁面上多次重用相同元件時特別有用。

要重命名元件實例：

• 在導航器或右側面板頂部：

1. 雙擊元件名稱
2. 輸入新名稱
3. 按 Enter 或點擊其他地方以保存自定義名稱

• 在畫布上：

1. 右鍵單擊元件實例
2. 點擊重命名
3. 輸入新名稱
4. 按 Enter 或點擊其他地方以保存自定義名稱

要將名稱重置回原始元件名稱，請在重命名期間刪除自定義名稱，或在導航器或畫布上右鍵單擊實例並點擊 重置名稱。

分組元件

要將您的元件組織成組：

1. 打開 元件面板
2. 將鼠標懸停在元件名稱上，然後點擊出現的“更多選項”點
3. 選擇編輯設置
4. 從組下拉菜單中選擇現有組，或輸入以創建新組

要重新命名或取消分組元件群組，將滑鼠懸停在群組標題上，然後點擊“更多選項”點。

刪除元件

要完全刪除元件：

1. 從您的網站中移除或取消連結所有該元件的實例
2. 打開 元件面板
3. 將滑鼠懸停在元件名稱上，然後點擊出現的“更多選項”點
4. 選擇編輯設定
5. 點擊刪除並確認

如何取消連結元件實例與其主元件

要取消連結元件實例並獨立於主元件進行更改：

1. 右鍵點擊您想要取消連結的實例中的任何元件元素
2. 點擊取消連結實例

一旦取消連結，如果您在設計中編輯該元件的其他連結實例，它將不會更改已取消連結的實例。

使用庫在網站間共享元件

您可以在工作區中使用庫在網站間共享原生和代碼元件。這可以加速您的工作流程，並通過提供一個更新在工作區多個網站中使用的元件的單一位置來增強您的設計系統。

返回 webflow 幫助