將元素封裝在容器或錨塊中

使用鍵盤或畫布快捷鍵將元素包裝在 div 或連結區塊中。

在 Webflow 中製作網站時,您可能會考慮將元素包含在容器或錨塊等包含元素中,以更方便地自訂其外觀。現在,您可以選擇快速將元素包含在容器或錨塊中,從而減少點擊次數並提高設計過程的效率。 

在本教程中,您將了解: 

  1. 將元素封裝在容器區塊中的過程
  2. 將元素包含在錨塊中的過程
  3. 將元素封裝在 H Flex 或 V Flex 元件中的流程
  4. 如何取消元素的封裝
請注意: 您可以使用這些技術封裝任何元素,甚至是連結到 CMS 的元素。請記住,您也可以將各個元件實例和元素包含在元件內,但不包括主要元件。

如何將元素包含在容器區塊中

容器區塊是網頁設計中基本且通用的元素。它們有多種用途,例如創造空間或充當分隔物,但主要用於對元素進行分組。 

要將元素封裝在容器中: 

  1. 選擇您想要包含在設計器畫布上的元素
  2. 命令 + 選項 + G (在 Mac 上)或 控制 + 替代 + G (在 Windows 上)

將元素包含在容器中的另一種方法是透過畫布選單: 

  1. 右鍵單擊設計器畫布上要包含的元素
  2. 將滑鼠懸停在 包裹在
  3. 點選 貨櫃區塊

一旦元素被封閉,新的容器(即容器區塊)將自動選擇並在導航器面板中展開。

重要提示: 將元素封裝在容器區塊後,您可以按 命令 + 進入 (在 Mac 上)或 控制 + 進入 (在 Windows 上)新增一個類別。

如何將元素包含在錨塊中

錨塊的功能在結構和佈局方面與容器塊類似,但錨塊的內部轉換為超連結。 

要將元素包含在錨塊中: 

  1. 選擇要在設計器畫布上包含的元素
  2. 命令 + 選項 + A (在 Mac 上)或 控制 + 替代 + A (在 Windows 上) 

要透過畫布選單將元素包含在錨塊中: 

  1. 右鍵單擊設計器畫布上要包含的元素 
  2. 將滑鼠懸停在 包裹在
  3. 點選 錨塊 

一旦封閉,新的容器(即錨塊)將自動選擇並在導航器面板中展開。

專家提示: 您可以按 命令 + 進入 (在 Mac 上)或 控制 + 進入 (在 Windows 上)將元素封裝在錨塊中後套用類別。

如何將元素封裝在 H Flex 或 V Flex 元件中

要將元素包裝在 H Flex 元件中: 

  1. 選擇您想要包含在設計器畫布上的元素
  2. 命令 + H (在 Mac 上)或 控制 + H (在 Windows 上) 

要將元素包裝在 V Flex 元件中: 

  1. 選擇您想要包含在設計器畫布上的元素
  2. 命令 + G (在 Mac 上)或 控制 + G (在 Windows 上) 

若要透過畫布選單將元素包含在 H Flex 或 V Flex 元件中: 

  1. 右鍵單擊要在設計器畫布上包含的元素 
  2. 將滑鼠懸停在 包裹在
  3. 選擇 H 柔性 或者 彎曲度

如何取消元素的封裝

您也可以選擇從父包含元素(例如,容器、部分、錨塊等)中取消包含元素。取消封閉時,子元素保留其目前位置。

若要從其父容器中取消包含元素:

  1. 選擇您要刪除的父容器
  2. 命令 + 轉移 + G (在 Mac 上)或 控制 + 轉移 + G (在 Windows 上)
筆記: 如果子元素要求畫布上存在父容器(例如,表單輸入欄位、清單項目等),則您將無法取消包含子元素。
麥伊凡
Ewan Mak 的最新帖子 (看全部)