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

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

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

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

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

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

按鈕狀態

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

動畫設定

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

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

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

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

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

添加列表

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

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

將內容添加到列表

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

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

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

1. 標題類型

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

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

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

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

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

2. 段落

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

3. Rich Text

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

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

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

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

創建和編輯 Grid

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

添加列和行

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

複製和刪除行和列

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

調整列和行之間的間距

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

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

在 Grid 中手動定位內容

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

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

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

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

‍

‍

‍

對某些人來說，影片只是連續播放的大量圖片的方式，但對年輕人來說是最好溝通的方式。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 視頻元素的更多信息。

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

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

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

編輯圖像設置

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

1. 雙擊圖像元素

2. 按回車

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

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

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

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

添加 Alt 屬性

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

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

在平時設計網頁的時候，有一些設計組件經常被重複使用。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 標簽

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

1. 如何添加表格

2. 形成解剖

3. 如何配置表單元素

4. 成功和錯誤狀態

5. 表單提交

6. 表單數據和 GDPR

7. 故障排除

如何添加表格

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

將表單塊拖到畫布上。

形成解剖

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

• 表單

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

• 成功消息

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

• 錯誤消息

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

表單的結構

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

表單元素

• 字段標籤不要刪除

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

• 輸入輸入

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

• 文件上傳文件上傳閱讀有關文件上傳按鈕以及如何自定義它的所有信息

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

• 文本區域文本區域

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

• 複選框複選框一個或多個了解有關複選框

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

• 單選按鈕單選按鈕之一的輸入數據。了解有關單選按鈕

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

• 選擇選擇了解有關選擇輸入

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

• reCAPTCHA了解如何在您的表單中添加 reCAPTCHA

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

• 提交按鈕完整

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

需要知道：

如何配置表單元素

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

輸入設置

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

• 名稱名稱

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

• 必需必需

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

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

  • 對於

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

重要提示：

• 文本類型文本類型輸入

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

• AutofocusInput焦點Input字段內），請選中Autofocus

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

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

提交按鈕

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

• 按鈕文本按鈕文本

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

• 等待文本等待文本

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

成功和錯誤狀態

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

• 正常

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

• Success

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

• 錯誤

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

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

表單提交

當有人通過您的某個站點提交表單時，提交的數據將被發送到您的表單通知設置中指定的電子郵件- 和/或如果您已將表單設置為收集，則重定向到第三方位置在別處形成數據。如果您完全擁有一個網站（也就是說，它不是客戶的網站），那麼您還可以訪問這些數據並在您的網站設置或編輯器中對其進行管理。

專業提示：您可以將MailChimp和/或Zapier與您的 Webflow 表單集成以自動化您的列表構建。

表單通知

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

在這裡，您可以配置接收數據的方式和位置。了解有關設置表單通知的更多信息。

表單提交

如果您擁有該站點，您還可以在“站點設置” > “表單”選項卡下訪問和管理提交的數據。您可以在此處查看提交內容或將提交內容下載為 CSV 文件。您還可以在編輯器中訪問表單提交。了解有關表單提交以及如何管理表單數據的所有信息。

表單數據和 GDPR

免責聲明

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

故障排除

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

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

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

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

• 免費帳戶上的非託管網站（即您沒有有效託管計劃的網站）上的表單提交最多可提交 10 個表單。如果您已達到此限制，則需要升級站點計劃

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

重要提示：

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

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

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. 知識庫和幫助中心

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整合。

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

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

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

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