元素盒子類型包含了下面幾種：

Webflow 把元素分類成七大類型，每個元素都扮演著各自角色，掌握他的目的，基本上可以很熟練地把設計透過元素展示出來。

這 7 類從上到下依次是：

1. 布局 Layout - 和頁面布局結構相關的元素，從 Section、Container、Grid到Column

2. 最基本的常用元素組合 - 像是 Div Block、List、Link Block、按鈕

3. 文字 - 與文字相關的元素，包括標題、段落、超連結

4. CMS - CMS 最重要的內容管理系統

5. 多媒體 - 圖片和影片

6. 表格 - 表格相關的元素

7. 組建 - 模塊化的元素，包括下拉菜單、html、搜尋..etc 等常用的模塊

這7個類型中，基本上只需要掌握

1. 布局類型

2. 基本類型

3. 文字類型

4. 多媒體類型

這 4 個元素盒子，就可以做出一個簡單網頁。若是對於 HTML 無基礎的設計師，可能會感覺很多不太清處的地方，但也沒關係基本上你只要掌握每個元素的目的，並且熟悉一下工具使用的方式，很快久可以的心應手。

在 Webflow 中的網格佈局使 CSS 網格在完全可視化，並且讓他放置於你想放的位置，讓你可以更直接地控制佈局和設計。

你可以使用 Grid 來創建各種佈局，像是可以使用它來創建一個表格或是在較小的設備上輕鬆地將其轉換為卡片。

創建和編輯 Grid

要創建網格，請從“Add”面板中選擇 Grid 元素。您還可以將網格佈局應用於樣式面板中的任何現有元素。

添加列和行

要添加列和行，請選擇出現在畫布上或樣式面板中的添加按鈕。

複製和刪除行和列

要復製或刪除列或行，請右鍵單擊列或行標題並選擇複製或刪除。 當你將鼠標懸停在列或行上時，你還可以刪除或複製樣式面板中的任何行或列。

調整列和行之間的間距

你甚至可以調整每個間隔之間的距離。

或“樣式”面板中的行或列標題中為列和行輸入自定義大小。

在 Grid 中手動定位內容

要覆蓋自動放置設置以在網格中手動定位項目，請在將元素拖入網格時按住Shift 。任何手動定位在網格中的項目都將保留手動位置設置。

要將現有 Grid 子項的位置設置更改為手動，請選擇網格子項並更新樣式面板中的位置設置。

從上面的Youtube教學，你應該可以看到 Grid 基本上就是一個排版神器，如果學會使用他，你在製作網頁的時候會事半功倍，並且節省大量的時間再調整響應式網站的細節。

Layout 中這是網頁架構中最最基本的元素。而 Secion -> Container-> Div Block 是網頁開發中常見的層次結構。

Section 基本上就是每個段落的最大格，而 DivBlock 是設計專案時最長使用的最基本和最通用的元素，它可以是您想要的任何東西。

你可以使用 Container 中的 Div Block 使用Layout、Spacing、Size 和 Position 等樣式來組織元素。

在 Div Block 內放置元素時，它將根據裡面的內容自動調整大小。

將 Div Block 轉換為 Link

你甚至可以將 Div Block 轉換為超連結，以將其及其內容鏈接到其地方。若要將 Div 塊更改為 Link 塊，請確保 Div 塊不包含任何鏈接元素，然後右鍵單擊 Div 塊並將其轉換為 Link 即可。

Link Block 與 DivBlock 類似，可以用於結構和佈局，但 Link 內部的區域變成了鏈接。鏈接可以將任何元素（如圖像）或任何佈局（如橫幅）轉換為鏈接。

添加鏈接

要將鏈接添加到您的項目中，請打開左側邊欄中的元素面板（快捷方式：A），然後將鏈接塊元素拖到您的頁面上。

任何元素都可以從添加到面板或畫布拖到“鏈接”中。

設置鏈接類型和其他

與文本鏈接和按鈕一樣，Link Block 具有相同的鏈接選項 — URL、頁面、集合頁面、部分頁面、電子郵件、電話和文件等。

設置 Link Block 的 hover 狀態

Link Block 通常都是有一點交互式動畫的，因此最好在鏈接塊上設置不同的懸停狀態以向用戶顯示它是可點擊的。按照以下步驟設置懸停狀態的樣式：

1. 選擇 Link Block

2. 點擊 states 並選擇 Hover

3. 添加框陰影或任何其他樣式屬性

4. 轉到無/默認狀態

5. 為框陰影屬性或您在懸停狀態下設置樣式的任何其他樣式屬性創建過渡

更改 Hover時的背景圖像：

1. 將背景圖像添加到 Link Block

2. 轉到狀態 > 懸停

3. 更改背景圖片

4. 轉到無/默認狀態

5. 為 背景圖像 屬性創建 過渡

覆蓋藍色文本

默認情況下，當任何文字放置在 Link Block 內時，它會顯示為藍色並帶有下劃線，因為這是 All links 標籤上的默認文字樣式。

你可以通過覆蓋文本裝飾和字體顏色來更改特定鏈接塊上的默認鏈接樣式：

1. 選擇鏈接塊

2. 轉到樣式面板

3. 將文本裝飾更改為無

4. 將字體顏色更改為黑色

將 Div Block 轉換為 Link Block

點選Div Block單極右鍵即可轉換成 Link Block，反之亦然。

添加列表

要將列表添加到您的項目，請單擊元素面板（快捷方式：A）並將列表拖到畫布上。

List 由主要元素和三個 List 項組成。

將內容添加到列表

按照設計，列表項沒有任何默認的內容。這是因為列表項可以包含許多不同類型的內容 ——標題、段落、圖像、影片，甚至其他列表。

要將內容添加到列表中，只需將其拖到列表項中即可。如果你想要的只是純文字，也可以在列表項內雙擊開始輸入。進入文字編輯模式的另一種方法：選擇列表項並按 Enter。

你可以通過選擇列表並調整左側填充來增加或減少項目符號（或數字）所在的空間。

Section 是寬度為 100% 的佈局元素，延伸到瀏覽器窗口的整個寬度。部分在頁面的結構和佈局中起著重要作用。部分可讓您創建單獨的內容塊並將頁面劃分為有意義的部分。

在本課中，你將學到：

1. 添加一個 Section

2. 為 Section 設置樣式

3. 最小高度

4. 視口高度

5. 添加 3D 透視圖

您可以從“元素”面板(A)中將 Section 元素添加到您的頁面。默認情況下，Section 將跨越主體的整個寬度。

同樣默認情況下，部分內部沒有填充。如果您不希望您的內容跨越正文的寬度，請拖入一個 Container 以使元素在頁面上居中。

為 Section 設置樣式

Section 的高度會根據其內容自動調整——當您添加元素時，該部分會變得更高。您還可以在樣式面板中設置特定的高度。

命名 Class

Weblfow 允許您添加不同的 class 名稱，並且基於原始 Section 分類 - 您可以覆蓋樣式並在組合類之上添加樣式。

自動高度

當您將文本和媒體添加到 Section 時，高度會更改以定義高度。無論您添加多少內容，Section 高度都跟著裡面的內容。

一個 Section 的 padding 也會影響它的高度。最佳做法是設置 Section 的頂部和底部填充並添加內容以使其相應調整。

使用 flexbox 使內容居中

使用 Section 中的容器，選擇 Section，並將其設置為flex。你就可以垂直置中它的子元素（垂直且置中於container）。

視角 Viewport height (vh)

例如，100vh將填充 100% 的視角高度。將其設置為 50vh將填充視口高度的 50%，依此類推。

添加 3D 透視圖

如果您有一個部分的子項（一個部分內的任何元素，即使它們在一個部分內的其他元素內），您可能希望在 3D 空間中添加旋轉或移動。如果每個元素都應用了相同的類，那麼您將一次性設置所有元素的樣式。

然後添加一個 3D 變換，任何類型的 3D 移動看起來都有些平坦（這是因為它是等距投影，而我們可能想要的效果是透視投影。）

要演示透視投影，請保持旋轉不變，並啟用 3D 相機效果。 選擇部分後，單擊變換設置並添加子透視圖（影響子元素的透視圖）。

較高的子視角值是一種更平坦的效果，就像使用長焦鏡頭將相機對準遠處的物體 - 而較低的值就像是使用廣角鏡頭更接近物體。

子透視將像 Section 這樣的元素轉換為類似相機的效果，為其任何子元素（層次結構中的任何子元素）啟用 3D。

這就是 Webflow Designer 中各部分的概述。