本文會提到：

1. 讓導航欄消失

2. 讓導航欄重新出現

讓導航欄消失

1. 選擇導航欄，確保它的位置固定在視窗上

2. 在互動面板中，從"When Scrolled Down"選單中選擇"Start an Animation"

3. 命名它（例如"nav leave"）

4. 點擊定時動作旁邊的加號

5. 在"Under Move"改變Y軸，直到導航條在視窗外

6. 調整您的緩和曲線和持續時間

讓導航欄重新出現

1. 選擇導航欄

2. 在互動面板中，從"When Scrolled Up"選單中選擇"Start an Animation"

3. 命名它（例如"nav enter"）

4. 點擊定時動作旁邊的加號

5. 在"Under Move"下把Y軸改回0

6. 調整您的緩和曲線和持續時間

本文會提到：

1. 創建觸發器

2. 創建動畫

3. 將動畫應用於其他元素

創建觸發器

1. 選擇觸發器元素（例如項目連結），並點擊進入互動面板

2. 點擊元素觸發器旁邊的加號

3. 從下拉選單中選擇"Scroll Into View"

創建動畫

1. 從"When Scrolled Into View"下的"Action"菜單中，選擇"Start an Animation"

2. 點擊定時動作旁邊的加號

3. 命名它（例如"Move up on scroll"）

4. 點擊"Timed Actions"旁邊的加號，從下拉選單中選擇移動

5. 在移動下，將Y軸改為50像素

6. 在"Timing"旁邊，切換到 "Set as initial state"

7. 點擊"Timed Actions"旁邊的加號，從下拉選單中選擇不透明度

8. 將不透明度改為0%

9. 在"Timing"旁邊，切換到"Set as initial state"

10. 點擊"Timed Actions"旁邊的加號，從下拉選單中選擇"Move"

11. 在移動下，將y軸改為0像素

12. 調整緩和與持續時間

13. 點擊時間線中0秒處的加號，從下拉選單中選擇不透明度

14. 將不透明度改為100%

15. 調整緩和與持續時間

16. 在"影響"旁邊選擇"Class"

17. 點擊所有具有該類的元素，並選擇只有具有該類的子元素

將動畫應用於其他元素

1. 關閉動畫，點擊進入互動面板

2. 在觸發器設置下，確保此動畫應用於所有具有此類別的元素（例如"Class: Project Lin"）

本文會提到：

1. 建立一個懸停的動畫

2. 建立一個懸停的動畫

3. 將動畫應用於其他元素

建立一個懸停動畫

1. 選擇連結塊(使其成為觸發器)

2. 在互動面板上，點擊元素觸發器旁邊的加號，從下拉選單中選擇鼠標懸停

3. 在懸停時，從動作選單中選擇啟動一個動畫

4. 點擊時間動畫旁邊的加號

5. 命名它（例如"Fly in"）

6. 選擇想做動畫的元素

7. 點擊定時動作旁邊的加號，從下拉選單中選擇移動

8. 在"Move"給X軸一個數值（例如，-100）

9. 在"Timing"旁邊，將開關切換到設置為初始狀態

10. 對於您想做動畫的其他元素，重複步驟6到9

11. 互動面板，（點擊shift）並選擇時間軸上的元素

12. 右鍵單擊以複製

13. 在"Move"把X軸改回原點（0像素）

14. 在"Timing"改變Easing（例如Ease Out）

15. 縮短持續時間（例如縮短到0.2秒）

建立一個懸停的動畫

1. 點擊離開您剛剛建立的動畫

2. 在互動面板中，在懸停時，從動作選單中選擇開始一個動畫

3. 在定時動畫下，點擊飛入旁邊的齒輪圖標並選擇複製

4. 啟動飛入2

5. 重新命名它

6. 從時間軸上刪除重複的動畫

7. 選擇時間線中的其餘動畫

8. 在"Timing"旁邊關掉"Set as initial state"

9. 調整緩和與持續時間

將動畫應用於其他元素

1. 選擇時間線中的任何一個定時動作

2. 在"Affect"旁邊選擇"Class"

3. 點擊所有具有這個類別的元素，並選擇只有具有這個類別的子元素

4. 重複1-3的懸停出入動作

在響應式網頁設計中，寬度和高度屬性的大小基於裡面的內容，但可以更具體地使用一些來定義。

在本課中，我們將介紹這些：

1. 自動調整尺寸

2. 像素

3. 百分比

4. Ems

5. Rems

6. 基於視窗的單位

7. 小數點單位

8. 字符單位

9. 最小和最大尺寸

10. 溢出

自動調整大小

默認情況下，元素的大小是根據裡面的內容自動決定的。

像素（PX）

像素值可以與圖像和其他有指定像素值的元素按比例縮放。

百分比（%）

百分比指的是元素在父元素裡所佔的比例大小。

Ems

當您想在一個有文字的元素上設置比例填充時，Ems就很實用。

每個瀏覽器都有一個默認的字體大小，通常為16px。 Ems查看它們的父元素並按比例調整字體大小。

假設一個字體是16像素： 1個em是16像素 2個ems=32像素 1.5個ems=24像素

您也可以在一個段落的父元素上設置字體大小，比如Div：

1. 選擇父元素

2. 在樣式面板中的"排版"下，改變字體大小（例如：20像素）。

當父元素為20像素時： 1個em=20像素 2個ems=40像素 3個ems=60像素

Rems

Rems是相對於HTML字體大小而言的。

Rem的計算方法是將Rem值乘以HTML字體大小（它依循瀏覽器的字體大小，除非您在代碼中手動改變它），這樣做的好處是尊重用戶的瀏覽器偏好。

VW 基於視窗的單位

VW是對瀏覽器視窗寬度的測量，根據視口的寬度按比例進行縮放。

小數點單位

小數單位(fr)在任何設置為網格的地方都可以使用。 如果有一個4列的網格，每一列默認為1fr--1fr等於1/4的網格。 如果您增加了一列，每個fr就等於1/5。您可以改變這些值（例如，將第一列設置為2fr）。小數單位會自動縮放事物--一切都會自動計算，包括列的間隙。

CH 字符單位

字符單位非常適用於確定段落或標題的大小，以限制人們每行所需閱讀的字符數。

例如一個段落的最大寬度為60ch，那麽它就會採用選定的字體（該段落的字體），並將該段落的邊界設置為等於60個零的寬度。

當您試圖限制字符數時，CH讓您在文本元素上設置寬度（基於字體的零字符寬度。）

最小和最大尺寸

如果把元素的寬度設置為50%，它就會占用其父元素內50%的空間。 當調整視窗大小時，該元素就會相應地縮小。

如果在元素上設定了最小（如200px）和最大（如500px）的寬度，它就會保持50%的寬度，並且在視窗收縮和擴展時保持在最小（200像素）和最大（500像素）的寬度之內。

提示 使用最小值來刪除元素的任何明確的高度，而將最小高度設置為100vh。現在妳的部分不會短於視口高度的100%。 如果想把元素的高度設置為800像素，把它設置為最小高度意味著它將是800像素高，同時尊重其內容的寬度（如果需要，它可以變得更高）。

假如您不希望一個段落的寬度超過60個左右的字符，可以選擇段落標簽，設定最大寬度（例如，60ch），則現在的默認值將自動限制在60個字符的段落（不管是什麽字體的60個零）。

溢出

當元素上設置了寬度和高度，但沒有足夠的空間容納裡面的內容時，溢出就會自動發生。默認情況下，溢出的文本是可見的。 選擇元素並點擊進入樣式面板>尺寸>溢出，您會看到第一個圖標，可見（眼睛）圖標，被默認選中，這意味著溢出的文本默認為可見。

1. Hide：隱藏夾住（隱藏）元素邊界外的內容。

2. Scroll：取決於操作系統和瀏覽器，可以顯示滾動條，方便使用者可以滾動瀏覽Div塊的內容。

3. Auto：允許使用者滾動（只有在有足夠的內容溢出的情況下才能這樣做）。

過渡有助於在元素的不同狀態之間創建一個平滑的動畫。

持續時間和過渡類型可以被訂製，常見的用例是為元素的懸停狀態創建平滑的過渡，以便它們不會在懸停時突然改變。

1. 為按鈕的懸停狀態設置樣式

2. 設置過渡，使懸停時的動畫更加流暢

為按鈕的懸停狀態設置樣式

1. 選擇按鈕

2. 添加盒狀陰影，並對其進行風格化處理。

3. 轉到懸停狀態

4. 增加陰影的強度和距離

5. 切換回無狀態

設置過渡，使懸停時的動畫更加平滑

1. 添加過渡，從屬性下拉選單中選擇盒狀陰影

2. 添加500ms的持續時間

3. 保持緩和狀態不變

4. 將鼠標懸停在按鈕上，可以看到陰影的強度和距離的平滑過渡

C4: 網頁動畫新未來：Lottie檔案更小讀取更快

Lottie

像 gif 但比 gif 更好。Lottie 是Airbnb 開源的跨平台動畫函式庫，設計師在 AE 製作好動畫之後，使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式，就可以直接運用在 iOS、Android、Web 和 React Native之上，無需其他額外操作。

Lottie: 檔案更小, 更便利可輕易攜帶的動畫檔案

根據Lottie官網的歷史資料，其實這個技術開發長達十年，從沒沒無名的技術，經過微軟以及許多大公司的支援，Lottie能夠在電腦與手機上順暢運作沒有問題，踏出了成功的第一步。接著Adobe After Effect軟體也提供了Lottie的插件，可以透過After Effect輸出高品質的動畫。

‍

靈活的 After Effects 功能

我們目前支持實體、形狀圖層、蒙版、alpha 遮罩、修剪路徑和虛線圖案。我們將定期添加新功能。

‍

以您喜歡的方式操作動畫

您可以前進、後退，而且最重要的是，您可以對動畫進行編程以響應任何交互。

‍

小文件大小

在您的應用程序中捆綁矢量動畫，而不必擔心多維或大文件大小。或者，您可以通過從 JSON API 加載動畫文件與應用程序代碼完全分離。

Lottie 的概念

如何製作Lottie動畫？

Lottie的優勢在於向量動畫的效果，因此在Lottie的官網可以看到大多數的Lottie都是以向量為主的作品，向量動畫的優勢早在Flash時代就很明顯了：可以任意縮放大小，不受到顯示器的尺寸限制，畫質也不受縮放影響，也更易於達成設計師想要的高幀(高影格速率)作品。

Lottie 資源

哪裡可以找到Lottie資源？

‍

Tools

‍

‍

‍

創建集合時，您可以手動添加集合項目，或者用CSV文件將它們直接導入到現有的集合。這允許從外部來源直接導入成百上千的數據項目到CMS中，並在導入這些內容時將CSV內容映射到參考字段。為了使大量數據的更新更容易一些，也可以透過CSV導入有選擇地更新現有的CMS項目。

本文會提到：

1. 如何將外部數據上傳到Webflow中

2. 如何配置字段和預覽項目

3. 如何導入映射的數據

4. 如何建造CSV文件

5. 如何使用支持的數據類型

如何將外部數據上傳到Webflow中

讓我們來了解一下如何將外部數據上傳到Webflow集合。在這個過程中，我們將涵蓋以下步驟。

1. 如何確定您可以導入的項目數量

2. 如何上傳CSV文件

3. 如何指定標題行

4. 如何選擇要導入的項目

如何確定可以導入的項目數量

使用免費的入門網站計劃，最多可以發布50個項目。若要導入超過50個項目，您需要為網站添加CMS或商業網站計劃，這兩個計劃分別允許多達2000個和10000個收藏項目。

如何上傳CSV文件

要將CSV文件上傳到Webflow中的指定集合。

1. 打開CMS面板

2. 選擇您的數據集

3. 點擊導入

4. 拖入您的CSV文件（或點擊瀏覽您的電腦）。

注意 CSV文件的最大文件大小為4MB。

如何指定標題行

在選擇CSV文件後，您會被提示要指定一個標題行。

通常，CSV的標題行包含定義每一列所含內容類型的列標籤。 上傳CSV文件後，您會看到CSV的預覽，並能夠確認第一行是否為標題。選擇"是"或"我不確定"將第一行標記為標題，並將其排除在進口之外。選擇"否"則將該行納入導入範圍。

無論在這階段做出什麽選擇，在下一步可以到第一項，勾選或取消勾選 "標題行"的選項。

這個標題行的值將被設置為這個字段配置步驟的字段標籤。

如何選擇要導入的項目

選擇標題行之後，您會收到確認CSV文件已經完成處理。這個模式也會告訴您新上傳的CSV項目是否與收藏中的任何當前項目相匹配或不匹配。

注意 如果您沒有選擇標題行，或者您不確定第一行是否為標題行，妳將直接進入字段配置，而沒有選擇更新匹配項目。從本質上講，Webflow默認為您創建新的項目，因為沒有標題行，就不可能映射到ID列或字段。 如果您有匹配的項目，您可以選擇：

1. 更新匹配的項目：將收藏中的現有項目與CSV上傳的項目進行匹配

2. 將所有項目作為新項目導入：將CSV上傳中的匹配項目作為新項目加入收藏中。

選擇更新匹配的項目是一個很好的方法，可以快速對收藏中的現有項目進行修改。例如在CSV文件中對選定項目的數據進行了更新，只需上傳更新後的項目，就可以快速地用新數據覆蓋CMS項目中的舊內容。

注意 常規的CMS項目是根據"項目ID"字段來匹配的，該字段包含在從集合中導出的CSV文件中。(通過CSV導入更新項目不適用於電子商務項目。)也請記住，如果從備份中執行網站恢復，所有CMS集合和項目ID將被刷新。閱讀更多關於保存和恢復備份的訊息。

選擇更新匹配的項目或將所有項目作為新項目導入後，就可以開始配置CMS字段並將CSV數據映射到這些字段。

如何配置字段和預覽項目

在上傳CSV文件後，它的列將作為字段可用，您可以在導入的項目下的字段配置窗格中進行配置。如果指定，列標題將作為字段標籤出現。

注意 如果CSV標題名稱與現有的字段名稱相匹配，它們將自動相互映射，並為您節省配置步驟。

輸入字段的值將從選定的行中提取。每行將轉化為一個集合項目。您可以在右邊的項目預覽窗格中預覽不同的項目。

如何配置字段

在這一步您將配置字段，選擇哪些列需要映射，還可以為每一列創建新的字段。

不要映射字段

如果CSV裡有不想導入的列，從下拉選單中選擇不要導入。

創建新字段

如果一個字段在集合中不存在，您可以創建一個，並將其映射到一列。

1. 選擇創建新字段

2. 從出現的下拉菜單中為這個新字段選擇字段類型。不支持列中內容的字段類型將不可用。

3. 添加新的字段標簽或保留建議的標籤。

4. 可選：添加幫助文本

您將有其他選項為不同的字段類型進行設置，新的選項字段將由該列的所有唯一值填充。對於一個新的開關字段，您可以指定哪個值映射到 "不"。

映射到現有字段

您可以將每一列映射到集合中的一個現有字段，列標籤旁邊的綠色指示燈表示該列已經被映射。

1. 選擇映射到現有字段

2. 從出現的下拉選單中選擇想把這個列映射到的字段。不支持某一列內容的字段將不可用，並且顯示灰色。

對於開關字段，您可以指定哪個值映射到 "不"。或者，您可以用刷子把一個值映射到 "是"。

注意 不能把一個列映射到已經在使用的現有字段。若需要將一個列映射到一個特定的字段類型，請創建一個新字段。

如何預覽項目

在右邊的項目預覽窗格中預覽將被導入的每個項目的字段和值。 使用預覽窗格頂部的左右箭頭按鈕在項目之間切換。 點擊頂部欄中的顯示項目下拉選單，可以看到所有將被導入的項目的列表。在下拉式項目顯示選單打開的情況下，點擊任何項目的名稱來跳轉到其預覽。在搜索欄中鍵入文字來搜索特定的項目。

將鼠標懸停在左側面板中映射的或創建的字段上的任何地方，將突出顯示預覽項目中的相應字段。預覽項目隨著字段的配置而實時更新。

如果您需要編輯某個項目的字段的值，可以在配置字段之前進行，或者在下拉選單中選擇不要導入。

您也可以選擇跳過導入特定項目到收藏中：

1. 在預覽窗格中找到不想導入的項目（例如使用箭頭、下拉選單或搜索欄）。

2. 打開"跳過導入"切換鍵

跳過的項目會在預覽窗格的頂部和顯示項目的下拉選單中以 "跳過導入"的圖標顯示。

有要求/驗證的字段

如果您的CSV列中的單元格被映射到一個必需的參考字段，而它是空的或不包含任何存在於該參考集合中的值，則您會收到一個警告說項目不存在。作為一個必填字段，該行的項目將被導入為草稿，而參考字段將被留空。

如果映射的參考字段不是必需的，並且該列中的單元格是空的，或者不包含任何存在於該參考集的值，那麽一旦導入，該行的項目將被設置為暫定發布，並且參考字段將被留空。

如何導入映射的數據

在您完全配置好CMS字段和CSV數據後，點擊右上方的導入按鈕，將數據添加到收藏中。

等待，直到所有項目都被導入。

如果部分或全部項目沒有被導入到收藏中，您會看到一個沒有被導入的項目列表，導入失敗的原因，以及一個可以下載詳細錯誤報告摘要的連結。

注意 您的網站將創建一個導入前的版本，您可以在網站設置的備份選項卡中恢復，以防導入時出現任何問題。

如何建造CSV文件

一般來說，從其他內容管理系統（如WordPress）導出的CSV文件的結構會與Webflow兼容。

但您可能想創建自己的CSV，並將這些數據導入一個集合。例如，您可以使用Google Sheets、MS Excel或Airtable來創建一個電子表格，列代表字段，行代表項目及其值。電子表格準備好之後，就可以把它保存為CSV文件。

注意 在Excel中保存CSV文件時，一定要選擇CSV類型 "逗號分隔值"。其他CSV擴展名在上傳到Webflow時可能無法正確呈現。為了確保只有一列數據的CSV文件能夠正確導入，請在標題列標籤（如：姓名）後直接添加一個逗號。

如何使用支持的數據類型

當您上傳CSV文件時，Webflow CMS通常會很好地理解您的內容。但是，有些格式，如圖片、日期、數字和顏色的格式，可能無法識別。

關於格式化的一個很好的說明是，導出的Webflow CMS內容將被正確地格式化，以便導入。因此，使用導出的CSV文件將CMS內容從一個Webflow網站移到另一個網站上就可以了。

為了確保您的數據格式正確，並且可以映射到正確的字段類型，在創建您自己的數據庫電子表格時，請遵循以下準則。

• 名稱字段 - 任何少於256個字符的純文本字段都可以映射到這個字段上

• Slug字段 - 任何少於256個字符的純文本字段都可以被映射到這個字段上 注意 如果沒有將CSV列映射到默認的名稱和lug字段，CMS將自動生成這些字段。

• 純文本字段 - 任何純文本值都可以映射到這個字段。

• 副文本字段 - 任何數值都可以映射到這個字段。要導入副文本，這個字段的值必須是HTML代碼。

  注意 在導入過程中，代碼會被 "清理"，以刪除副文本字段不支持的元素、類和屬性，所以記得在導入後檢查所有的副文本內容。

• 圖片字段 - 圖片應該作為直接的URL（以圖片文件擴展名結尾的鏈接）添加到CSV中。只有支持的圖像文件類型才會被導入到收藏中。

• 視頻字段 - 只有YouTube或Vimeo的URL可以被映射到視頻字段

• 連結字段 - 任何URL都可以被映射到連結字段上

• 電子郵件字段 - 只有電子郵件地址可以被映射到電子郵件字段中

• 電話字段 - 任何支持的電話號碼格式都可以映射到電話字段上

• 數字字段 - 只有數字可以被映射到這個字段。如果值包含字母，例如單位、符號或逗號，則無法將數字映射到數字字段。

• 日期/時間字段 - 任何支持的日期和時間格式都可以映射到這個字段。

• 交換字段 - 您可以將一個列映射到一個交換字段，當其單元格中只有兩個唯一的值時。例如，如果一列只有 "True"和 "False"兩個值，您可以將其導入為一個開關字段類型，並在映射階段指定哪個值表示 "Yes"。

• 顏色字段 - web顏色格式的任何值（顏色名稱、十六進制代碼、RGBA）都可以映射到這個字段。十六進制代碼必須在前面加上#，例如#4353ff。

• 選項字段 - 任何列都可以被映射到選項字段。這一列中的所有唯一值將成為這個字段的選項（最多有100個選項）。

• 文件字段 - 目前您不能將任何列映射到文件字段。您可以在導入所有數據後手動上傳文件。

• 參考字段 - 您可以映射格式為普通文本的內容--不需要特殊格式。

• 多參考字段 - 您可以映射其單元格內由分號分隔的內容，就像多圖像字段內容一樣。

有條件的可見性是在動態設計中顯示或隱藏元素的最適用的方法，並根據不同的標準為不同的集合項目創建獨特的設計。

與過濾器不同--過濾器指定哪些集合項目在集合列表中可見--條件指定任何元素（靜態或動態）在集合列表或集合頁面中何時可見。

本文會提到：

1. 設置條件的可見性

2. 理解條件規則

3. 理解條件與過濾器

4. 用條件可見性支持您的電子商務項目

舉例

• 在一個集合列表中顯示或隱藏元素

• 顯示或隱藏標籤

• 突出當前項目

• 顯示或隱藏集合頁面中的一個部分

• 如果產品不能運輸，添加"到店取貨"的徽章（電子商務）

• 根據是否設置了價格比較，顯示或隱藏銷售徽章(電子商務)

• 根據訂單小計顯示或隱藏"免運費"徽章（電子商務）

• 在向某些國家發貨時，顯示或隱藏特定的信息（電子商務）

設置條件的可見性

有條件的可見性指定元素何時可見。這個條件是基於一個字段的值或您所處的集合列表或集合頁面中的項目。

如何設定條件：

1. 選擇一個元素，靜態的或動態的，在集合列表內或集合頁面上，您想在滿足特定條件時才顯示的元素

2. 按D鍵，打開設置面板

3. 在條件可見性部分，通過點擊加號（+）按鈕添加一個條件

4. 在第一個下拉選單中，選擇想要的可見性所基於的領域

5. 在第二個下拉選單中選擇條件

6. 如果需要，指定一個值

7. 點擊保存

您可以根據您的需要添加條件。 當應用多個條件時，必須滿足所有的條件，才能使其可見。您可以通過點擊條件旁邊的垃圾桶圖標來刪除條件。

理解條件規則

條件規則像過濾規則一樣，基於字段或是基於項目。

基於字段的條件

• 被設置或未被設置

• 等於或不等於某個值

• 包含或不包含某個值

• 大於，小於，或者是兩個數值之間的一個數字

• 開或關

• 屬於某個日期範圍

基於項目的條件

基於項目的條件適用於當一個集合項目是或不是當前項目時。

理解條件與過濾器

集合列表過濾器允許您根據一個規則在集合列表中顯示或隱藏集合項目。

而條件性可見性使用相同的規則來顯示或隱藏集合列表內或集合頁面上的元素。

例如，您可以使用規則"特色（開關）是打開的"來顯示特色博客文章的"特色"文本標籤，並對特色開關設置為關閉的元素隱藏這個標籤。

另一方面，如果您希望只在列表中顯示有特色的文章，您可以將這一規則設定為集合列表的過濾器。

例子

以下是一些您可以應用條件和過濾器的方法。

在集合列表中顯示或隱藏一個元素

假設有一個包含團隊成員的集合列表，一些人有電子郵件地址，但其他人沒有。在收集列表中，您有一個文本連結，從電子郵件字段中提取URL。

讓我們看看如何為那些沒有電子郵件地址的團隊成員隱藏文本連結。

1. 選擇文本連結

2. 添加一個條件，說明當電子郵件地址字段被設定時，該元素是可見的

3. 保存

顯示或隱藏一個標籤

假設您有一個部落格文章的集合列表，您想為特色項目顯示一個 "特色"標籤。 因為任何添加在集合列表中的元素都會出現在所有的集合項目中，您可以使用條件可見性來隱藏不符合條件的項目中的這個元素："特色項目已開啟"。

1. 在您的部落格文章集合列表中創建一個"特色"標籤

2. 選擇該標籤

3. 添加一個條件，說明該元素在"精選"時是可見的？

4. 點擊保存

突出顯示當前項目

假設您在一個文章收集頁面上有一個文章列表。這個列表還包括當前文章的文章項目，也就是您目前所在的頁面。

您可以用過濾器來隱藏這個當前的文章，或是您可以為系列項目創建第二個設計來突出它。

現在集合列表中的每個收藏品項目中為每篇文章有2個代表。

由於您想只為當前的部落格文章顯示獨特的設計，您需要做兩件事：

1. 添加一個條件來隱藏第一個設計。在這個例子中，為當前項目添加一個條件，隱藏第一個設計："Post item wrapper"。

2. 添加一個條件來顯示新的設計。本例中的"當前的文章包裝"，只針對當前的文章。

在集合頁面上顯示或隱藏一個部分

您可能有一個部分只想在某些集合頁面上顯示，您可以創建一個條件，使這個部分和它的所有子部分都只顯示，例如當類別是"聖誕節"時：

1. 選擇該部分

2. 添加一個條件

3. 在第一個下拉選單中選擇"類別"字段

4. 在第二個下拉選單中選擇等值

5. 將"聖誕節"指定為值

6. 保存

用有條件的可見性支持您的電商項目

在您的電子商務商店中創建獨特的設計。使用條件可見性來顯示或隱藏基於產品或訂單數據的元素--突出產品屬性或在結帳時提供額外訊息。

根據產品和產品變體字段顯示或隱藏元素

通過對變體字段（如主圖、價格比較、長度、寬度、SKU等）設定條件可見性，將特定設計與獨特的產品變體聯繫起來。

要顯示或隱藏獨特產品變體的元素：

1. 選擇想在滿足某個條件時顯示的元素

2. 在設置面板上，添加一個條件

3. 在下拉選單中選擇一個產品字段（例如，比較價格）

4. 設置一個條件（例如，存在或等於一個特定的值）

5. 保存

使用SKU條件可見性選項，同樣的橫幅或呼出概念可以應用於產品變體。創建心目中的呼出元素，並將其設置為只在產品變體被選中時顯示。

範例

• 如果產品不能發貨，添加一個"到店提貨"的徽章

• 根據是否設置了價格比較，顯示或隱藏一個銷售徽章

根據產品訂單數據顯示或隱藏結帳流程中的元素

您可以添加取決於結帳訊息的橫幅或呼出。例如一個橫幅可以根據購物車的總額、小計或運輸訊息來顯示。

要在結帳頁面設置有條件的可見性：

1. 選擇您想在滿足某個條件時顯示的元素

2. 添加一個條件

3. 在下拉選單中選擇一個發貨字段（如小計）

4. 設定一個條件（例如，存在或等於一個特定的值）

5. 保存

範例

• 根據訂單小計，顯示或隱藏"免運費"徽章

• 向某些國家發貨時，顯示或隱藏特定的訊息

重要提示

當根據國家或帳單地址設定有條件的可見性時，國家必須被輸入為2個字母的縮寫，例如美國需要被輸入為US。

重要提示

當添加一個基於價格的條件時，金額應該被格式化為1000.00--使用一個點分隔符作為小數點--不管您的商店的價格格式設置如何。例如100,50歐元應該被輸入為100.50。

盒子模組描述了佈局在網絡上的工作方式。

Photoshop 或 PowerPoint 等工具允許您將元素放置在給定文檔中的任何位置。Web 佈局基於垂直堆疊的內容，就像文檔中的段落一樣。 在本課中：

1. 了解 boxes

2. 使用 boxes 進行響應式設計

3. 群組 boxes

4. 嵌合 boxes

了解 boxes

所有元素都是 boxes。這個網頁上的每個元素都被視為一個盒子——想像每個元素周圍都有一個不可見的邊界。這些盒子自然而然地彼此相鄰或堆疊在一起，具體取決於它們的屬性。

使用 boxes 進行響應式設計

Web 內容不像 PowerPoint 或 Photoshop 文檔，其中的元素可以手動放置在任何地方。這些文檔沒有響應——創建的內容是為了以一種分辨率查看。

分組 boxes

boxes 模型的一個重要方面是它允許您在其他盒子中插入盒子（即“嵌套”）。這意味著您可以將任何 Webflow 元素拖放到另一個元素中。Webflow 中的所有元素都是可以相互嵌套的盒子。例如，您可以將標題、段落和圖像元素放在容器中。這個容器將這些其他元素組合在一起，每當你移動容器時，它裡面的所有盒子都會出現。

嵌套 boxes

當一個盒子的內容增加時，盒子的大小自然也會增加。這意味著通常不需要在元素上設置定義的高度——相反，我們可以讓內容決定高度。

但是我們如何在元素之間創建間距呢？這就是 margin 和 padding 的用武之地。margin 在盒子外面創造空間，把其他盒子推開，而 padding 在盒子裡面創造空間 。這可以應用於任何 boxes —— 一個包含其他 boxes（“父”元素）的 boxes，或者裡面的 boxes（“子”元素）。

垂直和水平堆疊

您可以通過向頁面添加內容並調整填充和邊距來創建一個簡單的網站。但是您通常需要元素水平分佈或在屏幕上的特定位置分佈。這就是不同的佈局技術發揮作用的地方。顯示設置控制元素的默認顯示或佈局行為，定位屬性控制其他佈局行為。

HTML and CSS – web development initiation

HTML and CSS – Generalities

If you want to learn Web Development, you have to learn HTML and CSS first.

It doesn’t matter what language you choose, either it’s C#, Ruby, Java, Python or JavaScript, at a certain moment you will meet by default with HTML and CSS.

What is HTML?

• *HTML（超文本標記語言）代表了每個網頁的基礎。

當你在瀏覽器中輸入一個地址時，它就會連接到一個網路 伺服器並下載一個頁面，而這個頁面是用..... - HTML。

• *HTML是用來定義網頁的結構和內容的語言。

它與其他語言不同，因為它不是真正意義上的編程語言，你用它來定義行為和完成任務，它是一種用於創建具有明確句法結構的文檔的標記語言。

句法。- 聲明doctype。"！DOCTYPE html >; - 聲明頭部和標題。<head><title> Baboon</title></head>"

從根本上說，HTML是靜態的，因為一旦從 伺服器上下載了一個頁面，它就不會改變。然而，你可以實現腳本，以便在頁面被下載后對其進行修改。

由於HTML，你可以創建結構良好的頁面，實現圖像，並以其他電腦軟體容易理解的方式展示數據。

然而，它是一種容易學習的語言，因為它的語法足夠簡單和直接，它有一個定義明確的標準，而且只需要少量的練習就能了解你實際上能用它做什麼。

Webflow 介面 → 建立/ 設定 HTML DOM 元素

<div class="padding-vertical padding-xxlarge"></div>

<div id="header"></div>

Webflow 植入自定 HTML

Why we are doing this?

Tenten 在台灣網頁設計/ UI/ UX/ 產品開發領域已經有長達 12 年的經驗, 我們於 2018 年即意識到未來的行銷, 與產品設計將會因為 Martech, NoCode 等開發工具趨於成熟將會帶來重大的產業變革。而我們也在過去幾年開始慢慢改變組織與工作方式，一直到去年我們所採用的 Full Stack 與 No Code 工作流也在客戶端獲得了極大的回響, 其原因如下:

• 節省製作預算 (使用 Webflow 跟傳統 Wordpress 相比約節省 30% 以上!)

• 提昇客戶滿意度: 更快的反應時間 (Webflow 讓我們大大的縮短客戶需要修改的反應時間)

• 我們透過 Webflow 替許多有全球頁面部屬與多語系需求的大企業 (如 HTC, Ambassador, RampCDN...), 導入獨特的 Hybrid Headless 也驗證 Webflow 可因應複雜的大型網站

• 穩定與安全: 相較於 Wordpress 或其他自建 CMS, Webflow 提供了企業級的安全性

• 與 Figma 有更好的整合

• Hassle Free: 更好的動畫與組件控制。身為設計師不用再煩惱著如何精準的實現網站動態與工程師溝通

Our Startup DNA

一直以來, 我們所使用的開發與設計工具都是與全球最頂尖的新創看齊。因此我們的 UI/ UX 工作坊,與新創般工作流程在業界也慢慢成為敏捷設計開發的標準。而我們每年運行的 internship program 也孵化出不少 Full Stack Designer, Full Stacker Marketer 甚至是 Product Designer Lead。因此我們決定開始將我們過去的 Internship program, 企業UI/ UX workshop 帶到線上來跟大家分享，慢慢的建立起一個專屬於產品設計師的社群，而我們第一個計畫就是從 No-Code 的設計師工具 Webflow 開始

• Tendemy: Webflow 大師班講師訪談

• Tendemy: Webflow 學習資源

• Tendemy - 專注與眾不同的設計課程與優質內容 - 新創/設計行業/Martech/Nocode/AI領域

產品設計：如何成為專業人士

來自業界最頂尖的網頁與產品設計師的專業課程 我們從經驗中教你。我們的課程側重於高價值技能和經過驗證的流程，這些技能將提升您的工作水平，讓您的客戶讚歎不已，並幫助您以網頁設計師的身份到成功的自由接案設計師。使用 Webflow 快速構建自定義、功能齊全的網站，無需學習如何編碼。擺脫限制性模板，重新獲得創作自由，並使用這款強大的視覺開發工具將您的最佳創作變為現實。

我們的宗旨

• 幫助設計師們設計出更好的網站 (在不需要工程師的幫助下)

• 讓設計師學會如何無需撰寫代碼即可構建自定義網站 (CMS 或是動態內容)

• 協助設計師找到更多優質客戶

• 提供自身的設計價值進而提供完整的品牌服務

Our Roadmap (Tenten Nocode 路線圖)

• Webflow 文件

• Webflow 學習資源

• Webflow 中文社群 (Facebook)

• Webflow 資源整理

• Webflow 討論區 - 請到這裡寫下你想要的功能，或是課程內容，或是投票選出你們想要學習的內容...etc。

• FlowButter: Webflow 與 Figma UI Kit (US 組件) UI 庫 - [建構中]

• 提供接案平台找到更多的業務機會 (Wework for Designers)

• IloveNocode: 推出更多圍繞在 No-Code 的教學與社群, 讓大家認識現在全球最流行的 NoCode 工具如 Xano, Retool, Zapier, Memberstack, Bubble...等, 旨在建立台灣第一個專注於 NoCode 的社群，進而媒合更多產品設計, 行銷, 開發者與新創 DNA 的人才交流。協助他們一起打造出更多在台灣可以成功的新創模式 - [Planning]

WebFlow https://webflow.com/ 註冊後，即可以進入 WebFlow 的控制台。

點擊下方的「 New Site 」按鈕，就可以創建項目了。免費帳號可以創建 2 個 Project。

Webflow Designer 介面介紹

整體來說 WebFlow 的介面上，可以修改HTML，更新CSS，做交互，甚至動畫。其 WebFlow 介面包括了三大部分：介面控制台（左側）、細節調整（右側）、畫布（中央）。

介面控制台

自動儲存

顯示您的工作何時被保存 - 用灰色省略號 (...) 表示。Webflow 會自己自動儲存專案，當自動儲存時，用綠色複選標記表示。若使用 Mac 中按 CMD+S 或在 Windows 中按 CTRL+S 來手動保存項目。單擊此圖標不會保存您的專案。

RWD管理

最上面的4個圖型按鈕非常直觀：桌面電腦（包括筆記本）、平板、手機橫屏、手機豎屏。當你點擊相應的圖標后，就可以預覽相應的尺寸內容。這邊要注意的是，要從桌面電腦（星星）的地方去調整作品，Ｗebflow有一個最棒的功能是他可以自動先幫你調整所需的大小。當然每個尺寸都必須要去調整一次才會更完美！

設計介面中主要有 4 個主要面板：

1. CSS面板設置 — 快捷鍵：S 使您可以訪問可用於選擇元素的所有 CSS 屬性。您只需在相應的字段中輸 入這些值，即可立即在畫布上查看應用於您的元素的樣式。

2. HTML元素管理 (D) — 快捷鍵：D 使您可以訪問可用於選擇HTML元素的各種設置。

3. CSS管理 — 快捷鍵：G 顯示您在項目中創建或編輯的類、組合類和標籤的完整列表。這是重命名甚 至清理任何不再使用的樣式的快速方法。了解更多。

4. 動畫管理 — 快捷鍵：H 允許您創建動畫並將它們應用於所選元素。

底部導航欄

按鈕欄顯示所選元素的層次結構。您可以看到它的位置，在哪些其他父元素中，您甚至可以通過單擊此麵包屑欄中的標籤來選擇任何父元素。

以上這些都會是你最常使用的幾個板塊。

您會於本文章學習到：

1. 在不同的狀態下為元素設計樣式

2. 為鏈接元素的當前狀態設計樣式

3. 理解樣式從哪裡繼承

為不同狀態下的元素設置樣式

當您從選擇器的狀態下拉菜單中選擇一個狀態時，綠色的狀態類會出現在選擇器字段的末尾。這表示您正在為元素設計該狀態的樣式。

無論處於什麽狀態，所做的改變將在畫布上可見，直到取消選擇或以其他方式離開該狀態。

狀態菜單

從下拉菜單中選擇您要設計的狀態。 在樣式面板上所做的任何改變都會為所選的狀態保存。

None 無狀態 無狀態是元素的默認狀態。

若您選擇了另一個狀態並對其進行了樣式設計，您可以透過從狀態下拉菜單中選擇 "None"來返回到默認狀態的樣式。

Hover 懸停狀態 鼠標指針懸停在元素上時的狀態。 在大多數觸摸設備上是不可能懸停的，所以在為較小的斷點設計時要注意這點。

Pressed 被按下的狀態 點擊元素時顯示的狀態。 這個狀態繼承了懸停狀態的樣式，因為按壓狀態實際上是懸停狀態的一個狀態。

Focused 焦點狀態 您可以關注某些交互式元素，比如按鈕和鏈接，而不透過使用鍵盤來激活它們。用鼠標或指針設備點擊交互式元素，既能聚焦又能激活它們。這種狀態模擬了用鍵盤或鼠標或手指點擊互動元素時的聚焦。

Focused (keyboard) 焦點（鍵盤）狀態 和聚焦狀態樣，這個狀態模擬的是當壹個交互式元素被聚焦但不壹定被激活的時候（例如，通過用妳的鍵盤對該元素做標簽）。請註意，當聚焦時，它總是適用於文本輸入字段，不管它們是以何種方式聚焦的（例如，用鼠標、鍵盤等）。

為了使網站對那些依靠鍵盤導航的訪問者更方便，重要的是要對這種狀態進行風格化處理，使互動元素的位置在頁面上很明顯。我們建議在互動元素上設置一個輪廓，因為它不會影響元素的布局。

Visited 被訪問的狀態 被訪問的鏈接的狀態。這個狀態繼承了無狀態的樣式。

對於被訪問的狀態，您只能對文本顏色、背景顏色和邊框顏色進行設計。背景顏色只有在它已經被設置在不同的狀態下才會出現。

占位符 這個狀態將在表單字段的狀態下拉菜單中可用。它允許妳將占位符文本的樣式與輸入的文本分開，後者繼承了默認狀態的排版樣式。

對於占位符文本，您可以設計排版、背景和陰影。

勾選的狀態 對於在元素設置中啟用了自定義樣式的表單復選框和單選按鈕，這個狀態將在狀態下拉菜單中可用。它允許您對復選框或單選按鈕的檢查狀態進行樣式設計。

鏈接元素和標簽的當前狀態的樣式

鏈接元素也有一個當前狀態。在當前狀態上添加自定義樣式時，它將反映妳的鏈接元素在用戶處於該狀態時的樣子。

當前狀態（選擇器中的綠色標簽） 當鏈接元素被鏈接到當前頁面、章節或標簽時，當前狀態會自動添加到所有鏈接標簽或所選鏈接元素的類中。

選擇一個鏈接的當前狀態 要訪問任何鏈接塊、文本鏈接、按鈕、導航鏈接的當前狀態。

1. 選擇鏈接元素，按D鍵打開鏈接設置

2. 選擇頁面選項，從下拉菜單中選擇當前頁面（如果鏈接在主頁上，就選擇主頁）。

3. 按S鍵，進入樣式面板。如果已經給鏈接應用了一個類別，那麽在選擇器領域，綠色的當前狀態已經激活。如果沒有，點擊選擇器，從打開的下拉菜單中選擇"所有鏈接"標簽。當前的狀態也將被應用到該標簽。

您也可以在鏈接設置中選擇頁面部分的選項。當妳滾動到頁面的那個部分時，當前狀態將出現在該元素的選擇器區域。這對於在妳滾動時固定的按鈕或鏈接的樣式設計很有用。

對當前狀態進行造型後，可以更新鏈接設置，將妳的按鈕和鏈接元素鏈接到任何其他頁面或頁面部分。

選擇一個標簽的當前狀態 您可以選擇對當前標簽的樣式與普通標簽不同，以區分活動和非活動標簽。例如可以編輯字體顏色和背景顏色，使其與正常標簽不同。

1. 選擇活動的標簽鏈接

2. 給它分配一個類別。當前狀態會自動出現。

3. 樣式離開

當前狀態指標顯示在選擇器中時，為鏈接的默認狀態設計樣式 想對默認狀態進行造型時，有幾種方法可以移除當前狀態。最快的方法是在繼承菜單中選擇默認的基類。

另外，您可以在元素設置面板中暫時刪除鏈接設置，對鏈接的類進行樣式化，然後重新配置鏈接設置。如果不想刪除鏈接設置，可以複製鏈接元素，在複製的元素上刪除鏈接設置，編輯類，完成後再刪除複製的元素。

了解樣式是從哪裡繼承的

所有的狀態都從"None 無"狀態繼承樣式。您可以通過點擊選擇器字段上方的繼承指示器來了解樣式是從哪裏繼承的。

在為一個狀態添加樣式後，狀態菜單的下拉圖標會變成藍色。當打開狀態下拉菜單時，您會看到藍色的圓圈，表示該狀態下有本地樣式。

• Codepen

• Jquery

• Where to inject code in Webflow

Javascript

• jquery

• typescript

Where to inject code in Webflow

• Selector (選擇器)

• Layout (布局)

• Spacing (空間)

• Size (尺寸)

• Position (位置)

• Typography (字體)

• Background (背景)

• Borders (邊框)

• Effects (效果)

位於樣式面板中的顯示設置，控制一個元素的布局行為和該元素周圍的內容。

您可以在這裡控制元素之間的顯示方式--它們是堆疊在一起還是並排排列。

在樣式面板的布局部分，顯示設置包括六個顯示選項。這六個選項依序分別是

1. Block

2. Flexbox

3. Grid

4. Inline block

5. Inline

6. Display none

Block

Block是大多數元素的默認顯示設置。

每個元素在一個新的行上開始，並承接其父元素的全部寬度，除非設定了自定義寬度。

不管它的寬度如何，每個元素都會把下一個元素推到一個新行上。

Flexbox

具有Flexbox的元素，水平或垂直地排列子元素。

樣式面板中的布局部分還包括選擇Flexbox時的方向、對齊和子句的設置。 您可以自定義子元素如何堆疊、何時包裹以及如何在flexbox內對齊。

Flexbox的對齊設置被設定為拉伸。五個對齊設置是置頂、置中、置底、拉伸和基線。 創建一個Flexbox的容器時，所有子元素都可以在設置中添加和覆蓋布局。

Grid

您可以自定義子元素在Grid組件中的定位、對齊和分布方式：容器、單個單元格、單元格組或軌道。

編輯Grid面板包括列和行的間隙大小的輸入字段，方向選項和添加列和行的部分。還有一個帶有加號圖標的"區域"部分，用於添加一個新的區域。 透過網格布局，你可以指定列和行之間的間隙，也可以使用FR單元來創建完全流動的網格布局。

當選擇一個Grid容器的子元素時，網格子單元設置會出現在樣式面板的頂部。這些設置允許你覆蓋網格容器的對齊和調整的設置。

Inline block

Inline block是並排堆疊的，其寬度由裡面的內容決定。

當內容碰到父元素的邊界時，裡面的元素也會被包起來。在樣式面板中，你可以對內嵌塊元素應用特定的寬度、高度、填充和邊距設置。

1. H1元素選擇Inline block。

2. 四個標題元素都在同一行。

3. 在左邊的尺寸面板上調整H1標題的寬度。

4. 標題元素在同一容器中被包裹成自己的行，並往下移一行。

Inline

Inline是任何文本內容的默認顯示設置。

您可以透過改變一個Inline元素的外距和內距來改變它的布局，但不能改變它的寬度和高度。

Display: none 無

完全隱藏一個元素。

設置為Display: none的元素不會被瀏覽器渲染，這對於改變內容在移動設備上的顯示方式很方便。

1. 混合模式

2. 不透明性

3. 輪廓

4. 盒狀陰影

5. 二維和三維變換

6. 濾鏡

7. 背景濾鏡

8. 光標

混合模式

Webflow中的混合模式為元素提供了各種不同的方式，使其與下面的其他元素混合（或重疊），而這些都不需要自定義代碼。

Webflow為您處理混合模式的CSS屬性，並允許您設定元素的內容將如何與該元素的父級內容和元素的背景混合。

總共有16種混合模式，這些模式分組包括：

• 默認模式（正常） • 變暗模式（變暗、相乘和燒色） • 變亮模式（變亮、屏幕和顏色閃避） • 對比模式（疊加、柔光和硬光） • 比較模式（差異和排除） • 複合模式（色相、飽和度、顏色和光亮度）

不透明度

設定一個元素及其子元素的透明度水平，可以在效果設置中改變不透明度。您可以透過在輸入框中輸入一個值或者拖動不透明度滑塊到想要的值來改變不透明度。

輪廓

輪廓是為了幫助網站訪問者在您的設計中進行導航，使訪問者清楚地知道他們正在與特定的元素進行互動。 如果使用者再次按下鍵盤上的Tab鍵，輪廓就會出現在下一個新關注的元素周圍。

在輪廓設置中，有以下控制：

1. 樣式：實線、虛線或點線

2. 寬度：輪廓的厚度，這個值可以使用單位下拉列表中的任何CSS單位

3. 偏移：輪廓與元素的邊緣或邊界之間的空間大小，這個值可以使用單位下拉列表中的任何CSS單位

4. 顏色：輪廓的顏色

重要提示 如果想刪除輪廓樣式並恢復到默認的瀏覽器設置，為它選擇"無"可能很誘人，但請記住，這不會刪除任何其他已經設置的屬性（例如，寬度、偏移量或顏色），而且有可能會使輪廓完全消失。

盒狀陰影

盒狀陰影在元素的矩形邊界之外或之內添加造型。

盒狀陰影可以用來為按鈕、部分、div塊或項目中的任何其他元素添加焦點或深度。

堆疊

您可以在樣式面板中為大多數效果添加多個層，例如可以為元素添加多個盒狀陰影並疊加。

在效果設置中，可以透過選擇眼睛圖標來切換每一層的可見性，選擇垃圾桶圖標來刪除每個層。要改變每個效果的順序，只需選擇想重新排序的層並拖移到想要的順序號即可。

在盒子陰影設置中，有以下控制：

1. 類型：在元素的邊界內或邊界外應用陰影

2. 角度：改變箱體陰影的方向

3. 距離：在設定的角度指定的方向上將陰影移近或移遠

4. 模糊：影響陰影模糊的集中程度

5. 尺寸：指定陰影相對於它所在元素的邊界的分布情況

6. 顏色：改變陰影的顏色和不透明度

二維和三維變換

從 "樣式"面板>"效果">"二維和三維變換"中添加變換，以操縱元素的外觀和在不同狀態下的位置，如懸停。

有4種類型的變換:

1. 移動

2. 縮放

3. 旋轉

4. 傾斜

點擊二維和三維變換旁邊的省略號，進入變換設置，調整變換原點、背面可見度、自我視角和兒童視角。

與堆疊效果類似，可以添加一種以上的變換類型，而不會丟失之前的任何設定。使用加號圖標來添加一個額外的變換。

濾鏡

濾鏡對元素應用獨特的視覺效果，也可以用來創建懸停狀態的變化。 您可以在圖像、背景視頻或任何其他元素上添加濾鏡，改變整個元素的外觀，包括其子元素。

要添加一個濾鏡，使用添加選單，在下拉選單中選擇任何一個濾鏡的效果。

1. 模糊：模糊元素的內容

2. 亮度：指定0到200%之間的亮度量

3. 對比度：指定0到200%之間的對比度

4. 色調旋轉：轉移圖像或元素的顏色/色調。值的單位是度。0或360的值會使它恢復到原來的色調。

5. 飽和度：顏色的強度

6. 灰階：將所有顏色轉換為灰階

7. 顛倒：顛倒元素中的所有顏色

8. Sepia：給圖像復古的淡黃色外觀

您添加或調整的任何濾鏡將在畫布上預覽，您也可以為元素添加多個濾鏡，並在濾鏡設置中切換它們的可見性和順序。

背景濾鏡

給任何元素添加背景濾鏡，可以讓元素邊界內的透明區域應用濾鏡效果（如模糊、色移、對比等）。元素後面任何透明區域可見的東西都會受到背景濾鏡的影響。

您也可以對一個元素應用多個背景濾鏡，將背景濾鏡分層並組合在一起，以創造各種視覺效果。

注意 因為背景濾鏡適用於元素後面的所有東西，必須使元素、元素的部分或其背景至少部分透明才能看到這個效果。

總共有8個背景濾鏡，這些濾鏡的分組包括：

1. 一般（模糊）

2. 顏色調整（亮度、對比度、色調旋轉和飽和度）

3. 色彩效果（灰階、反轉和棕褐色）

光標

使用正確的光標對於向用戶表明他們在瀏覽頁面時將會發生什麽很重要，但使用與結果不匹配的光標會導致混亂或不作為。

默認的光標值是自動。它將為特定的元素類型呈現默認的光標，這是由瀏覽器的默認設置所指定的。例如懸停在連結上會顯示指針光標，而懸停在文本上會顯示文本光標。

在大多數情況下，最好是保持這個默認設置，讓瀏覽器選擇正確的光標，也就是說您可以通過改變樣式面板中的光標值來覆蓋瀏覽器對某個元素的默認光標。

背景

設定元素的背景讓您控制外觀和可讀性。在樣式面板的 "背景"部分，您可以為大多數元素添加背景圖像、漸變或顏色（視頻和圖像等媒體元素除外）。

1. 背景顏色

2. 背景圖片

3. 漸層

4. 顏色疊加

5. 背景視頻

背景顏色

透過輸入顏色值（十六進制＼rgba＼顏色名稱）或使用取色器選擇顏色，您可以在任何元素上設置一個背景顏色，除了圖像和視頻。

一旦設置了Body (All pages)的背景，您添加的任何元素都會默認為這個背景樣式。而且不僅可以對背景顏色進行修改，還可以對任何樣式屬性進行修改。

您可以用2種方式為Body (All pages)標簽設置樣式。

1. 選擇Body元素，從樣式面板的選擇器字段下拉選擇Body (All pages)標簽

2. 選擇任何元素，從繼承菜單中選擇Body (All pages)標簽--所有元素都繼承Body (All pages)標簽的樣式。

大多數元素默認透明背景。有些元素有默認的背景顏色，則可以透過元素上設置的背景顏色來覆蓋。

背景圖片

在風格面板的背景部分，添加背景圖片的菜單。

1. 滾動到樣式面板中的背景

2. 點擊選擇圖像，從資產面板中選擇一個圖像。

3. 勾選@2x（將圖像寬度設置為其原始尺寸的一半，以便在HiDPI設備上清晰地呈現出來）。

背景圖像大小

在樣式面板的背景部分添加背景圖像的菜單中，尺寸選項被突出顯示。 要指定背景圖像的大小，可以使用自定義尺寸或預設之一。

1. 自定義：決定了背景圖像的寬度和高度，可以使用百分比值。設置背景圖像的比例大於元素，使用高於100%的任何百分比。

2. Cover：將圖像縮放以填充並覆蓋整個元素的背景，覆蓋任何設定的寬度和高度。圖像可能會被修剪，這取決於元素的長寬比、屏幕尺寸和圖像的情況。

3. Contain：縮放背景圖像，使其包含在元素內。這個值也覆蓋了任何設定的寬度和高度。

重複

默認情況下，背景圖像在垂直和水平方向上都會重復。 您可以選擇水平、垂直或完全不重複背景。

您可以在背景設置中選擇滾動時背景圖像的行為。

不固定：圖像隨著頁面的滾動而滾動 固定：圖像在滾動時保持原位

漸層

漸層可以單獨使用，也可以在現有的背景顏色或圖像上使用。

1. 線性漸變

2. 徑向漸變

顏色疊加

您可以在任何背景上添加一個顏色覆蓋。使用顏色選擇器來選擇顏色，然後設定不透明度值。

添加和堆疊多個背景圖像、梯度和顏色覆蓋，以創建分層效果。要重新排列背景圖層，把鼠標懸停在圖層上，點擊左邊的虛線垂直線。

點擊眼睛圖標來切換圖層的可見性。要刪除任何層，點擊垃圾桶的 "刪除 "圖標。

背景視頻

背景視頻是無聲的、循環的視頻，作為內容的特定部分的背景。這些視頻有助於吸引網站訪問者和抓住注意力。

把背景視頻放到畫布上時，您會被提示上傳視頻。

視頻設置

背景視頻有三個默認的設置。循環視頻，自動播放視頻，以及播放/暫停按鈕。

1. 循環視頻 啟用時，背景視頻會連續循環播放。

2. 自動播放視頻 啟用時，背景視頻在頁面加載時就開始播放。

3. 播放/暫停按鈕 在背景視頻上提供一個內置的播放/暫停按鈕，您的網站訪問者可以用它來開始和停止視頻。

支持的視頻格式

背景視頻接受小於30MB的視頻文件，格式如下：webm, mp4, mov, ogg。

背景視頻文件名不應包括空格或特殊字符（破折號除外），視頻應針對網絡進行優化以獲得最佳性能。

替換背景視頻

1. 雙擊視頻或進入設置面板來打開背景視頻設置。

2. 通過選擇元素並按回車鍵來訪問背景視頻設置。壹旦設置窗口打開，點擊替換視頻來上傳和轉碼壹個新視頻。

在為 Web 構建時，了解 HTML 和 CSS 之間的關係會很有幫助。在本課中：

1. 了解瀏覽器如何呈現代碼

2. 檢查網站代碼

3. 了解 HTML 和 CSS

4. 在 Webflow 為您生成乾淨代碼的同時進行設計

了解瀏覽器如何呈現代碼

當您訪問一個網站時，您在屏幕上看到的內容是您的瀏覽器決定如何呈現該網站的底層代碼的結果。它使用代碼中的信息來顯示每個人在加載頁面時看到的內容。

檢查網站代碼

您可以在大多數瀏覽器上檢查和臨時編輯源代碼。 打開 Chrome DevTools : 並操作

1. 右鍵單擊並從彈出菜單中選擇檢查，或按Control + Shift + I （在 Windows 上）或Command + Option + I （在 Mac 上）

2. 在檢查器中編輯代碼以臨時更改瀏覽器中的內容

測試代碼和渲染內容之間的關係會很有趣。由於您只是在瀏覽器中進行本地更改，因此您的更新將在您刷新頁面後立即消失。

在 HTML 中，我們過去使用內聯樣式逐行設置所有內容的樣式。更改字體系列、顏色或大小等簡單的事情需要在 HTML 中逐項更新。逐個更新站點元素是非常多餘的，並且很難更新單個站點範圍的樣式，例如基本段落元素的字體系列或字體大小。

CSS：樣式

CSS（級聯樣式表）採用所有以前內聯編寫的樣式信息——顏色、邊框、大小、定位、排版等等——並將其移動到帶有類的單獨樣式文檔中。 我們的 HTML 中的任何元素都可以被賦予一個類名，以採用與該類關聯的樣式。

在 CSS 文件中對該類進行更改，它會影響使用該類的任何元素。

問題：代碼越來越難

回到網絡的早期，我們只需要知道最基本的標籤和屬性。時間流逝，互聯網真正開始成長。設備發生了變化，我們與網絡交互的方式變得更加個性化。

隨著這一切的發生，有必要重新裝備。隨著我們作為設計師和開發人員可以構建的東西的可能性增加，我們必須在幕後管理的所有事情的複雜性也增加了。

今天，要成為一名成功的 Web 開發人員，您必須掌握 HTML、CSS、JS、數據庫、Sass、JavaScript 庫、CSS 庫、特定於瀏覽器的怪癖、瀏覽器版本、響應式設計、GitHub、jQuery、Java、圖像壓縮、加載速度、優化、搜索引擎優化——這個列表不斷增長，很快 Web 開發就感覺不可能進入。

在 Webflow 為您生成乾淨代碼的同時進行設計

HTML 和 CSS 是網頁設計的主要基礎，提供結構和样式。理解這些概念很有用，但我們已經到了不再需要手動編寫 HTML 和 CSS 代碼的地步——因為 Webflow。

我們為 Webflow 提供的是一種在構建網站時更快、更高效的方式。通過在畫布上直觀地創建和操作內容，我們可以直接與我們的 HTML、CSS 和屏幕上的所有其他內容進行交互。使用 Webflow，您可以直接連接到您正在操作的媒體。

我們不是畫草圖和輸出原型，而是經歷痛苦的設計迭代到開發移交過程，而是輸出可用於生產的代碼。因此，即使是最瘋狂的設計理念，您也可以將它們變為現實——而無需編寫代碼。

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

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 無基礎的設計師，可能會感覺很多不太清處的地方，但也沒關係基本上你只要掌握每個元素的目的，並且熟悉一下工具使用的方式，很快久可以的心應手。

按鈕充當您的號召性用語 (CTA) 並鏈接到頁面、表單、資產等。

按鈕可以是你的 CTA 並且可以連接到頁面、表單等地方。

你可以從添加面板(A) > 元素選項卡 > 基本部分添加按鈕。通過雙擊按鈕或選擇按鈕並按 Enter 來編輯按鈕。

若要添加背景顏色，單擊右側的樣式面板，滾動到背景，然後從顏色選擇器中選擇一種顏色。

按鈕可以鏈接到 URL、內部或外部頁面、頁面部分、文件下載，也可以觸發 Email 或電話。

按鈕狀態

如果單擊樣式面板中的選擇器字段，你可以看到所有按鈕狀態。默認情況下，按鈕上沒有 Hover 的樣式。也可以單擊下拉列表中的 Hover 狀態，以修改 Hover 時在按鈕上時的外觀。

動畫設定

在Hover時設定動畫會讓滑動之間的狀態更加順暢。

要添加過渡動畫的話，請確保你的樣式面板中處於無狀態，在“效果”部分中，單擊 “Easign”旁邊的加號。單擊類型旁邊的菜單並選擇背景顏色。默認持續時間設置為 200，這意味著它將轉換超過 200 毫秒。將鼠標 Hover 在按鈕上進行測試。

若要在按鈕內對齊圖標，請更改樣式面板中佈局下的設置（例如顯示：居中，對齊：居中）並調整間距下的邊距。

在 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 即可。

添加列表

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

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

將內容添加到列表

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

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

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

對某些人來說，影片只是連續播放的大量圖片的方式，但對年輕人來說是最好溝通的方式。Video 元素將託管在第三方網站（如 YouTube 或 Vimeo）上的視頻嵌入到你頁面的任何位置。

將影片元素從面板拖放到你的頁面上，或按Command + E（在 Mac 上）。

Webflow 支持的影片來源

• YouTube

• Vimeo

• DailyMotion

• KickStarter

• TED

• Wistia

• Ustream

• Livestream

• Twitch

• Tudou

• Hulu

• SproutVideo

設置影片尺寸

若你將影片元素放在Container 中，它將佔據該部分的整個寬度。

如果要為影片設置自定義寬度和高度，可以創建自定義div 塊。為此，請從 Elements 面板中拖入一個 div 塊。給它一個寬度值，另一個高度值。現在，如果您將視頻拖到此自定義 div 塊中，它將符合該大小。

YouTube 影片元素

YouTube 影片元素可讓您從 YouTube URL 嵌入視頻，並為你提供 YouTube 嵌入功能提供的所有顯示選項，包括顯示頻道中的相關視頻、設置特定開始時間、顯示或隱藏視頻控件以及更多的。了解有關 YouTube 視頻元素的更多信息。

What is CSS?

圖像元素是可以拖放到頁面上的圖像或圖像佔位符。你可以將其移動到獨立於其他元素的任何位置。圖像元素與設置在另一個元素（如部分或 div blcok）上的背景圖像不同。

若要將新圖像添加到你的頁面，只需從元素面板拖放一個圖像元素。要選擇或添加圖像，請單擊資產面板，然後單擊選擇圖像或上傳即可。

*圖像的最大文件大小為 4MB。

編輯圖像設置

選擇圖像元素後，您可以通過 4 種方式確認圖像設置：

1. 雙擊圖像元素

2. 按回車

3. 單擊圖像元素標籤旁邊的齒輪圖標

4. 按 D 或轉到“設置”面板

HiDPI：勾選後，此設置會將你的圖像設置為像素寬度的一半。因此，一個 600 像素寬的圖像將以 300 像素顯示。這種像素密度將確保圖像在大多數具有 HiDPI 顯示器的移動設備上看起來很棒。

以下是一些可用於為圖像賦予特徵的樣式屬性： Border Radius：您可以在一個或多個角上設置圓角。 Drop shadow：您可以使您的圖像看起來像是從頁面中彈出一樣。 Filters：您可以使用不同的過濾器，例如模糊、灰度或棕褐色。

添加 Alt 屬性

Alt 屬性用於在由於某種原因未在你的頁面上加載圖像時出現的替代文本。它可以是圖像的簡要描述。這不僅有助於可訪問性，而且有助於搜索引擎確定圖像的內容。

可以從“設置”面板為每個圖像指定 Alt 屬性。

1. 標題類型

上方圖表可以看到總共有看到H1-H6 六種不同的字體大小，你或許會問這麼多如何使用呢？

• H1 為大標題，應該是每個網頁的最大標文章標，而通常文章標題也會設定成你的 Meta title。

• H2 可以用來區隔一篇文章裡面的各個段落主題或子標題，可以同時擁有很多個。

• H3 通常是使用在各個段落中的子觀點，或是你想強調的子標題。

• H4、H5、H6 則視情況較少，除非你將文章細分到非常非常細。

2. 段落

簡單來說就是一個小段落的文字。

3. Rich Text

Rich Text, 就是可以讓你一口氣添加標題、段落、引用、圖片和影片。這樣就不需要把它們分別添加到元素盒子中，有點算是一整包直接包好給你。

若你需要引用一段話或是文章的时候，只要拖拉這個模塊即可。

點選左側menu來欄位或是按下快速鍵 Z 可以打開元素層級。

你可以切到 CSS 樣式面板或 HTML 屬性的版面，對元素進行進一步設計調整，也可以針對層級去做拖拉。

另外要注意的是，由於元素模型本身的限制，入當前的元素沒辦法放入目標位置，這時候頁面上就會出現提示變紅，也就是無法移動。（如下圖）

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，反之亦然。

在平時設計網頁的時候，有一些設計組件經常被重複使用。WebFlow把這些組件提前組合好，在使用的時候可以提高效率。

現在WebFlow上共有11個組件：

1. Tab選項卡

2. 導航欄

3. 下拉選單

4. 輪播圖

5. 燈箱

6. 地圖

7. 視頻背景

8. Facebook

9. Twitter

10. Google

11. 內嵌代碼

Tab選項卡

導航欄

全站頂部的導航欄

下拉選單

輪播圖

燈箱

地圖

用這個組件可以在頁面上嵌入Google地圖

視頻背景

Facebook

可以把Facebook的信息嵌入到頁面上，用戶可以直接看到Facebook頁面的更新。

Twitter

可以把Twitter帳號的信息嵌入到頁面上，用戶可以直接看到Twitter時間線的更新。

Google +

可以把Google+頁面的信息嵌入到頁面上，用戶可以直接看到Google+頁面的更新。

內嵌代碼

可以嵌入第三方代碼。 對應HTML 標簽

搜索對於大型的、內容驅動的網站尤其重要，例如：

1. 知識庫和幫助中心

2. 部落格或策展網站

3. 新聞出版物和媒體網站

自定義代碼中的內容不會被網站搜索收錄。如果需要自定義代碼內容被索引，請使用第三方的搜索工具。

本文會提到：

1. 添加和設計搜索組件的風格

2. 設計搜索結果頁面

3. 索引和控制"可搜索"的內容

4. 常見問題

添加和設計搜索組件的風格

在設計器左側的添加面板上找到搜索組件。

搜索組件有三個部分：

1. 搜索（包裝器）：包含搜索表單和提交按鈕的父元素

2. 搜索輸入：用戶在此輸入他們的搜索

3. 提交按鈕（可選）：提交搜索的按鈕--如果想用"Enter"來提交搜索，也可以隱藏它。

將搜索組件添加到網站上，就可以按照其他元素的方式來設計它，還可以自定義占位符文本，並將搜索欄設置為自動對焦，在頁面加載時自動將訪問者的光標放在搜索欄中。

設計搜索結果頁

把搜索組件添加到網站後，可以看到搜索結果頁出現在頁面標簽中，在實用程序頁面部分。

搜索結果頁的結構

當您第一次打開搜索結果頁面時，您會發現已經有了一些基本的結構。

在這個容器中，有可選的搜索組件（如果人們沒有看到他們要找的東西，可以嘗試新的搜索）以及結果列表，當涉及到樣式時，它的工作方式很像集合列表。

搜索結果的風格化

搜索結果的樣式設計與集合列表的樣式設計很相似，應用於結果項的樣式適用於該列表中的所有其他結果項。然而，搜索結果有一個基本的起始結構，並有一些其他的新控件。

注意 未托管的網站和有基本托管的網站會在發布的網站上顯示樣本搜索結果--您可以向客戶展示，讓他們感受到他們的搜索體驗。要看到真正的搜索結果則需要在網站上添加CMS或商務主機。

搜索結果結構

搜索結果有一個基本的元素結構，可以根據您的需要重新排列、重組或刪除。

1. 搜索標題（連結）: 該頁的頁面設置中的搜索部分所設置的搜索結果標題。這個標題在默認情況下作為該頁的鏈接。

2. 頁面URL（文本塊）：該頁的slug

3. 片斷（段落）:出現搜索詞的頁面的上下文。您可以在搜索結果設置中控制這個片段的長度，也可以選擇將這段話連接到一個自定義描述。

網站搜索設置

您可以在頁面設置中控制搜索標題顯示的內容，適用於網站的所有靜態頁面和集合頁面。對於集合頁，這個內容可以從任何領域中提取，類似於您配置SEO和Open Graph設置的方式。

同樣，您可以為每個頁面設置自定義的搜索描述和搜索圖片，或者從SEO描述和OG圖片中提取這些內容。

顯示內容"類型"

您可以使用搜索描述字段來為搜索結果添加額外的訊息。例如您想透過在搜索結果旁邊顯示部落格文章的類別來向訪客展示特定搜索結果的內容類型。

只需將您的類別名稱添加到搜索描述字段中，然後將您的搜索結果布局中的一個文本字段連接到搜索描述字段中，然後按您的意願進行樣式設計。

添加搜索結果縮圖

您也可以在頁面設置下設定一個搜索圖像，就像設置OG圖像一樣。

添加搜索圖像後，就可以透過圖像元素連接到該搜索圖像字段來將該圖像添加到您的搜索結果中。

對片段進行造型

除了像設計其他文本一樣設計片段文本外，您還可以控制片段長度（字符數），並打開或關閉高亮顯示（將在片段中對搜索詞的出現進行加粗）。

要在您的片段中設置高亮樣式，請在樣式指南頁面的副文本元素中為 "所有加粗"設置基本標籤，該樣式將適用於您在搜索結果頁面上的高亮術語。

設計"空"（或"無結果"）狀態

就像表單有錯誤和提交狀態，搜索結果頁面也有"無結果"狀態，您可以對其進行自定義，以減輕用戶搜索網站上沒有的東西時的影響(例如可以在這裡添加一個插圖，以及回到主頁的連結，幫助使用者重新定位）。

在搜索結果設置部分切換到"無結果"模式進行設計。

片斷風格設計

除了像對待其他文本那樣對片段的文本進行造型外，您還可以控制片段的長度（字符數），並打開或關閉高亮顯示（將在片段中對搜索詞的出現進行加粗）。

要在代碼段中設置高亮的樣式，請在樣式指南頁面的副文本元素中為 "所有凸起"設置基本標簽的樣式，這種樣式將適用於在搜索結果頁面上的高亮術語。

設置結果計數

選擇想在搜索結果中顯示多少個結果，最多60個。

目前還不支持跨多個搜索結果頁面的分頁。

預覽搜索結果

在設計搜索結果時，可以透過改變搜索結果設置部分的"預覽結果"字段中的搜索詞來改變顯示的結果。這將幫助您更清楚了解搜索結果在不同的查詢中會如何出現。

在添加CMS或商務主機並發布網站之前，將會看到樣本結果而不是網站的真實結果。要預覽和樣式真實的搜索結果，請發布妳的網站以創建一個搜索索引。

索引，以及控制什麽是 "可搜索的"

索引是搜索引擎中的內容和頁面，它控制使用者在網站上提交搜索時可以搜索到哪些內容。例如，如果您不希望特定的頁面通過搜索被發現，您可以從索引中刪除它。

目前，網站被限制在一個搜索引擎上。您可以在任意多的頁面上有一個搜索欄，但它們都會在相同的內容中搜索。

創建索引

如果添加了CMS或商務主機，搜索索引就會在第一次發布網站後創建。

您可以在索引創建之前（或在添加主機之前）透過使用我們的樣本結果來設計妳的搜索結果。

手動重新索引

手動重新索引允許您故意刷新妳的搜索引擎中的內容。這最適合在對內容推送了重要的更新，或者對搜索引擎的內容進行了廣泛的修改。

打開設計器左側的設置面板，在搜索部分點擊"立即索引"。在大型網站上，索引可能需要30分鐘。

要檢查索引的狀態，請回到設置面板的搜索部分。

在CMS主機上，每24小時可進行一次手動重新索引，在商業主機上每小時可進行一次。

自動重新索引

在持續的基礎上，我們將更新您的搜索索引，使您搜索引擎中的內容與您網站的最新變化保持同步。在CMS主機上，自動重新索引每72小時進行一次，而在商業主機上，自動重新索引每12小時進行一次。

完善搜索索引

默認情況下，當您添加搜索時，網站上的所有內容（不包括符號、集合列表、實用程序頁和受密碼保護的內容）都被編入索引，因此用戶在搜索時可以發現這些內容。在大多數情況下，若想細化索引，以便對用戶通過搜索可以發現的內容進行更多控制--並隱藏不希望被發現的內容。

從網站搜索中排除內容並不影響Google和其他搜索引擎對您網站的索引，您可以在網站設置中要求搜索引擎不索引特定的頁面。

排除靜態頁面

如果有特定的頁面不想讓用戶在搜索中找到它--例如保持隱私的內部風格指南或是主頁。在這些情況下您會想把這些靜態頁面完全從搜索中排除。

要排除靜態頁面，請前往"頁面設置"，向下滾動到新的"搜索設置"部分，該部分位於"開放圖譜"設置下方。在這個部分的頂部，您會看到一個複選框"從網站搜索結果中排除這個頁面"。若被選中，重新索引將從您的索引中刪除這個頁面。

默認情況下，受密碼保護的頁面和實用程序頁面被排除在搜索之外。

排除收藏頁

同樣，如果特定的收藏品不是網站內容的核心，您可能想把它們從搜索中排除，比如標籤、類別，或者其他沒有有趣的收藏品頁面的信息。

要從搜索中排除收藏頁，請前往該收藏頁的頁面設置，向下滾動到搜索設置部分。如果勾選了 "從網站搜索結果中排除這些頁面"，這些頁面將在網站下次被索引時從搜索引擎中刪除。

排除合集頁面將從搜索結果中排除所有的模板頁面，但是這個合集的內容在其他頁面的合集列表中的任何出現仍然可以被發現，因為它們將從該頁面的內容中被索引。在這種情況下，您可能想為這些集合列表應用元素級別的排除法。

目前，不可能從搜索中排除單個集合項目。

排除元素

將重複出現的元素（如導航欄、頁腳、側邊欄和表格）從搜索中排除，以避免搜索結果變得混亂。

默認情況下，符號和集合列表被排除在搜索結果之外，但您可以在符號的父元素上覆蓋這一設置。

要排除特定的元素，打開該元素的設置，在搜索設置部分，點擊"搜索結果中排除內容"。

在父元素設置的任何排除規則也將適用於子元素

常見問題

如果我導出我的代碼，搜索會發生什麽？

由於搜索引擎需要由Webflow托管，因此搜索在導出的網站上將無法使用。

怎樣才能看到用戶在搜索什麽？

要想知道您的網站訪客在搜索什麽，請將您的Webflow網站搜索與Google Analytics整合。

我可以擁有多個不同內容的搜索引擎嗎？

目前網站只限於一個搜索引擎。您可以在任意多的頁面上設置搜索欄，但它們都會在相同的內容中搜索。

我可以在編輯器中搜索東西嗎？

搜索不在編輯器中工作。要測試搜索，請在隱身連結中打開您的網站，或在搜索結果設置結果預覽輸入中從設計器中測試結果。

使用 Webflow，您可以完全自定義和優化表單以滿足您的需求。在本課中：

如何添加表格

您可以從添加面板(A) >元素>表單部分添加表單。

將表單塊拖到畫布上。

形成解剖

Form 塊繼承其父元素的全寬並包含 3 個子元素 ：

• 表單

  — 包含所有表單輸入和元素

• 成功消息

  — 表單提交成功時返回的消息

• 錯誤消息

  — 表單提交出現問題時返回的消息

表單的結構

您可以在Form中添加或刪除任何表單元素，例如Input或Checkbox，以根據需要自定義表單。

表單元素

• 字段標籤不要刪除

  — 標籤用於描述表單字段的功能或用途。字段標籤對於表單的可訪問導航至關重要，因此這些標籤很重要。

• 輸入輸入

  —字段用於收集單行數據，例如對問題的單字回复（例如，姓名或電子郵件地址）。

• • 按鈕允許網站訪問者將文件附加到他們的表單提交中。

• 文本區域文本區域

  —字段允許訪問者輸入多行數據，例如冗長的消息。

• ——最適合用於訪問者可以選擇選項的輸入數據的更多信息。

• —字段最適用於訪問者只能選擇多個選項的更多信息。

• • 輸入的行為與下拉元素非常相似，您可以在其中添加不同選項的列表供訪問者選擇。您還可以允許多項選擇。的更多信息。

• — reCAPTCHA 是一項有助於防止垃圾郵件的 Google 服務。

• 提交按鈕完整

  — 沒有提交按鈕，任何表格都不！單擊此按鈕時，將提交表單中收集的所有數據。

需要知道：

如何配置表單元素

您可以雙擊表單元素（例如，輸入、提交按鈕）來打開其設置。您還可以通過選擇元素並按Enter/Return來訪問元素的設置。

輸入設置

每個表單元素根據其類型具有不同的輸入設置。

• 名稱名稱

  — 所有表單元素都有一個字段。這是您可以識別表單提交中的字段的方式。

• 必需必需

  — 每個表單元素都有選項。選中後，站點訪問者將無法在未填寫此字段的情況下提交表單。

• 佔位符輸入文本區域佔位符

  • 對於

  • 和字段，是顯示在空輸入字段中的文本，並在您開始在字段中鍵入時被覆蓋。它可以是示例文本或所需信息的描述。您可以從狀態菜單中設置佔位符文本的樣式。

重要提示：

• 文本類型文本類型輸入

  —允許您指定要收集的輸入類型。例如，文本類型的字段：電子郵件將只接受電子郵件地址。電話文本類型將只接受電話號碼。密碼文本類型將隱藏輸入字段中輸入的字符。

• — 如果您希望在頁面加載時接收（即站點訪問者的光標位於Form settings中的選項。當表單元素選中自動對焦時，如果表單落在用戶必須滾動才能看到的頁面部分內，頁面將加載並滾動到該元素。

注意：如果您的頁面自動加載並向下滾動，這可能是因為已在表單中的輸入字段上檢查了自動對焦，該表單位於用戶必須滾動才能看到的頁面部分內。如果您不希望發生這種情況，請確保取消選中表單中所有輸入字段的自動對焦選項。您還需要確保未選中任何隱藏表單字段的自動對焦選項，因為這可能會導致表單提交出現問題。

提交按鈕

雙擊提交按鈕將打開其設置模式窗口。在這裡，您可以更改 2 個設置：

• 按鈕文本按鈕文本

  — 出現在提交按鈕上的文本。默認是“提交”

• 等待文本等待文本

  — 在單擊提交按鈕後和提交表單之前將替換按鈕文本的文本。默認的是“請稍候……”

成功和錯誤狀態

要訪問成功和錯誤狀態，請選擇Form塊中的Form並打開Settings (D) > Form settings。在這裡，您可以看到狀態選項。單擊要編輯的狀態。

• 正常

  —站點訪問者與表單交互之前的默認狀態

• Success

  — 成功提交表單時返回的消息。您可以更改文本並根據需要進行自定義。

• 錯誤

  — 表單提交出現問題時返回的消息。同樣，您可以根據需要自定義錯誤狀態。

專業提示：我們建議包含處於錯誤狀態的電子郵件地址，以防用戶遇到表單問題。

表單提交

表單通知

您可以在站點設置>表單選項卡下訪問表單通知設置。

表單提交

表單數據和 GDPR

免責聲明

如果您為通過網站收集個人數據的客戶創建網站，請確保您的客戶了解他們作為個人數據控制者的責任。如果您使用第三方工具（例如 Zapier）將您的 Webflow 表單連接到外部數據源並使用這些集成發送個人數據，請務必查看您作為數據控制者的職責。

故障排除

如果您的表單無法成功提交，請嘗試以下操作：

• 如果您在您的網站上啟用了 reCAPTCHA，請確保您網站上的所有站點設置表單

  表單都包含 reCAPTCHA 元素。在選項卡中啟用 reCAPTCHA 時，不包含 reCAPTCHA 元素的表單將無法提交。

• 如果您在表單中隱藏了任何表單字段，請確保未在這些字段的設置中選中 自動對焦。

• • 才能繼續接收表單提交。

重要提示：

如果您的頁面自動加載並向下滾動，這可能是因為已在首屏下方的輸入字段中選中了自動對焦。如果您不希望發生這種情況，請確保取消選中表單中所有輸入字段的自動對焦選項。

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 中各部分的概述。

1. Static positioning

2. Relative positioning

3. Absolute positioning

4. Fixed positioning

5. Sticky positioning

位置屬性決定了元素在頁面上的位置。

設置位置後，您可以對頂部、底部、左側和右側的屬性進行調整。

Static positioning

每個元素在默認情況下都有一個靜態的位置，該元素會堅持在文檔流中，且按照它們的堆疊順序出現。 如果沒有添加樣式，它們不會重疊，不同的元素也不會有不同的默認值。 將元素設置為靜態的唯一原因是為了移除應用於它的位置。

Relative positioning

Relative元素是相對於其正常位置的。沒有添加其他定位屬性（上、左、下或右）的相對設置，將不會受到影響。 設置一個相對元素的頂部、右側、底部和左側屬性將使它遠離正常位置。其他內容不會調整以適應該元素留下的任何間隙。

一個具有相對位置的元素可以與其他元素重疊，而不影響它們的位置或中斷正常的文檔流程。

1. 它引入了對該元素的z-index的使用。這對靜態元素是不起作用的。即使您不設置z-index值，這個元素仍然會出現在它重疊的任何其他靜態元素的上面。Z-index對任何沒有設置為靜態的元素都是可用的。

2. 它限制了絕對定位的子元素。任何作為相對元素的子元素，或除靜態以外的任何位置的元素，都可以在該元素中進行絕對定位。

Absolute positioning

位置不受其他元素的影響，也不影響其他元素的位置。

默認情況下，該元素的位置是相對於主體元素的，但如果父元素被設置為靜態以外的任何元素，您可以將任何Absolute元素定位在該元素內。

使用定位屬性top、left、bottom和right來設置位置--這些值將是相對於設置為靜態以外的下一個父元素的。

Fixed positioning

固定元素的位置是相對於視口或瀏覽器窗口的。

當您向下滾動頁面時，固定元素會保持固定的位置。這種位置設置通常用於固定導航。

Sticky positioning

元素將根據瀏覽者的滾動位置，在相對和固定的位置之間交替進行。

Sticky positioning元素是相對於文檔流的，直到達到一個定義的滾動位置。在這一點上，它將切換到其父元素的固定元素的行為。一旦元素到達其父元素的底部，它將停止滾動。

您必須為頂部、底部、左側或右側指定至少一個位置值，Sticky positioning才能發揮作用。如果任何父元素有設置高度或溢出設置為隱藏、滾動或自動，則Sticky positioning可能無法正常工作。

使用內容管理系統 (CMS) 為您的網站內容提供動力讓生活變得更加輕鬆。

使用 Webflow CMS，您可以定義、設計和發布功能強大的動態網站 — 無需聘請開發人員，甚至無需查看代碼，並且可以邀請利益相關者直接在實時站點上更新內容。

如果不熟悉數據庫的概念，剛開始接觸動態內容可能會讓人感到害怕。但這個簡短的介紹將改變您對建立項目和管理內容的思考方式。

1. 靜態內容

2. 動態內容

靜態內容

靜態內容是逐一創建的正常元素，我們可以使用class來一次設計多個元素。

但是如果想創建內容不斷變化的網站，例如部落格、新聞網站，在這些以及其他許多情況下，使用靜態內容將需要手動複製和修改大量的內容。

動態內容

動態內容隨時添加、更新和導入內容。而在您的設計中與該數據相關的每一部分都會自動建立和更新。同樣重要的是，您可以對使用這些內容的設計元素的創建和調整進行極其細致的控制。

集合就像數據庫--它是內容可以被存儲並在整個項目中被動態引用的地方。不同的集合標誌著不同的內容類型，例如您可以有部落格文章、作者、客戶、項目等的集合。對於電子商務項目，您也會有產品和類別的集合。

本文會提到：

1. 創建集合

2. 編輯集合

3. 創建集合項目

4. 用集合進行設計

創建集合

您可以在CMS面板中創建CMS集合。電子商務集合是在電子商務面板中自動創建的。

收集設置

給新集合創建一個名字，為URL結構選擇一個slug，並通過選擇模板或添加自定義集合字段來創建數據結構。

採集模板

如果您不確定需要什麽內容結構的集合，您可以使用我們預設的集合模板之一來開始。

這些模板中都有自己的字段集，可以添加或刪除。

收藏品名稱

一旦指定了集合的名稱，該名稱的單數和複數版本將被生成並在整個項目的不同地方使用。收藏品名稱可以在任何時候被訂定。

集合URL

下一步是指定集合的URL（slug），它是集合頁面將被存儲的文件夾的名稱。在這裡指定的文本將決定集合頁面的URL結構--為每個集合項目生成的所有頁面。這個URL可以與集合名稱的單數或複數版本相同，也可以自定義。

例如，如果您正在創建 "Blog Posts"的集合，您可以將集合的URL命名為 "blog-post"，這樣它就變成了"yourwebsite.com/blog-post/blog-post-page"。或者可以將集合的URL命名為 "blog"，這樣它就會顯示為"website.com/blog/blog-post-article"。

重新命名收集的URL

您可以隨時重新命名收集的URL。但如果網站已經發布了，將需要設置301重定向，以確保現有的外部連結到這個集合的頁面將繼續工作。以下是如何輕鬆的設置重新定向，而不必對每個集合頁面進行重新定向。

舊路徑。/old-collection-url/(.*) 重定向到路徑。/new-collection-url/%1

注意

在命名頁面時，有一些保留的詞組不能使用。

目前不能重命名電子商務集合的集合slug。還有一點需要注意，如果您想在一個現有的網站上啟用電子商務，目前不能有CMS集合和靜態頁面或文件夾，並為電子商務保留slug，如產品和類別。

集合字段

雖然預設是快速開始使用CMS集合的一個好方法，但您也可以從頭開始建立集合，根據正在處理的內容類型添加或刪除字段。

集合字段不是網站元素。它們只是為每個集合項目存儲數據的字段，您可以在您的設計中引用這些數據。

在構建您的作品集時，有許多不同的字段類型可供選擇。每個字段都轉化為不同類型的內容，您可以將其納入項目設計中。

編輯集合

即使在項目發布後，您還是可以回去編輯集合的結構和設置。

要訪問集合設置，請在CMS中打開集合並點擊設置。您也可以在收藏品面板上點擊集合旁邊的設置圖標。 您可以添加新字段，編輯現有字段，完全刪除字段。 在每個字段中可以修改標籤和幫助文本，訂定幫助文本可以使合作者清楚地了解每個字段的用途。

刪除集合字段

您只能刪除那些在設計中沒有使用的字段，集合頁面設置，集合列表設置，如過濾器或條件可見性。

重新排列CMS集合的顯示順序

拖動和重新排序您的收藏，以保持您最重要的收藏的組織和訪問。在設計器中進行的重新排序將反映在編輯器中，不需要重新發布您的網站。

創建和管理收藏品項目

您可以在設計器或編輯器中開始創建集合項目，如部落格文章、產品、列表等。您也可以透過過濾和排序來管理收藏項目。

用集合進行設計

創建了集合之後，您可以從它們中提取內容，並將它們連接到元素和畫布上的設計。

CMS（內容管理系統）是存儲和維護所有動態內容的地方。網站在不同的頁面上引用這些動態內容。因此，當您或您的客戶在CMS中創建或更改任何內容時，它都會立即更新所有被引用的頁面。

Webflow的"可視化"內容管理系統--CMS，使您能夠創建結構化的內容，圍繞這些內容進行設計，並對其進行更新--而無需觸及任何一行代碼。

結構化的動態內容

一切從創建一個集合開始，它可以是部落格文章、團隊成員、招聘信息的集合。

定義字段

當創建集合時，您可以決定該集合中的每個項目將有什麽樣的結構。例如，如果您要創建一個"團隊成員"的集合，您可能需要每個團隊成員的名字、照片和電子郵件。您可以為每種類型的內容創建一個字段--在這個例子中，它是一個純文本字段、一個圖片字段和一個電子郵件字段。

創建內容

當字段到位，並且創建了集合，您就可以開始創建集合項目。例如，在創建了"團隊成員"集合後，您可以開始創建每個團隊成員。對於每個團隊成員，需要填寫您先前定義的字段。

您也可以透過導入CSV文件一次導入大量的項目，甚至可以用假的內容創建項目。

引用動態內容

現在您已經構建了集合，並在其中有了一些項目，您可以開始向您的項目添加動態內容。有兩種方法可以做到這一點：建立一個集合列表，或建立一個集合頁面。

集合列表

集合列表元素讓您從任何集合中添加內容。在任何頁面上投放集合列表元素，當它被連接到一個集合，該集合中的所有內容都可以為您所用。您可以根據字段中的值來顯示特定的項目，您也可以對內容進行排序。

集合頁面

在您的集合中的每個項目都會自動創建一個集合頁面。與集合列表一樣，您可以在每個集合項的頁面中引用任何字段。編輯一個合集的合集頁將更新所有的合集頁，但要更新它們各自的內容。

編輯動態內容

您可以在任何時候編輯或添加更多的內容到您的系列。編輯或添加內容可以在設計器中完成，也可以使用編輯器。編輯器可以讓合作者登錄並訪問這些集合。使用編輯器可以讓客戶直接在實時網站上快速添加和編輯內容。

任何時候在集合中創建新的項目（如部落格文章等），都會為它自動創建一個頁面。集合頁的工作方式類似於模板--集合頁的布局和設計適用於所有自動生成的項目頁。

本文會提到：

1. 創建一個集合頁面

2. 添加和連接內容

3. 預覽集合頁面

4. 連結到集合頁面

5. 集合頁面設置

創建一個集合頁面

創建一個集合時，一個集合頁面也將自動創建。您可以在頁面面板上選擇這個集合頁面，並在集合頁面部分選擇它。集合頁旁邊的紫色圖標表示它是CMS生成的頁面。

添加和連接內容

您可以像其他靜態頁面一樣設計和開發集合頁面--但當想把動態內容引入該設計時，集合頁面的力量就會出現。

添加靜態和動態元素 就像集合列表一樣，放入集合頁面的元素是靜態的，直到它們被連接到集合中的一個字段。像設計其他頁面一樣設計集合頁面，但該頁面作為所有集合項目的模板。

您可以透過以下步驟將您設計中的不同元素連接到集合字段。

1. 在集合頁上選擇一個元素

2. 點擊設置圖標（或進入元素設置面板--快捷鍵：D)

3. 勾選從集合中獲取的內容

4. 打開下拉選單，選擇要獲取內容的集合字段

當一個元素從一個字段獲取內容，它就不僅僅是針對這一個項目。這個字段在該集合的所有項目的頁面上都與該元素相連。

預覽和切換集合頁面

當在編輯一個集合頁面時，看起來好像您只是在編輯集合中的一個項目。事實上您在同時編輯所有其他的頁面，因為是在編輯一個模板。

您可以使用頂部欄的下拉選單將頁面中的內容切換到任何集合項目。您可以在Collection頁面下拉選單頂部的搜索欄或快速查找欄中輸入一個特定的頁面名稱，從而進入該頁面。

連結到集合頁面

您可以從其他集合頁面或集合列表中連結到一個集合頁面。請按照以下步驟從集合列表中連結。

1. 添加一個集合列表

2. 將它連接到一個集合集

3. 添加一個按鈕，或任何其他連結元素到集合列表中

4. 選擇連結元素，點擊齒輪圖標（或進入元素設置面板）

5. 選擇紫色的集合頁面連結選項

6. 選擇當前項目 這將把集合列表中的每個按鈕連結到為每個項目創建的各自的集合頁面

專業提示 可以在連結設置的URL字段類型中把任何連結元素連接到一個連結字段。

集合頁設置

在集合頁設置中，您可以為集合頁模板設置SEO元標題和描述，Open Graph標題和描述，RSS，以及自定義代碼。然而與靜態頁面設置不同的是，集合頁面設置可以有動態值，意思是它們會導致每個集合項目頁面的獨特信息。

您可以透過設置圖標訪問集合頁設置，當把鼠標懸停在頁面面板中的集合頁模板上時，會出現這個圖標。

動態SEO設置

您可以使用集合字段為頁面標題和描述定義一個模板。而且可以在預覽框中看到它們在搜索引擎結果頁（SERP）中的樣子。

動態開放圖譜設置

在這裡可以設置在Facebook、Twitter、LinkedIn、Pinterest和Google+上分享集合頁面的連結時將會呈現的訊息。使用Collection字段將為每個頁面創建一個模板，從而為每個頁面帶來獨特的Open Graph訊息。

RSS源設置

您可以在集合頁面設置中為合集啟用一個RSS 2.0 feed。這將發布一個RSS閱讀器用戶可以訂閱的feed，並在發布新的集合項目時獲得更新。

在這裡可以定義feed的設置，您可以使用集合字段為RSS頻道的標題、描述和其他設置創建動態模板，也可以在頁面設置中直接看到feed的預覽，甚至可以複製RSS URL，用於其他應用程序，在網站上添加連結。

自定義代碼

您可以將自定義代碼和腳本添加到Collection頁面模板的或標籤中，適用於所有集合頁面。 而且如果這段代碼包含任何您希望每個收藏品頁面有獨特的信息，那麽您可以在代碼中用收藏品字段替換這個值。簡單地說，選擇該值，然後點擊位於自定義代碼文本字段右上方的紫色+添加字段。

了解如何過濾和限制集合列表中的項目

當您將集合列表連接到集合，它將顯示該集合的前100個項目。 您可以透過使用過濾器來選擇顯示哪些項目，也可以透過啟用分頁來顯示超過100個項目。 過濾項目可以在元素設置面板（D）的集合列表設置中進行。

本文會提到：

1. 添加過濾器

2. 刪除過濾器

3. 篩選器實例

4. 只顯示特色項目

5. 隱藏當前項目

6. 顯示相關內容

添加過濾器

過濾器讓您在集合列表中顯示符合創建的任何過濾器的特定集合項目。

您可以從每個集合字段類型的一些過濾規則中選擇。

如何創建過濾器：

1. 選擇要過濾的集合列表

2. 轉到設置面板（D）

3. 通過點擊加號（+）在集合列表設置下添加一個過濾器

4. 在第一個下拉選單中選擇您想過濾的字段

5. 在第二個字段中選擇一個規則

6. 如果需要，指定一個值

7. 點擊保存

您可以添加想要的過濾器，這些過濾器將由AND運算符組合。

注意 您不能為同一個集合字段應用多個字段。

刪除過濾器

您可以透過點擊過濾器旁邊的垃圾桶圖標來刪除應用的過濾器。

只顯示特色項目 [過濾例子]

在主頁上只顯示特色部落格文章：

1. 添加、創建和設計一個"部落格文章"集合列表

2. 在設置面板中添加一個過濾器

3. 在第一個下拉選單中選擇"特色"開關字段

4. 在第二個下拉選單中選擇"打開"

5. 點擊保存

隱藏當前項目 [過濾例子]

如果希望每個部落格頁面都有其他文章的列表，您可以用一個過濾器將當前文章從列表中排除。 如何排除當前的收藏項目：

1. 添加、創建和設計一個"部落格文章"集合列表

2. 在設置面板中添加一個過濾器

3. 從第一個下拉選單中選擇集合名稱

4. 在第二個下拉選單中選擇不是

5. 第三個字段將顯示"當前收藏項目"

6. 點擊保存

顯示相關內容 [過濾例子］

想在"作者"頁面上顯示某個作者寫的所有文章，您可以使用一個過濾器，只顯示那些引用該作者的文章：

1. 添加、創建和設計一個"部落格文章"集合列表

2. 添加一個過濾器

3. 從第一個下拉選單中選擇作者的參考字段

4. 在第二個下拉選單中選擇"等於"

5. 在第三個下拉選單中選擇"當前作者"

6. 點擊保存

每個作者頁面將顯示引用該作者的文章列表。 如果您想只顯示特定數量的相關內容，則可以限制這個列表。

在設計器中您可以建立和設計您的網站，而編輯器只允許您和工作區成員編輯和管理內容。憑借其簡化的界面，編輯器為您提供了多種工具來管理一個已發布的網站。

透過訪客編輯權限，您可以邀請您的客戶在不破壞設計的情況下管理他們自己的網站。

本文會提到：

1. 訪問編輯器

2. 剖析編輯器的工具條

3. 頁面上的編輯

4. 管理頁面設置

5. 創建和管理動態內容

6. 查看和發布更改

7. 訪問表單提交

8. 元素的編輯設置

訪問編輯器

您可以在發布您的網站（無論是到webflow.io暫存子域還是到自定義域）後訪問Webflow編輯器。它允許您直接在頁面上編輯網站的內容，或透過編輯器面板管理頁面和內容。

透過Webflow的界面訪問編輯器

如果您在Webflow儀表板中或在設計器中設計網站，您可以通過以下方式訪問編輯器。

• 從儀表板的網站選單中

• 從網站設置中的頂部工具條

• 從設計器中的選單

從實時網站訪問編輯器

訪客編輯可以透過在瀏覽器地址欄中的網站URL末尾添加/?edit來訪問他們網站的編輯器（例如，yourwebsite.com/?edit）。登錄之後，訪客可以在編輯器模式下訪問他們的網站。

當他們以後回到網站時，他們可能會看到右下角的"編輯網站"按鈕，他們可以點擊它來跳到編輯模式。

讓您的訪客編輯知道，他們需要將他們的瀏覽器設置為接受來自所有第三方的cookies來使用編輯器--否則，他們在試圖登錄編輯器時可能會看到一個錯誤訊息。

編輯器要求：支持的瀏覽器

Webflow官方支持編輯器在最新版本的Chrome或Safari的常青版本上使用，另外還有2個版本用於不同的更新周期。Webflow還非官方地支持使用所有現代瀏覽器。

• CSS變換3D--由交互式使用 • CSS過渡--被交互使用 • CSS flexbox--被樣式布局面板所使用 • CSS過濾器--由交互使用 • CSS網格--將被樣式布局面板所使用

2022年6月15日，微軟正式終止了對Internet Explorer 11（IE11）的支持。雖然在Webflow中發布的網站使用了現代網絡瀏覽器支持的行業標準功能，但IE11不支持的一些功能在該瀏覽器上可能會出現錯誤的功能。

Webflow在任何情況下都不支持IE9或IE10。

注意 常青的瀏覽器是指能自動更新的瀏覽器，意思是大多數人擁有最新的、自動更新的版本。 如果您在實驗性瀏覽器上使用Webflow時遇到問題，請在Webflow論壇的實驗性瀏覽器類別下報告您的問題。

注意 您可以透過"我的瀏覽器是什麽"來確定您所使用的瀏覽器和操作系統版本。

在編輯器模式和實時網站模式之間切換

當您打開編輯器時，您可以在預覽模式或"實時網站"模式下探索網站。要切換到編輯模式，點擊頁面右下方的"編輯網站"按鈕。

當您想在預覽模式下看到網站時，去"回到實時網站"。

編輯器登錄錯誤的故障排除

如果您、您的工作區成員，或者您的訪客編輯在嘗試登錄編輯器時看到錯誤信息，請嘗試以下修復方法：

• 檢查您的瀏覽器是否接受cookies • 退出編輯器，清除您的瀏覽器的緩存，然後重新登錄 • 通過隱身模式的窗口登錄編輯器 • 嘗試透過一個不同的瀏覽器登錄 • 嘗試向您的內容編輯發送一個新的客人編輯邀請，並要求他們使用隱身窗口來創建他們的新帳戶 • 嘗試刪除或禁用自定義代碼 • 如果這些都不起作用，請聯繫技術支持

注意 如果您的網站上有自定義代碼，自定義代碼可能會影響編輯器。發生這種情況是因為編輯器在發布的網站上進行渲染，嘗試刪除或禁用您的自定義代碼。

多用戶協作

編輯器允許多個團隊成員和訪客編輯在同一時間編輯靜態和動態網站內容。如果兩個人同時編輯相同的內容，最後編輯的人"獲勝"，所以您仍然要與您的隊友和訪客編輯協調編輯時間。編輯器還提供一個網站活動日誌，這樣您就可以在發布網站之前看到誰編輯了您的網站，以及他們做了哪些編輯。

與編輯器類似，如果您想編輯您的網站的設計，可以在設計器中與團隊成員協作。

剖析編輯器的工具條

當您訪問編輯器時，您會看到實時網站，編輯器工具欄（灰色條）折疊在屏幕的底部。透過這個工具欄，您可以訪問各種編輯器面板來管理頁面設置、動態內容、表單和您的編輯器帳戶。您還可以看到並發布您通過編輯器所做的修改。

編輯器工具欄上有以下標籤和圖標：

• 選單--使用此選單可進入儀表板、網站設置或設計器。這個按鈕有Webflow的標誌。

• 頁面--打開頁面面板，其中列出了網站的靜態頁面和動態集合頁面。在這裡您可以瀏覽一個頁面，點擊查看實時頁面並管理任何頁面的設置。

• 收藏--打開收藏面板，它列出了您所有的集合。點擊一個集合，在工具欄上打開一個新的標籤，打開集合項目的面板，列出該集合中的所有項目。在這裡您可以編輯任何項目或創建新項目。這與設計器中的CMS面板非常相似。

• 表格--打開表格面板，您可以看到和下載網站上提交的表格。

• 帳戶設置（圖標）--打開帳戶設置面板，您可以編輯您的訪客編輯帳戶訊息和上傳個人資料圖片。

• 幫助和支持（圖標）--打開幫助和支持面板，在這裡您可以找到關於使用編輯器的一些常見問題的答案。

• 註銷（圖標）--在確認後將您從編輯器中註銷。

• 回到真實網站（按鈕）--從編輯器模式切換到真實網站模式，這樣您就可以像您的網站訪問者看到的那樣查看您的網站。

• 節省/保存--所有的改變都會自動保存在編輯器中。當您在編輯器中對您的網站進行修改時，您會看到 "保存..."或 "已保存"狀態。

• 更新日誌--這顯示了左下方發布按鈕旁邊的未發布變化的數量。點擊變更日誌可以看到有未發布變更的項目和頁面的列表，您可以看到是哪個訪客編輯或工作區成員做了這些變更。

• 發布（按鈕）--允許您在編輯器中發布您所做的所有修改。

頁面上的編輯

您可以用編輯器在頁面上進行編輯。當您把鼠標懸停在各種元素上時，在可編輯元素的右上方會出現一個"鉛筆"圖標或"圖片"圖標。要編輯任何這些元素，只需點擊該圖標。

注意 一些造型和自定義代碼不會以它們應該出現在發布的網站上的方式顯示。這是您在編輯器中的正常行為。

編輯和格式化文本

當懸停在可編輯的文本元素上時，您會看到文本元素周圍有一個淺灰色的輪廓，右上方有一個"鉛筆"圖標。您可以透過點擊進入該方框來編輯文本。

您也可以通過選擇單詞或短語，並從出現的浮動工具欄中選擇格式化。

對於副文本元素，您可以做更多的事情：添加媒體，創建列表，樣式，以及進一步格式化您的文本。

替換圖片

您也可以在網站上直接替換圖片。只要將您的光標懸停在想替換的圖片上，然後點擊"圖片"圖標。這將允許您從電腦中選擇並上傳一個新的圖片。

注意 您在設計器中為一個元素創建的任何視覺樣式，如純色覆蓋、邊框顏色或陰影，將自動適用於您通過編輯器替換的任何圖像或背景圖片。

編輯按鈕

要編輯一個按鈕元素，將鼠標懸停在按鈕上，點擊右上方出現的設置"齒輪"圖標。

您會看到兩個選項：

• 編輯連結設置

• 編輯文本

管理頁面設置

在編輯器的頁面面板中，您可以管理重要的頁面設置，如SEO元標題和描述，Open Graph標題和描述，以及Open Graph圖片。您還可以管理靜態頁面的頁面密碼保護設置和收集頁面的RSS訂閱設置。

要訪問一個頁面的設定：

1. 打開編輯器面板中的"頁面"選項卡

2. 將您的鼠標懸停在列表中的一個頁面上

3. 點擊出現的"設置"按鈕

您也可以使用搜索欄按名稱搜索頁面。

注意 點擊頁面而非設置按鈕，將關閉頁面面板並打開相應的頁面。

創建和管理動態內容

如果您的網站有收藏，您可以在編輯器中透過收藏標籤訪問它們。集合面板列出了您所有的集合。點擊一個集合，會打開一個新的標籤，標題是該集合的名稱。這個選項卡包含了該集合中的所有集合項目。

創建和編輯內容

您可以透過點擊現有項目來編輯它們，或者點擊"新建"按鈕來創建新項目，並填寫項目的各個字段。

完成輸入內容或更新字段時，您可以選擇：

• 創建一個新項目或保存一個現有項目。它將被分期發布，在您下次發布時在您的網站上上線 • 立即發布您的項目（無需等待下一次全站發布） • 如果您還沒有準備好在網站上發布該項目，可以保存為草稿 • 取消以放棄修改

您可以點擊項目名稱右側的"頁面"圖標來查看該項目收藏的頁面。這將折疊面板，讓您在瀏覽器中看到您目前正在查看的項目的頁面。

要回到收藏項目的列表，請點擊"返回"按鈕。

管理內容

在"集合面板"中，您可以看到您所有的收集項目和它們的狀態。您可以同時刪除、草稿或存檔幾個項目：

1. 點擊"選擇"按鈕

2. 選擇您要管理的項目

3. 從頂部的工具欄中選擇您想要的操作（刪除、草稿或存檔）

要關閉收藏標籤，請點擊標籤右上方的"關閉"（X）按鈕。

查看和發布更改

在做完所有這些修改後，您會想查看它們，並確保它們被保存並準備好在點擊發布前發布。

查看實時網站上的修改

在編輯器中工作時，編輯器面板覆蓋了您的網站的大部分內容。要折疊編輯器面板並查看您的網站，點擊頂部的查看網站按鈕。

在這個視窗中，您可以像平時一樣瀏覽您的網站，並對任何頁面進行修改或查看。

發布

在編輯器中所做的修改不會在實時網站上進行，直到您單獨發布所編輯的項目或按下"發布"按鈕來發布所有的階段性修改。

重要提示 當您從編輯器發布時，您的網站將同時發布到webflow.io的暫存域和自定義域。為了避免這種情況，請從設計器或網站設置中發布。

訪問表單提交

如果您的網站上有任何表格，編輯器將包括一個表格標籤。在這裡，您可以查看人們提交的表格的一些基本訊息，但它最有用的地方是您可以下載完整的表格數據。在下載的CSV文件中（這種格式適用於所有主要的電子表格應用程序），您將能夠看到所有提交的訊息。

元素的編輯設置

默認情況下，您、工作區成員和訪客編輯可以使用編輯器來編輯實時網站上的所有內容，但您也可以讓訪客編輯無法編輯的元素：

1. 在設計器中打開網站

2. 選擇您想使之不可編輯的元素

3. 轉到元素設置（D）。

4. 取消勾選"合作者可以編輯此元素"

您也可以使用Command + Shift + L (在Mac上)或Control + Shift + L (在Windows上)在一個選定的元素上切換客人編輯。

重要提示 CMS元素總是可以在編輯器中進行編輯。

訪客編輯的權限

如果您的Workspace網站有一個CMS、Business或Ecommerce網站計劃，您可以邀請訪客編輯在您的網站上進行合作。除了在編輯器中打開網站、編輯內容和暫存更改之外，訪客編輯還可以添加CMS內容和編輯頁面設置。

訪客編輯也有與工作區成員不同的發布權限。

透過Webflow的After Effects和Lottie集成，您可以在設計中使用After Effects（AE）動畫，甚至可以用Lottie元素設置和Webflow的交互和動畫工具控制其播放。

1. 獲取JSON動畫文件

2. 將動畫添加到網站上

3. 用互動方式控制動畫

獲取Lottie JSON動畫文件

您可以將AE動畫以Lottie JSON文件的形式上傳至您的網站。 您可以透過以下方式獲得這些文件：

1. 用免費的AE bodymovin插件將AE動畫導出為JSON文件

2. 從Lottiefiles（或其他在線動畫庫）下載免費的JSON動畫文件

將動畫添加到網站

您可以使用JSON或Lottie動畫作為圖標、縮略圖、頁面背景、頁面加載器、自定義動畫光標等。

就像其他圖片文件一樣，您可以把您的JSON動畫文件上傳到資產面板上，然後直接把它們放到網頁上。

另外，您可以使用一個Lottie動畫元素（位於添加元素面板>媒體）作為動畫的占位符，直到上傳您的JSON文件。然後您可以選擇用資產面板中的Lottie序列來替換這個占位符。

指定動畫的播放方式

Lottie元素的設置允許您控制動畫在頁面上的播放方式。您可以覆蓋默認的持續時間，將動畫設置為無限期循環，或者將動畫設置為反向播放

下面是您可以為每個Lottie動畫元素設置的所有參數的列表：

• 替換Lottie序列（按鈕）--用資產面板中的另一個動畫或上傳一個新的動畫來替換該動畫

• 預覽動畫（按鈕）--在畫布上播放和預覽動畫

• 使用內置時長（複選框）--默認勾選，使用動畫的默認時長，取消勾選以覆蓋持續時間

• 使用內置時長（輸入字段 - 當複選框未被選中時出現）--默認情況下，它顯示動畫的內置時長。使用一個較小的值來使它變快，或使用一個較高的值來使它變慢

• 循環（複選框）--讓動畫無限期地播放

• 反向播放（複選框）--讓動畫反向播放

• 渲染模式（預設切換）--切換動畫的渲染模式。默認是SVG。SVG很適合向量動畫。Canvas適合於圖像序列中最常見的光柵化層。如果動畫在選定的模式下不能正確播放，請切換渲染器。

用互動控制動畫

借助Webflow交互和Lottie集成的力量，您可以對這些動畫的播放方式和時間有更多的控制。透過這些選項，您可以在用戶互動時播放和暫停動畫。

您可以設置觸發器來啟動動畫，選擇動畫的哪一部分來播放，以及在哪裡停止動畫播放。 有兩種方法可以用互動來控制Lottie動畫：

1. Lottie播放動畫

2. Lottie動作

這兩個選項只對Lottie動畫元素有效，所以需要在畫布上選擇Lottie動畫。

範例1. 點擊時播放動畫 默認情況下，所有的動畫都在頁面加載時播放。所以，當您滾動到這些動畫時，您不會看到它們的播放，除非將它們設定為循環播放。透過互動，您可以控制播放。

假設您想在用戶點擊的時候播放一個動畫：

1. 選擇畫布上的Lottie動畫元素

2. 在互動面板中添加一個鼠標點擊（tap）元素觸發器

3. 在操作選單中的On 1st click下選擇Lottie playback。您可以選擇延遲播放、反向播放或設置為循環播放

如果需要改變動畫的持續時間/速度，您可以通過元素設置面板中的Lottie元素設定來實現。Lottie動畫設置中的所有其他設置將被互動面板中的Lottie播放設置所覆蓋。

範例2. 當滾動進入和離開視圖時播放動畫 您也可以將我們在上例中使用的快速動作用於鼠標懸停和滾動進入視窗的互動。

在這個例子中，讓我們把動畫設置為進入視窗時播放：

1. 選擇Lottie動畫元素

2. 在互動面板中添加一個滾動進入視圖元素的觸發器

3. 在滾動進入視圖時創建一個動畫

4. 在操作選單中選擇Lottie播放，在第一次點擊時播放

5. 如果動畫播放過快，可以選擇設置一個偏移量

6. 在動作選單中選擇"On 2nd click"下的Lottie回放

7. 反向播放

8. 可以選擇設定一個偏移量

範例3. 在頁面加載時只播放動畫的一部分 對於某些互動類型，您可能需要創建一個自定義的動畫，並使用Lottie動作，它讓動畫的播放方式有更多的控制。 這個選項允許您為動畫設定自定義的開始和結束幀。而且像其他定時動作一樣，您可以應用緩和效果並設置一個自定義的持續時間。此外，您還可以添加其他動作來創建更複雜的動畫。

如果想調整開始或結束的幀：

1. 選擇Lottie動畫元素

2. 在互動面板中添加壹個頁面加載元素的觸發器

3. 在頁面開始加載時創建一個動畫

4. 添加一個Lottie動作

5. 可以選擇，如果想讓動畫從不同的幀開始，在Lottie設置下調整開始幀並將其設置為初始狀態

6. 添加另一個Lottie動作

7. 如果想讓動畫在不同的幀上停止，將結束幀設置為100%或更小

8. 調整持續時間以控制動畫播放的速度

提示 如果您想使用動畫的默認持續時間，在畫布上雙擊動畫，取消勾選持續時間複選框，使用出現的內置持續時間。

多年來，網絡和我們的數字設備已經變得反應靈敏，功能強大。作為設計者和開發者，我們可以使用一些工具，讓我們建立複雜的互動和令人印象深刻的動畫。

傳統上，這些工具通常是用高度特定的JavaScript構建的，需要工具和插件來完成沖突和基於代碼的令人討厭的學習曲線。

在Webflow，我們可以使用所有我們需要的工具，通過可視化的方式建立互動，從而以極其精細的控制來操作這些內容。

什麽構成了互動？

互動圍繞著兩個強大的東西進行設計：觸發器和動畫。

觸發器--無論是點擊、滾動、懸停、移動鼠標、加載頁面--都會執行動畫（觸發器上發生的事情）。

而透過這種精確的控制，我們可以應用定時動畫、滾動動畫和基於位置的鼠標動畫。

在本課裡您會學到：

1. 了解2D基礎知識

2. 沿著X軸和Y軸的移動

3. 介紹Z軸

4. 視差概述

5. 三維空間中的二維物體

了解二維基礎知識

在我們進入三維空間之前，我們首先要了解前兩個維度是如何工作的。我們具體談論的是沿X軸的水平運動和沿Y軸的垂直運動。

網絡上的大部分內容都是由二維元素組成的。這包括您在網站上看到的任何東西，如圖片、標題、段落和按鈕。這些元素的寬度和高度以及它們與其他元素之間的距離都是在兩個維度上發生的，沒有實際的深度。

沿著X軸和Y軸的移動

當元素在水平方向移動時，我們要調整它的X位置。而當我們垂直移動時，我們要調整它的Y位置。當我們在對角線上移動時，我們要使用X和Y的組合。

介紹Z軸

現在讓我們來談談我們的第三個維度，Z軸。當我們在處理三維空間時，我們不僅僅是在左右和上下移動，我們還要處理深度問題。

因為網路是由很多這樣的2D元素組成的，並非所有的3D都必須是一個擠出物，或者一個3D物體。我們可以把單個的2D元素，沿著Z軸，在3D空間內與它們進行互動。我們可以移動它們，旋轉它們--我們可以對它們做任何我們想做的事情。

視差概述

三維運動最好的東西之一是視差的概念。在下面的例子中，我們把卡片放在桌子上來說明視差。這些卡片都沒有移動；我們只是將攝像機向左右移動。我們只是在沿X軸移動攝像機或我們的視野。

注意

離我們最近的名片似乎移動得更快。而遠處的卡片似乎移動得更慢。這種位移，或者說離我們較近和較遠的那些物體的速度之間的差異，就是視差。

三維空間中的二維物體

這些卡片都沒有任何深度，所以從側面看它們會消失--3D運動並不總是需要3D物體。

視差運動的概念可以給我們的項目帶來一點深度，以略微不同的速度移動不同的元素，可以真正為3D外觀設定一個舞臺。

設置一個基於鼠標位置的旋轉：

1. 設定視角

2. 設定觸發器

3. 製作旋轉的動畫

4. 配置靜止狀態

5. 創建一個鏡面高光

設定視角

1. 確保您要做動畫的子元素的父元素被選中

2. 在過渡和變換下的樣式面板中，將子元素的視角改為1000像素

設定觸發器

1. 選擇您想作為觸發器的元素（例如卡片）

2. 在互動面板中，點擊選定元素旁邊的加號，從下拉選單中選擇鼠標在元素上移動

製作旋轉的動畫

1. 點擊互動面板 > 鼠標移動時 > 動作 > 播放鼠標動畫

2. 點擊鼠標動畫旁邊的加號

3. 命名它（例如在鼠標移動時旋轉）

4. 點擊鼠標X動作時間線下的加號，在0%處選擇旋轉

5. 在旋轉下，將Y軸改為-5度

6. 點擊100%處的卡片元素，在旋轉下將其Y軸改為5度

7. 在鼠標Y動作下，添加一個旋轉的動作

8. 在"旋轉"的0%處，將X軸改為5度

9. 在100%的旋轉下，將X軸改為-5度

10. 關閉動畫以調整平滑度

配置靜止狀態

1. 在交互面板中的鼠標移動時，將鼠標的X位置設置為50%。

2. 將鼠標的Y位置設置為50%。

創建一個鏡面高光

1. 在畫布上拖動一個新的Div塊到您正在使用的元素裡面（Card）

2. 創建一個class，並命名它（例如卡片-高光）

3. 設定其寬度和高度（例如400像素）

4. 將位置設置為絕對值

5. 從左上角開始定位

6. 設定背景顏色

7. 在邊框下，將半徑改為50%

8. 在"效果"下，將"不透明度"改為10%

9. 添加一個模糊過濾器，將半徑改為50像素

10. 在互動面板上，點擊鼠標移動時的旋轉

11. 在鼠標X時間線的0%處添加一個移動動畫，將其X軸改為100%

12. 在鼠標X時間線的100%處，添加一個移動動畫，並將其X軸改為-50%

13. 在鼠標Y軸的時間線0%處，添加一個移動動畫，並將其Y軸改為50%

14. 在鼠標Y軸的時間線上，在100%處添加一個移動動畫，並將其Y軸改為-50%

本文會提到：

1. 創建動畫使一個元素出現

2. 創建動畫使一個元素消失

3. 添加第二個觸發元素來顯示，並將兩者設置為在點擊時顯示/隱藏

創建動畫使一個元素出現

1. 選擇想作為觸發器的元素

2. 在互動面板中，從選定元素選單中選擇鼠標點擊（輕擊）

3. 從"On 1st Click"中選擇"Start an Animation"

4. 點擊"Timed Actions"旁邊的加號

5. 將動畫命名為"Show"

6. 選擇想出現的元素（與觸發器不同）

7. 點擊定時動作旁邊的加號，選擇隱藏/顯示

8. 點擊眼睛圖標，將顯示設置為無

9. 點擊"Set as initial state"旁邊的方框

10. 當仍在互動面板顯示時，點擊加號，在定時動作下添加第二個隱藏/顯示動作

11. 在"Hide/Show"使顯示設定為原來的值

創建動畫使一個元素消失

1. 選擇元素，即上一步中的觸發元素

2. 在第二次點擊時選擇開始動畫

3. 點擊定時動作旁邊的加號

4. 將動畫命名為"Hide"

5. 選擇上一步中您想消失的元素

6. 點擊定時動作旁邊的加號，選擇隱藏/顯示

7. 點擊眼睛圖標，將顯示設定為無

添加第二個觸發元素，並將兩者設置為在點擊時顯示/隱藏

1. 點擊並複製原來的觸發元素（"顯示歌詞"）

2. 重新命名它（例如"隱藏歌詞"）

3. 創建一個動作並將其初始狀態顯示為無

4. 添加第二個動作，並使顯示設置為原始值

5. 點擊"顯示歌詞"並確保其顯示設置為無，以便在點擊時隱藏它

6. 點擊"隱藏歌詞"並添加一個動畫，將顯示設置設為無

7. 回到"顯示歌詞"，添加一個動畫，使其在第二次點擊時再次可見

8. 點擊並拖動，使定時動作中的所有內容在同一時間發生（0秒）

1. 設計進度條

2. 設置滾動觸發器

3. 設置滾動動畫

4. 覆蓋變換原點

設計進度條

1. 創建一個Div塊

2. 命名

3. 設置背景顏色

4. 把它放在想要的位置

5. 設定100%的寬度

6. 設定高度（例如，10像素）

7. 把它的位置固定在窗口的左上方

8. 設定足夠高的Z-index值，讓它總是在上層

設置滾動觸發器

在交互面板的頁面觸發器選單中，選擇"While page is scrolling(當頁面滾動的時候)"

設置滾動動畫

1. 從交互面板的"On scroll"選單中，選擇"Play scroll animation(播放滾動動畫)"

2. 在滾動動畫旁邊點擊加號

3. 給它命名（例如"滾動進度"）

4. 確保元素被選中，然後點擊0%處的加號，從下拉選單中選擇"Scale縮放"

5. 在Scale下，將X軸的位置改為0

6. 點擊100%處的進度條，在Scale下將X軸位置改為1

覆蓋變換原點

1. 在風格面板上，向下滾動到Effects

2. 點擊2D和3D變換旁邊的更多選項圖標

3. 將原點設為左邊